vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Merge branch 'master' into v4

pull/5507/head
mertsincan 2024-02-05 10:58:09 +00:00
parent bf247d8735 c6151fe1ae
commit 2c7467b854
175 changed files with 359345 additions and 7079 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
assets/styles/layout/_sidebar.scss
View File

@ -40,6 +40,7 @@
color: var(--surface-900);
font-weight: 600;
transition: all .2s;
position: relative;
border-radius: var(--border-radius);
.menu-icon {
@ -52,6 +53,8 @@
align-items: center;
justify-content: center;
transition: all .2s;
position: relative;
background-color: transparent;
i {
color: var(--surface-700);
@ -66,6 +69,8 @@
&:hover {
.menu-icon {
background-color: var(--surface-card);
i {
color: var(--primary-color-default);
}
@ -102,9 +107,11 @@
transition: all .2s;
font-weight: 450;
display: flex;
align-items: center;
padding: .5rem .5rem .5rem 1rem;
color: var(--surface-700);
transition: all .2s;
position: relative;
&:focus-visible {
outline: 0 none;
@ -139,6 +146,17 @@
}
}
.p-tag {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
.p-tag-value {
line-height: 1;
}
}
.menu-child-category {
display: flex;
padding: .5rem .5rem .5rem 0;

3
components/doc/codeeditor/templates.js
View File

@ -297,12 +297,15 @@ app.component('Dropdown', Dropdown);
app.component('DynamicDialog', DynamicDialog);
app.component('Fieldset', Fieldset);
app.component('FileUpload', FileUpload);
app.component('FloatLabel', FloatLabel);
app.component('Galleria', Galleria);
app.component('IconField', IconField);
app.component('Image', Image);
app.component('InlineMessage', InlineMessage);
app.component('Inplace', Inplace);
app.component('InputGroup', InputGroup);
app.component('InputGroupAddon', InputGroupAddon);
app.component('InputIcon', InputIcon);
app.component('InputMask', InputMask);
app.component('InputNumber', InputNumber);
app.component('InputSwitch', InputSwitch);

22
components/lib/accordion/style/AccordionStyle.js
View File

@ -1,26 +1,5 @@
import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-accordion-header-action {
cursor: pointer;
display: flex;
align-items: center;
user-select: none;
position: relative;
text-decoration: none;
}
.p-accordion-header-action:focus {
z-index: 1;
}
.p-accordion-header-text {
line-height: 1;
}
}
`;
const classes = {
root: 'p-accordion p-component',
tab: {
@ -47,6 +26,5 @@ const classes = {
export default BaseStyle.extend({
name: 'accordion',
//css, // @todo
classes
});

101
components/lib/autocomplete/style/AutoCompleteStyle.js
View File

@ -1,106 +1,6 @@
import BaseStyle from 'primevue/base/style';
import { ObjectUtils } from 'primevue/utils';
const css = `
@layer primevue {
.p-autocomplete {
display: inline-flex;
}
.p-autocomplete-loader {
position: absolute;
top: 50%;
margin-top: -0.5rem;
}
.p-autocomplete-dd .p-autocomplete-input {
flex: 1 1 auto;
width: 1%;
}
.p-autocomplete-dd .p-autocomplete-input,
.p-autocomplete-dd .p-autocomplete-multiple-container {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.p-autocomplete-dd .p-autocomplete-dropdown {
border-top-left-radius: 0;
border-bottom-left-radius: 0px;
}
.p-autocomplete .p-autocomplete-panel {
min-width: 100%;
}
.p-autocomplete-panel {
position: absolute;
overflow: auto;
top: 0;
left: 0;
}
.p-autocomplete-items {
margin: 0;
padding: 0;
list-style-type: none;
}
.p-autocomplete-item {
cursor: pointer;
white-space: nowrap;
position: relative;
overflow: hidden;
}
.p-autocomplete-multiple-container {
margin: 0;
padding: 0;
list-style-type: none;
cursor: text;
overflow: hidden;
display: flex;
align-items: center;
flex-wrap: wrap;
}
.p-autocomplete-token {
cursor: default;
display: inline-flex;
align-items: center;
flex: 0 0 auto;
}
.p-autocomplete-token-icon {
cursor: pointer;
}
.p-autocomplete-input-token {
flex: 1 1 auto;
display: inline-flex;
}
.p-autocomplete-input-token input {
border: 0 none;
outline: 0 none;
background-color: transparent;
margin: 0;
padding: 0;
box-shadow: none;
border-radius: 0;
width: 100%;
}
.p-fluid .p-autocomplete {
display: flex;
}
.p-fluid .p-autocomplete-dd .p-autocomplete-input {
width: 1%;
}
}
`;
const inlineStyles = {
root: { position: 'relative' }
};
@ -159,7 +59,6 @@ const classes = {
export default BaseStyle.extend({
name: 'autocomplete',
css,
classes,
inlineStyles
});

35
components/lib/avatar/style/AvatarStyle.js
View File

@ -1,39 +1,5 @@
import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
font-size: 1rem;
}
.p-avatar.p-avatar-image {
background-color: transparent;
}
.p-avatar.p-avatar-circle {
border-radius: 50%;
}
.p-avatar-circle img {
border-radius: 50%;
}
.p-avatar .p-avatar-icon {
font-size: 1rem;
}
.p-avatar img {
width: 100%;
height: 100%;
}
}
`;
const classes = {
root: ({ props }) => [
'p-avatar p-component',
@ -50,6 +16,5 @@ const classes = {
export default BaseStyle.extend({
name: 'avatar',
css,
classes
});

14
components/lib/avatargroup/style/AvatarGroupStyle.js
View File

@ -1,24 +1,10 @@
import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-avatar-group .p-avatar + .p-avatar {
margin-left: -1rem;
}
.p-avatar-group {
display: flex;
align-items: center;
}
}
`;
const classes = {
root: 'p-avatar-group p-component'
};
export default BaseStyle.extend({
name: 'avatargroup',
css,
classes
});

38
components/lib/badge/style/BadgeStyle.js
View File

@ -1,43 +1,6 @@
import BaseStyle from 'primevue/base/style';
import { ObjectUtils } from 'primevue/utils';
const css = `
@layer primevue {
.p-badge {
display: inline-block;
border-radius: 10px;
text-align: center;
padding: 0 .5rem;
}
.p-overlay-badge {
position: relative;
}
.p-overlay-badge .p-badge {
position: absolute;
top: 0;
right: 0;
transform: translate(50%,-50%);
transform-origin: 100% 0;
margin: 0;
}
.p-badge-dot {
width: .5rem;
min-width: .5rem;
height: .5rem;
border-radius: 50%;
padding: 0;
}
.p-badge-no-gutter {
padding: 0;
border-radius: 50%;
}
}
`;
const classes = {
root: ({ props, instance }) => [
'p-badge p-component',
@ -58,6 +21,5 @@ const classes = {
export default BaseStyle.extend({
name: 'badge',
css,
classes
});

38
components/lib/badgedirective/style/BadgeDirectiveStyle.js
View File

@ -1,48 +1,10 @@
import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-badge {
display: inline-block;
border-radius: 10px;
text-align: center;
padding: 0 .5rem;
}
.p-overlay-badge {
position: relative;
}
.p-overlay-badge .p-badge {
position: absolute;
top: 0;
right: 0;
transform: translate(50%,-50%);
transform-origin: 100% 0;
margin: 0;
}
.p-badge-dot {
width: .5rem;
min-width: .5rem;
height: .5rem;
border-radius: 50%;
padding: 0;
}
.p-badge-no-gutter {
padding: 0;
border-radius: 50%;
}
}
`;
const classes = {
root: 'p-badge p-component'
};
export default BaseStyle.extend({
name: 'badge',
css,
classes
});

208
components/lib/basecomponent/style/BaseComponentStyle.js
View File

@ -1,216 +1,8 @@
import BaseStyle from 'primevue/base/style';
import { useStyle } from 'primevue/usestyle';
const buttonCSS = `
.p-button {
display: inline-flex;
cursor: pointer;
user-select: none;
align-items: center;
vertical-align: bottom;
text-align: center;
overflow: hidden;
position: relative;
}
.p-button-label {
flex: 1 1 auto;
}
.p-button-icon-right {
order: 1;
}
.p-button:disabled {
cursor: default;
}
.p-button-icon-only {
justify-content: center;
}
.p-button-icon-only .p-button-label {
visibility: hidden;
width: 0;
flex: 0 0 auto;
}
.p-button-vertical {
flex-direction: column;
}
.p-button-icon-bottom {
order: 2;
}
.p-buttonset .p-button {
margin: 0;
}
.p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover {
border-right: 0 none;
}
.p-buttonset .p-button:not(:first-of-type):not(:last-of-type) {
border-radius: 0;
}
.p-buttonset .p-button:first-of-type:not(:only-of-type) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.p-buttonset .p-button:last-of-type:not(:only-of-type) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.p-buttonset .p-button:focus {
position: relative;
z-index: 1;
}
`;
const inputTextCSS = `
.p-fluid .p-inputtext {
width: 100%;
}
.p-fluid .p-input-icon-left,
.p-fluid .p-input-icon-right {
width: 100%;
}
`;
const css = `
@layer primevue {
.p-component, .p-component * {
box-sizing: border-box;
}
.p-hidden-space {
visibility: hidden;
}
.p-reset {
margin: 0;
padding: 0;
border: 0;
outline: 0;
text-decoration: none;
font-size: 100%;
list-style: none;
}
.p-disabled, .p-disabled * {
cursor: default;
pointer-events: none;
user-select: none;
}
.p-component-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.p-unselectable-text {
user-select: none;
}
.p-sr-only {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
word-wrap: normal;
}
.p-link {
text-align: left;
background-color: transparent;
margin: 0;
padding: 0;
border: none;
cursor: pointer;
user-select: none;
}
.p-link:disabled {
cursor: default;
}
/* Non vue overlay animations */
.p-connected-overlay {
opacity: 0;
transform: scaleY(0.8);
transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
}
.p-connected-overlay-visible {
opacity: 1;
transform: scaleY(1);
}
.p-connected-overlay-hidden {
opacity: 0;
transform: scaleY(1);
transition: opacity .1s linear;
}
/* Vue based overlay animations */
.p-connected-overlay-enter-from {
opacity: 0;
transform: scaleY(0.8);
}
.p-connected-overlay-leave-to {
opacity: 0;
}
.p-connected-overlay-enter-active {
transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
}
.p-connected-overlay-leave-active {
transition: opacity .1s linear;
}
/* Toggleable Content */
.p-toggleable-content-enter-from,
.p-toggleable-content-leave-to {
max-height: 0;
}
.p-toggleable-content-enter-to,
.p-toggleable-content-leave-from {
max-height: 1000px;
}
.p-toggleable-content-leave-active {
overflow: hidden;
transition: max-height 0.45s cubic-bezier(0, 1, 0, 1);
}
.p-toggleable-content-enter-active {
overflow: hidden;
transition: max-height 1s ease-in-out;
}
${buttonCSS}
${inputTextCSS}
}
`;
export default BaseStyle.extend({
name: 'common',
css,
loadGlobalStyle: (globalCSS, options = {}) => useStyle(globalCSS, { name: 'global', ...options }),
loadGlobalTheme: (globalTheme, options = {}) => useStyle(globalTheme, { name: 'global-style', ...options })
});

17
components/lib/blockui/style/BlockUIStyle.js
View File

@ -1,27 +1,10 @@
import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-blockui-container {
position: relative;
}
.p-blockui.p-component-overlay {
position: absolute;
}
.p-blockui-document.p-component-overlay {
position: fixed;
}
}
`;
const classes = {
root: 'p-blockui-container'
};
export default BaseStyle.extend({
name: 'blockui',
css,
classes
});

37
components/lib/breadcrumb/style/BreadcrumbStyle.js
View File

@ -1,41 +1,5 @@
import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-breadcrumb {
overflow-x: auto;
}
.p-breadcrumb .p-breadcrumb-list {
margin: 0;
padding: 0;
list-style-type: none;
display: flex;
align-items: center;
flex-wrap: nowrap;
}
.p-breadcrumb .p-menuitem-text {
line-height: 1;
}
.p-breadcrumb .p-menuitem-link {
text-decoration: none;
display: flex;
align-items: center;
}
.p-breadcrumb .p-menuitem-separator {
display: flex;
align-items: center;
}
.p-breadcrumb::-webkit-scrollbar {
display: none;
}
}
`;
const classes = {
root: 'p-breadcrumb p-component',
menu: 'p-breadcrumb-list',
@ -49,6 +13,5 @@ const classes = {
export default BaseStyle.extend({
name: 'breadcrumb',
css,
classes
});

155
components/lib/calendar/style/CalendarStyle.js
View File

@ -1,159 +1,5 @@
import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-calendar {
display: inline-flex;
max-width: 100%;
}
.p-calendar .p-inputtext {
flex: 1 1 auto;
width: 1%;
}
.p-calendar-w-btn .p-inputtext {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.p-calendar-w-btn .p-datepicker-trigger {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.p-calendar .p-datepicker-trigger-icon {
cursor: pointer;
}
/* Fluid */
.p-fluid .p-calendar {
display: flex;
}
.p-fluid .p-calendar .p-inputtext {
width: 1%;
}
/* Datepicker */
.p-calendar .p-datepicker {
min-width: 100%;
}
.p-datepicker {
width: auto;
}
.p-datepicker-inline {
display: inline-block;
overflow-x: auto;
}
/* Header */
.p-datepicker-header {
display: flex;
align-items: center;
justify-content: space-between;
}
.p-datepicker-header .p-datepicker-title {
margin: 0 auto;
}
.p-datepicker-prev,
.p-datepicker-next {
cursor: pointer;
display: inline-flex;
justify-content: center;
align-items: center;
overflow: hidden;
position: relative;
}
/* Multiple Month DatePicker */
.p-datepicker-multiple-month .p-datepicker-group-container {
display: flex;
}
.p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group {
flex: 1 1 auto;
}
/* DatePicker Table */
.p-datepicker table {
width: 100%;
border-collapse: collapse;
}
.p-datepicker td > span {
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
margin: 0 auto;
overflow: hidden;
position: relative;
}
/* Month Picker */
.p-monthpicker-month {
width: 33.3%;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
overflow: hidden;
position: relative;
}
/* Year Picker */
.p-yearpicker-year {
width: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
overflow: hidden;
position: relative;
}
/* Button Bar */
.p-datepicker-buttonbar {
display: flex;
justify-content: space-between;
align-items: center;
}
/* Time Picker */
.p-timepicker {
display: flex;
justify-content: center;
align-items: center;
}
.p-timepicker button {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
overflow: hidden;
position: relative;
}
.p-timepicker > div {
display: flex;
align-items: center;
flex-direction: column;
}
/* Touch UI */
.p-datepicker-touch-ui,
.p-calendar .p-datepicker-touch-ui {
min-width: 80vw;
}
}
`;
const inlineStyles = {
root: ({ props }) => ({ position: props.appendTo === 'self' ? 'relative' : undefined })
};
@ -231,7 +77,6 @@ const classes = {
export default BaseStyle.extend({
name: 'calendar',
css,
classes,
inlineStyles
});

75
components/lib/carousel/style/CarouselStyle.js
View File

@ -1,79 +1,5 @@
import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-carousel {
display: flex;
flex-direction: column;
}
.p-carousel-content {
display: flex;
flex-direction: column;
overflow: auto;
}
.p-carousel-prev,
.p-carousel-next {
align-self: center;
flex-grow: 0;
flex-shrink: 0;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
position: relative;
}
.p-carousel-container {
display: flex;
flex-direction: row;
}
.p-carousel-items-content {
overflow: hidden;
width: 100%;
}
.p-carousel-items-container {
display: flex;
flex-direction: row;
}
.p-carousel-indicators {
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
}
.p-carousel-indicator > button {
display: flex;
align-items: center;
justify-content: center;
}
/* Vertical */
.p-carousel-vertical .p-carousel-container {
flex-direction: column;
}
.p-carousel-vertical .p-carousel-items-container {
flex-direction: column;
height: 100%;
}
/* Keyboard Support */
.p-items-hidden .p-carousel-item {
visibility: hidden;
}
.p-items-hidden .p-carousel-item.p-carousel-item-active {
visibility: visible;
}
}
`;
const classes = {
root: ({ instance }) => [
'p-carousel p-component',
@ -130,6 +56,5 @@ const classes = {
export default BaseStyle.extend({
name: 'carousel',
css,
classes
});

95
components/lib/cascadeselect/style/CascadeSelectStyle.js
View File

@ -1,99 +1,5 @@
import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-cascadeselect {
display: inline-flex;
cursor: pointer;
user-select: none;
}
.p-cascadeselect-trigger {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.p-cascadeselect-label {
display: block;
white-space: nowrap;
overflow: hidden;
flex: 1 1 auto;
width: 1%;
text-overflow: ellipsis;
cursor: pointer;
}
.p-cascadeselect-label-empty {
overflow: hidden;
visibility: hidden;
}
.p-cascadeselect .p-cascadeselect-panel {
min-width: 100%;
}
.p-cascadeselect-item {
cursor: pointer;
font-weight: normal;
white-space: nowrap;
}
.p-cascadeselect-item-content {
display: flex;
align-items: center;
overflow: hidden;
position: relative;
}
.p-cascadeselect-group-icon {
margin-left: auto;
}
.p-cascadeselect-items {
margin: 0;
padding: 0;
list-style-type: none;
min-width: 100%;
}
.p-fluid .p-cascadeselect {
display: flex;
}
.p-fluid .p-cascadeselect .p-cascadeselect-label {
width: 1%;
}
.p-cascadeselect-sublist {
position: absolute;
min-width: 100%;
z-index: 1;
display: none;
}
.p-cascadeselect-item-active {
overflow: visible;
}
.p-cascadeselect-item-active > .p-cascadeselect-sublist {
display: block;
left: 100%;
top: 0;
}
.p-cascadeselect-enter-from,
.p-cascadeselect-leave-active {
opacity: 0;
}
.p-cascadeselect-enter-active {
transition: opacity 150ms;
}
}
`;
const inlineStyles = {
root: ({ props }) => ({ position: props.appendTo === 'self' ? 'relative' : undefined })
};
@ -146,7 +52,6 @@ const classes = {
export default BaseStyle.extend({
name: 'cascadeselect',
css,
classes,
inlineStyles
});

22
components/lib/checkbox/style/CheckboxStyle.js
View File

@ -1,26 +1,5 @@
import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-checkbox {
position: relative;
display: inline-flex;
user-select: none;
vertical-align: bottom;
}
.p-checkbox-input {
cursor: pointer;
}
.p-checkbox-box {
display: flex;
justify-content: center;
align-items: center;
}
}
`;
const classes = {
root: ({ instance, props }) => [
'p-checkbox p-component',
@ -38,6 +17,5 @@ const classes = {
export default BaseStyle.extend({
name: 'checkbox',
css,
classes
});

27
components/lib/chip/style/ChipStyle.js
View File

@ -1,31 +1,5 @@
import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-chip {
display: inline-flex;
align-items: center;
}
.p-chip-text {
line-height: 1.5;
}
.p-chip-icon.pi {
line-height: 1.5;
}
.p-chip-remove-icon {
line-height: 1.5;
cursor: pointer;
}
.p-chip img {
border-radius: 50%;
}
}
`;
const classes = {
root: ({ props }) => [
'p-chip p-component',
@ -40,6 +14,5 @@ const classes = {
export default BaseStyle.extend({
name: 'chip',
css,
classes
});

51
components/lib/chips/style/ChipsStyle.js
View File

@ -1,55 +1,5 @@
import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-chips {
display: inline-flex;
}
.p-chips-multiple-container {
margin: 0;
padding: 0;
list-style-type: none;
cursor: text;
overflow: hidden;
display: flex;
align-items: center;
flex-wrap: wrap;
}
.p-chips-token {
cursor: default;
display: inline-flex;
align-items: center;
flex: 0 0 auto;
}
.p-chips-input-token {
flex: 1 1 auto;
display: inline-flex;
}
.p-chips-token-icon {
cursor: pointer;
}
.p-chips-input-token input {
border: 0 none;
outline: 0 none;
background-color: transparent;
margin: 0;
padding: 0;
box-shadow: none;
border-radius: 0;
width: 100%;
}
.p-fluid .p-chips {
display: flex;
}
}
`;
const classes = {
root: ({ instance, props }) => [
'p-chips p-component p-inputwrapper',
@ -75,6 +25,5 @@ const classes = {
export default BaseStyle.extend({
name: 'chips',
css,
classes
});

13
components/lib/colorpicker/style/ColorPickerStyle.js
View File

@ -1,17 +1,5 @@
import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-colorpicker-panel .p-colorpicker-color {
background: linear-gradient(to top, #000 0%, rgb(0 0 0 / 0) 100%), linear-gradient(to right, #fff 0%, rgb(255 255 255 / 0) 100%)
}
.p-colorpicker-panel .p-colorpicker-hue {
background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red)
}
}
`;
const classes = {
root: ({ props }) => ['p-colorpicker p-component', { 'p-colorpicker-overlay': !props.inline }],
input: ({ props }) => ['p-colorpicker-preview p-inputtext', { 'p-disabled': props.disabled }],
@ -33,6 +21,5 @@ const classes = {
export default BaseStyle.extend({
name: 'colorpicker',
css,
classes
});

75
components/lib/confirmpopup/style/ConfirmPopupStyle.js
View File

@ -1,79 +1,5 @@
import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-confirm-popup {
position: absolute;
margin-top: 10px;
top: 0;
left: 0;
}
.p-confirm-popup-flipped {
margin-top: 0;
margin-bottom: 10px;
}
/* Animation */
.p-confirm-popup-enter-from {
opacity: 0;
transform: scaleY(0.8);
}
.p-confirm-popup-leave-to {
opacity: 0;
}
.p-confirm-popup-enter-active {
transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1);
}
.p-confirm-popup-leave-active {
transition: opacity 0.1s linear;
}
.p-confirm-popup:after,
.p-confirm-popup:before {
bottom: 100%;
left: calc(var(--overlayArrowLeft, 0) + 1.25rem);
content: ' ';
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.p-confirm-popup:after {
border-width: 8px;
margin-left: -8px;
}
.p-confirm-popup:before {
border-width: 10px;
margin-left: -10px;
}
.p-confirm-popup-flipped:after,
.p-confirm-popup-flipped:before {
bottom: auto;
top: 100%;
}
.p-confirm-popup.p-confirm-popup-flipped:after {
border-bottom-color: transparent;
}
.p-confirm-popup.p-confirm-popup-flipped:before {
border-bottom-color: transparent;
}
.p-confirm-popup .p-confirm-popup-content {
display: flex;
align-items: center;
}
}
`;
const classes = {
root: ({ instance }) => [
'p-confirm-popup p-component',
@ -91,6 +17,5 @@ const classes = {
export default BaseStyle.extend({
name: 'confirmpopup',
css,
classes
});

47
components/lib/contextmenu/style/ContextMenuStyle.js
View File

@ -1,51 +1,5 @@
import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-contextmenu ul {
margin: 0;
padding: 0;
list-style: none;
}
.p-contextmenu .p-submenu-list {
position: absolute;
min-width: 100%;
z-index: 1;
}
.p-contextmenu .p-menuitem-link {
cursor: pointer;
display: flex;
align-items: center;
text-decoration: none;
overflow: hidden;
position: relative;
}
.p-contextmenu .p-menuitem-text {
line-height: 1;
}
.p-contextmenu .p-menuitem {
position: relative;
}
.p-contextmenu .p-menuitem-link .p-submenu-icon {
margin-left: auto;
}
.p-contextmenu-enter-from,
.p-contextmenu-leave-active {
opacity: 0;
}
.p-contextmenu-enter-active {
transition: opacity 250ms;
}
}
`;
const classes = {
root: ({ instance }) => [
'p-contextmenu p-component',
@ -73,6 +27,5 @@ const classes = {
export default BaseStyle.extend({
name: 'contextmenu',
css,
classes
});

240
components/lib/datatable/style/DataTableStyle.js
View File

@ -1,244 +1,5 @@
import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-datatable {
position: relative;
}
.p-datatable-table {
border-spacing: 0px;
width: 100%;
}
.p-datatable .p-sortable-column {
cursor: pointer;
user-select: none;
}
.p-datatable .p-sortable-column .p-column-title,
.p-datatable .p-sortable-column .p-sortable-column-icon,
.p-datatable .p-sortable-column .p-sortable-column-badge {
vertical-align: middle;
}
.p-datatable .p-sortable-column .p-sortable-column-badge {
display: inline-flex;
align-items: center;
justify-content: center;
}
.p-datatable-hoverable-rows .p-selectable-row {
cursor: pointer;
}
/* Scrollable */
.p-datatable-scrollable > .p-datatable-wrapper {
position: relative;
}
.p-datatable-scrollable-table > .p-datatable-thead {
top: 0;
z-index: 1;
}
.p-datatable-scrollable-table > .p-datatable-frozen-tbody {
position: sticky;
z-index: 1;
}
.p-datatable-scrollable-table > .p-datatable-tfoot {
bottom: 0;
z-index: 1;
}
.p-datatable-scrollable .p-frozen-column {
position: sticky;
background: inherit;
}
.p-datatable-scrollable th.p-frozen-column {
z-index: 1;
}
.p-datatable-flex-scrollable {
display: flex;
flex-direction: column;
height: 100%;
}
.p-datatable-flex-scrollable > .p-datatable-wrapper {
display: flex;
flex-direction: column;
flex: 1;
height: 100%;
}
.p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header {
position: sticky;
z-index: 1;
}
/* Resizable */
.p-datatable-resizable-table > .p-datatable-thead > tr > th,
.p-datatable-resizable-table > .p-datatable-tfoot > tr > td,
.p-datatable-resizable-table > .p-datatable-tbody > tr > td {
overflow: hidden;
white-space: nowrap;
}
.p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) {
background-clip: padding-box;
position: relative;
}
.p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer {
display: none;
}
.p-datatable .p-column-resizer {
display: block;
position: absolute;
top: 0;
right: 0;
margin: 0;
width: 0.5rem;
height: 100%;
padding: 0px;
cursor: col-resize;
border: 1px solid transparent;
}
.p-datatable .p-column-header-content {
display: flex;
align-items: center;
}
.p-datatable .p-column-resizer-helper {
width: 1px;
position: absolute;
z-index: 10;
display: none;
}
.p-datatable .p-row-editor-init,
.p-datatable .p-row-editor-save,
.p-datatable .p-row-editor-cancel {
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
}
/* Expand */
.p-datatable .p-row-toggler {
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
}
/* Reorder */
.p-datatable-reorder-indicator-up,
.p-datatable-reorder-indicator-down {
position: absolute;
display: none;
}
.p-reorderable-column,
.p-datatable-reorderablerow-handle {
cursor: move;
}
/* Loader */
.p-datatable .p-datatable-loading-overlay {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
/* Filter */
.p-column-filter-row {
display: flex;
align-items: center;
width: 100%;
}
.p-column-filter-menu {
display: inline-flex;
margin-left: auto;
}
.p-column-filter-row .p-column-filter-element {
flex: 1 1 auto;
width: 1%;
}
.p-column-filter-menu-button,
.p-column-filter-clear-button {
display: inline-flex;
justify-content: center;
align-items: center;
cursor: pointer;
text-decoration: none;
overflow: hidden;
position: relative;
}
.p-column-filter-row-items {
margin: 0;
padding: 0;
list-style: none;
}
.p-column-filter-row-item {
cursor: pointer;
}
.p-column-filter-add-button,
.p-column-filter-remove-button {
justify-content: center;
}
.p-column-filter-add-button .p-button-label,
.p-column-filter-remove-button .p-button-label {
flex-grow: 0;
}
.p-column-filter-buttonbar {
display: flex;
align-items: center;
justify-content: space-between;
}
.p-column-filter-buttonbar .p-button:not(.p-button-icon-only) {
width: auto;
}
/* Responsive */
.p-datatable .p-datatable-tbody > tr > td > .p-column-title {
display: none;
}
/* VirtualScroller */
.p-datatable-virtualscroller-spacer {
display: flex;
}
.p-datatable .p-virtualscroller .p-virtualscroller-loading {
transform: none !important;
min-height: 0;
position: sticky;
top: 0;
left: 0;
}
}
`;
const classes = {
root: ({ instance, props }) => [
'p-datatable p-component',
@ -419,7 +180,6 @@ const inlineStyles = {
export default BaseStyle.extend({
name: 'datatable',
css,
classes,
inlineStyles
});

134
components/lib/dialog/style/DialogStyle.js
View File

@ -1,138 +1,5 @@
import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-dialog-mask.p-component-overlay {
pointer-events: auto;
}
.p-dialog {
max-height: 90%;
transform: scale(1);
}
.p-dialog-content {
overflow-y: auto;
}
.p-dialog-header {
display: flex;
align-items: center;
justify-content: space-between;
flex-shrink: 0;
}
.p-dialog-footer {
flex-shrink: 0;
}
.p-dialog .p-dialog-header-icons {
display: flex;
align-items: center;
}
.p-dialog .p-dialog-header-icon {
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
}
/* Fluid */
.p-fluid .p-dialog-footer .p-button {
width: auto;
}
/* Animation */
/* Center */
.p-dialog-enter-active {
transition: all 150ms cubic-bezier(0, 0, 0.2, 1);
}
.p-dialog-leave-active {
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.p-dialog-enter-from,
.p-dialog-leave-to {
opacity: 0;
transform: scale(0.7);
}
/* Top, Bottom, Left, Right, Top* and Bottom* */
.p-dialog-top .p-dialog,
.p-dialog-bottom .p-dialog,
.p-dialog-left .p-dialog,
.p-dialog-right .p-dialog,
.p-dialog-topleft .p-dialog,
.p-dialog-topright .p-dialog,
.p-dialog-bottomleft .p-dialog,
.p-dialog-bottomright .p-dialog {
margin: 0.75rem;
transform: translate3d(0px, 0px, 0px);
}
.p-dialog-top .p-dialog-enter-active,
.p-dialog-top .p-dialog-leave-active,
.p-dialog-bottom .p-dialog-enter-active,
.p-dialog-bottom .p-dialog-leave-active,
.p-dialog-left .p-dialog-enter-active,
.p-dialog-left .p-dialog-leave-active,
.p-dialog-right .p-dialog-enter-active,
.p-dialog-right .p-dialog-leave-active,
.p-dialog-topleft .p-dialog-enter-active,
.p-dialog-topleft .p-dialog-leave-active,
.p-dialog-topright .p-dialog-enter-active,
.p-dialog-topright .p-dialog-leave-active,
.p-dialog-bottomleft .p-dialog-enter-active,
.p-dialog-bottomleft .p-dialog-leave-active,
.p-dialog-bottomright .p-dialog-enter-active,
.p-dialog-bottomright .p-dialog-leave-active {
transition: all 0.3s ease-out;
}
.p-dialog-top .p-dialog-enter-from,
.p-dialog-top .p-dialog-leave-to {
transform: translate3d(0px, -100%, 0px);
}
.p-dialog-bottom .p-dialog-enter-from,
.p-dialog-bottom .p-dialog-leave-to {
transform: translate3d(0px, 100%, 0px);
}
.p-dialog-left .p-dialog-enter-from,
.p-dialog-left .p-dialog-leave-to,
.p-dialog-topleft .p-dialog-enter-from,
.p-dialog-topleft .p-dialog-leave-to,
.p-dialog-bottomleft .p-dialog-enter-from,
.p-dialog-bottomleft .p-dialog-leave-to {
transform: translate3d(-100%, 0px, 0px);
}
.p-dialog-right .p-dialog-enter-from,
.p-dialog-right .p-dialog-leave-to,
.p-dialog-topright .p-dialog-enter-from,
.p-dialog-topright .p-dialog-leave-to,
.p-dialog-bottomright .p-dialog-enter-from,
.p-dialog-bottomright .p-dialog-leave-to {
transform: translate3d(100%, 0px, 0px);
}
/* Maximize */
.p-dialog-maximized {
width: 100vw !important;
height: 100vh !important;
top: 0px !important;
left: 0px !important;
max-height: 100%;
height: 100%;
}
.p-dialog-maximized .p-dialog-content {
flex-grow: 1;
}
.p-confirm-dialog .p-dialog-content {
display: flex;
align-items: center;
}
}
`;
/* Position */
const inlineStyles = {
mask: ({ position, modal }) => ({
@ -187,7 +54,6 @@ const classes = {
export default BaseStyle.extend({
name: 'dialog',
css,
classes,
inlineStyles
});

66
components/lib/divider/style/DividerStyle.js
View File

@ -1,70 +1,5 @@
import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-divider-horizontal {
display: flex;
width: 100%;
position: relative;
align-items: center;
}
.p-divider-horizontal:before {
position: absolute;
display: block;
top: 50%;
left: 0;
width: 100%;
content: '';
}
.p-divider-content {
z-index: 1;
}
.p-divider-vertical {
min-height: 100%;
margin: 0 1rem;
display: flex;
position: relative;
justify-content: center;
}
.p-divider-vertical:before {
position: absolute;
display: block;
top: 0;
left: 50%;
height: 100%;
content: '';
}
.p-divider-solid.p-divider-horizontal:before {
border-top-style: solid;
}
.p-divider-solid.p-divider-vertical:before {
border-left-style: solid;
}
.p-divider-dashed.p-divider-horizontal:before {
border-top-style: dashed;
}
.p-divider-dashed.p-divider-vertical:before {
border-left-style: dashed;
}
.p-divider-dotted.p-divider-horizontal:before {
border-top-style: dotted;
}
.p-divider-dotted.p-divider-vertical:before {
border-left-style: dotted;
}
}
`;
/* Position */
const inlineStyles = {
root: ({ props }) => ({
@ -90,7 +25,6 @@ const classes = {
export default BaseStyle.extend({
name: 'divider',
//css,
classes,
inlineStyles
});

111
components/lib/dock/style/DockStyle.js
View File

@ -1,115 +1,5 @@
import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-dock {
position: absolute;
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
pointer-events: none;
}
.p-dock-list-container {
display: flex;
pointer-events: auto;
}
.p-dock-list {
margin: 0;
padding: 0;
list-style: none;
display: flex;
align-items: center;
justify-content: center;
}
.p-dock-item {
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
will-change: transform;
}
.p-dock-link {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
cursor: default;
}
.p-dock-item-second-prev,
.p-dock-item-second-next {
transform: scale(1.2);
}
.p-dock-item-prev,
.p-dock-item-next {
transform: scale(1.4);
}
.p-dock-item-current {
transform: scale(1.6);
z-index: 1;
}
/* Position */
/* top */
.p-dock-top {
left: 0;
top: 0;
width: 100%;
}
.p-dock-top .p-dock-item {
transform-origin: center top;
}
/* bottom */
.p-dock-bottom {
left: 0;
bottom: 0;
width: 100%;
}
.p-dock-bottom .p-dock-item {
transform-origin: center bottom;
}
/* right */
.p-dock-right {
right: 0;
top: 0;
height: 100%;
}
.p-dock-right .p-dock-item {
transform-origin: center right;
}
.p-dock-right .p-dock-list {
flex-direction: column;
}
/* left */
.p-dock-left {
left: 0;
top: 0;
height: 100%;
}
.p-dock-left .p-dock-item {
transform-origin: center left;
}
.p-dock-left .p-dock-list {
flex-direction: column;
}
}
`;
const classes = {
root: ({ instance, props }) => [
'p-dock p-component',
@ -139,6 +29,5 @@ const classes = {
export default BaseStyle.extend({
name: 'dock',
css,
classes
});

6
components/lib/dropdown/Dropdown.vue
View File

@ -93,7 +93,7 @@
v-bind="{ ...filterInputProps, ...ptm('filterInput') }"
/>
<slot name="filtericon" :class="cx('filterIcon')">
<component :is="filterIcon ? 'span' : 'FilterIcon'" :class="[cx('filterIcon'), filterIcon]" v-bind="ptm('filterIcon')" />
<component :is="filterIcon ? 'span' : 'SearchIcon'" :class="[cx('filterIcon'), filterIcon]" v-bind="ptm('filterIcon')" />
</slot>
</div>
<span role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenFilterResult')" :data-p-hidden-accessible="true">
@ -180,7 +180,7 @@ import { FilterService } from 'primevue/api';
import BlankIcon from 'primevue/icons/blank';
import CheckIcon from 'primevue/icons/check';
import ChevronDownIcon from 'primevue/icons/chevrondown';
import FilterIcon from 'primevue/icons/filter';
import SearchIcon from 'primevue/icons/search';
import SpinnerIcon from 'primevue/icons/spinner';
import TimesIcon from 'primevue/icons/times';
import OverlayEventBus from 'primevue/overlayeventbus';
@ -977,7 +977,7 @@ export default {
TimesIcon,
ChevronDownIcon,
SpinnerIcon,
FilterIcon,
SearchIcon,
CheckIcon,
BlankIcon
}

100
components/lib/dropdown/style/DropdownStyle.js
View File

@ -1,104 +1,5 @@
import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-dropdown {
display: inline-flex;
cursor: pointer;
position: relative;
user-select: none;
}
.p-dropdown-clear-icon {
position: absolute;
top: 50%;
margin-top: -0.5rem;
}
.p-dropdown-trigger {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.p-dropdown-label {
display: block;
white-space: nowrap;
overflow: hidden;
flex: 1 1 auto;
width: 1%;
text-overflow: ellipsis;
cursor: pointer;
}
.p-dropdown-label-empty {
overflow: hidden;
opacity: 0;
}
input.p-dropdown-label {
cursor: default;
}
.p-dropdown .p-dropdown-panel {
min-width: 100%;
}
.p-dropdown-panel {
position: absolute;
top: 0;
left: 0;
}
.p-dropdown-items-wrapper {
overflow: auto;
}
.p-dropdown-item {
cursor: pointer;
font-weight: normal;
white-space: nowrap;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
}
.p-dropdown-item-group {
cursor: auto;
}
.p-dropdown-items {
margin: 0;
padding: 0;
list-style-type: none;
}
.p-dropdown-filter {
width: 100%;
}
.p-dropdown-filter-container {
position: relative;
}
.p-dropdown-filter-icon {
position: absolute;
top: 50%;
margin-top: -0.5rem;
}
.p-fluid .p-dropdown {
display: flex;
}
.p-fluid .p-dropdown .p-dropdown-label {
width: 1%;
}
}
`;
const classes = {
root: ({ instance, props, state }) => [
'p-dropdown p-component p-inputwrapper',
@ -159,6 +60,5 @@ const classes = {
export default BaseStyle.extend({
name: 'dropdown',
css,
classes
});

24
components/lib/fieldset/style/FieldsetStyle.js
View File

@ -1,28 +1,5 @@
import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-fieldset-legend > a,
.p-fieldset-legend > span {
display: flex;
align-items: center;
justify-content: center;
}
.p-fieldset-toggleable .p-fieldset-legend a {
cursor: pointer;
user-select: none;
overflow: hidden;
position: relative;
text-decoration: none;
}
.p-fieldset-legend-text {
line-height: 1;
}
}
`;
const classes = {
root: ({ props }) => [
'p-fieldset p-component',
@ -39,6 +16,5 @@ const classes = {
export default BaseStyle.extend({
name: 'fieldset',
//css,
classes
});

49
components/lib/fileupload/style/FileUploadStyle.js
View File

@ -1,53 +1,5 @@
import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-fileupload-content {
position: relative;
}
.p-fileupload-content .p-progressbar {
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.p-button.p-fileupload-choose {
position: relative;
overflow: hidden;
}
.p-fileupload-buttonbar {
display: flex;
flex-wrap: wrap;
}
.p-fileupload > input[type='file'],
.p-fileupload-basic input[type='file'] {
display: none;
}
.p-fluid .p-fileupload .p-button {
width: auto;
}
.p-fileupload-file {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.p-fileupload-file-thumbnail {
flex-shrink: 0;
}
.p-fileupload-file-actions {
margin-left: auto;
}
}
`;
const classes = {
root: ({ props }) => [`p-fileupload p-fileupload-${props.mode} p-component`],
buttonbar: 'p-fileupload-buttonbar',
@ -77,6 +29,5 @@ const classes = {
export default BaseStyle.extend({
name: 'fileupload',
css,
classes
});

51
components/lib/floatlabel/style/FloatLabelStyle.js
View File

@ -1,61 +1,10 @@
import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-float-label {
display: block;
position: relative;
}
.p-float-label label {
position: absolute;
pointer-events: none;
top: 50%;
margin-top: -.5rem;
transition-property: all;
transition-timing-function: ease;
line-height: 1;
}
.p-float-label:has(textarea) label {
top: 1rem;
}
.p-float-label:has(input:focus) label,
.p-float-label:has(input.p-filled) label,
.p-float-label:has(input:-webkit-autofill) label,
.p-float-label:has(textarea:focus) label,
.p-float-label:has(textarea.p-filled) label,
.p-float-label:has(.p-inputwrapper-focus) label,
.p-float-label:has(.p-inputwrapper-filled) label {
top: -.75rem;
font-size: 12px;
}
.p-float-label .p-placeholder,
.p-float-label input::placeholder,
.p-float-label .p-inputtext::placeholder {
opacity: 0;
transition-property: all;
transition-timing-function: ease;
}
.p-float-label .p-focus .p-placeholder,
.p-float-label input:focus::placeholder,
.p-float-label .p-inputtext:focus::placeholder {
opacity: 1;
transition-property: all;
transition-timing-function: ease;
}
}
`;
const classes = {
root: 'p-float-label'
};
export default BaseStyle.extend({
name: 'floatlabel',
css,
classes
});

289
components/lib/galleria/style/GalleriaStyle.js
View File

@ -1,293 +1,5 @@
import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-galleria-content {
display: flex;
flex-direction: column;
}
.p-galleria-item-wrapper {
display: flex;
flex-direction: column;
position: relative;
}
.p-galleria-item-container {
position: relative;
display: flex;
height: 100%;
}
.p-galleria-item-nav {
position: absolute;
top: 50%;
margin-top: -0.5rem;
display: inline-flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.p-galleria-item-prev {
left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.p-galleria-item-next {
right: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.p-galleria-item {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
}
.p-galleria-item-nav-onhover .p-galleria-item-nav {
pointer-events: none;
opacity: 0;
transition: opacity 0.2s ease-in-out;
}
.p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav {
pointer-events: all;
opacity: 1;
}
.p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled {
pointer-events: none;
}
.p-galleria-caption {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
/* Thumbnails */
.p-galleria-thumbnail-wrapper {
display: flex;
flex-direction: column;
overflow: auto;
flex-shrink: 0;
}
.p-galleria-thumbnail-prev,
.p-galleria-thumbnail-next {
align-self: center;
flex: 0 0 auto;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
position: relative;
}
.p-galleria-thumbnail-prev span,
.p-galleria-thumbnail-next span {
display: flex;
justify-content: center;
align-items: center;
}
.p-galleria-thumbnail-container {
display: flex;
flex-direction: row;
}
.p-galleria-thumbnail-items-container {
overflow: hidden;
width: 100%;
}
.p-galleria-thumbnail-items {
display: flex;
}
.p-galleria-thumbnail-item {
overflow: auto;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0.5;
}
.p-galleria-thumbnail-item:hover {
opacity: 1;
transition: opacity 0.3s;
}
.p-galleria-thumbnail-item-current {
opacity: 1;
}
/* Positions */
/* Thumbnails */
.p-galleria-thumbnails-left .p-galleria-content,
.p-galleria-thumbnails-right .p-galleria-content {
flex-direction: row;
}
.p-galleria-thumbnails-left .p-galleria-item-wrapper,
.p-galleria-thumbnails-right .p-galleria-item-wrapper {
flex-direction: row;
}
.p-galleria-thumbnails-left .p-galleria-item-wrapper,
.p-galleria-thumbnails-top .p-galleria-item-wrapper {
order: 2;
}
.p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper,
.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper {
order: 1;
}
.p-galleria-thumbnails-left .p-galleria-thumbnail-container,
.p-galleria-thumbnails-right .p-galleria-thumbnail-container {
flex-direction: column;
flex-grow: 1;
}
.p-galleria-thumbnails-left .p-galleria-thumbnail-items,
.p-galleria-thumbnails-right .p-galleria-thumbnail-items {
flex-direction: column;
height: 100%;
}
/* Indicators */
.p-galleria-indicators {
display: flex;
align-items: center;
justify-content: center;
}
.p-galleria-indicator > button {
display: inline-flex;
align-items: center;
}
.p-galleria-indicators-left .p-galleria-item-wrapper,
.p-galleria-indicators-right .p-galleria-item-wrapper {
flex-direction: row;
align-items: center;
}
.p-galleria-indicators-left .p-galleria-item-container,
.p-galleria-indicators-top .p-galleria-item-container {
order: 2;
}
.p-galleria-indicators-left .p-galleria-indicators,
.p-galleria-indicators-top .p-galleria-indicators {
order: 1;
}
.p-galleria-indicators-left .p-galleria-indicators,
.p-galleria-indicators-right .p-galleria-indicators {
flex-direction: column;
}
.p-galleria-indicator-onitem .p-galleria-indicators {
position: absolute;
display: flex;
z-index: 1;
}
.p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators {
top: 0;
left: 0;
width: 100%;
align-items: flex-start;
}
.p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators {
right: 0;
top: 0;
height: 100%;
align-items: flex-end;
}
.p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators {
bottom: 0;
left: 0;
width: 100%;
align-items: flex-end;
}
.p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators {
left: 0;
top: 0;
height: 100%;
align-items: flex-start;
}
/* FullScreen */
.p-galleria-mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.p-galleria-close {
position: absolute;
top: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.p-galleria-mask .p-galleria-item-nav {
position: fixed;
top: 50%;
margin-top: -0.5rem;
}
/* Animation */
.p-galleria-enter-active {
transition: all 150ms cubic-bezier(0, 0, 0.2, 1);
}
.p-galleria-leave-active {
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.p-galleria-enter-from,
.p-galleria-leave-to {
opacity: 0;
transform: scale(0.7);
}
.p-galleria-enter-active .p-galleria-item-nav {
opacity: 0;
}
/* Keyboard Support */
.p-items-hidden .p-galleria-thumbnail-item {
visibility: hidden;
}
.p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active {
visibility: visible;
}
}
`;
const classes = {
mask: ({ instance }) => [
'p-galleria-mask p-component-overlay p-component-overlay-enter',
@ -373,6 +85,5 @@ const classes = {
export default BaseStyle.extend({
name: 'galleria',
css,
classes
});

19
components/lib/iconfield/style/IconFieldStyle.js
View File

@ -1,23 +1,5 @@
import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-input-icon-left,
.p-input-icon-right {
position: relative;
}
.p-input-icon-left > i,
.p-input-icon-left > svg,
.p-input-icon-right > i,
.p-input-icon-right > svg {
position: absolute;
top: 50%;
margin-top: -.5rem;
}
}
`;
const classes = {
root: ({ props }) => [
{
@ -29,6 +11,5 @@ const classes = {
export default BaseStyle.extend({
name: 'iconfield',
css,
classes
});

77
components/lib/image/style/ImageStyle.js
View File

@ -1,81 +1,5 @@
import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-image-mask {
display: flex;
align-items: center;
justify-content: center;
}
.p-image-preview-container {
position: relative;
display: inline-block;
line-height: 0;
}
.p-image-preview-indicator {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s;
border: none;
padding: 0;
}
.p-image-preview-container:hover > .p-image-preview-indicator {
opacity: 1;
cursor: pointer;
}
.p-image-preview-container > img {
cursor: pointer;
}
.p-image-toolbar {
position: absolute;
top: 0;
right: 0;
display: flex;
z-index: 1;
}
.p-image-action.p-link {
display: flex;
justify-content: center;
align-items: center;
}
.p-image-action.p-disabled {
pointer-events: auto;
}
.p-image-preview {
transition: transform 0.15s;
max-width: 100vw;
max-height: 100vh;
}
.p-image-preview-enter-active {
transition: all 150ms cubic-bezier(0, 0, 0.2, 1);
}
.p-image-preview-leave-active {
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.p-image-preview-enter-from,
.p-image-preview-leave-to {
opacity: 0;
transform: scale(0.7);
}
}
`;
const classes = {
root: ({ props }) => [
'p-image p-component',
@ -108,6 +32,5 @@ const classes = {
export default BaseStyle.extend({
name: 'image',
css,
classes
});

25
components/lib/inlinemessage/style/InlineMessageStyle.js
View File

@ -1,29 +1,5 @@
import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-inline-message {
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: top;
}
.p-inline-message-icon {
flex-shrink: 0;
}
.p-inline-message-icon-only .p-inline-message-text {
visibility: hidden;
width: 0;
}
.p-fluid .p-inline-message {
display: flex;
}
}
`;
const classes = {
root: ({ props, instance }) => ['p-inline-message p-component p-inline-message-' + props.severity, { 'p-inline-message-icon-only': !instance.$slots.default }],
icon: ({ props }) => ['p-inline-message-icon', props.icon],
@ -32,6 +8,5 @@ const classes = {
export default BaseStyle.extend({
name: 'inlinemessage',
css,
classes
});

23
components/lib/inplace/style/InplaceStyle.js
View File

@ -1,27 +1,5 @@
import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-inplace .p-inplace-display {
display: inline;
cursor: pointer;
}
.p-inplace .p-inplace-content {
display: inline;
}
.p-fluid .p-inplace.p-inplace-closable .p-inplace-content {
display: flex;
}
.p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext {
flex: 1 1 auto;
width: 1%;
}
}
`;
const classes = {
root: ({ props }) => ['p-inplace p-component', { 'p-inplace-closable': props.closable }],
display: ({ props }) => ['p-inplace-display', { 'p-disabled': props.disabled }],
@ -30,6 +8,5 @@ const classes = {
export default BaseStyle.extend({
name: 'inplace',
css,
classes
});

31
components/lib/inputgroup/style/InputGroupStyle.js
View File

@ -1,41 +1,10 @@
import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-inputgroup {
display: flex;
align-items: stretch;
width: 100%;
}
.p-inputgroup-addon {
display: flex;
align-items: center;
justify-content: center;
}
.p-inputgroup .p-float-label {
display: flex;
align-items: stretch;
width: 100%;
}
.p-inputgroup .p-inputtext,
.p-fluid .p-inputgroup .p-inputtext,
.p-inputgroup .p-inputwrapper,
.p-fluid .p-inputgroup .p-input {
flex: 1 1 auto;
width: 1%;
}
}
`;
const classes = {
root: 'p-inputgroup'
};
export default BaseStyle.extend({
name: 'inputgroup',
css,
classes
});

106
components/lib/inputnumber/style/InputNumberStyle.js
View File

@ -1,110 +1,5 @@
import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-inputnumber {
display: inline-flex;
}
.p-inputnumber-button {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
}
.p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label,
.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label {
display: none;
}
.p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
padding: 0;
}
.p-inputnumber-buttons-stacked .p-inputnumber-input {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 0;
padding: 0;
}
.p-inputnumber-buttons-stacked .p-inputnumber-button-group {
display: flex;
flex-direction: column;
}
.p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button {
flex: 1 1 auto;
}
.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up {
order: 3;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.p-inputnumber-buttons-horizontal .p-inputnumber-input {
order: 2;
border-radius: 0;
}
.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down {
order: 1;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.p-inputnumber-buttons-vertical {
flex-direction: column;
}
.p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up {
order: 1;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
width: 100%;
}
.p-inputnumber-buttons-vertical .p-inputnumber-input {
order: 2;
border-radius: 0;
text-align: center;
}
.p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down {
order: 3;
border-top-left-radius: 0;
border-top-right-radius: 0;
width: 100%;
}
.p-inputnumber-input {
flex: 1 1 auto;
}
.p-fluid .p-inputnumber {
width: 100%;
}
.p-fluid .p-inputnumber .p-inputnumber-input {
width: 1%;
}
.p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input {
width: 100%;
}
}
`;
const classes = {
root: ({ instance, props }) => [
'p-inputnumber p-component p-inputwrapper',
@ -140,6 +35,5 @@ const classes = {
export default BaseStyle.extend({
name: 'inputnumber',
css,
classes
});

29
components/lib/inputswitch/style/InputSwitchStyle.js
View File

@ -1,33 +1,5 @@
import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-inputswitch {
display: inline-block;
}
.p-inputswitch-input {
cursor: pointer;
}
.p-inputswitch-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 1px solid transparent;
}
.p-inputswitch-slider:before {
position: absolute;
content: '';
top: 50%;
}
}
`;
const inlineStyles = {
root: { position: 'relative' }
};
@ -47,7 +19,6 @@ const classes = {
export default BaseStyle.extend({
name: 'inputswitch',
css,
classes,
inlineStyles
});

24
components/lib/knob/style/KnobStyle.js
View File

@ -1,28 +1,5 @@
import BaseStyle from 'primevue/base/style';
const css = `
@keyframes dash-frame {
100% {
stroke-dashoffset: 0;
}
}
@layer primevue {
.p-knob-range {
fill: none;
transition: stroke 0.1s ease-in;
}
.p-knob-value {
animation-name: dash-frame;
animation-fill-mode: forwards;
fill: none;
}
.p-knob-text {
font-size: 1.3rem;
text-align: center;
}
}
`;
const classes = {
root: ({ props }) => ['p-knob p-component', { 'p-disabled': props.disabled }],
range: 'p-knob-range',
@ -32,6 +9,5 @@ const classes = {
export default BaseStyle.extend({
name: 'knob',
css,
classes
});

39
components/lib/listbox/style/ListboxStyle.js
View File

@ -1,43 +1,5 @@
import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-listbox-list-wrapper {
overflow: auto;
}
.p-listbox-list {
list-style-type: none;
margin: 0;
padding: 0;
}
.p-listbox-item {
cursor: pointer;
position: relative;
overflow: hidden;
}
.p-listbox-item-group {
cursor: auto;
}
.p-listbox-filter-container {
position: relative;
}
.p-listbox-filter-icon {
position: absolute;
top: 50%;
margin-top: -0.5rem;
}
.p-listbox-filter {
width: 100%;
}
}
`;
const classes = {
root: ({ instance, props }) => [
'p-listbox p-component',
@ -66,6 +28,5 @@ const classes = {
export default BaseStyle.extend({
name: 'listbox',
css,
classes
});

166
components/lib/megamenu/style/MegaMenuStyle.js
View File

@ -1,170 +1,5 @@
import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-megamenu {
display: flex;
position: relative;
}
.p-megamenu-root-list {
margin: 0;
padding: 0;
list-style: none;
}
.p-megamenu .p-menuitem-link {
cursor: pointer;
display: flex;
align-items: center;
text-decoration: none;
overflow: hidden;
position: relative;
}
.p-megamenu .p-menuitem-text {
line-height: 1;
}
.p-megamenu-panel {
display: none;
width: auto;
z-index: 1;
left: 0;
min-width: 100%;
}
.p-megamenu-panel:not(.p-megamenu-mobile) {
position: absolute;
}
.p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel {
display: block;
}
.p-megamenu-submenu {
margin: 0;
padding: 0;
list-style: none;
}
.p-megamenu-button {
display: none;
cursor: pointer;
align-items: center;
justify-content: center;
text-decoration: none;
}
/* Horizontal */
.p-megamenu-horizontal {
align-items: center;
}
.p-megamenu-horizontal .p-megamenu-root-list {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.p-megamenu-horizontal .p-megamenu-end {
margin-left: auto;
align-self: center;
}
/* Vertical */
.p-megamenu-vertical {
flex-direction: column;
}
.p-megamenu-vertical:not(.p-megamenu-mobile) {
display: inline-flex;
}
.p-megamenu-vertical .p-megamenu-root-list {
flex-direction: column;
}
.p-megamenu-vertical:not(.p-megamenu-mobile) .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel {
left: 100%;
top: 0;
}
.p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
margin-left: auto;
}
.p-megamenu-grid {
display: flex;
}
.p-megamenu-col-2,
.p-megamenu-col-3,
.p-megamenu-col-4,
.p-megamenu-col-6,
.p-megamenu-col-12 {
flex: 0 0 auto;
padding: 0.5rem;
}
.p-megamenu-col-2 {
width: 16.6667%;
}
.p-megamenu-col-3 {
width: 25%;
}
.p-megamenu-col-4 {
width: 33.3333%;
}
.p-megamenu-col-6 {
width: 50%;
}
.p-megamenu-col-12 {
width: 100%;
}
.p-megamenu.p-megamenu-mobile .p-megamenu-button {
display: flex;
}
.p-megamenu.p-megamenu-mobile .p-megamenu-root-list {
position: absolute;
display: none;
width: 100%;
}
.p-megamenu.p-megamenu-mobile .p-submenu-list {
width: 100%;
position: static;
box-shadow: none;
border: 0 none;
}
.p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem {
width: 100%;
position: static;
}
.p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list {
display: flex;
flex-direction: column;
top: 100%;
left: 0;
z-index: 1;
}
.p-megamenu.p-megamenu-mobile .p-megamenu-grid {
flex-wrap: wrap;
overflow: auto;
max-height: 90%;
}
}
`;
const inlineStyles = {
submenu: ({ instance, processedItem }) => ({ display: instance.isItemActive(processedItem) ? 'block' : 'none' })
};
@ -242,7 +77,6 @@ const classes = {
export default BaseStyle.extend({
name: 'megamenu',
css,
classes,
inlineStyles
});

24
components/lib/menu/style/MenuStyle.js
View File

@ -1,28 +1,5 @@
import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-menu ul {
margin: 0;
padding: 0;
list-style: none;
}
.p-menu .p-menuitem-link {
cursor: pointer;
display: flex;
align-items: center;
text-decoration: none;
overflow: hidden;
position: relative;
}
.p-menu .p-menuitem-text {
line-height: 1;
}
}
`;
const classes = {
root: ({ instance, props }) => [
'p-menu p-component',
@ -51,6 +28,5 @@ const classes = {
export default BaseStyle.extend({
name: 'menu',
css,
classes
});

111
components/lib/menubar/style/MenubarStyle.js
View File

@ -1,115 +1,5 @@
import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-menubar {
display: flex;
align-items: center;
}
.p-menubar ul {
margin: 0;
padding: 0;
list-style: none;
}
.p-menubar .p-menuitem-link {
cursor: pointer;
display: flex;
align-items: center;
text-decoration: none;
overflow: hidden;
position: relative;
}
.p-menubar .p-menuitem-text {
line-height: 1;
}
.p-menubar .p-menuitem {
position: relative;
}
.p-menubar-root-list {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.p-menubar-root-list > li ul {
display: none;
z-index: 1;
}
.p-menubar-root-list > .p-menuitem-active > .p-submenu-list {
display: block;
}
.p-menubar .p-submenu-list {
display: none;
position: absolute;
z-index: 1;
}
.p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list {
display: block;
left: 100%;
top: 0;
}
.p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
margin-left: auto;
}
.p-menubar .p-menubar-end {
margin-left: auto;
align-self: center;
}
.p-menubar-button {
display: none;
cursor: pointer;
align-items: center;
justify-content: center;
text-decoration: none;
}
.p-menubar.p-menubar-mobile {
position: relative;
}
.p-menubar.p-menubar-mobile .p-menubar-button {
display: flex;
}
.p-menubar.p-menubar-mobile .p-menubar-root-list {
position: absolute;
display: none;
width: 100%;
}
.p-menubar.p-menubar-mobile .p-submenu-list {
width: 100%;
position: static;
box-shadow: none;
border: 0 none;
}
.p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem {
width: 100%;
position: static;
}
.p-menubar.p-menubar-mobile-active .p-menubar-root-list {
display: flex;
flex-direction: column;
top: 100%;
left: 0;
z-index: 1;
}
}
`;
const inlineStyles = {
submenu: ({ instance, processedItem }) => ({ display: instance.isItemActive(processedItem) ? 'block' : 'none' })
};
@ -145,7 +35,6 @@ const classes = {
export default BaseStyle.extend({
name: 'menubar',
css,
classes,
inlineStyles
});

54
components/lib/message/style/MessageStyle.js
View File

@ -1,58 +1,5 @@
import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-message-wrapper {
display: flex;
align-items: center;
}
.p-message-icon {
flex-shrink: 0;
}
.p-message-close {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.p-message-close.p-link {
margin-left: auto;
overflow: hidden;
position: relative;
}
.p-message-enter-from {
opacity: 0;
}
.p-message-enter-active {
transition: opacity 0.3s;
}
.p-message.p-message-leave-from {
max-height: 1000px;
}
.p-message.p-message-leave-to {
max-height: 0;
opacity: 0;
margin: 0;
}
.p-message-leave-active {
overflow: hidden;
transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s;
}
.p-message-leave-active .p-message-close {
display: none;
}
}
`;
const classes = {
root: ({ props }) => 'p-message p-component p-message-' + props.severity,
wrapper: 'p-message-wrapper',
@ -64,6 +11,5 @@ const classes = {
export default BaseStyle.extend({
name: 'message',
css,
classes
});

67
components/lib/metergroup/style/MeterGroupStyle.js
View File

@ -1,54 +1,5 @@
import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-metergroup {
position: relative;
overflow: hidden;
}
.p-metergroup-vertical.p-metergroup {
display: flex;
}
.p-metergroup-vertical .p-metergroup-meter-container {
flex-direction: column;
}
.p-metergroup-meter-container {
display: flex;
}
.p-metergroup-label-list {
display: flex;
margin: 0;
padding: 0;
list-style-type: none;
}
.p-metergroup-vertical .p-metergroup-label-list {
align-items: start;
}
.p-metergroup-horizontal .p-metergroup-label-list-vertical {
flex-direction: column;
}
.p-metergroup-vertical .p-metergroup-label-list-horizontal {
flex-direction: column;
}
.p-metergroup-label-list-item {
display: inline-flex;
align-items: center;
}
.p-metergroup-label-type {
display: inline-block;
}
}
`;
const classes = {
root: ({ props }) => [
'p-metergroup p-component',
@ -57,26 +8,22 @@ const classes = {
'p-metergroup-vertical': props.orientation === 'vertical'
}
],
metercontainer: 'p-metergroup-meter-container',
metercontainer: 'p-metergroup-meters',
meter: 'p-metergroup-meter',
labellist: ({ props }) => [
'p-metergroup-label-list',
'p-metergroup-labels',
{
'p-metergroup-label-list-start': props.labelPosition === 'start',
'p-metergroup-label-list-end': props.labelPosition === 'end',
'p-metergroup-label-list-vertical': props.labelOrientation === 'vertical',
'p-metergroup-label-list-horizontal': props.labelOrientation === 'horizontal'
'p-metergroup-labels-vertical': props.labelOrientation === 'vertical',
'p-metergroup-labels-horizontal': props.labelOrientation === 'horizontal'
}
],
labellistitem: 'p-metergroup-label-list-item',
labellistitem: 'p-metergroup-label',
labelicon: 'p-metergroup-label-icon',
labellisttype: 'p-metergroup-label-type',
label: 'p-metergroup-label'
labellisttype: 'p-metergroup-label-marker',
label: 'p-metergroup-label-text'
};
export default BaseStyle.extend({
name: 'metergroup',
css,
classes
});

111
components/lib/multiselect/style/MultiSelectStyle.js
View File

@ -1,115 +1,5 @@
import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-multiselect {
display: inline-flex;
cursor: pointer;
user-select: none;
}
.p-multiselect-trigger {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.p-multiselect-label-container {
overflow: hidden;
flex: 1 1 auto;
cursor: pointer;
}
.p-multiselect-label {
display: block;
white-space: nowrap;
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
}
.p-multiselect-label-empty {
overflow: hidden;
visibility: hidden;
}
.p-multiselect-token {
cursor: default;
display: inline-flex;
align-items: center;
flex: 0 0 auto;
}
.p-multiselect-token-icon {
cursor: pointer;
}
.p-multiselect .p-multiselect-panel {
min-width: 100%;
}
.p-multiselect-items-wrapper {
overflow: auto;
}
.p-multiselect-items {
margin: 0;
padding: 0;
list-style-type: none;
}
.p-multiselect-item {
cursor: pointer;
display: flex;
align-items: center;
font-weight: normal;
white-space: nowrap;
position: relative;
overflow: hidden;
}
.p-multiselect-item-group {
cursor: auto;
}
.p-multiselect-header {
display: flex;
align-items: center;
justify-content: space-between;
}
.p-multiselect-filter-container {
position: relative;
flex: 1 1 auto;
}
.p-multiselect-filter-icon {
position: absolute;
top: 50%;
margin-top: -0.5rem;
}
.p-multiselect-filter-container .p-inputtext {
width: 100%;
}
.p-multiselect-close {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
overflow: hidden;
position: relative;
margin-left: auto;
}
.p-fluid .p-multiselect {
display: flex;
}
}
`;
const inlineStyles = {
root: ({ props }) => ({ position: props.appendTo === 'self' ? 'relative' : undefined })
};
@ -175,7 +65,6 @@ const classes = {
export default BaseStyle.extend({
name: 'multiselect',
css,
classes,
inlineStyles
});

43
components/lib/orderlist/style/OrderListStyle.js
View File

@ -1,47 +1,5 @@
import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-orderlist {
display: flex;
}
.p-orderlist-controls {
display: flex;
flex-direction: column;
justify-content: center;
}
.p-orderlist-list-container {
flex: 1 1 auto;
}
.p-orderlist-list {
list-style-type: none;
margin: 0;
padding: 0;
overflow: auto;
min-height: 12rem;
max-height: 24rem;
}
.p-orderlist-item {
cursor: pointer;
overflow: hidden;
position: relative;
}
.p-orderlist.p-state-disabled .p-orderlist-item,
.p-orderlist.p-state-disabled .p-button {
cursor: default;
}
.p-orderlist.p-state-disabled .p-orderlist-list {
overflow: hidden;
}
}
`;
const classes = {
root: ({ props }) => [
'p-orderlist p-component',
@ -64,6 +22,5 @@ const classes = {
export default BaseStyle.extend({
name: 'orderlist',
css,
classes
});

58
components/lib/organizationchart/style/OrganizationChartStyle.js
View File

@ -1,62 +1,5 @@
import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-organizationchart-table {
border-spacing: 0;
border-collapse: separate;
margin: 0 auto;
}
.p-organizationchart-table > tbody > tr > td {
text-align: center;
vertical-align: top;
padding: 0 0.75rem;
}
.p-organizationchart-node-content {
display: inline-block;
position: relative;
}
.p-organizationchart-node-content .p-node-toggler {
position: absolute;
bottom: -0.75rem;
margin-left: -0.75rem;
z-index: 2;
left: 50%;
user-select: none;
cursor: pointer;
width: 1.5rem;
height: 1.5rem;
text-decoration: none;
}
.p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon {
position: relative;
top: 0.25rem;
}
.p-organizationchart-line-down {
margin: 0 auto;
height: 20px;
width: 1px;
}
.p-organizationchart-line-right {
border-radius: 0px;
}
.p-organizationchart-line-left {
border-radius: 0;
}
.p-organizationchart-selectable-node {
cursor: pointer;
}
}
`;
const classes = {
root: 'p-organizationchart p-component',
table: 'p-organizationchart-table',
@ -72,6 +15,5 @@ const classes = {
export default BaseStyle.extend({
name: 'organizationchart',
css,
classes
});

75
components/lib/overlaypanel/style/OverlayPanelStyle.js
View File

@ -1,79 +1,5 @@
import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-overlaypanel {
margin-top: 10px;
}
.p-overlaypanel-flipped {
margin-top: 0;
margin-bottom: 10px;
}
.p-overlaypanel-close {
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
position: relative;
}
/* Animation */
.p-overlaypanel-enter-from {
opacity: 0;
transform: scaleY(0.8);
}
.p-overlaypanel-leave-to {
opacity: 0;
}
.p-overlaypanel-enter-active {
transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1);
}
.p-overlaypanel-leave-active {
transition: opacity 0.1s linear;
}
.p-overlaypanel:after,
.p-overlaypanel:before {
bottom: 100%;
left: calc(var(--overlayArrowLeft, 0) + 1.25rem);
content: ' ';
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.p-overlaypanel:after {
border-width: 8px;
margin-left: -8px;
}
.p-overlaypanel:before {
border-width: 10px;
margin-left: -10px;
}
.p-overlaypanel-flipped:after,
.p-overlaypanel-flipped:before {
bottom: auto;
top: 100%;
}
.p-overlaypanel.p-overlaypanel-flipped:after {
border-bottom-color: transparent;
}
.p-overlaypanel.p-overlaypanel-flipped:before {
border-bottom-color: transparent;
}
}
`;
const classes = {
root: ({ instance }) => [
'p-overlaypanel p-component',
@ -88,6 +14,5 @@ const classes = {
export default BaseStyle.extend({
name: 'overlaypanel',
css,
classes
});

45
components/lib/paginator/style/PaginatorStyle.js
View File

@ -1,49 +1,5 @@
import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-paginator-default {
display: flex;
}
.p-paginator {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.p-paginator-left-content {
margin-right: auto;
}
.p-paginator-right-content {
margin-left: auto;
}
.p-paginator-page,
.p-paginator-next,
.p-paginator-last,
.p-paginator-first,
.p-paginator-prev,
.p-paginator-current {
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
user-select: none;
overflow: hidden;
position: relative;
}
.p-paginator-element:focus {
z-index: 1;
position: relative;
}
}
`;
const classes = {
paginator: ({ instance, key }) => [
'p-paginator p-component',
@ -97,6 +53,5 @@ const classes = {
export default BaseStyle.extend({
name: 'paginator',
css,
classes
});

25
components/lib/panel/style/PanelStyle.js
View File

@ -1,29 +1,5 @@
import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-panel-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.p-panel-title {
line-height: 1;
}
.p-panel-header-icon {
display: inline-flex;
justify-content: center;
align-items: center;
cursor: pointer;
text-decoration: none;
overflow: hidden;
position: relative;
}
}
`;
const classes = {
root: ({ props }) => [
'p-panel p-component',
@ -42,6 +18,5 @@ const classes = {
export default BaseStyle.extend({
name: 'panel',
//css, // @todo remove
classes
});

38
components/lib/panelmenu/style/PanelMenuStyle.js
View File

@ -1,42 +1,5 @@
import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-panelmenu .p-panelmenu-header-action {
display: flex;
align-items: center;
user-select: none;
cursor: pointer;
position: relative;
text-decoration: none;
}
.p-panelmenu .p-panelmenu-header-action:focus {
z-index: 1;
}
.p-panelmenu .p-submenu-list {
margin: 0;
padding: 0;
list-style: none;
}
.p-panelmenu .p-menuitem-link {
display: flex;
align-items: center;
user-select: none;
cursor: pointer;
text-decoration: none;
position: relative;
overflow: hidden;
}
.p-panelmenu .p-menuitem-text {
line-height: 1;
}
}
`;
const classes = {
root: 'p-panelmenu p-component',
panel: 'p-panelmenu-panel',
@ -72,6 +35,5 @@ const classes = {
export default BaseStyle.extend({
name: 'panelmenu',
css,
classes
});

32
components/lib/password/style/PasswordStyle.js
View File

@ -1,36 +1,5 @@
import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-password {
display: inline-flex;
}
.p-password .p-password-panel {
min-width: 100%;
}
.p-password-meter {
height: 10px;
}
.p-password-strength {
height: 100%;
width: 0;
transition: width 1s ease-in-out;
}
.p-fluid .p-password {
display: flex;
}
.p-password-input::-ms-reveal,
.p-password-input::-ms-clear {
display: none;
}
}
`;
const inlineStyles = {
root: ({ props }) => ({ position: props.appendTo === 'self' ? 'relative' : undefined })
};
@ -63,7 +32,6 @@ const classes = {
export default BaseStyle.extend({
name: 'password',
css,
classes,
inlineStyles
});

39
components/lib/picklist/style/PickListStyle.js
View File

@ -1,43 +1,5 @@
import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-picklist {
display: flex;
}
.p-picklist-buttons {
display: flex;
flex-direction: column;
justify-content: center;
}
.p-picklist-list-wrapper {
flex: 1 1 50%;
}
.p-picklist-list {
list-style-type: none;
margin: 0;
padding: 0;
overflow: auto;
min-height: 12rem;
max-height: 24rem;
}
.p-picklist-item {
cursor: pointer;
overflow: hidden;
position: relative;
}
.p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to,
.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to {
transition: none;
}
}
`;
const classes = {
root: ({ props }) => [
'p-picklist p-component',
@ -65,6 +27,5 @@ const classes = {
export default BaseStyle.extend({
name: 'picklist',
css,
classes
});

114
components/lib/progressbar/style/ProgressBarStyle.js
View File

@ -1,118 +1,5 @@
import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-progressbar {
position: relative;
overflow: hidden;
}
.p-progressbar-determinate .p-progressbar-value {
height: 100%;
width: 0%;
position: absolute;
display: none;
border: 0 none;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.p-progressbar-determinate .p-progressbar-label {
display: inline-flex;
}
.p-progressbar-determinate .p-progressbar-value-animate {
transition: width 1s ease-in-out;
}
.p-progressbar-indeterminate .p-progressbar-value::before {
content: '';
position: absolute;
background-color: inherit;
top: 0;
left: 0;
bottom: 0;
will-change: left, right;
-webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
}
.p-progressbar-indeterminate .p-progressbar-value::after {
content: '';
position: absolute;
background-color: inherit;
top: 0;
left: 0;
bottom: 0;
will-change: left, right;
-webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
-webkit-animation-delay: 1.15s;
animation-delay: 1.15s;
}
@-webkit-keyframes p-progressbar-indeterminate-anim {
0% {
left: -35%;
right: 100%;
}
60% {
left: 100%;
right: -90%;
}
100% {
left: 100%;
right: -90%;
}
}
@keyframes p-progressbar-indeterminate-anim {
0% {
left: -35%;
right: 100%;
}
60% {
left: 100%;
right: -90%;
}
100% {
left: 100%;
right: -90%;
}
}
@-webkit-keyframes p-progressbar-indeterminate-anim-short {
0% {
left: -200%;
right: 100%;
}
60% {
left: 107%;
right: -8%;
}
100% {
left: 107%;
right: -8%;
}
}
@keyframes p-progressbar-indeterminate-anim-short {
0% {
left: -200%;
right: 100%;
}
60% {
left: 107%;
right: -8%;
}
100% {
left: 107%;
right: -8%;
}
}
}
`;
const classes = {
root: ({ instance }) => [
'p-progressbar p-component',
@ -128,6 +15,5 @@ const classes = {
export default BaseStyle.extend({
name: 'progressbar',
css,
classes
});

31
components/lib/progressspinner/style/ProgressSpinnerStyle.js
View File

@ -1,35 +1,5 @@
import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-progress-spinner {
position: relative;
margin: 0 auto;
width: 100px;
height: 100px;
display: inline-block;
}
.p-progress-spinner::before {
content: '';
display: block;
padding-top: 100%;
}
.p-progress-spinner-svg {
height: 100%;
transform-origin: center center;
width: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
}
`;
const classes = {
root: 'p-progress-spinner',
spinner: 'p-progress-spinner-svg',
@ -38,6 +8,5 @@ const classes = {
export default BaseStyle.extend({
name: 'progressspinner',
css,
classes
});

35
components/lib/radiobutton/style/RadioButtonStyle.js
View File

@ -1,39 +1,5 @@
import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-radiobutton {
position: relative;
display: inline-flex;
user-select: none;
vertical-align: bottom;
}
.p-radiobutton-input {
cursor: pointer;
}
.p-radiobutton-box {
display: flex;
justify-content: center;
align-items: center;
}
.p-radiobutton-icon {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: translateZ(0) scale(.1);
border-radius: 50%;
visibility: hidden;
}
.p-radiobutton.p-highlight .p-radiobutton-icon {
transform: translateZ(0) scale(1.0, 1.0);
visibility: visible;
}
}
`;
const classes = {
root: ({ instance, props }) => [
'p-radiobutton p-component',
@ -51,6 +17,5 @@ const classes = {
export default BaseStyle.extend({
name: 'radiobutton',
css,
classes
});

21
components/lib/rating/style/RatingStyle.js
View File

@ -1,25 +1,5 @@
import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-rating {
position: relative;
display: flex;
align-items: center;
}
.p-rating-item {
display: inline-flex;
align-items: center;
cursor: pointer;
}
.p-rating.p-readonly .p-rating-item {
cursor: default;
}
}
`;
const classes = {
root: ({ props }) => [
'p-rating',
@ -48,6 +28,5 @@ const classes = {
export default BaseStyle.extend({
name: 'rating',
css,
classes
});

34
components/lib/ripple/style/RippleStyle.js
View File

@ -1,44 +1,10 @@
import BaseStyle from 'primevue/base/style';
const css = `
@keyframes ripple {
100% {
opacity: 0;
transform: scale(2.5);
}
}
@layer primevue {
.p-ripple {
overflow: hidden;
position: relative;
}
.p-ink {
display: block;
position: absolute;
background: rgba(255, 255, 255, 0.5);
border-radius: 100%;
transform: scale(0);
pointer-events: none;
}
.p-ink-active {
animation: ripple 0.4s linear;
}
.p-ripple-disabled .p-ink {
display: none;
}
}
`;
const classes = {
root: 'p-ink'
};
export default BaseStyle.extend({
name: 'ripple',
css,
classes
});

61
components/lib/scrollpanel/style/ScrollPanelStyle.js
View File

@ -1,65 +1,5 @@
import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-scrollpanel-wrapper {
overflow: hidden;
width: 100%;
height: 100%;
position: relative;
z-index: 1;
float: left;
}
.p-scrollpanel-content {
height: calc(100% + 18px);
width: calc(100% + 18px);
padding: 0 18px 18px 0;
position: relative;
overflow: auto;
box-sizing: border-box;
scrollbar-width: none;
}
.p-scrollpanel-content::-webkit-scrollbar {
display: none;
}
.p-scrollpanel-bar {
position: relative;
background: #c1c1c1;
border-radius: 3px;
z-index: 2;
cursor: pointer;
opacity: 0;
transition: opacity 0.25s linear;
}
.p-scrollpanel-bar-y {
width: 9px;
top: 0;
}
.p-scrollpanel-bar-x {
height: 9px;
bottom: 0;
}
.p-scrollpanel-hidden {
visibility: hidden;
}
.p-scrollpanel:hover .p-scrollpanel-bar,
.p-scrollpanel:active .p-scrollpanel-bar {
opacity: 1;
}
.p-scrollpanel-grabbed {
user-select: none;
}
}
`;
const classes = {
root: 'p-scrollpanel p-component',
wrapper: 'p-scrollpanel-wrapper',
@ -70,6 +10,5 @@ const classes = {
export default BaseStyle.extend({
name: 'scrollpanel',
//css,
classes
});

38
components/lib/scrolltop/style/ScrollTopStyle.js
View File

@ -1,42 +1,5 @@
import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-scrolltop {
position: fixed;
bottom: 20px;
right: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.p-scrolltop-sticky {
position: sticky;
}
.p-scrolltop-sticky.p-link {
margin-left: auto;
}
.p-scrolltop-enter-from {
opacity: 0;
}
.p-scrolltop-enter-active {
transition: opacity 0.15s;
}
.p-scrolltop.p-scrolltop-leave-to {
opacity: 0;
}
.p-scrolltop-leave-active {
transition: opacity 0.15s;
}
}
`;
const classes = {
root: ({ props }) => ['p-scrolltop p-link p-component', { 'p-scrolltop-sticky': props.target !== 'window' }],
icon: 'p-scrolltop-icon'
@ -44,6 +7,5 @@ const classes = {
export default BaseStyle.extend({
name: 'scrolltop',
css,
classes
});

154
components/lib/sidebar/style/SidebarStyle.js
View File

@ -1,158 +1,5 @@
import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-sidebar-mask {
display: none;
pointer-events: none;
background-color: transparent;
transition-property: background-color;
}
.p-sidebar-mask.p-component-overlay {
pointer-events: auto;
}
.p-sidebar-visible {
display: flex;
}
.p-sidebar {
display: flex;
flex-direction: column;
pointer-events: auto;
transform: translate3d(0px, 0px, 0px);
position: relative;
transition: transform 0.3s;
}
.p-sidebar-content {
overflow-y: auto;
flex-grow: 1;
}
.p-sidebar-header {
display: flex;
align-items: center;
justify-content: space-between;
flex-shrink: 0;
}
.p-sidebar-icon {
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
}
.p-sidebar-full .p-sidebar {
transition: none;
transform: none;
width: 100vw !important;
height: 100vh !important;
max-height: 100%;
top: 0px !important;
left: 0px !important;
}
/* Animation */
/* Center */
.p-sidebar-left .p-sidebar-enter-from,
.p-sidebar-left .p-sidebar-leave-to {
transform: translateX(-100%);
}
.p-sidebar-right .p-sidebar-enter-from,
.p-sidebar-right .p-sidebar-leave-to {
transform: translateX(100%);
}
.p-sidebar-top .p-sidebar-enter-from,
.p-sidebar-top .p-sidebar-leave-to {
transform: translateY(-100%);
}
.p-sidebar-bottom .p-sidebar-enter-from,
.p-sidebar-bottom .p-sidebar-leave-to {
transform: translateY(100%);
}
.p-sidebar-full .p-sidebar-enter-from,
.p-sidebar-full .p-sidebar-leave-to {
opacity: 0;
}
.p-sidebar-full .p-sidebar-enter-active,
.p-sidebar-full .p-sidebar-leave-active {
transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
}
/* Size */
.p-sidebar-left .p-sidebar {
width: 20rem;
height: 100%;
}
.p-sidebar-right .p-sidebar {
width: 20rem;
height: 100%;
}
.p-sidebar-top .p-sidebar {
height: 10rem;
width: 100%;
}
.p-sidebar-bottom .p-sidebar {
height: 10rem;
width: 100%;
}
.p-sidebar-left .p-sidebar-sm,
.p-sidebar-right .p-sidebar-sm {
width: 20rem;
}
.p-sidebar-left .p-sidebar-md,
.p-sidebar-right .p-sidebar-md {
width: 40rem;
}
.p-sidebar-left .p-sidebar-lg,
.p-sidebar-right .p-sidebar-lg {
width: 60rem;
}
.p-sidebar-top .p-sidebar-sm,
.p-sidebar-bottom .p-sidebar-sm {
height: 10rem;
}
.p-sidebar-top .p-sidebar-md,
.p-sidebar-bottom .p-sidebar-md {
height: 20rem;
}
.p-sidebar-top .p-sidebar-lg,
.p-sidebar-bottom .p-sidebar-lg {
height: 30rem;
}
.p-sidebar-left .p-sidebar-content,
.p-sidebar-right .p-sidebar-content,
.p-sidebar-top .p-sidebar-content,
.p-sidebar-bottom .p-sidebar-content {
width: 100%;
height: 100%;
}
@media screen and (max-width: 64em) {
.p-sidebar-left .p-sidebar-lg,
.p-sidebar-left .p-sidebar-md,
.p-sidebar-right .p-sidebar-lg,
.p-sidebar-right .p-sidebar-md {
width: 20rem;
}
}
}
`;
const inlineStyles = {
mask: ({ position }) => ({
position: 'fixed',
@ -198,7 +45,6 @@ const classes = {
export default BaseStyle.extend({
name: 'sidebar',
css,
classes,
inlineStyles
});

38
components/lib/skeleton/style/SkeletonStyle.js
View File

@ -1,42 +1,5 @@
import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-skeleton {
overflow: hidden;
}
.p-skeleton::after {
content: '';
animation: p-skeleton-animation 1.2s infinite;
height: 100%;
left: 0;
position: absolute;
right: 0;
top: 0;
transform: translateX(-100%);
z-index: 1;
}
.p-skeleton.p-skeleton-circle {
border-radius: 50%;
}
.p-skeleton-none::after {
animation: none;
}
@keyframes p-skeleton-animation {
from {
transform: translateX(-100%);
}
to {
transform: translateX(100%);
}
}
}
`;
const inlineStyles = {
root: { position: 'relative' }
};
@ -53,7 +16,6 @@ const classes = {
export default BaseStyle.extend({
name: 'skeleton',
css,
classes,
inlineStyles
});

43
components/lib/slider/style/SliderStyle.js
View File

@ -1,47 +1,5 @@
import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-slider {
position: relative;
}
.p-slider .p-slider-handle {
cursor: grab;
touch-action: none;
display: block;
}
.p-slider-range {
display: block;
}
.p-slider-horizontal .p-slider-range {
top: 0;
left: 0;
height: 100%;
}
.p-slider-horizontal .p-slider-handle {
top: 50%;
}
.p-slider-vertical {
height: 100px;
}
.p-slider-vertical .p-slider-handle {
left: 50%;
}
.p-slider-vertical .p-slider-range {
bottom: 0;
left: 0;
width: 100%;
}
}
`;
const inlineStyles = {
handle: { position: 'absolute' },
range: { position: 'absolute' }
@ -62,7 +20,6 @@ const classes = {
export default BaseStyle.extend({
name: 'slider',
css,
classes,
inlineStyles
});

82
components/lib/speeddial/style/SpeedDialStyle.js
View File

@ -1,86 +1,5 @@
import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-speeddial {
position: absolute;
display: flex;
}
.p-speeddial-button {
z-index: 1;
}
.p-speeddial-list {
margin: 0;
padding: 0;
list-style: none;
display: flex;
align-items: center;
justify-content: center;
transition: top 0s linear 0.2s;
pointer-events: none;
z-index: 2;
}
.p-speeddial-item {
transform: scale(0);
opacity: 0;
transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s;
will-change: transform;
}
.p-speeddial-action {
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
position: relative;
overflow: hidden;
}
.p-speeddial-circle .p-speeddial-item,
.p-speeddial-semi-circle .p-speeddial-item,
.p-speeddial-quarter-circle .p-speeddial-item {
position: absolute;
}
.p-speeddial-rotate {
transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
will-change: transform;
}
.p-speeddial-mask {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1);
}
.p-speeddial-mask-visible {
pointer-events: none;
opacity: 1;
transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
}
.p-speeddial-opened .p-speeddial-list {
pointer-events: auto;
}
.p-speeddial-opened .p-speeddial-item {
transform: scale(1);
opacity: 1;
}
.p-speeddial-opened .p-speeddial-rotate {
transform: rotate(45deg);
}
}
`;
/* Direction */
const inlineStyles = {
root: ({ props }) => ({
@ -132,7 +51,6 @@ const classes = {
export default BaseStyle.extend({
name: 'speeddial',
css,
classes,
inlineStyles
});

38
components/lib/splitbutton/style/SplitButtonStyle.js
View File

@ -1,42 +1,5 @@
import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-splitbutton {
display: inline-flex;
position: relative;
}
.p-splitbutton .p-splitbutton-defaultbutton,
.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button,
.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button,
.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover {
flex: 1 1 auto;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-right: 0 none;
}
.p-splitbutton-menubutton,
.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button,
.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button {
display: flex;
align-items: center;
justify-content: center;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.p-splitbutton .p-menu {
min-width: 100%;
}
.p-fluid .p-splitbutton {
display: flex;
}
}
`;
const classes = {
root: ({ props }) => [
'p-splitbutton p-component',
@ -55,6 +18,5 @@ const classes = {
export default BaseStyle.extend({
name: 'splitbutton',
css,
classes
});

51
components/lib/splitter/style/SplitterStyle.js
View File

@ -1,55 +1,5 @@
import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-splitter {
display: flex;
flex-wrap: nowrap;
}
.p-splitter-vertical {
flex-direction: column;
}
.p-splitter-gutter {
flex-grow: 0;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
cursor: col-resize;
}
.p-splitter-horizontal.p-splitter-resizing {
cursor: col-resize;
user-select: none;
}
.p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle {
height: 24px;
width: 100%;
}
.p-splitter-horizontal > .p-splitter-gutter {
cursor: col-resize;
}
.p-splitter-vertical.p-splitter-resizing {
cursor: row-resize;
user-select: none;
}
.p-splitter-vertical > .p-splitter-gutter {
cursor: row-resize;
}
.p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle {
width: 24px;
height: 100%;
}
}
`;
const classes = {
root: ({ props }) => ['p-splitter p-component', 'p-splitter-' + props.layout],
gutter: 'p-splitter-gutter',
@ -62,7 +12,6 @@ const inlineStyles = {
export default BaseStyle.extend({
name: 'splitter',
//css,
classes,
inlineStyles
});

19
components/lib/splitterpanel/style/SplitterPanelStyle.js
View File

@ -1,29 +1,10 @@
import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-splitter-panel {
flex-grow: 1;
overflow: hidden;
}
.p-splitter-panel-nested {
display: flex;
}
.p-splitter-panel .p-splitter {
flex-grow: 1;
border: 0 none;
}
}
`;
const classes = {
root: ({ instance }) => ['p-splitter-panel', { 'p-splitter-panel-nested': instance.isNested }]
};
export default BaseStyle.extend({
name: 'splitterpanel',
css,
classes
});

58
components/lib/steps/style/StepsStyle.js
View File

@ -1,62 +1,5 @@
import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-steps {
position: relative;
}
.p-steps .p-steps-list {
padding: 0;
margin: 0;
list-style-type: none;
display: flex;
}
.p-steps-item {
position: relative;
display: flex;
justify-content: center;
flex: 1 1 auto;
overflow: hidden;
}
.p-steps-item .p-menuitem-link {
display: inline-flex;
flex-direction: column;
align-items: center;
overflow: hidden;
text-decoration: none;
cursor: pointer;
}
.p-steps.p-steps-readonly .p-steps-item {
cursor: auto;
}
.p-steps-item.p-steps-current .p-menuitem-link {
cursor: default;
}
.p-steps-title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.p-steps-number {
display: flex;
align-items: center;
justify-content: center;
}
.p-steps-title {
display: block;
}
}
`;
const classes = {
root: ({ props }) => ['p-steps p-component', { 'p-readonly': props.readonly }],
menu: 'p-steps-list',
@ -74,6 +17,5 @@ const classes = {
export default BaseStyle.extend({
name: 'steps',
css,
classes
});

45
components/lib/tabmenu/style/TabMenuStyle.js
View File

@ -1,49 +1,5 @@
import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-tabmenu {
overflow-x: auto;
}
.p-tabmenu-nav {
display: flex;
margin: 0;
padding: 0;
list-style-type: none;
flex-wrap: nowrap;
}
.p-tabmenu-nav a {
cursor: pointer;
user-select: none;
display: flex;
align-items: center;
position: relative;
text-decoration: none;
text-decoration: none;
overflow: hidden;
}
.p-tabmenu-nav a:focus {
z-index: 1;
}
.p-tabmenu-nav .p-menuitem-text {
line-height: 1;
}
.p-tabmenu-ink-bar {
display: none;
z-index: 1;
}
.p-tabmenu::-webkit-scrollbar {
display: none;
}
}
`;
const classes = {
root: 'p-tabmenu p-component',
menu: 'p-tabmenu-nav p-reset',
@ -62,6 +18,5 @@ const classes = {
export default BaseStyle.extend({
name: 'tabmenu',
css,
classes
});

75
components/lib/tabview/style/TabViewStyle.js
View File

@ -1,79 +1,5 @@
import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-tabview-nav-container {
position: relative;
}
.p-tabview-scrollable .p-tabview-nav-container {
overflow: hidden;
}
.p-tabview-nav-content {
overflow-x: auto;
overflow-y: hidden;
scroll-behavior: smooth;
scrollbar-width: none;
overscroll-behavior: contain auto;
}
.p-tabview-nav {
display: flex;
margin: 0;
padding: 0;
list-style-type: none;
flex: 1 1 auto;
}
.p-tabview-header-action {
cursor: pointer;
user-select: none;
display: flex;
align-items: center;
position: relative;
text-decoration: none;
overflow: hidden;
}
.p-tabview-ink-bar {
display: none;
z-index: 1;
}
.p-tabview-header-action:focus {
z-index: 1;
}
.p-tabview-title {
line-height: 1;
white-space: nowrap;
}
.p-tabview-nav-btn {
position: absolute;
top: 0;
z-index: 2;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.p-tabview-nav-prev {
left: 0;
}
.p-tabview-nav-next {
right: 0;
}
.p-tabview-nav-content::-webkit-scrollbar {
display: none;
}
}
`;
const classes = {
root: ({ props }) => [
'p-tabview p-component',
@ -105,6 +31,5 @@ const classes = {
export default BaseStyle.extend({
name: 'tabview',
//css,
classes
});

21
components/lib/tag/style/TagStyle.js
View File

@ -1,25 +1,5 @@
import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-tag {
display: inline-flex;
align-items: center;
justify-content: center;
}
.p-tag-icon,
.p-tag-value,
.p-tag-icon.pi {
line-height: 1.5;
}
.p-tag.p-tag-rounded {
border-radius: 10rem;
}
}
`;
const classes = {
root: ({ props }) => [
'p-tag p-component',
@ -39,6 +19,5 @@ const classes = {
export default BaseStyle.extend({
name: 'tag',
css,
classes
});

28
components/lib/terminal/style/TerminalStyle.js
View File

@ -1,32 +1,5 @@
import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-terminal {
height: 18rem;
overflow: auto;
}
.p-terminal-prompt-container {
display: flex;
align-items: center;
}
.p-terminal-input {
flex: 1 1 auto;
border: 0 none;
background-color: transparent;
color: inherit;
padding: 0;
outline: 0 none;
}
.p-terminal-input::-ms-clear {
display: none;
}
}
`;
const classes = {
root: 'p-terminal p-component',
content: 'p-terminal-content',
@ -39,6 +12,5 @@ const classes = {
export default BaseStyle.extend({
name: 'terminal',
css,
classes
});

14
components/lib/textarea/style/TextareaStyle.js
View File

@ -1,18 +1,5 @@
import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-inputtextarea-resizable {
overflow: hidden;
resize: none;
}
.p-fluid .p-inputtextarea {
width: 100%;
}
}
`;
const classes = {
root: ({ instance, props }) => [
'p-inputtextarea p-inputtext p-component',
@ -27,6 +14,5 @@ const classes = {
export default BaseStyle.extend({
name: 'textarea',
css,
classes
});

54
components/lib/tieredmenu/style/TieredMenuStyle.js
View File

@ -1,58 +1,5 @@
import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-tieredmenu ul {
margin: 0;
padding: 0;
list-style: none;
}
.p-tieredmenu .p-submenu-list {
position: absolute;
min-width: 100%;
z-index: 1;
display: none;
}
.p-tieredmenu .p-menuitem-link {
cursor: pointer;
display: flex;
align-items: center;
text-decoration: none;
overflow: hidden;
position: relative;
}
.p-tieredmenu .p-menuitem-text {
line-height: 1;
}
.p-tieredmenu .p-menuitem {
position: relative;
}
.p-tieredmenu .p-menuitem-link .p-submenu-icon {
margin-left: auto;
}
.p-tieredmenu .p-menuitem-active > .p-submenu-list {
display: block;
left: 100%;
top: 0;
}
.p-tieredmenu-enter-from,
.p-tieredmenu-leave-active {
opacity: 0;
}
.p-tieredmenu-enter-active {
transition: opacity 250ms;
}
}
`;
const inlineStyles = {
submenu: ({ instance, processedItem }) => ({ display: instance.isItemActive(processedItem) ? 'block' : 'none' })
};
@ -87,7 +34,6 @@ const classes = {
export default BaseStyle.extend({
name: 'tieredmenu',
css,
classes,
inlineStyles
});

116
components/lib/timeline/style/TimelineStyle.js
View File

@ -1,120 +1,5 @@
import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-timeline {
display: flex;
flex-grow: 1;
flex-direction: column;
}
.p-timeline-left .p-timeline-event-opposite {
text-align: right;
}
.p-timeline-left .p-timeline-event-content {
text-align: left;
}
.p-timeline-right .p-timeline-event {
flex-direction: row-reverse;
}
.p-timeline-right .p-timeline-event-opposite {
text-align: left;
}
.p-timeline-right .p-timeline-event-content {
text-align: right;
}
.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) {
flex-direction: row-reverse;
}
.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite {
text-align: right;
}
.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content {
text-align: left;
}
.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite {
text-align: left;
}
.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content {
text-align: right;
}
.p-timeline-event {
display: flex;
position: relative;
min-height: 70px;
}
.p-timeline-event:last-child {
min-height: 0;
}
.p-timeline-event-opposite {
flex: 1;
padding: 0 1rem;
}
.p-timeline-event-content {
flex: 1;
padding: 0 1rem;
}
.p-timeline-event-separator {
flex: 0;
display: flex;
align-items: center;
flex-direction: column;
}
.p-timeline-event-marker {
display: flex;
align-self: baseline;
}
.p-timeline-event-connector {
flex-grow: 1;
}
.p-timeline-horizontal {
flex-direction: row;
}
.p-timeline-horizontal .p-timeline-event {
flex-direction: column;
flex: 1;
}
.p-timeline-horizontal .p-timeline-event:last-child {
flex: 0;
}
.p-timeline-horizontal .p-timeline-event-separator {
flex-direction: row;
}
.p-timeline-horizontal .p-timeline-event-connector {
width: 100%;
}
.p-timeline-bottom .p-timeline-event {
flex-direction: column-reverse;
}
.p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) {
flex-direction: column-reverse;
}
}
`;
const classes = {
root: ({ props }) => ['p-timeline p-component', 'p-timeline-' + props.align, 'p-timeline-' + props.layout],
event: 'p-timeline-event',
@ -127,6 +12,5 @@ const classes = {
export default BaseStyle.extend({
name: 'timeline',
css,
classes
});

78
components/lib/toast/style/ToastStyle.js
View File

@ -1,82 +1,5 @@
import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-toast {
width: 25rem;
white-space: pre-line;
word-break: break-word;
}
.p-toast-message-icon {
flex-shrink: 0;
}
.p-toast-message-content {
display: flex;
align-items: flex-start;
}
.p-toast-message-text {
flex: 1 1 auto;
}
.p-toast-top-center {
transform: translateX(-50%);
}
.p-toast-bottom-center {
transform: translateX(-50%);
}
.p-toast-center {
min-width: 20vw;
transform: translate(-50%, -50%);
}
.p-toast-icon-close {
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
}
.p-toast-icon-close.p-link {
cursor: pointer;
}
/* Animations */
.p-toast-message-enter-from {
opacity: 0;
-webkit-transform: translateY(50%);
-ms-transform: translateY(50%);
transform: translateY(50%);
}
.p-toast-message-leave-from {
max-height: 1000px;
}
.p-toast .p-toast-message.p-toast-message-leave-to {
max-height: 0;
opacity: 0;
margin-bottom: 0;
overflow: hidden;
}
.p-toast-message-enter-active {
-webkit-transition: transform 0.3s, opacity 0.3s;
transition: transform 0.3s, opacity 0.3s;
}
.p-toast-message-leave-active {
-webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s;
transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s;
}
}
`;
// Position
const inlineStyles = {
root: ({ position }) => ({
@ -125,7 +48,6 @@ const classes = {
export default BaseStyle.extend({
name: 'toast',
css,
classes,
inlineStyles
});

20
components/lib/togglebutton/style/ToggleButtonStyle.js
View File

@ -1,24 +1,5 @@
import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-togglebutton {
position: relative;
display: inline-flex;
user-select: none;
vertical-align: bottom;
}
.p-togglebutton-input {
cursor: pointer;
}
.p-togglebutton .p-button {
flex: 1 1 auto;
}
}
`;
const classes = {
root: ({ instance, props }) => [
'p-togglebutton p-component',
@ -47,6 +28,5 @@ const classes = {
export default BaseStyle.extend({
name: 'togglebutton',
css,
classes
});

25
components/lib/toolbar/style/ToolbarStyle.js
View File

@ -1,29 +1,5 @@
import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.p-toolbar-group-start,
.p-toolbar-group-center,
.p-toolbar-group-end {
display: flex;
align-items: center;
}
.p-toolbar-group-left,
.p-toolbar-group-right {
display: flex;
align-items: center;
}
}
`;
const classes = {
root: 'p-toolbar p-component',
start: 'p-toolbar-group-start p-toolbar-group-left',
@ -33,6 +9,5 @@ const classes = {
export default BaseStyle.extend({
name: 'toolbar',
//css,
classes
});

60
components/lib/tooltip/style/TooltipStyle.js
View File

@ -1,64 +1,5 @@
import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-tooltip {
position:absolute;
display:none;
padding: .25em .5rem;
max-width: 12.5rem;
}
.p-tooltip.p-tooltip-right,
.p-tooltip.p-tooltip-left {
padding: 0 .25rem;
}
.p-tooltip.p-tooltip-top,
.p-tooltip.p-tooltip-bottom {
padding:.25em 0;
}
.p-tooltip .p-tooltip-text {
white-space: pre-line;
word-break: break-word;
}
.p-tooltip-arrow {
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
scale: 2;
}
.p-tooltip-right .p-tooltip-arrow {
margin-top: -.25rem;
border-width: .25em .25em .25em 0;
}
.p-tooltip-left .p-tooltip-arrow {
margin-top: -.25rem;
border-width: .25em 0 .25em .25rem;
}
.p-tooltip.p-tooltip-top {
padding: .25em 0;
}
.p-tooltip-top .p-tooltip-arrow {
margin-left: -.25rem;
border-width: .25em .25em 0;
}
.p-tooltip-bottom .p-tooltip-arrow {
margin-left: -.25rem;
border-width: 0 .25em .25rem;
}
}
`;
const classes = {
root: 'p-tooltip p-component',
arrow: 'p-tooltip-arrow',
@ -67,6 +8,5 @@ const classes = {
export default BaseStyle.extend({
name: 'tooltip',
css,
classes
});

87
components/lib/tree/style/TreeStyle.js
View File

@ -1,91 +1,5 @@
import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-tree-container {
margin: 0;
padding: 0;
list-style-type: none;
overflow: auto;
}
.p-treenode-children {
margin: 0;
padding: 0;
list-style-type: none;
}
.p-tree-wrapper {
overflow: auto;
}
.p-treenode-selectable {
cursor: pointer;
user-select: none;
}
.p-tree-toggler {
cursor: pointer;
user-select: none;
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
flex-shrink: 0;
}
.p-treenode-leaf > .p-treenode-content .p-tree-toggler {
visibility: hidden;
}
.p-treenode-content {
display: flex;
align-items: center;
}
.p-tree-filter {
width: 100%;
}
.p-tree-filter-container {
position: relative;
display: block;
width: 100%;
}
.p-tree-filter-icon {
position: absolute;
top: 50%;
margin-top: -0.5rem;
}
.p-tree-loading {
position: relative;
min-height: 4rem;
}
.p-tree .p-tree-loading-overlay {
position: absolute;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
}
.p-tree-flex-scrollable {
display: flex;
flex: 1;
height: 100%;
flex-direction: column;
}
.p-tree-flex-scrollable .p-tree-wrapper {
flex: 1;
}
}
`;
const classes = {
root: ({ props }) => [
'p-tree p-component',
@ -126,6 +40,5 @@ const classes = {
export default BaseStyle.extend({
name: 'tree',
css,
classes
});

57
components/lib/treeselect/style/TreeSelectStyle.js
View File

@ -1,60 +1,5 @@
import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-treeselect {
display: inline-flex;
cursor: pointer;
user-select: none;
}
.p-treeselect-trigger {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.p-treeselect-label-container {
overflow: hidden;
flex: 1 1 auto;
cursor: pointer;
}
.p-treeselect-label {
display: block;
white-space: nowrap;
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
}
.p-treeselect-label-empty {
overflow: hidden;
visibility: hidden;
}
.p-treeselect-token {
cursor: default;
display: inline-flex;
align-items: center;
flex: 0 0 auto;
}
.p-treeselect .p-treeselect-panel {
min-width: 100%;
}
.p-treeselect-items-wrapper {
overflow: auto;
}
.p-fluid .p-treeselect {
display: flex;
}
}
`;
const inlineStyles = {
root: ({ props }) => ({ position: props.appendTo === 'self' ? 'relative' : undefined })
};
@ -87,7 +32,6 @@ const classes = {
panel: ({ props, instance }) => [
'p-treeselect-panel p-component',
{
'p-input-filled': props.variant === 'filled' || instance.$primevue.config.inputStyle === 'filled',
'p-ripple-disabled': instance.$primevue.config.ripple === false
}
],
@ -97,7 +41,6 @@ const classes = {
export default BaseStyle.extend({
name: 'treeselect',
css,
classes,
inlineStyles
});

174
components/lib/treetable/style/TreeTableStyle.js
View File

@ -1,178 +1,5 @@
import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-treetable {
position: relative;
}
.p-treetable table {
border-collapse: collapse;
width: 100%;
table-layout: fixed;
}
.p-treetable .p-sortable-column {
cursor: pointer;
user-select: none;
}
.p-treetable-responsive-scroll > .p-treetable-wrapper {
overflow-x: auto;
}
.p-treetable-responsive-scroll > .p-treetable-wrapper > table,
.p-treetable-auto-layout > .p-treetable-wrapper > table {
table-layout: auto;
}
.p-treetable-hoverable-rows .p-treetable-tbody > tr {
cursor: pointer;
}
.p-treetable-toggler {
cursor: pointer;
user-select: none;
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: middle;
overflow: hidden;
position: relative;
}
.p-treetable-toggler + .p-checkbox {
vertical-align: middle;
}
.p-treetable-toggler + .p-checkbox + span {
vertical-align: middle;
}
/* Resizable */
.p-treetable-resizable > .p-treetable-wrapper {
overflow-x: auto;
}
.p-treetable-resizable .p-treetable-thead > tr > th,
.p-treetable-resizable .p-treetable-tfoot > tr > td,
.p-treetable-resizable .p-treetable-tbody > tr > td {
overflow: hidden;
}
.p-treetable-resizable .p-resizable-column:not(.p-frozen-column) {
background-clip: padding-box;
position: relative;
}
.p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
display: none;
}
.p-treetable .p-column-resizer {
display: block;
position: absolute;
top: 0;
right: 0;
margin: 0;
width: 0.5rem;
height: 100%;
padding: 0px;
cursor: col-resize;
border: 1px solid transparent;
}
.p-treetable .p-column-resizer-helper {
width: 1px;
position: absolute;
z-index: 10;
display: none;
}
.p-treetable .p-treetable-loading-overlay {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
/* Scrollable */
.p-treetable-scrollable .p-treetable-wrapper {
position: relative;
overflow: auto;
}
.p-treetable-scrollable .p-treetable-table {
display: block;
}
.p-treetable-scrollable .p-treetable-thead,
.p-treetable-scrollable .p-treetable-tbody,
.p-treetable-scrollable .p-treetable-tfoot {
display: block;
}
.p-treetable-scrollable .p-treetable-thead > tr,
.p-treetable-scrollable .p-treetable-tbody > tr,
.p-treetable-scrollable .p-treetable-tfoot > tr {
display: flex;
flex-wrap: nowrap;
width: 100%;
}
.p-treetable-scrollable .p-treetable-thead > tr > th,
.p-treetable-scrollable .p-treetable-tbody > tr > td,
.p-treetable-scrollable .p-treetable-tfoot > tr > td {
display: flex;
flex: 1 1 0;
align-items: center;
}
.p-treetable-scrollable .p-treetable-thead {
position: sticky;
top: 0;
z-index: 1;
}
.p-treetable-scrollable .p-treetable-tfoot {
position: sticky;
bottom: 0;
z-index: 1;
}
.p-treetable-scrollable .p-frozen-column {
position: sticky;
background: inherit;
}
.p-treetable-scrollable th.p-frozen-column {
z-index: 1;
}
.p-treetable-scrollable-both .p-treetable-thead > tr > th,
.p-treetable-scrollable-both .p-treetable-tbody > tr > td,
.p-treetable-scrollable-both .p-treetable-tfoot > tr > td,
.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td,
.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td {
flex: 0 0 auto;
}
.p-treetable-flex-scrollable {
display: flex;
flex-direction: column;
height: 100%;
}
.p-treetable-flex-scrollable .p-treetable-wrapper {
display: flex;
flex-direction: column;
flex: 1;
height: 100%;
}
}
`;
const classes = {
root: ({ instance, props }) => [
'p-treetable p-component',
@ -257,6 +84,5 @@ const classes = {
export default BaseStyle.extend({
name: 'treetable',
css,
classes
});

22
components/lib/tristatecheckbox/style/TriStateCheckboxStyle.js
View File

@ -1,26 +1,5 @@
import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-checkbox {
position: relative;
display: inline-flex;
user-select: none;
vertical-align: bottom;
}
.p-checkbox-input {
cursor: pointer;
}
.p-checkbox-box {
display: flex;
justify-content: center;
align-items: center;
}
}
`;
const classes = {
root: ({ instance, props }) => [
'p-tristatecheckbox p-checkbox p-component',
@ -40,6 +19,5 @@ const classes = {
export default BaseStyle.extend({
name: 'tristatecheckbox',
css,
classes
});

8
doc/accordion/TemplateDoc.vue
View File

@ -3,7 +3,7 @@
<p>Title section of a tab is customized with the <i>header</i> slot.</p>
</DocSectionText>
<div class="card">
<Accordion :activeIndex="0">
<Accordion :activeIndex="0" expandIcon="pi pi-plus" collapseIcon="pi pi-minus">
<AccordionTab>
<template #header>
<span class="flex align-items-center gap-2 w-full">
@ -54,7 +54,7 @@ export default {
return {
code: {
basic: `
<Accordion :activeIndex="0">
<Accordion :activeIndex="0" expandIcon="pi pi-plus" collapseIcon="pi pi-minus">
<AccordionTab>
<template #header>
<span class="flex align-items-center gap-2 w-full">
@ -99,7 +99,7 @@ export default {
options: `
<template>
<div class="card">
<Accordion :activeIndex="0">
<Accordion :activeIndex="0" expandIcon="pi pi-plus" collapseIcon="pi pi-minus">
<AccordionTab>
<template #header>
<span class="flex align-items-center gap-2 w-full">
@ -149,7 +149,7 @@ export default {
composition: `
<template>
<div class="card">
<Accordion :activeIndex="0">
<Accordion :activeIndex="0" expandIcon="pi pi-plus" collapseIcon="pi pi-minus">
<AccordionTab>
<template #header>
<span class="flex align-items-center gap-2 w-full">

8
doc/inputnumber/ButtonsDoc.vue
View File

@ -14,7 +14,7 @@
</div>
<div class="flex-auto">
<label for="horizontal-buttons" class="font-bold block mb-2"> Horizontal with Step </label>
<InputNumber v-model="value3" inputId="horizontal-buttons" showButtons buttonLayout="horizontal" :step="0.25" decrementButtonClass="p-button-danger" incrementButtonClass="p-button-success" mode="currency" currency="EUR">
<InputNumber v-model="value3" inputId="horizontal-buttons" showButtons buttonLayout="horizontal" :step="0.25" mode="currency" currency="EUR">
<template #incrementbuttonicon>
<span class="pi pi-plus" />
</template>
@ -38,7 +38,7 @@ export default {
basic: `
<InputNumber v-model="value1" inputId="stacked-buttons" showButtons mode="currency" currency="USD" />
<InputNumber v-model="value2" inputId="minmax-buttons" mode="decimal" showButtons :min="0" :max="100" />
<InputNumber v-model="value3" inputId="horizontal-buttons" showButtons buttonLayout="horizontal" :step="0.25" decrementButtonClass="p-button-danger" incrementButtonClass="p-button-success" mode="currency" currency="EUR">
<InputNumber v-model="value3" inputId="horizontal-buttons" showButtons buttonLayout="horizontal" :step="0.25" mode="currency" currency="EUR">
<template #incrementbuttonicon>
<span class="pi pi-plus" />
</template>
@ -61,7 +61,7 @@ export default {
</div>
<div class="flex-auto">
<label for="horizontal-buttons" class="font-bold block mb-2"> Horizontal with Step </label>
<InputNumber v-model="value3" inputId="horizontal-buttons" showButtons buttonLayout="horizontal" :step="0.25" decrementButtonClass="p-button-danger" incrementButtonClass="p-button-success" mode="currency" currency="EUR">
<InputNumber v-model="value3" inputId="horizontal-buttons" showButtons buttonLayout="horizontal" :step="0.25" mode="currency" currency="EUR">
<template #incrementbuttonicon>
<span class="pi pi-plus" />
</template>
@ -99,7 +99,7 @@ export default {
</div>
<div class="flex-auto">
<label for="horizontal-buttons" class="font-bold block mb-2"> Horizontal with Step </label>
<InputNumber v-model="value3" inputId="horizontal-buttons" showButtons buttonLayout="horizontal" :step="0.25" decrementButtonClass="p-button-danger" incrementButtonClass="p-button-success" mode="currency" currency="EUR">
<InputNumber v-model="value3" inputId="horizontal-buttons" showButtons buttonLayout="horizontal" :step="0.25" mode="currency" currency="EUR">
<template #incrementbuttonicon>
<span class="pi pi-plus" />
</template>

8
doc/inputnumber/VerticalDoc.vue
View File

@ -3,7 +3,7 @@
<p>Buttons can also placed vertically by setting <i>buttonLayout</i> as <i>vertical</i>.</p>
</DocSectionText>
<div class="card flex justify-content-center">
<InputNumber v-model="value" showButtons buttonLayout="vertical" style="width: 4rem" decrementButtonClassName="p-button-secondary" incrementButtonClassName="p-button-secondary">
<InputNumber v-model="value" showButtons buttonLayout="vertical" style="width: 3rem" :min="0" :max="99">
<template #incrementbuttonicon>
<span class="pi pi-plus" />
</template>
@ -22,7 +22,7 @@ export default {
value: 50,
code: {
basic: `
<InputNumber v-model="value" showButtons buttonLayout="vertical" style="width: 4rem" decrementButtonClassName="p-button-secondary" incrementButtonClassName="p-button-secondary">
<InputNumber v-model="value" showButtons buttonLayout="vertical" style="width: 3rem" :min="0" :max="99">
<template #incrementbuttonicon>
<span class="pi pi-plus" />
</template>
@ -34,7 +34,7 @@ export default {
options: `
<template>
<div class="card flex justify-content-center">
<InputNumber v-model="value" showButtons buttonLayout="vertical" style="width: 4rem" decrementButtonClassName="p-button-secondary" incrementButtonClassName="p-button-secondary">
<InputNumber v-model="value" showButtons buttonLayout="vertical" style="width: 3rem" :min="0" :max="99">
<template #incrementbuttonicon>
<span class="pi pi-plus" />
</template>
@ -58,7 +58,7 @@ export default {
composition: `
<template>
<div class="card flex justify-content-center">
<InputNumber v-model="value" showButtons buttonLayout="vertical" style="width: 4rem" decrementButtonClassName="p-button-secondary" incrementButtonClassName="p-button-secondary">
<InputNumber v-model="value" showButtons buttonLayout="vertical" style="width: 3rem" :min="0" :max="99">
<template #incrementbuttonicon>
<span class="pi pi-plus" />
</template>

2
doc/metergroup/BasicDoc.vue
View File

@ -1,6 +1,6 @@
<template>
<DocSectionText v-bind="$attrs">
<p>MeterGroup requires <i>value</i> as the data to display.</p>
<p>MeterGroup requires a <i>value</i> as the data to display where each item in the collection should be a type of <i>MeterItem</i>.</p>
</DocSectionText>
<div class="card">
<MeterGroup :value="value" />

69
doc/metergroup/IconDoc.vue Normal file
View File

@ -0,0 +1,69 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Icons can be displayed next to the labels instead of the default marker.</p>
</DocSectionText>
<div class="card">
<MeterGroup :value="value" />
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
value: [
{ label: 'Apps', color: '#34d399', value: 16, icon: 'pi pi-table' },
{ label: 'Messages', color: '#fbbf24', value: 8, icon: 'pi pi-inbox' },
{ label: 'Media', color: '#60a5fa', value: 24, icon: 'pi pi-image' },
{ label: 'System', color: '#c084fc', value: 10, icon: 'pi pi-cog' }
],
code: {
basic: `
<MeterGroup :value="value" />
`,
options: `
<template>
<div class="card">
<MeterGroup :value="value" />
</div>
</template>
<script>
export default {
data() {
return {
value: [
{ label: 'Apps', color: '#34d399', value: 16, icon: 'pi pi-table' },
{ label: 'Messages', color: '#fbbf24', value: 8, icon: 'pi pi-inbox' },
{ label: 'Media', color: '#60a5fa', value: 24, icon: 'pi pi-image' },
{ label: 'System', color: '#c084fc', value: 10, icon: 'pi pi-cog' }
]
};
}
};
<\/script>
`,
composition: `
<template>
<div class="card">
<MeterGroup :value="value" />
</div>
</template>
<script setup>
import { ref } from "vue";
const value = ref([
{ label: 'Apps', color: '#34d399', value: 16, icon: 'pi pi-table' },
{ label: 'Messages', color: '#fbbf24', value: 8, icon: 'pi pi-inbox' },
{ label: 'Media', color: '#60a5fa', value: 24, icon: 'pi pi-image' },
{ label: 'System', color: '#c084fc', value: 10, icon: 'pi pi-cog' }
]);
<\/script>
`
}
};
}
};
</script>

36
doc/metergroup/LabelDoc.vue
View File

@ -1,12 +1,12 @@
<template>
<DocSectionText v-bind="$attrs">
<p>
Default layout of MeterGroup is <i>horizontal</i>, and also <i>labelOrientation</i> property can be set as <i>vertical</i>.In addition, position of the label can be changed using <i>labelPosition</i> property that the default value is
<i>end</i> and also <i>start</i> option is available.
The position of the labels relative to the meters is defined using the <i>labelPosition</i> property. The default orientation of the labels is horizontal, and the vertical alternative is available through the
<i>labelOrientation</i> option.
</p>
</DocSectionText>
<div class="card">
<MeterGroup :value="value" labelPosition="start" />
<MeterGroup :value="value" labelPosition="start" labelOrientation="vertical" />
</div>
<DocSectionCode :code="code" />
</template>
@ -16,19 +16,19 @@ export default {
data() {
return {
value: [
{ label: 'Apps', value: 16, color: '#EB9A9C', icon: 'pi pi-cog' },
{ label: 'Messages', value: 8, color: '#FFCF91', icon: 'pi pi-envelope' },
{ label: 'Media', value: 24, color: '#93DEAC', icon: 'pi pi-image' },
{ label: 'System Data', value: 20, color: '#91cff8', icon: 'pi pi-database' }
{ label: 'Apps', color: '#34d399', value: 16 },
{ label: 'Messages', color: '#fbbf24', value: 8 },
{ label: 'Media', color: '#60a5fa', value: 24 },
{ label: 'System', color: '#c084fc', value: 10 }
],
code: {
basic: `
<MeterGroup :value="value" labelPosition="start" />
<MeterGroup :value="value" labelPosition="start" labelOrientation="vertical" />
`,
options: `
<template>
<div class="card">
<MeterGroup :value="value" labelPosition="start" />
<MeterGroup :value="value" labelPosition="start" labelOrientation="vertical" />
</div>
</template>
@ -37,10 +37,10 @@ export default {
data() {
return {
value: [
{ label: 'Apps', value: 16, color: '#EB9A9C', icon: 'pi pi-cog' },
{ label: 'Messages', value: 8, color: '#FFCF91', icon: 'pi pi-envelope' },
{ label: 'Media', value: 24, color: '#93DEAC', icon: 'pi pi-image' },
{ label: 'System Data', value: 20, color: '#91cff8', icon: 'pi pi-database' }
{ label: 'Apps', color: '#34d399', value: 16 },
{ label: 'Messages', color: '#fbbf24', value: 8 },
{ label: 'Media', color: '#60a5fa', value: 24 },
{ label: 'System', color: '#c084fc', value: 10 }
]
};
}
@ -50,7 +50,7 @@ export default {
composition: `
<template>
<div class="card">
<MeterGroup :value="value" labelPosition="start" />
<MeterGroup :value="value" labelPosition="start" labelOrientation="vertical" />
</div>
</template>
@ -58,10 +58,10 @@ export default {
import { ref } from "vue";
const value = ref([
{ label: 'Apps', value: 16, color: '#EB9A9C', icon: 'pi pi-cog' },
{ label: 'Messages', value: 8, color: '#FFCF91', icon: 'pi pi-envelope' },
{ label: 'Media', value: 24, color: '#93DEAC', icon: 'pi pi-image' },
{ label: 'System Data', value: 20, color: '#91cff8', icon: 'pi pi-database' }
{ label: 'Apps', color: '#34d399', value: 16 },
{ label: 'Messages', color: '#fbbf24', value: 8 },
{ label: 'Media', color: '#60a5fa', value: 24 },
{ label: 'System', color: '#c084fc', value: 10 }
]);
<\/script>
`

32
doc/metergroup/MinMaxDoc.vue
View File

@ -3,7 +3,7 @@
<p>Boundaries are configured with the <i>min</i> and <i>max</i> values whose defaults are 0 and 100 respectively.</p>
</DocSectionText>
<div class="card">
<MeterGroup :value="value" :max="120" />
<MeterGroup :value="value" :max="200" />
</div>
<DocSectionCode :code="code" />
</template>
@ -13,19 +13,19 @@ export default {
data() {
return {
value: [
{ label: 'Apps', value: 16, color: '#EB9A9C', icon: 'pi pi-cog' },
{ label: 'Messages', value: 8, color: '#FFCF91', icon: 'pi pi-envelope' },
{ label: 'Media', value: 24, color: '#93DEAC', icon: 'pi pi-image' },
{ label: 'System Data', value: 20, color: '#91cff8', icon: 'pi pi-database' }
{ label: 'Apps', color: '#34d399', value: 16 },
{ label: 'Messages', color: '#fbbf24', value: 8 },
{ label: 'Media', color: '#60a5fa', value: 24 },
{ label: 'System', color: '#c084fc', value: 10 }
],
code: {
basic: `
<MeterGroup :value="value" :max="120" />
<MeterGroup :value="value" :max="200" />
`,
options: `
<template>
<div class="card">
<MeterGroup :value="value" :max="120" />
<MeterGroup :value="value" :max="200" />
</div>
</template>
@ -34,10 +34,10 @@ export default {
data() {
return {
value: [
{ label: 'Apps', value: 16, color: '#EB9A9C', icon: 'pi pi-cog' },
{ label: 'Messages', value: 8, color: '#FFCF91', icon: 'pi pi-envelope' },
{ label: 'Media', value: 24, color: '#93DEAC', icon: 'pi pi-image' },
{ label: 'System Data', value: 20, color: '#91cff8', icon: 'pi pi-database' }
{ label: 'Apps', color: '#34d399', value: 16 },
{ label: 'Messages', color: '#fbbf24', value: 8 },
{ label: 'Media', color: '#60a5fa', value: 24 },
{ label: 'System', color: '#c084fc', value: 10 }
],
};
}
@ -47,7 +47,7 @@ export default {
composition: `
<template>
<div class="card">
<MeterGroup :value="value" :max="120" />
<MeterGroup :value="value" :max="200" />
</div>
</template>
@ -55,10 +55,10 @@ export default {
import { ref } from "vue";
const value = ref([
{ label: 'Apps', value: 16, color: '#EB9A9C', icon: 'pi pi-cog' },
{ label: 'Messages', value: 8, color: '#FFCF91', icon: 'pi pi-envelope' },
{ label: 'Media', value: 24, color: '#93DEAC', icon: 'pi pi-image' },
{ label: 'System Data', value: 20, color: '#91cff8', icon: 'pi pi-database' }
{ label: 'Apps', color: '#34d399', value: 16 },
{ label: 'Messages', color: '#fbbf24', value: 8 },
{ label: 'Media', color: '#60a5fa', value: 24 },
{ label: 'System', color: '#c084fc', value: 10 }
]);
<\/script>
`

23
doc/metergroup/MultipleDoc.vue
View File

@ -1,6 +1,6 @@
<template>
<DocSectionText v-bind="$attrs">
<p><i>value</i> property accepts multiple meter group objects.</p>
<p>Adding more items to the array displays the meters in a group.</p>
</DocSectionText>
<div class="card">
<MeterGroup :value="value" />
@ -13,9 +13,10 @@ export default {
data() {
return {
value: [
{ color: '#239EF0', label: 'Mortgage', value: 25 },
{ color: '#FAA419', label: 'Loan', value: 15 },
{ color: '#EE5879', label: 'Credit Card', value: 20 }
{ label: 'Apps', color: '#34d399', value: 16 },
{ label: 'Messages', color: '#fbbf24', value: 8 },
{ label: 'Media', color: '#60a5fa', value: 24 },
{ label: 'System', color: '#c084fc', value: 10 }
],
code: {
basic: `
@ -33,9 +34,10 @@ export default {
data() {
return {
value: [
{ color: '#239EF0', label: 'Mortgage', value: 25 },
{ color: '#FAA419', label: 'Loan', value: 15 },
{ color: '#EE5879', label: 'Credit Card', value: 20 }
{ label: 'Apps', color: '#34d399', value: 16 },
{ label: 'Messages', color: '#fbbf24', value: 8 },
{ label: 'Media', color: '#60a5fa', value: 24 },
{ label: 'System', color: '#c084fc', value: 10 }
]
};
}
@ -53,9 +55,10 @@ export default {
import { ref } from "vue";
const value = ref([
{ color: '#239EF0', label: 'Mortgage', value: 25 },
{ color: '#FAA419', label: 'Loan', value: 15 },
{ color: '#EE5879', label: 'Credit Card', value: 20 }
{ label: 'Apps', color: '#34d399', value: 16 },
{ label: 'Messages', color: '#fbbf24', value: 8 },
{ label: 'Media', color: '#60a5fa', value: 24 },
{ label: 'System', color: '#c084fc', value: 10 }
]);
<\/script>
`

213
doc/metergroup/TemplateDoc.vue Normal file
View File

@ -0,0 +1,213 @@
<template>
<DocSectionText v-bind="$attrs">
<p>MeterGroup provides templating support for labels, meter items, and content around the meters.</p>
</DocSectionText>
<div class="card">
<MeterGroup :value="value" labelPosition="start">
<template #label="{ value }">
<div class="flex flex-wrap gap-3">
<template v-for="val of value" :key="val.label">
<Card class="flex-1">
<template #content>
<div class="flex justify-content-between gap-5">
<div class="flex flex-column gap-1">
<span class="text-secondary text-sm">{{ val.label }}</span>
<span class="font-bold text-lg">{{ val.value }}%</span>
</div>
<span class="w-2rem h-2rem border-circle inline-flex justify-content-center align-items-center text-center" :style="{ backgroundColor: `${val.color1}`, color: '#ffffff' }">
<i :class="val.icon" />
</span>
</div>
</template>
</Card>
</template>
</div>
</template>
<template #meter="slotProps">
<span :class="slotProps.class" :style="{ background: `linear-gradient(to right, ${slotProps.value.color1}, ${slotProps.value.color2})`, width: slotProps.size }" />
</template>
<template #start="{ totalPercent }">
<div class="flex justify-content-between mt-3 mb-2 relative">
<span>Storage</span>
<span :style="{ width: totalPercent + '%' }" class="absolute text-right">{{ totalPercent }}%</span>
<span class="font-medium">1TB</span>
</div>
</template>
<template #end>
<div class="flex justify-content-between mt-3">
<Button label="Manage Storage" outlined size="small" />
<Button label="Update Plan" size="small" />
</div>
</template>
</MeterGroup>
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
value: [
{ label: 'Apps', color1: '#34d399', color2: '#fbbf24', value: 25, icon: 'pi pi-table' },
{ label: 'Messages', color1: '#fbbf24', color2: '#60a5fa', value: 15, icon: 'pi pi-inbox' },
{ label: 'Media', color1: '#60a5fa', color2: '#c084fc', value: 20, icon: 'pi pi-image' },
{ label: 'System', color1: '#c084fc', color2: '#c084fc', value: 10, icon: 'pi pi-cog' }
],
code: {
basic: `
<MeterGroup :value="value" labelPosition="start">
<template #label="{ value }">
<div class="flex flex-wrap gap-3">
<template v-for="val of value" :key="val.label">
<Card class="flex-1">
<template #content>
<div class="flex justify-content-between gap-5">
<div class="flex flex-column gap-1">
<span class="text-secondary text-sm">{{ val.label }}</span>
<span class="font-bold text-lg">{{ val.value }}%</span>
</div>
<span class="w-2rem h-2rem border-circle inline-flex justify-content-center align-items-center text-center" :style="{ backgroundColor: \`\${val.color1}\`, color: '#ffffff' }">
<i :class="val.icon" />
</span>
</div>
</template>
</Card>
</template>
</div>
</template>
<template #meter="slotProps">
<span :class="slotProps.class" :style="{ background: \`linear-gradient(to right, \${slotProps.value.color1}, \${slotProps.value.color2})\`, width: slotProps.size }" />
</template>
<template #start="{ totalPercent }">
<div class="flex justify-content-between mt-3 mb-2 relative">
<span>Storage</span>
<span :style="{ width: totalPercent + '%' }" class="absolute text-right">{{ totalPercent }}%</span>
<span class="font-medium">1TB</span>
</div>
</template>
<template #end>
<div class="flex justify-content-between mt-3">
<Button label="Manage Storage" outlined size="small" />
<Button label="Update Plan" size="small" />
</div>
</template>
</MeterGroup>
`,
options: `
<template>
<div class="card">
<MeterGroup :value="value" labelPosition="start">
<template #label="{ value }">
<div class="flex flex-wrap gap-3">
<template v-for="val of value" :key="val.label">
<Card class="flex-1">
<template #content>
<div class="flex justify-content-between gap-5">
<div class="flex flex-column gap-1">
<span class="text-secondary text-sm">{{ val.label }}</span>
<span class="font-bold text-lg">{{ val.value }}%</span>
</div>
<span class="w-2rem h-2rem border-circle inline-flex justify-content-center align-items-center text-center" :style="{ backgroundColor: \`\${val.color1}\`, color: '#ffffff' }">
<i :class="val.icon" />
</span>
</div>
</template>
</Card>
</template>
</div>
</template>
<template #meter="slotProps">
<span :class="slotProps.class" :style="{ background: \`linear-gradient(to right, \${slotProps.value.color1}, \${slotProps.value.color2})\`, width: slotProps.size }" />
</template>
<template #start="{ totalPercent }">
<div class="flex justify-content-between mt-3 mb-2 relative">
<span>Storage</span>
<span :style="{ width: totalPercent + '%' }" class="absolute text-right">{{ totalPercent }}%</span>
<span class="font-medium">1TB</span>
</div>
</template>
<template #end>
<div class="flex justify-content-between mt-3">
<Button label="Manage Storage" outlined size="small" />
<Button label="Update Plan" size="small" />
</div>
</template>
</MeterGroup>
</div>
</template>
<script>
export default {
data() {
return {
value: [
{ label: 'Apps', color1: '#34d399', color2: '#fbbf24', value: 25, icon: 'pi pi-table' },
{ label: 'Messages', color1: '#fbbf24', color2: '#60a5fa', value: 15, icon: 'pi pi-inbox' },
{ label: 'Media', color1: '#60a5fa', color2: '#c084fc', value: 20, icon: 'pi pi-image' },
{ label: 'System', color1: '#c084fc', color2: '#c084fc', value: 10, icon: 'pi pi-cog' }
]
};
}
};
<\/script>
`,
composition: `
<template>
<div class="card">
<MeterGroup :value="value" labelPosition="start">
<template #label="{ value }">
<div class="flex flex-wrap gap-3">
<template v-for="val of value" :key="i">
<Card class="flex-1">
<template #content>
<div class="flex justify-content-between gap-5">
<div class="flex flex-column gap-1">
<span class="text-secondary text-sm">{{ val.label }}</span>
<span class="font-bold text-lg">{{ val.value }}%</span>
</div>
<span class="w-2rem h-2rem border-circle inline-flex justify-content-center align-items-center text-center" :style="{ backgroundColor: \`\${val.color1}\`, color: '#ffffff' }">
<i :class="val.icon" />
</span>
</div>
</template>
</Card>
</template>
</div>
</template>
<template #meter="slotProps">
<span :class="slotProps.class" :style="{ background: \`linear-gradient(to right, \${slotProps.value.color1}, \${slotProps.value.color2})\`, width: slotProps.size }" />
</template>
<template #start="{ totalPercent }">
<div class="flex justify-content-between mt-3 mb-2 relative">
<span>Storage</span>
<span :style="{ width: totalPercent + '%' }" class="absolute text-right">{{ totalPercent }}%</span>
<span class="font-medium">1TB</span>
</div>
</template>
<template #end>
<div class="flex justify-content-between mt-3">
<Button label="Manage Storage" outlined size="small" />
<Button label="Update Plan" size="small" />
</div>
</template>
</MeterGroup>
</div>
</template>
<script setup>
import { ref } from "vue";
const value = ref([
{ label: 'Apps', color1: '#34d399', color2: '#fbbf24', value: 25, icon: 'pi pi-table' },
{ label: 'Messages', color1: '#fbbf24', color2: '#60a5fa', value: 15, icon: 'pi pi-inbox' },
{ label: 'Media', color1: '#60a5fa', color2: '#c084fc', value: 20, icon: 'pi pi-image' },
{ label: 'System', color1: '#c084fc', color2: '#c084fc', value: 10, icon: 'pi pi-cog' }
]);
<\/script>
`
}
};
}
};
</script>

153
doc/metergroup/TemplatingDoc.vue
View File

@ -1,153 +0,0 @@
<template>
<DocSectionText v-bind="$attrs">
<p>
MeterGroup offers meter customization with the <i>meter</i> template that receives the meter instance from the value as a parameter and also <i>label</i> template receives value instance. In addition, the <i>start</i> and <i>end</i> slots
are available to define the start and end templating for MeterGroup respectively.
</p>
</DocSectionText>
<div class="card">
<MeterGroup :value="value" labelPosition="start">
<template #label="{ value }">
<div class="flex flex-column text-sm gap-2">
<template v-for="(val, i) of value" :key="i">
<span :style="{ color: val.color }" class="flex gap-2">
<i :class="val.icon" />
{{ val.label }} ({{ val.value }}%)</span
>
</template>
</div>
</template>
<template #start="{ totalPercent }">
<div class="flex justify-content-between mt-3 mb-2">
<span>Account </span>
<span :style="{ width: totalPercent + '%' }" class="absolute text-right">{{ totalPercent }}%</span>
<span>Savings: 1000$ </span>
</div>
</template>
<template #meter="slotProps">
<span :class="slotProps.class" :style="{ backgroundColor: slotProps.value.color, width: slotProps.size }" />
</template>
</MeterGroup>
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
value: [
{ color: '#239EF0', label: 'Mortgage', value: 25, icon: 'pi pi-home' },
{ color: '#FAA419', label: 'Loan', value: 15, icon: 'pi pi-money-bill' },
{ color: '#EE5879', label: 'Credit Card', value: 20, icon: 'pi pi-credit-card' }
],
code: {
basic: `
<MeterGroup :value="value" labelPosition="start">
<template #label="{ value }">
<div class="flex flex-column text-sm gap-2">
<template v-for="(val, i) of value" :key="i">
<span :style="{ color: val.color }" class="flex gap-2">
<i :class="val.icon" />
{{ val.label }} ({{ val.value }}%)</span
>
</template>
</div>
</template>
<template #start="{ totalPercent }">
<div class="flex justify-content-between mt-3 mb-2">
<span>Account </span>
<span :style="{ width: totalPercent + '%' }" class="absolute text-right">{{ totalPercent }}%</span>
<span>Savings: 1000$ </span>
</div>
</template>
<template #meter="slotProps">
<span :class="slotProps.class" :style="{ backgroundColor: slotProps.value.color, width: slotProps.size }" />
</template>
</MeterGroup>
`,
options: `
<template>
<div class="card">
<MeterGroup :value="value" labelPosition="start">
<template #label="{ value }">
<div class="flex flex-column text-sm gap-2">
<template v-for="(val, i) of value" :key="i">
<span :style="{ color: val.color }" class="flex gap-2">
<i :class="val.icon" />
{{ val.label }} ({{ val.value }}%)</span
>
</template>
</div>
</template>
<template #start="{ totalPercent }">
<div class="flex justify-content-between mt-3 mb-2">
<span>Account </span>
<span :style="{ width: totalPercent + '%' }" class="absolute text-right">{{ totalPercent }}%</span>
<span>Savings: 1000$ </span>
</div>
</template>
<template #meter="slotProps">
<span :class="slotProps.class" :style="{ backgroundColor: slotProps.value.color, width: slotProps.size }" />
</template>
</MeterGroup>
</div>
</template>
<script>
export default {
data() {
return {
value: [
{ color: '#239EF0', label: 'Mortgage', value: 25 },
{ color: '#FAA419', label: 'Loan', value: 15 },
{ color: '#EE5879', label: 'Credit Card', value: 20 }
]
};
}
};
<\/script>
`,
composition: `
<template>
<div class="card">
<MeterGroup :value="value" labelPosition="start">
<template #label="{ value }">
<div class="flex flex-column text-sm gap-2">
<template v-for="(val, i) of value" :key="i">
<span :style="{ color: val.color }" class="flex gap-2">
<i :class="val.icon" />
{{ val.label }} ({{ val.value }}%)</span
>
</template>
</div>
</template>
<template #start="{ totalPercent }">
<div class="flex justify-content-between mt-3 mb-2">
<span>Account </span>
<span :style="{ width: totalPercent + '%' }" class="absolute text-right">{{ totalPercent }}%</span>
<span>Savings: 1000$ </span>
</div>
</template>
<template #meter="slotProps">
<span :class="slotProps.class" :style="{ backgroundColor: slotProps.value.color, width: slotProps.size }" />
</template>
</MeterGroup>
</div>
</template>
<script setup>
import { ref } from "vue";
const value = ref([
{ color: '#239EF0', label: 'Mortgage', value: 25 },
{ color: '#FAA419', label: 'Loan', value: 15 },
{ color: '#EE5879', label: 'Credit Card', value: 20 }
]);
<\/script>
`
}
};
}
};
</script>

37
doc/metergroup/VerticalDoc.vue
View File

@ -1,9 +1,9 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Layout of the MeterGroup is configured with the <i>orientation</i> property that accepts <i>horizontal</i> and <i>vertical</i> as options.</p>
<p>Layout of the MeterGroup is configured with the <i>orientation</i> property that accepts either <i>horizontal</i> or <i>vertical</i> as available options.</p>
</DocSectionText>
<div class="card flex justify-content-center" style="height: 350px">
<MeterGroup :value="value" orientation="vertical" />
<div class="card flex justify-content-center" style="height: 360px">
<MeterGroup :value="value" orientation="vertical" labelOrientation="vertical" />
</div>
<DocSectionCode :code="code" />
</template>
@ -13,18 +13,19 @@ export default {
data() {
return {
value: [
{ color: '#4ADE81', label: 'E-mails', value: 17 },
{ color: '#FB923C', label: 'Messages', value: 36 },
{ color: '#C084FC', label: 'Other', value: 24 }
{ label: 'Apps', color: '#34d399', value: 24 },
{ label: 'Messages', color: '#fbbf24', value: 16 },
{ label: 'Media', color: '#60a5fa', value: 24 },
{ label: 'System', color: '#c084fc', value: 12 }
],
code: {
basic: `
<MeterGroup :value="value" orientation="vertical" />
<MeterGroup :value="value" orientation="vertical" labelOrientation="vertical" />
`,
options: `
<template>
<div class="card flex justify-content-center" style="height: 350px">
<MeterGroup :value="value" orientation="vertical" />
<div class="card flex justify-content-center" style="height: 360px">
<MeterGroup :value="value" orientation="vertical" labelOrientation="vertical" />
</div>
</template>
@ -33,9 +34,10 @@ export default {
data() {
return {
value: [
{ color: '#4ADE81', label: 'E-mails', value: 17 },
{ color: '#FB923C', label: 'Messages', value: 36 },
{ color: '#C084FC', label: 'Other', value: 24 }
{ label: 'Apps', color: '#34d399', value: 24 },
{ label: 'Messages', color: '#fbbf24', value: 16 },
{ label: 'Media', color: '#60a5fa', value: 24 },
{ label: 'System', color: '#c084fc', value: 12 }
]
};
}
@ -44,8 +46,8 @@ export default {
`,
composition: `
<template>
<div class="card flex justify-content-center" style="height: 350px">
<MeterGroup :value="value" orientation="vertical" />
<div class="card flex justify-content-center" style="height: 360px">
<MeterGroup :value="value" orientation="vertical" labelOrientation="vertical" />
</div>
</template>
@ -53,9 +55,10 @@ export default {
import { ref } from "vue";
const value = ref([
{ color: '#4ADE81', label: 'E-mails', value: 17 },
{ color: '#FB923C', label: 'Messages', value: 36 },
{ color: '#C084FC', label: 'Other', value: 24 }
{ label: 'Apps', color: '#34d399', value: 24 },
{ label: 'Messages', color: '#fbbf24', value: 16 },
{ label: 'Media', color: '#60a5fa', value: 24 },
{ label: 'System', color: '#c084fc', value: 12 }
]);
<\/script>
`

138
doc/toolbar/CustomDoc.vue
View File

@ -1,34 +1,31 @@
<template>
<DocSectionText v-bind="$attrs">
<p>A customized toolbar with navigation bar like functionality.</p>
<p>A customized toolbar with navigation bar functionality.</p>
</DocSectionText>
<div class="card">
<Toolbar class="bg-gray-900" style="border-radius: 3rem; background-image: linear-gradient(to right, var(--bluegray-500), var(--bluegray-800))">
<Toolbar style="border-radius: 3rem; padding: 1rem 1rem 1rem 1.5rem">
<template #start>
<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
fill="#ffffff"
/>
<path
d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
fill="#10b981"
/>
</svg>
</template>
<template #center>
<div class="flex flex-wrap align-items-center gap-3">
<button class="p-link inline-flex justify-content-center align-items-center text-white h-3rem w-3rem border-circle hover:bg-white-alpha-10 transition-all transition-duration-200"><i class="pi pi-home text-2xl"></i></button>
<button class="p-link inline-flex justify-content-center align-items-center text-white h-3rem w-3rem border-circle hover:bg-white-alpha-10 transition-all transition-duration-200"><i class="pi pi-user text-2xl"></i></button>
<button class="p-link inline-flex justify-content-center align-items-center text-white h-3rem w-3rem border-circle hover:bg-white-alpha-10 transition-all transition-duration-200"><i class="pi pi-search text-2xl"></i></button>
<div class="flex align-items-center gap-2">
<svg viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" style="width: 2rem; margin-right: 1rem">
<path
d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
fill="var(--text-color)"
/>
<path
d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
fill="var(--surface-card)"
/>
</svg>
<Button label="Files" text plain />
<Button label="Edit" text plain />
<Button label="View" text plain />
</div>
</template>
<template #end>
<div class="flex align-items-center gap-2">
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
<span class="font-bold text-bluegray-50">Amy Elsner</span>
<Button label="Share" severity="contrast" size="small" />
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" style="width: 32px; height: 32px" />
</div>
</template>
</Toolbar>
@ -42,26 +39,23 @@ export default {
return {
code: {
basic: `
<Toolbar class="bg-gray-900" style="border-radius: 3rem; background-image: linear-gradient(to right, var(--bluegray-500), var(--bluegray-800))">
<Toolbar style="border-radius: 3rem; padding: 1rem 1rem 1rem 1.5rem">
<template #start>
<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="..." fill="#ffffff" />
<path d="..." fill="#10b981" />
</svg>
</template>
<template #center>
<div class="flex flex-wrap align-items-center gap-3">
<button class="p-link inline-flex justify-content-center align-items-center text-white h-3rem w-3rem border-circle hover:bg-white-alpha-10 transition-all transition-duration-200"><i class="pi pi-home text-2xl"></i></button>
<button class="p-link inline-flex justify-content-center align-items-center text-white h-3rem w-3rem border-circle hover:bg-white-alpha-10 transition-all transition-duration-200"><i class="pi pi-user text-2xl"></i></button>
<button class="p-link inline-flex justify-content-center align-items-center text-white h-3rem w-3rem border-circle hover:bg-white-alpha-10 transition-all transition-duration-200"><i class="pi pi-search text-2xl"></i></button>
<div class="flex align-items-center gap-2">
<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="..." fill="var(--text-color)" />
<path d="..." fill="var(--surface-card)" />
</svg>
<Button label="Files" text plain />
<Button label="Edit" text plain />
<Button label="View" text plain />
</div>
</template>
<template #end>
<div class="flex align-items-center gap-2">
<Avatar image="/images/avatar/amyelsner.png" shape="circle" />
<span class="font-bold text-bluegray-50">Amy Elsner</span>
<Button label="Share" severity="contrast" size="small" />
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" style="width: 32px; height: 32px" />
</div>
</template>
</Toolbar>
@ -69,32 +63,29 @@ export default {
options: `
<template>
<div class="card">
<Toolbar class="bg-gray-900" style="border-radius: 3rem; background-image: linear-gradient(to right, var(--bluegray-500), var(--bluegray-800))">
<Toolbar style="border-radius: 3rem; padding: 1rem 1rem 1rem 1.5rem">
<template #start>
<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
fill="#ffffff"
/>
<path
d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
fill="#10b981"
/>
</svg>
</template>
<template #center>
<div class="flex flex-wrap align-items-center gap-3">
<button class="p-link inline-flex justify-content-center align-items-center text-white h-3rem w-3rem border-circle hover:bg-white-alpha-10 transition-all transition-duration-200"><i class="pi pi-home text-2xl"></i></button>
<button class="p-link inline-flex justify-content-center align-items-center text-white h-3rem w-3rem border-circle hover:bg-white-alpha-10 transition-all transition-duration-200"><i class="pi pi-user text-2xl"></i></button>
<button class="p-link inline-flex justify-content-center align-items-center text-white h-3rem w-3rem border-circle hover:bg-white-alpha-10 transition-all transition-duration-200"><i class="pi pi-search text-2xl"></i></button>
<div class="flex align-items-center gap-2">
<svg viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" style="width: 2rem; margin-right: 1rem">
<path
d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
fill="var(--text-color)"
/>
<path
d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
fill="var(--surface-card)"
/>
</svg>
<Button label="Files" text plain />
<Button label="Edit" text plain />
<Button label="View" text plain />
</div>
</template>
<template #end>
<div class="flex align-items-center gap-2">
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
<span class="font-bold text-bluegray-50">Amy Elsner</span>
<Button label="Share" severity="contrast" size="small" />
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" style="width: 32px; height: 32px" />
</div>
</template>
</Toolbar>
@ -107,32 +98,29 @@ export default {
composition: `
<template>
<div class="card">
<Toolbar class="bg-gray-900" style="border-radius: 3rem; background-image: linear-gradient(to right, var(--bluegray-500), var(--bluegray-800))">
<Toolbar style="border-radius: 3rem; padding: 1rem 1rem 1rem 1.5rem">
<template #start>
<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
fill="#ffffff"
/>
<path
d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
fill="#10b981"
/>
</svg>
</template>
<template #center>
<div class="flex flex-wrap align-items-center gap-3">
<button class="p-link inline-flex justify-content-center align-items-center text-white h-3rem w-3rem border-circle hover:bg-white-alpha-10 transition-all transition-duration-200"><i class="pi pi-home text-2xl"></i></button>
<button class="p-link inline-flex justify-content-center align-items-center text-white h-3rem w-3rem border-circle hover:bg-white-alpha-10 transition-all transition-duration-200"><i class="pi pi-user text-2xl"></i></button>
<button class="p-link inline-flex justify-content-center align-items-center text-white h-3rem w-3rem border-circle hover:bg-white-alpha-10 transition-all transition-duration-200"><i class="pi pi-search text-2xl"></i></button>
<div class="flex align-items-center gap-2">
<svg viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" style="width: 2rem; margin-right: 1rem">
<path
d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
fill="var(--text-color)"
/>
<path
d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
fill="var(--surface-card)"
/>
</svg>
<Button label="Files" text plain />
<Button label="Edit" text plain />
<Button label="View" text plain />
</div>
</template>
<template #end>
<div class="flex align-items-center gap-2">
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
<span class="font-bold text-bluegray-50">Amy Elsner</span>
<Button label="Share" severity="contrast" size="small" />
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" style="width: 32px; height: 32px" />
</div>
</template>
</Toolbar>

4
layouts/AppMenuItem.vue
View File

@ -13,14 +13,14 @@
<i :class="menuitem.icon"></i>
</span>
<span>{{ menuitem.name }}</span>
<Badge v-if="menuitem.badge" :value="menuitem.badge" class="ml-auto"></Badge>
<Tag v-if="menuitem.badge" :value="menuitem.badge" class="ml-auto"></Tag>
</a>
<PrimeVueNuxtLink v-if="menuitem.to" :to="menuitem.to" :class="{ 'router-link-active': menuitem.to === $route.fullPath }">
<span v-if="menuitem.icon && root" class="menu-icon">
<i :class="menuitem.icon"></i>
</span>
<span>{{ menuitem.name }}</span>
<Badge v-if="menuitem.badge" :value="menuitem.badge" class="ml-auto"></Badge>
<Tag v-if="menuitem.badge" :value="menuitem.badge"></Tag>
</PrimeVueNuxtLink>
<span v-if="!root && menuitem.children" class="menu-child-category">{{ menuitem.name }}</span>

1
layouts/default.vue
View File

@ -121,7 +121,6 @@ export default {
{
'layout-news-active': this.$appState.newsActive,
'p-ripple-disabled': this.$appState.ripple === false,
'p-input-filled': this.$primevue.config.inputStyle === 'filled',
'layout-dark': this.$appState.darkTheme,
'layout-light': !this.$appState.darkTheme
}

28
pages/metergroup/index.vue
View File

@ -1,16 +1,25 @@
<template>
<DocComponent title="Vue MeterGroup Component" header="MeterGroup" description="MeterGroup is a group of process status indicators." :componentDocs="docs" :apiDocs="['MeterGroup']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
<DocComponent
title="Vue MeterGroup Component"
header="MeterGroup"
description="MeterGroup displays scalar measurements within a known range."
:componentDocs="docs"
:apiDocs="['MeterGroup']"
:ptTabComponent="ptComponent"
:themingDocs="themingDoc"
/>
</template>
<script>
import AccessibilityDoc from '@/doc/metergroup/AccessibilityDoc.vue';
import BasicDoc from '@/doc/metergroup/BasicDoc.vue';
import MultipleDoc from '@/doc/metergroup/MultipleDoc.vue';
import IconDoc from '@/doc/metergroup/IconDoc.vue';
import ImportDoc from '@/doc/metergroup/ImportDoc.vue';
import VerticalDoc from '@/doc/metergroup/VerticalDoc.vue';
import LabelDoc from '@/doc/metergroup/LabelDoc.vue';
import TemplatingDoc from '@/doc/metergroup/TemplatingDoc.vue';
import MinMaxDoc from '@/doc/metergroup/MinMaxDoc.vue';
import MultipleDoc from '@/doc/metergroup/MultipleDoc.vue';
import TemplateDoc from '@/doc/metergroup/TemplateDoc.vue';
import VerticalDoc from '@/doc/metergroup/VerticalDoc.vue';
import PTComponent from '@/doc/metergroup/pt/index.vue';
import ThemingDoc from '@/doc/metergroup/theming/index.vue';
@ -33,6 +42,11 @@ export default {
label: 'Multiple',
component: MultipleDoc
},
{
id: 'icon',
label: 'Icon',
component: IconDoc
},
{
id: 'label',
label: 'Label',
@ -49,9 +63,9 @@ export default {
component: MinMaxDoc
},
{
id: 'templating',
label: 'Templating',
component: TemplatingDoc
id: 'template',
label: 'Template',
component: TemplateDoc
},
{
id: 'accessibility',

4657
public/themes/arya-blue/theme.css
View File

File diff suppressed because it is too large Load Diff

4657
public/themes/arya-green/theme.css
View File

File diff suppressed because it is too large Load Diff

Some files were not shown because too many files have changed in this diff Show More