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

Refactor #4504

pull/4556/head
Tuğçe Küçükoğlu 2023-09-25 22:11:55 +03:00
parent aca8d3ecf7
commit e6499c0365
73 changed files with 4097 additions and 3951 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
components/lib/accordion/BaseAccordion.vue
View File

@ -3,21 +3,23 @@ import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
.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;
@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;
}
}
`;

160
components/lib/autocomplete/BaseAutoComplete.vue
View File

@ -4,100 +4,102 @@ import { useStyle } from 'primevue/usestyle';
import { ObjectUtils } from 'primevue/utils';
const styles = `
.p-autocomplete {
display: inline-flex;
}
@layer primevue {
.p-autocomplete {
display: inline-flex;
}
.p-autocomplete-loader {
position: absolute;
top: 50%;
margin-top: -0.5rem;
}
.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 {
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-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-dd .p-autocomplete-dropdown {
border-top-left-radius: 0;
border-bottom-left-radius: 0px;
}
.p-autocomplete .p-autocomplete-panel {
min-width: 100%;
}
.p-autocomplete .p-autocomplete-panel {
min-width: 100%;
}
.p-autocomplete-panel {
position: absolute;
overflow: auto;
top: 0;
left: 0;
}
.p-autocomplete-panel {
position: absolute;
overflow: auto;
top: 0;
left: 0;
}
.p-autocomplete-items {
margin: 0;
padding: 0;
list-style-type: none;
}
.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-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-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 {
cursor: default;
display: inline-flex;
align-items: center;
flex: 0 0 auto;
}
.p-autocomplete-token-icon {
cursor: pointer;
}
.p-autocomplete-token-icon {
cursor: pointer;
}
.p-autocomplete-input-token {
flex: 1 1 auto;
display: inline-flex;
}
.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-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 {
display: flex;
}
.p-fluid .p-autocomplete-dd .p-autocomplete-input {
width: 1%;
.p-fluid .p-autocomplete-dd .p-autocomplete-input {
width: 1%;
}
}
`;

58
components/lib/avatar/BaseAvatar.vue
View File

@ -3,34 +3,36 @@ import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
.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%;
@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%;
}
}
`;

16
components/lib/avatargroup/BaseAvatarGroup.vue
View File

@ -3,13 +3,15 @@ import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
.p-avatar-group .p-avatar + .p-avatar {
margin-left: -1rem;
}
.p-avatar-group {
display: flex;
align-items: center;
@layer primevue {
.p-avatar-group .p-avatar + .p-avatar {
margin-left: -1rem;
}
.p-avatar-group {
display: flex;
align-items: center;
}
}
`;

64
components/lib/badge/BaseBadge.vue
View File

@ -4,37 +4,39 @@ import { useStyle } from 'primevue/usestyle';
import { ObjectUtils } from 'primevue/utils';
const styles = `
.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%;
@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%;
}
}
`;

62
components/lib/badgedirective/BaseBadgeDirective.js
View File

@ -2,37 +2,39 @@ import BaseDirective from 'primevue/basedirective';
import { useStyle } from 'primevue/usestyle';
const styles = `
.p-badge {
display: inline-block;
border-radius: 10px;
text-align: center;
padding: 0 .5rem;
}
@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-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%;
.p-badge-no-gutter {
padding: 0;
border-radius: 50%;
}
}
`;

2
components/lib/basecomponent/BaseComponent.vue
View File

@ -231,6 +231,7 @@ const radioButtonStyles = `
}
`;
const styles = `
@layer primevue {
.p-component, .p-component * {
box-sizing: border-box;
}
@ -354,6 +355,7 @@ ${buttonStyles}
${checkboxStyles}
${inputTextStyles}
${radioButtonStyles}
}
`;
const { load: loadStyle } = useStyle(styles, { name: 'common', manual: true });

22
components/lib/blockui/BaseBlockUI.vue
View File

@ -3,16 +3,18 @@ import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
.p-blockui-container {
position: relative;
}
.p-blockui.p-component-overlay {
position: absolute;
}
.p-blockui-document.p-component-overlay {
position: fixed;
@layer primevue {
.p-blockui-container {
position: relative;
}
.p-blockui.p-component-overlay {
position: absolute;
}
.p-blockui-document.p-component-overlay {
position: fixed;
}
}
`;

62
components/lib/breadcrumb/BaseBreadcrumb.vue
View File

@ -3,36 +3,38 @@ import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
.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;
@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;
}
}
`;

290
components/lib/calendar/BaseCalendar.vue
View File

@ -3,150 +3,152 @@ import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
.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;
}
/* 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;
@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;
}
/* 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;
}
}
`;

138
components/lib/carousel/BaseCarousel.vue
View File

@ -3,74 +3,76 @@ import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
.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;
@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;
}
}
`;

160
components/lib/cascadeselect/BaseCascadeSelect.vue
View File

@ -3,85 +3,87 @@ import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
.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 !important;
}
.p-cascadeselect-item-active > .p-cascadeselect-sublist {
display: block;
left: 100%;
top: 0;
@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 !important;
}
.p-cascadeselect-item-active > .p-cascadeselect-sublist {
display: block;
left: 100%;
top: 0;
}
}
`;

6
components/lib/chart/BaseChart.vue
View File

@ -3,8 +3,10 @@ import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
.p-chart {
position: relative;
@layer primevue {
.p-chart {
position: relative;
}
}
`;

42
components/lib/chip/BaseChip.vue
View File

@ -3,26 +3,28 @@ import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
.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%;
@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%;
}
}
`;

90
components/lib/chips/BaseChips.vue
View File

@ -3,50 +3,52 @@ import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
.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;
@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;
}
}
`;

14
components/lib/colorpicker/BaseColorPicker.vue
View File

@ -3,12 +3,14 @@ import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
.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)
@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)
}
}
`;

138
components/lib/confirmpopup/BaseConfirmPopup.vue
View File

@ -3,74 +3,76 @@ import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
.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;
@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;
}
}
`;

80
components/lib/contextmenu/BaseContextMenu.vue
View File

@ -3,45 +3,47 @@ import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
.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 {
opacity: 0;
}
.p-contextmenu-enter-active {
transition: opacity 250ms;
@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 {
opacity: 0;
}
.p-contextmenu-enter-active {
transition: opacity 250ms;
}
}
`;

468
components/lib/datatable/BaseDataTable.vue
View File

@ -3,239 +3,241 @@ import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
.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 !important;
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;
@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 !important;
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;
}
}
`;

262
components/lib/dialog/BaseDialog.vue
View File

@ -3,136 +3,138 @@ import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
.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 {
-webkit-transition: none;
transition: none;
transform: none;
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;
@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 {
-webkit-transition: none;
transition: none;
transform: none;
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;
}
}
`;

120
components/lib/divider/BaseDivider.vue
View File

@ -3,65 +3,67 @@ import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
.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;
@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;
}
}
`;

210
components/lib/dock/BaseDock.vue
View File

@ -3,110 +3,112 @@ import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
.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;
@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;
}
}
`;

184
components/lib/dropdown/BaseDropdown.vue
View File

@ -3,97 +3,99 @@ import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
.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;
}
.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%;
@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;
}
.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%;
}
}
`;

36
components/lib/fieldset/BaseFieldset.vue
View File

@ -3,23 +3,25 @@ import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
.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;
@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;
}
}
`;

86
components/lib/fileupload/BaseFileUpload.vue
View File

@ -3,48 +3,50 @@ import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
.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;
@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;
}
}
`;

564
components/lib/galleria/BaseGalleria.vue
View File

@ -3,287 +3,289 @@ import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
.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;
}
.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;
@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;
}
.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;
}
}
`;

126
components/lib/image/BaseImage.vue
View File

@ -3,68 +3,70 @@ import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
.p-image-mask {
display: flex;
align-items: center;
justify-content: center;
}
.p-image-preview-container {
position: relative;
display: inline-block;
}
.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;
}
.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;
}
.p-image-action.p-link {
display: flex;
justify-content: center;
align-items: center;
}
.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);
@layer primevue {
.p-image-mask {
display: flex;
align-items: center;
justify-content: center;
}
.p-image-preview-container {
position: relative;
display: inline-block;
}
.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;
}
.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;
}
.p-image-action.p-link {
display: flex;
justify-content: center;
align-items: center;
}
.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);
}
}
`;

30
components/lib/inlinemessage/BaseInlineMessage.vue
View File

@ -3,20 +3,22 @@ import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
.p-inline-message {
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: top;
}
.p-inline-message-icon-only .p-inline-message-text {
visibility: hidden;
width: 0;
}
.p-fluid .p-inline-message {
display: flex;
@layer primevue {
.p-inline-message {
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: top;
}
.p-inline-message-icon-only .p-inline-message-text {
visibility: hidden;
width: 0;
}
.p-fluid .p-inline-message {
display: flex;
}
}
`;

34
components/lib/inplace/BaseInplace.vue
View File

@ -3,22 +3,24 @@ import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
.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%;
@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%;
}
}
`;

200
components/lib/inputnumber/BaseInputNumber.vue
View File

@ -3,105 +3,107 @@ import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
.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%;
@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%;
}
}
`;

38
components/lib/inputswitch/BaseInputSwitch.vue
View File

@ -3,24 +3,26 @@ import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
.p-inputswitch {
display: inline-block;
}
.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%;
@layer primevue {
.p-inputswitch {
display: inline-block;
}
.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%;
}
}
`;

26
components/lib/knob/BaseKnob.vue
View File

@ -8,18 +8,20 @@ const styles = `
stroke-dashoffset: 0;
}
}
.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;
@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;
}
}
`;

66
components/lib/listbox/BaseListbox.vue
View File

@ -3,38 +3,40 @@ import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
.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%;
@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%;
}
}
`;

220
components/lib/megamenu/BaseMegaMenu.vue
View File

@ -3,115 +3,117 @@ import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
.p-megamenu {
display: flex;
}
.p-megamenu-root-list {
margin: 0;
padding: 0;
list-style: none;
}
.p-megamenu-root-list > .p-menuitem {
position: relative;
}
.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;
position: absolute;
width: auto;
z-index: 1;
}
.p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel {
display: block;
}
.p-megamenu-submenu {
margin: 0;
padding: 0;
list-style: 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 .p-megamenu-root-list {
flex-direction: column;
}
.p-megamenu-vertical .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%;
@layer primevue {
.p-megamenu {
display: flex;
}
.p-megamenu-root-list {
margin: 0;
padding: 0;
list-style: none;
}
.p-megamenu-root-list > .p-menuitem {
position: relative;
}
.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;
position: absolute;
width: auto;
z-index: 1;
}
.p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel {
display: block;
}
.p-megamenu-submenu {
margin: 0;
padding: 0;
list-style: 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 .p-megamenu-root-list {
flex-direction: column;
}
.p-megamenu-vertical .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%;
}
}
`;

36
components/lib/menu/BaseMenu.vue
View File

@ -3,23 +3,25 @@ import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
.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;
@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;
}
}
`;

142
components/lib/menubar/BaseMenubar.vue
View File

@ -3,76 +3,78 @@ import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
.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;
@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;
}
}
`;

96
components/lib/message/BaseMessage.vue
View File

@ -3,53 +3,55 @@ import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
.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 !important;
}
.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;
@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 !important;
}
.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;
}
}
`;

210
components/lib/multiselect/BaseMultiSelect.vue
View File

@ -3,110 +3,112 @@ import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
.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;
@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;
}
}
`;

74
components/lib/orderlist/BaseOrderList.vue
View File

@ -3,42 +3,44 @@ import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
.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;
@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;
}
}
`;

104
components/lib/organizationchart/BaseOrganizationChart.vue
View File

@ -3,57 +3,59 @@ import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
.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;
@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;
}
}
`;

138
components/lib/overlaypanel/BaseOverlayPanel.vue
View File

@ -3,74 +3,76 @@ import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
.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;
@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;
}
}
`;

78
components/lib/paginator/BasePaginator.vue
View File

@ -3,44 +3,46 @@ import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
.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;
@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;
}
}
`;

38
components/lib/panel/BasePanel.vue
View File

@ -3,24 +3,26 @@ import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
.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;
@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;
}
}
`;

64
components/lib/panelmenu/BasePanelMenu.vue
View File

@ -3,37 +3,39 @@ import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
.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;
@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;
}
}
`;

52
components/lib/password/BasePassword.vue
View File

@ -3,31 +3,33 @@ import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
.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;
@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;
}
}
`;

66
components/lib/picklist/BasePickList.vue
View File

@ -3,38 +3,40 @@ import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
.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 !important;
@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 !important;
}
}
`;

196
components/lib/progressbar/BaseProgressBar.vue
View File

@ -3,112 +3,114 @@ import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
.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%;
@layer primevue {
.p-progressbar {
position: relative;
overflow: hidden;
}
60% {
left: 100%;
right: -90%;
.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;
}
100% {
left: 100%;
right: -90%;
.p-progressbar-determinate .p-progressbar-label {
display: inline-flex;
}
}
@keyframes p-progressbar-indeterminate-anim {
0% {
left: -35%;
right: 100%;
.p-progressbar-determinate .p-progressbar-value-animate {
transition: width 1s ease-in-out;
}
60% {
left: 100%;
right: -90%;
.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;
}
100% {
left: 100%;
right: -90%;
.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-short {
0% {
left: -200%;
right: 100%;
@-webkit-keyframes p-progressbar-indeterminate-anim {
0% {
left: -35%;
right: 100%;
}
60% {
left: 100%;
right: -90%;
}
100% {
left: 100%;
right: -90%;
}
}
60% {
left: 107%;
right: -8%;
@keyframes p-progressbar-indeterminate-anim {
0% {
left: -35%;
right: 100%;
}
60% {
left: 100%;
right: -90%;
}
100% {
left: 100%;
right: -90%;
}
}
100% {
left: 107%;
right: -8%;
@-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%;
@keyframes p-progressbar-indeterminate-anim-short {
0% {
left: -200%;
right: 100%;
}
60% {
left: 107%;
right: -8%;
}
100% {
left: 107%;
right: -8%;
}
}
}
`;

50
components/lib/progressspinner/BaseProgressSpinner.vue
View File

@ -3,30 +3,32 @@ import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
.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;
@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;
}
}
`;

30
components/lib/rating/BaseRating.vue
View File

@ -3,20 +3,22 @@ import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
.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;
@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;
}
}
`;

46
components/lib/ripple/BaseRipple.js
View File

@ -2,34 +2,36 @@ import BaseDirective from 'primevue/basedirective';
import { useStyle } from 'primevue/usestyle';
const styles = `
.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 !important;
}
@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 !important;
}
}
`;
const classes = {

110
components/lib/scrollpanel/BaseScrollPanel.vue
View File

@ -3,60 +3,62 @@ import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
.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: scroll;
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;
@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: scroll;
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;
}
}
`;

64
components/lib/scrolltop/BaseScrollTop.vue
View File

@ -3,37 +3,39 @@ import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
.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;
@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;
}
}
`;

292
components/lib/sidebar/BaseSidebar.vue
View File

@ -3,152 +3,154 @@ import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
.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: flex-end;
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 {
@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: flex-end;
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;
}
}
}
`;

60
components/lib/skeleton/BaseSkeleton.vue
View File

@ -3,36 +3,38 @@ import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
.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%);
@layer primevue {
.p-skeleton {
overflow: hidden;
}
to {
transform: translateX(100%);
.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%);
}
}
}
`;

74
components/lib/slider/BaseSlider.vue
View File

@ -3,42 +3,44 @@ import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
.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%;
@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%;
}
}
`;

152
components/lib/speeddial/BaseSpeedDial.vue
View File

@ -3,81 +3,83 @@ import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
.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);
@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);
}
}
`;

62
components/lib/splitbutton/BaseSplitButton.vue
View File

@ -3,36 +3,38 @@ import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
.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 {
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;
@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 {
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;
}
}
`;

90
components/lib/splitter/BaseSplitter.vue
View File

@ -3,50 +3,52 @@ import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
.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%;
@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%;
}
}
`;

24
components/lib/splitterpanel/BaseSplitterPanel.vue
View File

@ -3,17 +3,19 @@ import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
.p-splitter-panel {
flex-grow: 1;
}
.p-splitter-panel-nested {
display: flex;
}
.p-splitter-panel .p-splitter {
flex-grow: 1;
border: 0 none;
@layer primevue {
.p-splitter-panel {
flex-grow: 1;
}
.p-splitter-panel-nested {
display: flex;
}
.p-splitter-panel .p-splitter {
flex-grow: 1;
border: 0 none;
}
}
`;

102
components/lib/steps/BaseSteps.vue
View File

@ -3,56 +3,58 @@ import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
.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;
}
.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;
@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;
}
.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;
}
}
`;

78
components/lib/tabmenu/BaseTabMenu.vue
View File

@ -3,44 +3,46 @@ import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
.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;
@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;
}
}
`;

138
components/lib/tabview/BaseTabView.vue
View File

@ -3,74 +3,76 @@ import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
.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;
@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;
}
}
`;

30
components/lib/tag/BaseTag.vue
View File

@ -3,20 +3,22 @@ import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
.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;
@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;
}
}
`;

44
components/lib/terminal/BaseTerminal.vue
View File

@ -3,27 +3,29 @@ import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
.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;
@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;
}
}
`;

16
components/lib/textarea/BaseTextarea.vue
View File

@ -3,13 +3,15 @@ import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
.p-inputtextarea-resizable {
overflow: hidden;
resize: none;
}
.p-fluid .p-inputtextarea {
width: 100%;
@layer primevue {
.p-inputtextarea-resizable {
overflow: hidden;
resize: none;
}
.p-fluid .p-inputtextarea {
width: 100%;
}
}
`;

78
components/lib/tieredmenu/BaseTieredMenu.vue
View File

@ -3,44 +3,46 @@ import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
.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;
@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;
}
}
`;

220
components/lib/timeline/BaseTimeline.vue
View File

@ -3,115 +3,117 @@ import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
.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;
@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;
}
}
`;

144
components/lib/toast/BaseToast.vue
View File

@ -3,77 +3,79 @@ import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
.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;
@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;
}
}
`;

38
components/lib/toolbar/BaseToolbar.vue
View File

@ -3,24 +3,26 @@ import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
.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;
@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;
}
}
`;

108
components/lib/tooltip/BaseTooltip.js
View File

@ -2,59 +2,61 @@ import BaseDirective from 'primevue/basedirective';
import { useStyle } from 'primevue/usestyle';
const styles = `
.p-tooltip {
position:absolute;
display:none;
pointer-events: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;
}
.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;
@layer primevue {
.p-tooltip {
position:absolute;
display:none;
pointer-events: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;
}
.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;
}
}
`;

162
components/lib/tree/BaseTree.vue
View File

@ -3,86 +3,88 @@ import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
.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;
@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;
}
}
`;

100
components/lib/treeselect/BaseTreeSelect.vue
View File

@ -3,55 +3,57 @@ import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
.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;
@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;
}
}
`;

336
components/lib/treetable/BaseTreeTable.vue
View File

@ -3,173 +3,175 @@ import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
.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 !important;
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%;
@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 !important;
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%;
}
}
`;