Merge branch 'master' into v4
mertsincan
commit
2c7467b854
|
|
@ -40,6 +40,7 @@
|
||||||
color: var(--surface-900);
|
color: var(--surface-900);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
transition: all .2s;
|
transition: all .2s;
|
||||||
|
position: relative;
|
||||||
border-radius: var(--border-radius);
|
border-radius: var(--border-radius);
|
||||||
|
|
||||||
.menu-icon {
|
.menu-icon {
|
||||||
|
|
@ -52,6 +53,8 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
transition: all .2s;
|
transition: all .2s;
|
||||||
|
position: relative;
|
||||||
|
background-color: transparent;
|
||||||
|
|
||||||
i {
|
i {
|
||||||
color: var(--surface-700);
|
color: var(--surface-700);
|
||||||
|
|
@ -66,6 +69,8 @@
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
.menu-icon {
|
.menu-icon {
|
||||||
|
background-color: var(--surface-card);
|
||||||
|
|
||||||
i {
|
i {
|
||||||
color: var(--primary-color-default);
|
color: var(--primary-color-default);
|
||||||
}
|
}
|
||||||
|
|
@ -102,9 +107,11 @@
|
||||||
transition: all .2s;
|
transition: all .2s;
|
||||||
font-weight: 450;
|
font-weight: 450;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
padding: .5rem .5rem .5rem 1rem;
|
padding: .5rem .5rem .5rem 1rem;
|
||||||
color: var(--surface-700);
|
color: var(--surface-700);
|
||||||
transition: all .2s;
|
transition: all .2s;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
&:focus-visible {
|
&:focus-visible {
|
||||||
outline: 0 none;
|
outline: 0 none;
|
||||||
|
|
@ -139,6 +146,17 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.p-tag {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
|
||||||
|
.p-tag-value {
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.menu-child-category {
|
.menu-child-category {
|
||||||
display: flex;
|
display: flex;
|
||||||
padding: .5rem .5rem .5rem 0;
|
padding: .5rem .5rem .5rem 0;
|
||||||
|
|
|
||||||
|
|
@ -297,12 +297,15 @@ app.component('Dropdown', Dropdown);
|
||||||
app.component('DynamicDialog', DynamicDialog);
|
app.component('DynamicDialog', DynamicDialog);
|
||||||
app.component('Fieldset', Fieldset);
|
app.component('Fieldset', Fieldset);
|
||||||
app.component('FileUpload', FileUpload);
|
app.component('FileUpload', FileUpload);
|
||||||
|
app.component('FloatLabel', FloatLabel);
|
||||||
app.component('Galleria', Galleria);
|
app.component('Galleria', Galleria);
|
||||||
|
app.component('IconField', IconField);
|
||||||
app.component('Image', Image);
|
app.component('Image', Image);
|
||||||
app.component('InlineMessage', InlineMessage);
|
app.component('InlineMessage', InlineMessage);
|
||||||
app.component('Inplace', Inplace);
|
app.component('Inplace', Inplace);
|
||||||
app.component('InputGroup', InputGroup);
|
app.component('InputGroup', InputGroup);
|
||||||
app.component('InputGroupAddon', InputGroupAddon);
|
app.component('InputGroupAddon', InputGroupAddon);
|
||||||
|
app.component('InputIcon', InputIcon);
|
||||||
app.component('InputMask', InputMask);
|
app.component('InputMask', InputMask);
|
||||||
app.component('InputNumber', InputNumber);
|
app.component('InputNumber', InputNumber);
|
||||||
app.component('InputSwitch', InputSwitch);
|
app.component('InputSwitch', InputSwitch);
|
||||||
|
|
|
||||||
|
|
@ -1,26 +1,5 @@
|
||||||
import BaseStyle from 'primevue/base/style';
|
import BaseStyle from 'primevue/base/style';
|
||||||
|
|
||||||
const css = `
|
|
||||||
@layer primevue {
|
|
||||||
.p-accordion-header-action {
|
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
user-select: none;
|
|
||||||
position: relative;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-accordion-header-action:focus {
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-accordion-header-text {
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const classes = {
|
const classes = {
|
||||||
root: 'p-accordion p-component',
|
root: 'p-accordion p-component',
|
||||||
tab: {
|
tab: {
|
||||||
|
|
@ -47,6 +26,5 @@ const classes = {
|
||||||
|
|
||||||
export default BaseStyle.extend({
|
export default BaseStyle.extend({
|
||||||
name: 'accordion',
|
name: 'accordion',
|
||||||
//css, // @todo
|
|
||||||
classes
|
classes
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,106 +1,6 @@
|
||||||
import BaseStyle from 'primevue/base/style';
|
import BaseStyle from 'primevue/base/style';
|
||||||
import { ObjectUtils } from 'primevue/utils';
|
import { ObjectUtils } from 'primevue/utils';
|
||||||
|
|
||||||
const css = `
|
|
||||||
@layer primevue {
|
|
||||||
.p-autocomplete {
|
|
||||||
display: inline-flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-autocomplete-loader {
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
margin-top: -0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-autocomplete-dd .p-autocomplete-input {
|
|
||||||
flex: 1 1 auto;
|
|
||||||
width: 1%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-autocomplete-dd .p-autocomplete-input,
|
|
||||||
.p-autocomplete-dd .p-autocomplete-multiple-container {
|
|
||||||
border-top-right-radius: 0;
|
|
||||||
border-bottom-right-radius: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-autocomplete-dd .p-autocomplete-dropdown {
|
|
||||||
border-top-left-radius: 0;
|
|
||||||
border-bottom-left-radius: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-autocomplete .p-autocomplete-panel {
|
|
||||||
min-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-autocomplete-panel {
|
|
||||||
position: absolute;
|
|
||||||
overflow: auto;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-autocomplete-items {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
list-style-type: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-autocomplete-item {
|
|
||||||
cursor: pointer;
|
|
||||||
white-space: nowrap;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-autocomplete-multiple-container {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
list-style-type: none;
|
|
||||||
cursor: text;
|
|
||||||
overflow: hidden;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-autocomplete-token {
|
|
||||||
cursor: default;
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
flex: 0 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-autocomplete-token-icon {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-autocomplete-input-token {
|
|
||||||
flex: 1 1 auto;
|
|
||||||
display: inline-flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-autocomplete-input-token input {
|
|
||||||
border: 0 none;
|
|
||||||
outline: 0 none;
|
|
||||||
background-color: transparent;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
box-shadow: none;
|
|
||||||
border-radius: 0;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-fluid .p-autocomplete {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-fluid .p-autocomplete-dd .p-autocomplete-input {
|
|
||||||
width: 1%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const inlineStyles = {
|
const inlineStyles = {
|
||||||
root: { position: 'relative' }
|
root: { position: 'relative' }
|
||||||
};
|
};
|
||||||
|
|
@ -159,7 +59,6 @@ const classes = {
|
||||||
|
|
||||||
export default BaseStyle.extend({
|
export default BaseStyle.extend({
|
||||||
name: 'autocomplete',
|
name: 'autocomplete',
|
||||||
css,
|
|
||||||
classes,
|
classes,
|
||||||
inlineStyles
|
inlineStyles
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,39 +1,5 @@
|
||||||
import BaseStyle from 'primevue/base/style';
|
import BaseStyle from 'primevue/base/style';
|
||||||
|
|
||||||
const css = `
|
|
||||||
@layer primevue {
|
|
||||||
.p-avatar {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 2rem;
|
|
||||||
height: 2rem;
|
|
||||||
font-size: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-avatar.p-avatar-image {
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-avatar.p-avatar-circle {
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-avatar-circle img {
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-avatar .p-avatar-icon {
|
|
||||||
font-size: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-avatar img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const classes = {
|
const classes = {
|
||||||
root: ({ props }) => [
|
root: ({ props }) => [
|
||||||
'p-avatar p-component',
|
'p-avatar p-component',
|
||||||
|
|
@ -50,6 +16,5 @@ const classes = {
|
||||||
|
|
||||||
export default BaseStyle.extend({
|
export default BaseStyle.extend({
|
||||||
name: 'avatar',
|
name: 'avatar',
|
||||||
css,
|
|
||||||
classes
|
classes
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,24 +1,10 @@
|
||||||
import BaseStyle from 'primevue/base/style';
|
import BaseStyle from 'primevue/base/style';
|
||||||
|
|
||||||
const css = `
|
|
||||||
@layer primevue {
|
|
||||||
.p-avatar-group .p-avatar + .p-avatar {
|
|
||||||
margin-left: -1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-avatar-group {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const classes = {
|
const classes = {
|
||||||
root: 'p-avatar-group p-component'
|
root: 'p-avatar-group p-component'
|
||||||
};
|
};
|
||||||
|
|
||||||
export default BaseStyle.extend({
|
export default BaseStyle.extend({
|
||||||
name: 'avatargroup',
|
name: 'avatargroup',
|
||||||
css,
|
|
||||||
classes
|
classes
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,43 +1,6 @@
|
||||||
import BaseStyle from 'primevue/base/style';
|
import BaseStyle from 'primevue/base/style';
|
||||||
import { ObjectUtils } from 'primevue/utils';
|
import { ObjectUtils } from 'primevue/utils';
|
||||||
|
|
||||||
const css = `
|
|
||||||
@layer primevue {
|
|
||||||
.p-badge {
|
|
||||||
display: inline-block;
|
|
||||||
border-radius: 10px;
|
|
||||||
text-align: center;
|
|
||||||
padding: 0 .5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-overlay-badge {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-overlay-badge .p-badge {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
transform: translate(50%,-50%);
|
|
||||||
transform-origin: 100% 0;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-badge-dot {
|
|
||||||
width: .5rem;
|
|
||||||
min-width: .5rem;
|
|
||||||
height: .5rem;
|
|
||||||
border-radius: 50%;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-badge-no-gutter {
|
|
||||||
padding: 0;
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const classes = {
|
const classes = {
|
||||||
root: ({ props, instance }) => [
|
root: ({ props, instance }) => [
|
||||||
'p-badge p-component',
|
'p-badge p-component',
|
||||||
|
|
@ -58,6 +21,5 @@ const classes = {
|
||||||
|
|
||||||
export default BaseStyle.extend({
|
export default BaseStyle.extend({
|
||||||
name: 'badge',
|
name: 'badge',
|
||||||
css,
|
|
||||||
classes
|
classes
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,48 +1,10 @@
|
||||||
import BaseStyle from 'primevue/base/style';
|
import BaseStyle from 'primevue/base/style';
|
||||||
|
|
||||||
const css = `
|
|
||||||
@layer primevue {
|
|
||||||
.p-badge {
|
|
||||||
display: inline-block;
|
|
||||||
border-radius: 10px;
|
|
||||||
text-align: center;
|
|
||||||
padding: 0 .5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-overlay-badge {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-overlay-badge .p-badge {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
transform: translate(50%,-50%);
|
|
||||||
transform-origin: 100% 0;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-badge-dot {
|
|
||||||
width: .5rem;
|
|
||||||
min-width: .5rem;
|
|
||||||
height: .5rem;
|
|
||||||
border-radius: 50%;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-badge-no-gutter {
|
|
||||||
padding: 0;
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const classes = {
|
const classes = {
|
||||||
root: 'p-badge p-component'
|
root: 'p-badge p-component'
|
||||||
};
|
};
|
||||||
|
|
||||||
export default BaseStyle.extend({
|
export default BaseStyle.extend({
|
||||||
name: 'badge',
|
name: 'badge',
|
||||||
css,
|
|
||||||
classes
|
classes
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,216 +1,8 @@
|
||||||
import BaseStyle from 'primevue/base/style';
|
import BaseStyle from 'primevue/base/style';
|
||||||
import { useStyle } from 'primevue/usestyle';
|
import { useStyle } from 'primevue/usestyle';
|
||||||
|
|
||||||
const buttonCSS = `
|
|
||||||
.p-button {
|
|
||||||
display: inline-flex;
|
|
||||||
cursor: pointer;
|
|
||||||
user-select: none;
|
|
||||||
align-items: center;
|
|
||||||
vertical-align: bottom;
|
|
||||||
text-align: center;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-button-label {
|
|
||||||
flex: 1 1 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-button-icon-right {
|
|
||||||
order: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-button:disabled {
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-button-icon-only {
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-button-icon-only .p-button-label {
|
|
||||||
visibility: hidden;
|
|
||||||
width: 0;
|
|
||||||
flex: 0 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-button-vertical {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-button-icon-bottom {
|
|
||||||
order: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-buttonset .p-button {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover {
|
|
||||||
border-right: 0 none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-buttonset .p-button:not(:first-of-type):not(:last-of-type) {
|
|
||||||
border-radius: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-buttonset .p-button:first-of-type:not(:only-of-type) {
|
|
||||||
border-top-right-radius: 0;
|
|
||||||
border-bottom-right-radius: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-buttonset .p-button:last-of-type:not(:only-of-type) {
|
|
||||||
border-top-left-radius: 0;
|
|
||||||
border-bottom-left-radius: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-buttonset .p-button:focus {
|
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const inputTextCSS = `
|
|
||||||
.p-fluid .p-inputtext {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-fluid .p-input-icon-left,
|
|
||||||
.p-fluid .p-input-icon-right {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const css = `
|
|
||||||
@layer primevue {
|
|
||||||
.p-component, .p-component * {
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-hidden-space {
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-reset {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
border: 0;
|
|
||||||
outline: 0;
|
|
||||||
text-decoration: none;
|
|
||||||
font-size: 100%;
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-disabled, .p-disabled * {
|
|
||||||
cursor: default;
|
|
||||||
pointer-events: none;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-component-overlay {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-unselectable-text {
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-sr-only {
|
|
||||||
border: 0;
|
|
||||||
clip: rect(1px, 1px, 1px, 1px);
|
|
||||||
clip-path: inset(50%);
|
|
||||||
height: 1px;
|
|
||||||
margin: -1px;
|
|
||||||
overflow: hidden;
|
|
||||||
padding: 0;
|
|
||||||
position: absolute;
|
|
||||||
width: 1px;
|
|
||||||
word-wrap: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-link {
|
|
||||||
text-align: left;
|
|
||||||
background-color: transparent;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
border: none;
|
|
||||||
cursor: pointer;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-link:disabled {
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Non vue overlay animations */
|
|
||||||
.p-connected-overlay {
|
|
||||||
opacity: 0;
|
|
||||||
transform: scaleY(0.8);
|
|
||||||
transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-connected-overlay-visible {
|
|
||||||
opacity: 1;
|
|
||||||
transform: scaleY(1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-connected-overlay-hidden {
|
|
||||||
opacity: 0;
|
|
||||||
transform: scaleY(1);
|
|
||||||
transition: opacity .1s linear;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Vue based overlay animations */
|
|
||||||
.p-connected-overlay-enter-from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: scaleY(0.8);
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-connected-overlay-leave-to {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-connected-overlay-enter-active {
|
|
||||||
transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-connected-overlay-leave-active {
|
|
||||||
transition: opacity .1s linear;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Toggleable Content */
|
|
||||||
.p-toggleable-content-enter-from,
|
|
||||||
.p-toggleable-content-leave-to {
|
|
||||||
max-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-toggleable-content-enter-to,
|
|
||||||
.p-toggleable-content-leave-from {
|
|
||||||
max-height: 1000px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-toggleable-content-leave-active {
|
|
||||||
overflow: hidden;
|
|
||||||
transition: max-height 0.45s cubic-bezier(0, 1, 0, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-toggleable-content-enter-active {
|
|
||||||
overflow: hidden;
|
|
||||||
transition: max-height 1s ease-in-out;
|
|
||||||
}
|
|
||||||
${buttonCSS}
|
|
||||||
${inputTextCSS}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
export default BaseStyle.extend({
|
export default BaseStyle.extend({
|
||||||
name: 'common',
|
name: 'common',
|
||||||
css,
|
|
||||||
loadGlobalStyle: (globalCSS, options = {}) => useStyle(globalCSS, { name: 'global', ...options }),
|
loadGlobalStyle: (globalCSS, options = {}) => useStyle(globalCSS, { name: 'global', ...options }),
|
||||||
loadGlobalTheme: (globalTheme, options = {}) => useStyle(globalTheme, { name: 'global-style', ...options })
|
loadGlobalTheme: (globalTheme, options = {}) => useStyle(globalTheme, { name: 'global-style', ...options })
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,27 +1,10 @@
|
||||||
import BaseStyle from 'primevue/base/style';
|
import BaseStyle from 'primevue/base/style';
|
||||||
|
|
||||||
const css = `
|
|
||||||
@layer primevue {
|
|
||||||
.p-blockui-container {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-blockui.p-component-overlay {
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-blockui-document.p-component-overlay {
|
|
||||||
position: fixed;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const classes = {
|
const classes = {
|
||||||
root: 'p-blockui-container'
|
root: 'p-blockui-container'
|
||||||
};
|
};
|
||||||
|
|
||||||
export default BaseStyle.extend({
|
export default BaseStyle.extend({
|
||||||
name: 'blockui',
|
name: 'blockui',
|
||||||
css,
|
|
||||||
classes
|
classes
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,41 +1,5 @@
|
||||||
import BaseStyle from 'primevue/base/style';
|
import BaseStyle from 'primevue/base/style';
|
||||||
|
|
||||||
const css = `
|
|
||||||
@layer primevue {
|
|
||||||
.p-breadcrumb {
|
|
||||||
overflow-x: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-breadcrumb .p-breadcrumb-list {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
list-style-type: none;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
flex-wrap: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-breadcrumb .p-menuitem-text {
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-breadcrumb .p-menuitem-link {
|
|
||||||
text-decoration: none;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-breadcrumb .p-menuitem-separator {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-breadcrumb::-webkit-scrollbar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const classes = {
|
const classes = {
|
||||||
root: 'p-breadcrumb p-component',
|
root: 'p-breadcrumb p-component',
|
||||||
menu: 'p-breadcrumb-list',
|
menu: 'p-breadcrumb-list',
|
||||||
|
|
@ -49,6 +13,5 @@ const classes = {
|
||||||
|
|
||||||
export default BaseStyle.extend({
|
export default BaseStyle.extend({
|
||||||
name: 'breadcrumb',
|
name: 'breadcrumb',
|
||||||
css,
|
|
||||||
classes
|
classes
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,159 +1,5 @@
|
||||||
import BaseStyle from 'primevue/base/style';
|
import BaseStyle from 'primevue/base/style';
|
||||||
|
|
||||||
const css = `
|
|
||||||
@layer primevue {
|
|
||||||
.p-calendar {
|
|
||||||
display: inline-flex;
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-calendar .p-inputtext {
|
|
||||||
flex: 1 1 auto;
|
|
||||||
width: 1%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-calendar-w-btn .p-inputtext {
|
|
||||||
border-top-right-radius: 0;
|
|
||||||
border-bottom-right-radius: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-calendar-w-btn .p-datepicker-trigger {
|
|
||||||
border-top-left-radius: 0;
|
|
||||||
border-bottom-left-radius: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-calendar .p-datepicker-trigger-icon {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Fluid */
|
|
||||||
.p-fluid .p-calendar {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-fluid .p-calendar .p-inputtext {
|
|
||||||
width: 1%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Datepicker */
|
|
||||||
.p-calendar .p-datepicker {
|
|
||||||
min-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-datepicker {
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-datepicker-inline {
|
|
||||||
display: inline-block;
|
|
||||||
overflow-x: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Header */
|
|
||||||
.p-datepicker-header {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-datepicker-header .p-datepicker-title {
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-datepicker-prev,
|
|
||||||
.p-datepicker-next {
|
|
||||||
cursor: pointer;
|
|
||||||
display: inline-flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Multiple Month DatePicker */
|
|
||||||
.p-datepicker-multiple-month .p-datepicker-group-container {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group {
|
|
||||||
flex: 1 1 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* DatePicker Table */
|
|
||||||
.p-datepicker table {
|
|
||||||
width: 100%;
|
|
||||||
border-collapse: collapse;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-datepicker td > span {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
cursor: pointer;
|
|
||||||
margin: 0 auto;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Month Picker */
|
|
||||||
.p-monthpicker-month {
|
|
||||||
width: 33.3%;
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
cursor: pointer;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Year Picker */
|
|
||||||
.p-yearpicker-year {
|
|
||||||
width: 50%;
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
cursor: pointer;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Button Bar */
|
|
||||||
.p-datepicker-buttonbar {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Time Picker */
|
|
||||||
.p-timepicker {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-timepicker button {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
cursor: pointer;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-timepicker > div {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Touch UI */
|
|
||||||
.p-datepicker-touch-ui,
|
|
||||||
.p-calendar .p-datepicker-touch-ui {
|
|
||||||
min-width: 80vw;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const inlineStyles = {
|
const inlineStyles = {
|
||||||
root: ({ props }) => ({ position: props.appendTo === 'self' ? 'relative' : undefined })
|
root: ({ props }) => ({ position: props.appendTo === 'self' ? 'relative' : undefined })
|
||||||
};
|
};
|
||||||
|
|
@ -231,7 +77,6 @@ const classes = {
|
||||||
|
|
||||||
export default BaseStyle.extend({
|
export default BaseStyle.extend({
|
||||||
name: 'calendar',
|
name: 'calendar',
|
||||||
css,
|
|
||||||
classes,
|
classes,
|
||||||
inlineStyles
|
inlineStyles
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,79 +1,5 @@
|
||||||
import BaseStyle from 'primevue/base/style';
|
import BaseStyle from 'primevue/base/style';
|
||||||
|
|
||||||
const css = `
|
|
||||||
@layer primevue {
|
|
||||||
.p-carousel {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-carousel-content {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-carousel-prev,
|
|
||||||
.p-carousel-next {
|
|
||||||
align-self: center;
|
|
||||||
flex-grow: 0;
|
|
||||||
flex-shrink: 0;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-carousel-container {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-carousel-items-content {
|
|
||||||
overflow: hidden;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-carousel-items-container {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-carousel-indicators {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: center;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-carousel-indicator > button {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Vertical */
|
|
||||||
.p-carousel-vertical .p-carousel-container {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-carousel-vertical .p-carousel-items-container {
|
|
||||||
flex-direction: column;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Keyboard Support */
|
|
||||||
.p-items-hidden .p-carousel-item {
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-items-hidden .p-carousel-item.p-carousel-item-active {
|
|
||||||
visibility: visible;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const classes = {
|
const classes = {
|
||||||
root: ({ instance }) => [
|
root: ({ instance }) => [
|
||||||
'p-carousel p-component',
|
'p-carousel p-component',
|
||||||
|
|
@ -130,6 +56,5 @@ const classes = {
|
||||||
|
|
||||||
export default BaseStyle.extend({
|
export default BaseStyle.extend({
|
||||||
name: 'carousel',
|
name: 'carousel',
|
||||||
css,
|
|
||||||
classes
|
classes
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,99 +1,5 @@
|
||||||
import BaseStyle from 'primevue/base/style';
|
import BaseStyle from 'primevue/base/style';
|
||||||
|
|
||||||
const css = `
|
|
||||||
@layer primevue {
|
|
||||||
.p-cascadeselect {
|
|
||||||
display: inline-flex;
|
|
||||||
cursor: pointer;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-cascadeselect-trigger {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-cascadeselect-label {
|
|
||||||
display: block;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
flex: 1 1 auto;
|
|
||||||
width: 1%;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-cascadeselect-label-empty {
|
|
||||||
overflow: hidden;
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-cascadeselect .p-cascadeselect-panel {
|
|
||||||
min-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-cascadeselect-item {
|
|
||||||
cursor: pointer;
|
|
||||||
font-weight: normal;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-cascadeselect-item-content {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-cascadeselect-group-icon {
|
|
||||||
margin-left: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-cascadeselect-items {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
list-style-type: none;
|
|
||||||
min-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-fluid .p-cascadeselect {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-fluid .p-cascadeselect .p-cascadeselect-label {
|
|
||||||
width: 1%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-cascadeselect-sublist {
|
|
||||||
position: absolute;
|
|
||||||
min-width: 100%;
|
|
||||||
z-index: 1;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-cascadeselect-item-active {
|
|
||||||
overflow: visible;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-cascadeselect-item-active > .p-cascadeselect-sublist {
|
|
||||||
display: block;
|
|
||||||
left: 100%;
|
|
||||||
top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-cascadeselect-enter-from,
|
|
||||||
.p-cascadeselect-leave-active {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-cascadeselect-enter-active {
|
|
||||||
transition: opacity 150ms;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const inlineStyles = {
|
const inlineStyles = {
|
||||||
root: ({ props }) => ({ position: props.appendTo === 'self' ? 'relative' : undefined })
|
root: ({ props }) => ({ position: props.appendTo === 'self' ? 'relative' : undefined })
|
||||||
};
|
};
|
||||||
|
|
@ -146,7 +52,6 @@ const classes = {
|
||||||
|
|
||||||
export default BaseStyle.extend({
|
export default BaseStyle.extend({
|
||||||
name: 'cascadeselect',
|
name: 'cascadeselect',
|
||||||
css,
|
|
||||||
classes,
|
classes,
|
||||||
inlineStyles
|
inlineStyles
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,26 +1,5 @@
|
||||||
import BaseStyle from 'primevue/base/style';
|
import BaseStyle from 'primevue/base/style';
|
||||||
|
|
||||||
const css = `
|
|
||||||
@layer primevue {
|
|
||||||
.p-checkbox {
|
|
||||||
position: relative;
|
|
||||||
display: inline-flex;
|
|
||||||
user-select: none;
|
|
||||||
vertical-align: bottom;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-checkbox-input {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-checkbox-box {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const classes = {
|
const classes = {
|
||||||
root: ({ instance, props }) => [
|
root: ({ instance, props }) => [
|
||||||
'p-checkbox p-component',
|
'p-checkbox p-component',
|
||||||
|
|
@ -38,6 +17,5 @@ const classes = {
|
||||||
|
|
||||||
export default BaseStyle.extend({
|
export default BaseStyle.extend({
|
||||||
name: 'checkbox',
|
name: 'checkbox',
|
||||||
css,
|
|
||||||
classes
|
classes
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,31 +1,5 @@
|
||||||
import BaseStyle from 'primevue/base/style';
|
import BaseStyle from 'primevue/base/style';
|
||||||
|
|
||||||
const css = `
|
|
||||||
@layer primevue {
|
|
||||||
.p-chip {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-chip-text {
|
|
||||||
line-height: 1.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-chip-icon.pi {
|
|
||||||
line-height: 1.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-chip-remove-icon {
|
|
||||||
line-height: 1.5;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-chip img {
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const classes = {
|
const classes = {
|
||||||
root: ({ props }) => [
|
root: ({ props }) => [
|
||||||
'p-chip p-component',
|
'p-chip p-component',
|
||||||
|
|
@ -40,6 +14,5 @@ const classes = {
|
||||||
|
|
||||||
export default BaseStyle.extend({
|
export default BaseStyle.extend({
|
||||||
name: 'chip',
|
name: 'chip',
|
||||||
css,
|
|
||||||
classes
|
classes
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,55 +1,5 @@
|
||||||
import BaseStyle from 'primevue/base/style';
|
import BaseStyle from 'primevue/base/style';
|
||||||
|
|
||||||
const css = `
|
|
||||||
@layer primevue {
|
|
||||||
.p-chips {
|
|
||||||
display: inline-flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-chips-multiple-container {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
list-style-type: none;
|
|
||||||
cursor: text;
|
|
||||||
overflow: hidden;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-chips-token {
|
|
||||||
cursor: default;
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
flex: 0 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-chips-input-token {
|
|
||||||
flex: 1 1 auto;
|
|
||||||
display: inline-flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-chips-token-icon {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-chips-input-token input {
|
|
||||||
border: 0 none;
|
|
||||||
outline: 0 none;
|
|
||||||
background-color: transparent;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
box-shadow: none;
|
|
||||||
border-radius: 0;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-fluid .p-chips {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const classes = {
|
const classes = {
|
||||||
root: ({ instance, props }) => [
|
root: ({ instance, props }) => [
|
||||||
'p-chips p-component p-inputwrapper',
|
'p-chips p-component p-inputwrapper',
|
||||||
|
|
@ -75,6 +25,5 @@ const classes = {
|
||||||
|
|
||||||
export default BaseStyle.extend({
|
export default BaseStyle.extend({
|
||||||
name: 'chips',
|
name: 'chips',
|
||||||
css,
|
|
||||||
classes
|
classes
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,17 +1,5 @@
|
||||||
import BaseStyle from 'primevue/base/style';
|
import BaseStyle from 'primevue/base/style';
|
||||||
|
|
||||||
const css = `
|
|
||||||
@layer primevue {
|
|
||||||
.p-colorpicker-panel .p-colorpicker-color {
|
|
||||||
background: linear-gradient(to top, #000 0%, rgb(0 0 0 / 0) 100%), linear-gradient(to right, #fff 0%, rgb(255 255 255 / 0) 100%)
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-colorpicker-panel .p-colorpicker-hue {
|
|
||||||
background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const classes = {
|
const classes = {
|
||||||
root: ({ props }) => ['p-colorpicker p-component', { 'p-colorpicker-overlay': !props.inline }],
|
root: ({ props }) => ['p-colorpicker p-component', { 'p-colorpicker-overlay': !props.inline }],
|
||||||
input: ({ props }) => ['p-colorpicker-preview p-inputtext', { 'p-disabled': props.disabled }],
|
input: ({ props }) => ['p-colorpicker-preview p-inputtext', { 'p-disabled': props.disabled }],
|
||||||
|
|
@ -33,6 +21,5 @@ const classes = {
|
||||||
|
|
||||||
export default BaseStyle.extend({
|
export default BaseStyle.extend({
|
||||||
name: 'colorpicker',
|
name: 'colorpicker',
|
||||||
css,
|
|
||||||
classes
|
classes
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,79 +1,5 @@
|
||||||
import BaseStyle from 'primevue/base/style';
|
import BaseStyle from 'primevue/base/style';
|
||||||
|
|
||||||
const css = `
|
|
||||||
@layer primevue {
|
|
||||||
.p-confirm-popup {
|
|
||||||
position: absolute;
|
|
||||||
margin-top: 10px;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-confirm-popup-flipped {
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Animation */
|
|
||||||
.p-confirm-popup-enter-from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: scaleY(0.8);
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-confirm-popup-leave-to {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-confirm-popup-enter-active {
|
|
||||||
transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-confirm-popup-leave-active {
|
|
||||||
transition: opacity 0.1s linear;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-confirm-popup:after,
|
|
||||||
.p-confirm-popup:before {
|
|
||||||
bottom: 100%;
|
|
||||||
left: calc(var(--overlayArrowLeft, 0) + 1.25rem);
|
|
||||||
content: ' ';
|
|
||||||
height: 0;
|
|
||||||
width: 0;
|
|
||||||
position: absolute;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-confirm-popup:after {
|
|
||||||
border-width: 8px;
|
|
||||||
margin-left: -8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-confirm-popup:before {
|
|
||||||
border-width: 10px;
|
|
||||||
margin-left: -10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-confirm-popup-flipped:after,
|
|
||||||
.p-confirm-popup-flipped:before {
|
|
||||||
bottom: auto;
|
|
||||||
top: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-confirm-popup.p-confirm-popup-flipped:after {
|
|
||||||
border-bottom-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-confirm-popup.p-confirm-popup-flipped:before {
|
|
||||||
border-bottom-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-confirm-popup .p-confirm-popup-content {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const classes = {
|
const classes = {
|
||||||
root: ({ instance }) => [
|
root: ({ instance }) => [
|
||||||
'p-confirm-popup p-component',
|
'p-confirm-popup p-component',
|
||||||
|
|
@ -91,6 +17,5 @@ const classes = {
|
||||||
|
|
||||||
export default BaseStyle.extend({
|
export default BaseStyle.extend({
|
||||||
name: 'confirmpopup',
|
name: 'confirmpopup',
|
||||||
css,
|
|
||||||
classes
|
classes
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,51 +1,5 @@
|
||||||
import BaseStyle from 'primevue/base/style';
|
import BaseStyle from 'primevue/base/style';
|
||||||
|
|
||||||
const css = `
|
|
||||||
@layer primevue {
|
|
||||||
.p-contextmenu ul {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-contextmenu .p-submenu-list {
|
|
||||||
position: absolute;
|
|
||||||
min-width: 100%;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-contextmenu .p-menuitem-link {
|
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
text-decoration: none;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-contextmenu .p-menuitem-text {
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-contextmenu .p-menuitem {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-contextmenu .p-menuitem-link .p-submenu-icon {
|
|
||||||
margin-left: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-contextmenu-enter-from,
|
|
||||||
.p-contextmenu-leave-active {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-contextmenu-enter-active {
|
|
||||||
transition: opacity 250ms;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const classes = {
|
const classes = {
|
||||||
root: ({ instance }) => [
|
root: ({ instance }) => [
|
||||||
'p-contextmenu p-component',
|
'p-contextmenu p-component',
|
||||||
|
|
@ -73,6 +27,5 @@ const classes = {
|
||||||
|
|
||||||
export default BaseStyle.extend({
|
export default BaseStyle.extend({
|
||||||
name: 'contextmenu',
|
name: 'contextmenu',
|
||||||
css,
|
|
||||||
classes
|
classes
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,244 +1,5 @@
|
||||||
import BaseStyle from 'primevue/base/style';
|
import BaseStyle from 'primevue/base/style';
|
||||||
|
|
||||||
const css = `
|
|
||||||
@layer primevue {
|
|
||||||
.p-datatable {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-datatable-table {
|
|
||||||
border-spacing: 0px;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-datatable .p-sortable-column {
|
|
||||||
cursor: pointer;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-datatable .p-sortable-column .p-column-title,
|
|
||||||
.p-datatable .p-sortable-column .p-sortable-column-icon,
|
|
||||||
.p-datatable .p-sortable-column .p-sortable-column-badge {
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-datatable .p-sortable-column .p-sortable-column-badge {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-datatable-hoverable-rows .p-selectable-row {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Scrollable */
|
|
||||||
.p-datatable-scrollable > .p-datatable-wrapper {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-datatable-scrollable-table > .p-datatable-thead {
|
|
||||||
top: 0;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-datatable-scrollable-table > .p-datatable-frozen-tbody {
|
|
||||||
position: sticky;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-datatable-scrollable-table > .p-datatable-tfoot {
|
|
||||||
bottom: 0;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-datatable-scrollable .p-frozen-column {
|
|
||||||
position: sticky;
|
|
||||||
background: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-datatable-scrollable th.p-frozen-column {
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-datatable-flex-scrollable {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-datatable-flex-scrollable > .p-datatable-wrapper {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
flex: 1;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header {
|
|
||||||
position: sticky;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Resizable */
|
|
||||||
.p-datatable-resizable-table > .p-datatable-thead > tr > th,
|
|
||||||
.p-datatable-resizable-table > .p-datatable-tfoot > tr > td,
|
|
||||||
.p-datatable-resizable-table > .p-datatable-tbody > tr > td {
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) {
|
|
||||||
background-clip: padding-box;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-datatable .p-column-resizer {
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
margin: 0;
|
|
||||||
width: 0.5rem;
|
|
||||||
height: 100%;
|
|
||||||
padding: 0px;
|
|
||||||
cursor: col-resize;
|
|
||||||
border: 1px solid transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-datatable .p-column-header-content {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-datatable .p-column-resizer-helper {
|
|
||||||
width: 1px;
|
|
||||||
position: absolute;
|
|
||||||
z-index: 10;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-datatable .p-row-editor-init,
|
|
||||||
.p-datatable .p-row-editor-save,
|
|
||||||
.p-datatable .p-row-editor-cancel {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Expand */
|
|
||||||
.p-datatable .p-row-toggler {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Reorder */
|
|
||||||
.p-datatable-reorder-indicator-up,
|
|
||||||
.p-datatable-reorder-indicator-down {
|
|
||||||
position: absolute;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-reorderable-column,
|
|
||||||
.p-datatable-reorderablerow-handle {
|
|
||||||
cursor: move;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Loader */
|
|
||||||
.p-datatable .p-datatable-loading-overlay {
|
|
||||||
position: absolute;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Filter */
|
|
||||||
.p-column-filter-row {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-column-filter-menu {
|
|
||||||
display: inline-flex;
|
|
||||||
margin-left: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-column-filter-row .p-column-filter-element {
|
|
||||||
flex: 1 1 auto;
|
|
||||||
width: 1%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-column-filter-menu-button,
|
|
||||||
.p-column-filter-clear-button {
|
|
||||||
display: inline-flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
cursor: pointer;
|
|
||||||
text-decoration: none;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-column-filter-row-items {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-column-filter-row-item {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-column-filter-add-button,
|
|
||||||
.p-column-filter-remove-button {
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-column-filter-add-button .p-button-label,
|
|
||||||
.p-column-filter-remove-button .p-button-label {
|
|
||||||
flex-grow: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-column-filter-buttonbar {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-column-filter-buttonbar .p-button:not(.p-button-icon-only) {
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Responsive */
|
|
||||||
.p-datatable .p-datatable-tbody > tr > td > .p-column-title {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* VirtualScroller */
|
|
||||||
.p-datatable-virtualscroller-spacer {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-datatable .p-virtualscroller .p-virtualscroller-loading {
|
|
||||||
transform: none !important;
|
|
||||||
min-height: 0;
|
|
||||||
position: sticky;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const classes = {
|
const classes = {
|
||||||
root: ({ instance, props }) => [
|
root: ({ instance, props }) => [
|
||||||
'p-datatable p-component',
|
'p-datatable p-component',
|
||||||
|
|
@ -419,7 +180,6 @@ const inlineStyles = {
|
||||||
|
|
||||||
export default BaseStyle.extend({
|
export default BaseStyle.extend({
|
||||||
name: 'datatable',
|
name: 'datatable',
|
||||||
css,
|
|
||||||
classes,
|
classes,
|
||||||
inlineStyles
|
inlineStyles
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,138 +1,5 @@
|
||||||
import BaseStyle from 'primevue/base/style';
|
import BaseStyle from 'primevue/base/style';
|
||||||
|
|
||||||
const css = `
|
|
||||||
@layer primevue {
|
|
||||||
.p-dialog-mask.p-component-overlay {
|
|
||||||
pointer-events: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-dialog {
|
|
||||||
max-height: 90%;
|
|
||||||
transform: scale(1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-dialog-content {
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-dialog-header {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-dialog-footer {
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-dialog .p-dialog-header-icons {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-dialog .p-dialog-header-icon {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Fluid */
|
|
||||||
.p-fluid .p-dialog-footer .p-button {
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Animation */
|
|
||||||
/* Center */
|
|
||||||
.p-dialog-enter-active {
|
|
||||||
transition: all 150ms cubic-bezier(0, 0, 0.2, 1);
|
|
||||||
}
|
|
||||||
.p-dialog-leave-active {
|
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
}
|
|
||||||
.p-dialog-enter-from,
|
|
||||||
.p-dialog-leave-to {
|
|
||||||
opacity: 0;
|
|
||||||
transform: scale(0.7);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Top, Bottom, Left, Right, Top* and Bottom* */
|
|
||||||
.p-dialog-top .p-dialog,
|
|
||||||
.p-dialog-bottom .p-dialog,
|
|
||||||
.p-dialog-left .p-dialog,
|
|
||||||
.p-dialog-right .p-dialog,
|
|
||||||
.p-dialog-topleft .p-dialog,
|
|
||||||
.p-dialog-topright .p-dialog,
|
|
||||||
.p-dialog-bottomleft .p-dialog,
|
|
||||||
.p-dialog-bottomright .p-dialog {
|
|
||||||
margin: 0.75rem;
|
|
||||||
transform: translate3d(0px, 0px, 0px);
|
|
||||||
}
|
|
||||||
.p-dialog-top .p-dialog-enter-active,
|
|
||||||
.p-dialog-top .p-dialog-leave-active,
|
|
||||||
.p-dialog-bottom .p-dialog-enter-active,
|
|
||||||
.p-dialog-bottom .p-dialog-leave-active,
|
|
||||||
.p-dialog-left .p-dialog-enter-active,
|
|
||||||
.p-dialog-left .p-dialog-leave-active,
|
|
||||||
.p-dialog-right .p-dialog-enter-active,
|
|
||||||
.p-dialog-right .p-dialog-leave-active,
|
|
||||||
.p-dialog-topleft .p-dialog-enter-active,
|
|
||||||
.p-dialog-topleft .p-dialog-leave-active,
|
|
||||||
.p-dialog-topright .p-dialog-enter-active,
|
|
||||||
.p-dialog-topright .p-dialog-leave-active,
|
|
||||||
.p-dialog-bottomleft .p-dialog-enter-active,
|
|
||||||
.p-dialog-bottomleft .p-dialog-leave-active,
|
|
||||||
.p-dialog-bottomright .p-dialog-enter-active,
|
|
||||||
.p-dialog-bottomright .p-dialog-leave-active {
|
|
||||||
transition: all 0.3s ease-out;
|
|
||||||
}
|
|
||||||
.p-dialog-top .p-dialog-enter-from,
|
|
||||||
.p-dialog-top .p-dialog-leave-to {
|
|
||||||
transform: translate3d(0px, -100%, 0px);
|
|
||||||
}
|
|
||||||
.p-dialog-bottom .p-dialog-enter-from,
|
|
||||||
.p-dialog-bottom .p-dialog-leave-to {
|
|
||||||
transform: translate3d(0px, 100%, 0px);
|
|
||||||
}
|
|
||||||
.p-dialog-left .p-dialog-enter-from,
|
|
||||||
.p-dialog-left .p-dialog-leave-to,
|
|
||||||
.p-dialog-topleft .p-dialog-enter-from,
|
|
||||||
.p-dialog-topleft .p-dialog-leave-to,
|
|
||||||
.p-dialog-bottomleft .p-dialog-enter-from,
|
|
||||||
.p-dialog-bottomleft .p-dialog-leave-to {
|
|
||||||
transform: translate3d(-100%, 0px, 0px);
|
|
||||||
}
|
|
||||||
.p-dialog-right .p-dialog-enter-from,
|
|
||||||
.p-dialog-right .p-dialog-leave-to,
|
|
||||||
.p-dialog-topright .p-dialog-enter-from,
|
|
||||||
.p-dialog-topright .p-dialog-leave-to,
|
|
||||||
.p-dialog-bottomright .p-dialog-enter-from,
|
|
||||||
.p-dialog-bottomright .p-dialog-leave-to {
|
|
||||||
transform: translate3d(100%, 0px, 0px);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Maximize */
|
|
||||||
.p-dialog-maximized {
|
|
||||||
width: 100vw !important;
|
|
||||||
height: 100vh !important;
|
|
||||||
top: 0px !important;
|
|
||||||
left: 0px !important;
|
|
||||||
max-height: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
.p-dialog-maximized .p-dialog-content {
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-confirm-dialog .p-dialog-content {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
/* Position */
|
/* Position */
|
||||||
const inlineStyles = {
|
const inlineStyles = {
|
||||||
mask: ({ position, modal }) => ({
|
mask: ({ position, modal }) => ({
|
||||||
|
|
@ -187,7 +54,6 @@ const classes = {
|
||||||
|
|
||||||
export default BaseStyle.extend({
|
export default BaseStyle.extend({
|
||||||
name: 'dialog',
|
name: 'dialog',
|
||||||
css,
|
|
||||||
classes,
|
classes,
|
||||||
inlineStyles
|
inlineStyles
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,70 +1,5 @@
|
||||||
import BaseStyle from 'primevue/base/style';
|
import BaseStyle from 'primevue/base/style';
|
||||||
|
|
||||||
const css = `
|
|
||||||
@layer primevue {
|
|
||||||
.p-divider-horizontal {
|
|
||||||
display: flex;
|
|
||||||
width: 100%;
|
|
||||||
position: relative;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-divider-horizontal:before {
|
|
||||||
position: absolute;
|
|
||||||
display: block;
|
|
||||||
top: 50%;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
content: '';
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-divider-content {
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-divider-vertical {
|
|
||||||
min-height: 100%;
|
|
||||||
margin: 0 1rem;
|
|
||||||
display: flex;
|
|
||||||
position: relative;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-divider-vertical:before {
|
|
||||||
position: absolute;
|
|
||||||
display: block;
|
|
||||||
top: 0;
|
|
||||||
left: 50%;
|
|
||||||
height: 100%;
|
|
||||||
content: '';
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-divider-solid.p-divider-horizontal:before {
|
|
||||||
border-top-style: solid;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-divider-solid.p-divider-vertical:before {
|
|
||||||
border-left-style: solid;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-divider-dashed.p-divider-horizontal:before {
|
|
||||||
border-top-style: dashed;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-divider-dashed.p-divider-vertical:before {
|
|
||||||
border-left-style: dashed;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-divider-dotted.p-divider-horizontal:before {
|
|
||||||
border-top-style: dotted;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-divider-dotted.p-divider-vertical:before {
|
|
||||||
border-left-style: dotted;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
/* Position */
|
/* Position */
|
||||||
const inlineStyles = {
|
const inlineStyles = {
|
||||||
root: ({ props }) => ({
|
root: ({ props }) => ({
|
||||||
|
|
@ -90,7 +25,6 @@ const classes = {
|
||||||
|
|
||||||
export default BaseStyle.extend({
|
export default BaseStyle.extend({
|
||||||
name: 'divider',
|
name: 'divider',
|
||||||
//css,
|
|
||||||
classes,
|
classes,
|
||||||
inlineStyles
|
inlineStyles
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,115 +1,5 @@
|
||||||
import BaseStyle from 'primevue/base/style';
|
import BaseStyle from 'primevue/base/style';
|
||||||
|
|
||||||
const css = `
|
|
||||||
@layer primevue {
|
|
||||||
.p-dock {
|
|
||||||
position: absolute;
|
|
||||||
z-index: 1;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-dock-list-container {
|
|
||||||
display: flex;
|
|
||||||
pointer-events: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-dock-list {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
list-style: none;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-dock-item {
|
|
||||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
will-change: transform;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-dock-link {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-dock-item-second-prev,
|
|
||||||
.p-dock-item-second-next {
|
|
||||||
transform: scale(1.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-dock-item-prev,
|
|
||||||
.p-dock-item-next {
|
|
||||||
transform: scale(1.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-dock-item-current {
|
|
||||||
transform: scale(1.6);
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Position */
|
|
||||||
/* top */
|
|
||||||
.p-dock-top {
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-dock-top .p-dock-item {
|
|
||||||
transform-origin: center top;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* bottom */
|
|
||||||
.p-dock-bottom {
|
|
||||||
left: 0;
|
|
||||||
bottom: 0;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-dock-bottom .p-dock-item {
|
|
||||||
transform-origin: center bottom;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* right */
|
|
||||||
.p-dock-right {
|
|
||||||
right: 0;
|
|
||||||
top: 0;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-dock-right .p-dock-item {
|
|
||||||
transform-origin: center right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-dock-right .p-dock-list {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* left */
|
|
||||||
.p-dock-left {
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-dock-left .p-dock-item {
|
|
||||||
transform-origin: center left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-dock-left .p-dock-list {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const classes = {
|
const classes = {
|
||||||
root: ({ instance, props }) => [
|
root: ({ instance, props }) => [
|
||||||
'p-dock p-component',
|
'p-dock p-component',
|
||||||
|
|
@ -139,6 +29,5 @@ const classes = {
|
||||||
|
|
||||||
export default BaseStyle.extend({
|
export default BaseStyle.extend({
|
||||||
name: 'dock',
|
name: 'dock',
|
||||||
css,
|
|
||||||
classes
|
classes
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -93,7 +93,7 @@
|
||||||
v-bind="{ ...filterInputProps, ...ptm('filterInput') }"
|
v-bind="{ ...filterInputProps, ...ptm('filterInput') }"
|
||||||
/>
|
/>
|
||||||
<slot name="filtericon" :class="cx('filterIcon')">
|
<slot name="filtericon" :class="cx('filterIcon')">
|
||||||
<component :is="filterIcon ? 'span' : 'FilterIcon'" :class="[cx('filterIcon'), filterIcon]" v-bind="ptm('filterIcon')" />
|
<component :is="filterIcon ? 'span' : 'SearchIcon'" :class="[cx('filterIcon'), filterIcon]" v-bind="ptm('filterIcon')" />
|
||||||
</slot>
|
</slot>
|
||||||
</div>
|
</div>
|
||||||
<span role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenFilterResult')" :data-p-hidden-accessible="true">
|
<span role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenFilterResult')" :data-p-hidden-accessible="true">
|
||||||
|
|
@ -180,7 +180,7 @@ import { FilterService } from 'primevue/api';
|
||||||
import BlankIcon from 'primevue/icons/blank';
|
import BlankIcon from 'primevue/icons/blank';
|
||||||
import CheckIcon from 'primevue/icons/check';
|
import CheckIcon from 'primevue/icons/check';
|
||||||
import ChevronDownIcon from 'primevue/icons/chevrondown';
|
import ChevronDownIcon from 'primevue/icons/chevrondown';
|
||||||
import FilterIcon from 'primevue/icons/filter';
|
import SearchIcon from 'primevue/icons/search';
|
||||||
import SpinnerIcon from 'primevue/icons/spinner';
|
import SpinnerIcon from 'primevue/icons/spinner';
|
||||||
import TimesIcon from 'primevue/icons/times';
|
import TimesIcon from 'primevue/icons/times';
|
||||||
import OverlayEventBus from 'primevue/overlayeventbus';
|
import OverlayEventBus from 'primevue/overlayeventbus';
|
||||||
|
|
@ -977,7 +977,7 @@ export default {
|
||||||
TimesIcon,
|
TimesIcon,
|
||||||
ChevronDownIcon,
|
ChevronDownIcon,
|
||||||
SpinnerIcon,
|
SpinnerIcon,
|
||||||
FilterIcon,
|
SearchIcon,
|
||||||
CheckIcon,
|
CheckIcon,
|
||||||
BlankIcon
|
BlankIcon
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,104 +1,5 @@
|
||||||
import BaseStyle from 'primevue/base/style';
|
import BaseStyle from 'primevue/base/style';
|
||||||
|
|
||||||
const css = `
|
|
||||||
@layer primevue {
|
|
||||||
.p-dropdown {
|
|
||||||
display: inline-flex;
|
|
||||||
cursor: pointer;
|
|
||||||
position: relative;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-dropdown-clear-icon {
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
margin-top: -0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-dropdown-trigger {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-dropdown-label {
|
|
||||||
display: block;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
flex: 1 1 auto;
|
|
||||||
width: 1%;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-dropdown-label-empty {
|
|
||||||
overflow: hidden;
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
input.p-dropdown-label {
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-dropdown .p-dropdown-panel {
|
|
||||||
min-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-dropdown-panel {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-dropdown-items-wrapper {
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-dropdown-item {
|
|
||||||
cursor: pointer;
|
|
||||||
font-weight: normal;
|
|
||||||
white-space: nowrap;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-dropdown-item-group {
|
|
||||||
cursor: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-dropdown-items {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
list-style-type: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-dropdown-filter {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-dropdown-filter-container {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-dropdown-filter-icon {
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
margin-top: -0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-fluid .p-dropdown {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-fluid .p-dropdown .p-dropdown-label {
|
|
||||||
width: 1%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const classes = {
|
const classes = {
|
||||||
root: ({ instance, props, state }) => [
|
root: ({ instance, props, state }) => [
|
||||||
'p-dropdown p-component p-inputwrapper',
|
'p-dropdown p-component p-inputwrapper',
|
||||||
|
|
@ -159,6 +60,5 @@ const classes = {
|
||||||
|
|
||||||
export default BaseStyle.extend({
|
export default BaseStyle.extend({
|
||||||
name: 'dropdown',
|
name: 'dropdown',
|
||||||
css,
|
|
||||||
classes
|
classes
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,28 +1,5 @@
|
||||||
import BaseStyle from 'primevue/base/style';
|
import BaseStyle from 'primevue/base/style';
|
||||||
|
|
||||||
const css = `
|
|
||||||
@layer primevue {
|
|
||||||
.p-fieldset-legend > a,
|
|
||||||
.p-fieldset-legend > span {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-fieldset-toggleable .p-fieldset-legend a {
|
|
||||||
cursor: pointer;
|
|
||||||
user-select: none;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-fieldset-legend-text {
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const classes = {
|
const classes = {
|
||||||
root: ({ props }) => [
|
root: ({ props }) => [
|
||||||
'p-fieldset p-component',
|
'p-fieldset p-component',
|
||||||
|
|
@ -39,6 +16,5 @@ const classes = {
|
||||||
|
|
||||||
export default BaseStyle.extend({
|
export default BaseStyle.extend({
|
||||||
name: 'fieldset',
|
name: 'fieldset',
|
||||||
//css,
|
|
||||||
classes
|
classes
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,53 +1,5 @@
|
||||||
import BaseStyle from 'primevue/base/style';
|
import BaseStyle from 'primevue/base/style';
|
||||||
|
|
||||||
const css = `
|
|
||||||
@layer primevue {
|
|
||||||
.p-fileupload-content {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-fileupload-content .p-progressbar {
|
|
||||||
width: 100%;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-button.p-fileupload-choose {
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-fileupload-buttonbar {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-fileupload > input[type='file'],
|
|
||||||
.p-fileupload-basic input[type='file'] {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-fluid .p-fileupload .p-button {
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-fileupload-file {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-fileupload-file-thumbnail {
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-fileupload-file-actions {
|
|
||||||
margin-left: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const classes = {
|
const classes = {
|
||||||
root: ({ props }) => [`p-fileupload p-fileupload-${props.mode} p-component`],
|
root: ({ props }) => [`p-fileupload p-fileupload-${props.mode} p-component`],
|
||||||
buttonbar: 'p-fileupload-buttonbar',
|
buttonbar: 'p-fileupload-buttonbar',
|
||||||
|
|
@ -77,6 +29,5 @@ const classes = {
|
||||||
|
|
||||||
export default BaseStyle.extend({
|
export default BaseStyle.extend({
|
||||||
name: 'fileupload',
|
name: 'fileupload',
|
||||||
css,
|
|
||||||
classes
|
classes
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,61 +1,10 @@
|
||||||
import BaseStyle from 'primevue/base/style';
|
import BaseStyle from 'primevue/base/style';
|
||||||
|
|
||||||
const css = `
|
|
||||||
@layer primevue {
|
|
||||||
.p-float-label {
|
|
||||||
display: block;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-float-label label {
|
|
||||||
position: absolute;
|
|
||||||
pointer-events: none;
|
|
||||||
top: 50%;
|
|
||||||
margin-top: -.5rem;
|
|
||||||
transition-property: all;
|
|
||||||
transition-timing-function: ease;
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-float-label:has(textarea) label {
|
|
||||||
top: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-float-label:has(input:focus) label,
|
|
||||||
.p-float-label:has(input.p-filled) label,
|
|
||||||
.p-float-label:has(input:-webkit-autofill) label,
|
|
||||||
.p-float-label:has(textarea:focus) label,
|
|
||||||
.p-float-label:has(textarea.p-filled) label,
|
|
||||||
.p-float-label:has(.p-inputwrapper-focus) label,
|
|
||||||
.p-float-label:has(.p-inputwrapper-filled) label {
|
|
||||||
top: -.75rem;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-float-label .p-placeholder,
|
|
||||||
.p-float-label input::placeholder,
|
|
||||||
.p-float-label .p-inputtext::placeholder {
|
|
||||||
opacity: 0;
|
|
||||||
transition-property: all;
|
|
||||||
transition-timing-function: ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-float-label .p-focus .p-placeholder,
|
|
||||||
.p-float-label input:focus::placeholder,
|
|
||||||
.p-float-label .p-inputtext:focus::placeholder {
|
|
||||||
opacity: 1;
|
|
||||||
transition-property: all;
|
|
||||||
transition-timing-function: ease;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const classes = {
|
const classes = {
|
||||||
root: 'p-float-label'
|
root: 'p-float-label'
|
||||||
};
|
};
|
||||||
|
|
||||||
export default BaseStyle.extend({
|
export default BaseStyle.extend({
|
||||||
name: 'floatlabel',
|
name: 'floatlabel',
|
||||||
css,
|
|
||||||
classes
|
classes
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,293 +1,5 @@
|
||||||
import BaseStyle from 'primevue/base/style';
|
import BaseStyle from 'primevue/base/style';
|
||||||
|
|
||||||
const css = `
|
|
||||||
@layer primevue {
|
|
||||||
.p-galleria-content {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-galleria-item-wrapper {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-galleria-item-container {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-galleria-item-nav {
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
margin-top: -0.5rem;
|
|
||||||
display: inline-flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-galleria-item-prev {
|
|
||||||
left: 0;
|
|
||||||
border-top-left-radius: 0;
|
|
||||||
border-bottom-left-radius: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-galleria-item-next {
|
|
||||||
right: 0;
|
|
||||||
border-top-right-radius: 0;
|
|
||||||
border-bottom-right-radius: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-galleria-item {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-galleria-item-nav-onhover .p-galleria-item-nav {
|
|
||||||
pointer-events: none;
|
|
||||||
opacity: 0;
|
|
||||||
transition: opacity 0.2s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav {
|
|
||||||
pointer-events: all;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled {
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-galleria-caption {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Thumbnails */
|
|
||||||
.p-galleria-thumbnail-wrapper {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
overflow: auto;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-galleria-thumbnail-prev,
|
|
||||||
.p-galleria-thumbnail-next {
|
|
||||||
align-self: center;
|
|
||||||
flex: 0 0 auto;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-galleria-thumbnail-prev span,
|
|
||||||
.p-galleria-thumbnail-next span {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-galleria-thumbnail-container {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-galleria-thumbnail-items-container {
|
|
||||||
overflow: hidden;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-galleria-thumbnail-items {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-galleria-thumbnail-item {
|
|
||||||
overflow: auto;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
cursor: pointer;
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-galleria-thumbnail-item:hover {
|
|
||||||
opacity: 1;
|
|
||||||
transition: opacity 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-galleria-thumbnail-item-current {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Positions */
|
|
||||||
/* Thumbnails */
|
|
||||||
.p-galleria-thumbnails-left .p-galleria-content,
|
|
||||||
.p-galleria-thumbnails-right .p-galleria-content {
|
|
||||||
flex-direction: row;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-galleria-thumbnails-left .p-galleria-item-wrapper,
|
|
||||||
.p-galleria-thumbnails-right .p-galleria-item-wrapper {
|
|
||||||
flex-direction: row;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-galleria-thumbnails-left .p-galleria-item-wrapper,
|
|
||||||
.p-galleria-thumbnails-top .p-galleria-item-wrapper {
|
|
||||||
order: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper,
|
|
||||||
.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper {
|
|
||||||
order: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-galleria-thumbnails-left .p-galleria-thumbnail-container,
|
|
||||||
.p-galleria-thumbnails-right .p-galleria-thumbnail-container {
|
|
||||||
flex-direction: column;
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-galleria-thumbnails-left .p-galleria-thumbnail-items,
|
|
||||||
.p-galleria-thumbnails-right .p-galleria-thumbnail-items {
|
|
||||||
flex-direction: column;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Indicators */
|
|
||||||
.p-galleria-indicators {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-galleria-indicator > button {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-galleria-indicators-left .p-galleria-item-wrapper,
|
|
||||||
.p-galleria-indicators-right .p-galleria-item-wrapper {
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-galleria-indicators-left .p-galleria-item-container,
|
|
||||||
.p-galleria-indicators-top .p-galleria-item-container {
|
|
||||||
order: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-galleria-indicators-left .p-galleria-indicators,
|
|
||||||
.p-galleria-indicators-top .p-galleria-indicators {
|
|
||||||
order: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-galleria-indicators-left .p-galleria-indicators,
|
|
||||||
.p-galleria-indicators-right .p-galleria-indicators {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-galleria-indicator-onitem .p-galleria-indicators {
|
|
||||||
position: absolute;
|
|
||||||
display: flex;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators {
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
align-items: flex-start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators {
|
|
||||||
right: 0;
|
|
||||||
top: 0;
|
|
||||||
height: 100%;
|
|
||||||
align-items: flex-end;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators {
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
align-items: flex-end;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators {
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
height: 100%;
|
|
||||||
align-items: flex-start;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* FullScreen */
|
|
||||||
.p-galleria-mask {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-galleria-close {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-galleria-mask .p-galleria-item-nav {
|
|
||||||
position: fixed;
|
|
||||||
top: 50%;
|
|
||||||
margin-top: -0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Animation */
|
|
||||||
.p-galleria-enter-active {
|
|
||||||
transition: all 150ms cubic-bezier(0, 0, 0.2, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-galleria-leave-active {
|
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-galleria-enter-from,
|
|
||||||
.p-galleria-leave-to {
|
|
||||||
opacity: 0;
|
|
||||||
transform: scale(0.7);
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-galleria-enter-active .p-galleria-item-nav {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Keyboard Support */
|
|
||||||
.p-items-hidden .p-galleria-thumbnail-item {
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active {
|
|
||||||
visibility: visible;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const classes = {
|
const classes = {
|
||||||
mask: ({ instance }) => [
|
mask: ({ instance }) => [
|
||||||
'p-galleria-mask p-component-overlay p-component-overlay-enter',
|
'p-galleria-mask p-component-overlay p-component-overlay-enter',
|
||||||
|
|
@ -373,6 +85,5 @@ const classes = {
|
||||||
|
|
||||||
export default BaseStyle.extend({
|
export default BaseStyle.extend({
|
||||||
name: 'galleria',
|
name: 'galleria',
|
||||||
css,
|
|
||||||
classes
|
classes
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,23 +1,5 @@
|
||||||
import BaseStyle from 'primevue/base/style';
|
import BaseStyle from 'primevue/base/style';
|
||||||
|
|
||||||
const css = `
|
|
||||||
@layer primevue {
|
|
||||||
.p-input-icon-left,
|
|
||||||
.p-input-icon-right {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-input-icon-left > i,
|
|
||||||
.p-input-icon-left > svg,
|
|
||||||
.p-input-icon-right > i,
|
|
||||||
.p-input-icon-right > svg {
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
margin-top: -.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const classes = {
|
const classes = {
|
||||||
root: ({ props }) => [
|
root: ({ props }) => [
|
||||||
{
|
{
|
||||||
|
|
@ -29,6 +11,5 @@ const classes = {
|
||||||
|
|
||||||
export default BaseStyle.extend({
|
export default BaseStyle.extend({
|
||||||
name: 'iconfield',
|
name: 'iconfield',
|
||||||
css,
|
|
||||||
classes
|
classes
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,81 +1,5 @@
|
||||||
import BaseStyle from 'primevue/base/style';
|
import BaseStyle from 'primevue/base/style';
|
||||||
|
|
||||||
const css = `
|
|
||||||
@layer primevue {
|
|
||||||
.p-image-mask {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-image-preview-container {
|
|
||||||
position: relative;
|
|
||||||
display: inline-block;
|
|
||||||
line-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-image-preview-indicator {
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
opacity: 0;
|
|
||||||
transition: opacity 0.3s;
|
|
||||||
border: none;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-image-preview-container:hover > .p-image-preview-indicator {
|
|
||||||
opacity: 1;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-image-preview-container > img {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-image-toolbar {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
display: flex;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-image-action.p-link {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-image-action.p-disabled {
|
|
||||||
pointer-events: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-image-preview {
|
|
||||||
transition: transform 0.15s;
|
|
||||||
max-width: 100vw;
|
|
||||||
max-height: 100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-image-preview-enter-active {
|
|
||||||
transition: all 150ms cubic-bezier(0, 0, 0.2, 1);
|
|
||||||
}
|
|
||||||
.p-image-preview-leave-active {
|
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
}
|
|
||||||
.p-image-preview-enter-from,
|
|
||||||
.p-image-preview-leave-to {
|
|
||||||
opacity: 0;
|
|
||||||
transform: scale(0.7);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const classes = {
|
const classes = {
|
||||||
root: ({ props }) => [
|
root: ({ props }) => [
|
||||||
'p-image p-component',
|
'p-image p-component',
|
||||||
|
|
@ -108,6 +32,5 @@ const classes = {
|
||||||
|
|
||||||
export default BaseStyle.extend({
|
export default BaseStyle.extend({
|
||||||
name: 'image',
|
name: 'image',
|
||||||
css,
|
|
||||||
classes
|
classes
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,29 +1,5 @@
|
||||||
import BaseStyle from 'primevue/base/style';
|
import BaseStyle from 'primevue/base/style';
|
||||||
|
|
||||||
const css = `
|
|
||||||
@layer primevue {
|
|
||||||
.p-inline-message {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
vertical-align: top;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-inline-message-icon {
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-inline-message-icon-only .p-inline-message-text {
|
|
||||||
visibility: hidden;
|
|
||||||
width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-fluid .p-inline-message {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const classes = {
|
const classes = {
|
||||||
root: ({ props, instance }) => ['p-inline-message p-component p-inline-message-' + props.severity, { 'p-inline-message-icon-only': !instance.$slots.default }],
|
root: ({ props, instance }) => ['p-inline-message p-component p-inline-message-' + props.severity, { 'p-inline-message-icon-only': !instance.$slots.default }],
|
||||||
icon: ({ props }) => ['p-inline-message-icon', props.icon],
|
icon: ({ props }) => ['p-inline-message-icon', props.icon],
|
||||||
|
|
@ -32,6 +8,5 @@ const classes = {
|
||||||
|
|
||||||
export default BaseStyle.extend({
|
export default BaseStyle.extend({
|
||||||
name: 'inlinemessage',
|
name: 'inlinemessage',
|
||||||
css,
|
|
||||||
classes
|
classes
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,27 +1,5 @@
|
||||||
import BaseStyle from 'primevue/base/style';
|
import BaseStyle from 'primevue/base/style';
|
||||||
|
|
||||||
const css = `
|
|
||||||
@layer primevue {
|
|
||||||
.p-inplace .p-inplace-display {
|
|
||||||
display: inline;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-inplace .p-inplace-content {
|
|
||||||
display: inline;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-fluid .p-inplace.p-inplace-closable .p-inplace-content {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext {
|
|
||||||
flex: 1 1 auto;
|
|
||||||
width: 1%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const classes = {
|
const classes = {
|
||||||
root: ({ props }) => ['p-inplace p-component', { 'p-inplace-closable': props.closable }],
|
root: ({ props }) => ['p-inplace p-component', { 'p-inplace-closable': props.closable }],
|
||||||
display: ({ props }) => ['p-inplace-display', { 'p-disabled': props.disabled }],
|
display: ({ props }) => ['p-inplace-display', { 'p-disabled': props.disabled }],
|
||||||
|
|
@ -30,6 +8,5 @@ const classes = {
|
||||||
|
|
||||||
export default BaseStyle.extend({
|
export default BaseStyle.extend({
|
||||||
name: 'inplace',
|
name: 'inplace',
|
||||||
css,
|
|
||||||
classes
|
classes
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,41 +1,10 @@
|
||||||
import BaseStyle from 'primevue/base/style';
|
import BaseStyle from 'primevue/base/style';
|
||||||
|
|
||||||
const css = `
|
|
||||||
@layer primevue {
|
|
||||||
.p-inputgroup {
|
|
||||||
display: flex;
|
|
||||||
align-items: stretch;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-inputgroup-addon {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-inputgroup .p-float-label {
|
|
||||||
display: flex;
|
|
||||||
align-items: stretch;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-inputgroup .p-inputtext,
|
|
||||||
.p-fluid .p-inputgroup .p-inputtext,
|
|
||||||
.p-inputgroup .p-inputwrapper,
|
|
||||||
.p-fluid .p-inputgroup .p-input {
|
|
||||||
flex: 1 1 auto;
|
|
||||||
width: 1%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const classes = {
|
const classes = {
|
||||||
root: 'p-inputgroup'
|
root: 'p-inputgroup'
|
||||||
};
|
};
|
||||||
|
|
||||||
export default BaseStyle.extend({
|
export default BaseStyle.extend({
|
||||||
name: 'inputgroup',
|
name: 'inputgroup',
|
||||||
css,
|
|
||||||
classes
|
classes
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,110 +1,5 @@
|
||||||
import BaseStyle from 'primevue/base/style';
|
import BaseStyle from 'primevue/base/style';
|
||||||
|
|
||||||
const css = `
|
|
||||||
@layer primevue {
|
|
||||||
.p-inputnumber {
|
|
||||||
display: inline-flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-inputnumber-button {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
flex: 0 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label,
|
|
||||||
.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up {
|
|
||||||
border-top-left-radius: 0;
|
|
||||||
border-bottom-left-radius: 0;
|
|
||||||
border-bottom-right-radius: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-inputnumber-buttons-stacked .p-inputnumber-input {
|
|
||||||
border-top-right-radius: 0;
|
|
||||||
border-bottom-right-radius: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down {
|
|
||||||
border-top-left-radius: 0;
|
|
||||||
border-top-right-radius: 0;
|
|
||||||
border-bottom-left-radius: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-inputnumber-buttons-stacked .p-inputnumber-button-group {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button {
|
|
||||||
flex: 1 1 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up {
|
|
||||||
order: 3;
|
|
||||||
border-top-left-radius: 0;
|
|
||||||
border-bottom-left-radius: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-inputnumber-buttons-horizontal .p-inputnumber-input {
|
|
||||||
order: 2;
|
|
||||||
border-radius: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down {
|
|
||||||
order: 1;
|
|
||||||
border-top-right-radius: 0;
|
|
||||||
border-bottom-right-radius: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-inputnumber-buttons-vertical {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up {
|
|
||||||
order: 1;
|
|
||||||
border-bottom-left-radius: 0;
|
|
||||||
border-bottom-right-radius: 0;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-inputnumber-buttons-vertical .p-inputnumber-input {
|
|
||||||
order: 2;
|
|
||||||
border-radius: 0;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down {
|
|
||||||
order: 3;
|
|
||||||
border-top-left-radius: 0;
|
|
||||||
border-top-right-radius: 0;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-inputnumber-input {
|
|
||||||
flex: 1 1 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-fluid .p-inputnumber {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-fluid .p-inputnumber .p-inputnumber-input {
|
|
||||||
width: 1%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const classes = {
|
const classes = {
|
||||||
root: ({ instance, props }) => [
|
root: ({ instance, props }) => [
|
||||||
'p-inputnumber p-component p-inputwrapper',
|
'p-inputnumber p-component p-inputwrapper',
|
||||||
|
|
@ -140,6 +35,5 @@ const classes = {
|
||||||
|
|
||||||
export default BaseStyle.extend({
|
export default BaseStyle.extend({
|
||||||
name: 'inputnumber',
|
name: 'inputnumber',
|
||||||
css,
|
|
||||||
classes
|
classes
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,33 +1,5 @@
|
||||||
import BaseStyle from 'primevue/base/style';
|
import BaseStyle from 'primevue/base/style';
|
||||||
|
|
||||||
const css = `
|
|
||||||
@layer primevue {
|
|
||||||
.p-inputswitch {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-inputswitch-input {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-inputswitch-slider {
|
|
||||||
position: absolute;
|
|
||||||
cursor: pointer;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
border: 1px solid transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-inputswitch-slider:before {
|
|
||||||
position: absolute;
|
|
||||||
content: '';
|
|
||||||
top: 50%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const inlineStyles = {
|
const inlineStyles = {
|
||||||
root: { position: 'relative' }
|
root: { position: 'relative' }
|
||||||
};
|
};
|
||||||
|
|
@ -47,7 +19,6 @@ const classes = {
|
||||||
|
|
||||||
export default BaseStyle.extend({
|
export default BaseStyle.extend({
|
||||||
name: 'inputswitch',
|
name: 'inputswitch',
|
||||||
css,
|
|
||||||
classes,
|
classes,
|
||||||
inlineStyles
|
inlineStyles
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,28 +1,5 @@
|
||||||
import BaseStyle from 'primevue/base/style';
|
import BaseStyle from 'primevue/base/style';
|
||||||
|
|
||||||
const css = `
|
|
||||||
@keyframes dash-frame {
|
|
||||||
100% {
|
|
||||||
stroke-dashoffset: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@layer primevue {
|
|
||||||
.p-knob-range {
|
|
||||||
fill: none;
|
|
||||||
transition: stroke 0.1s ease-in;
|
|
||||||
}
|
|
||||||
.p-knob-value {
|
|
||||||
animation-name: dash-frame;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
fill: none;
|
|
||||||
}
|
|
||||||
.p-knob-text {
|
|
||||||
font-size: 1.3rem;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const classes = {
|
const classes = {
|
||||||
root: ({ props }) => ['p-knob p-component', { 'p-disabled': props.disabled }],
|
root: ({ props }) => ['p-knob p-component', { 'p-disabled': props.disabled }],
|
||||||
range: 'p-knob-range',
|
range: 'p-knob-range',
|
||||||
|
|
@ -32,6 +9,5 @@ const classes = {
|
||||||
|
|
||||||
export default BaseStyle.extend({
|
export default BaseStyle.extend({
|
||||||
name: 'knob',
|
name: 'knob',
|
||||||
css,
|
|
||||||
classes
|
classes
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,43 +1,5 @@
|
||||||
import BaseStyle from 'primevue/base/style';
|
import BaseStyle from 'primevue/base/style';
|
||||||
|
|
||||||
const css = `
|
|
||||||
@layer primevue {
|
|
||||||
.p-listbox-list-wrapper {
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-listbox-list {
|
|
||||||
list-style-type: none;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-listbox-item {
|
|
||||||
cursor: pointer;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-listbox-item-group {
|
|
||||||
cursor: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-listbox-filter-container {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-listbox-filter-icon {
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
margin-top: -0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-listbox-filter {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const classes = {
|
const classes = {
|
||||||
root: ({ instance, props }) => [
|
root: ({ instance, props }) => [
|
||||||
'p-listbox p-component',
|
'p-listbox p-component',
|
||||||
|
|
@ -66,6 +28,5 @@ const classes = {
|
||||||
|
|
||||||
export default BaseStyle.extend({
|
export default BaseStyle.extend({
|
||||||
name: 'listbox',
|
name: 'listbox',
|
||||||
css,
|
|
||||||
classes
|
classes
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,170 +1,5 @@
|
||||||
import BaseStyle from 'primevue/base/style';
|
import BaseStyle from 'primevue/base/style';
|
||||||
|
|
||||||
const css = `
|
|
||||||
@layer primevue {
|
|
||||||
.p-megamenu {
|
|
||||||
display: flex;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-megamenu-root-list {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-megamenu .p-menuitem-link {
|
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
text-decoration: none;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-megamenu .p-menuitem-text {
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-megamenu-panel {
|
|
||||||
display: none;
|
|
||||||
width: auto;
|
|
||||||
z-index: 1;
|
|
||||||
left: 0;
|
|
||||||
min-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-megamenu-panel:not(.p-megamenu-mobile) {
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-megamenu-submenu {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-megamenu-button {
|
|
||||||
display: none;
|
|
||||||
cursor: pointer;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Horizontal */
|
|
||||||
.p-megamenu-horizontal {
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-megamenu-horizontal .p-megamenu-root-list {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-megamenu-horizontal .p-megamenu-end {
|
|
||||||
margin-left: auto;
|
|
||||||
align-self: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Vertical */
|
|
||||||
.p-megamenu-vertical {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-megamenu-vertical:not(.p-megamenu-mobile) {
|
|
||||||
display: inline-flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-megamenu-vertical .p-megamenu-root-list {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-megamenu-vertical:not(.p-megamenu-mobile) .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel {
|
|
||||||
left: 100%;
|
|
||||||
top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
|
|
||||||
margin-left: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-megamenu-grid {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-megamenu-col-2,
|
|
||||||
.p-megamenu-col-3,
|
|
||||||
.p-megamenu-col-4,
|
|
||||||
.p-megamenu-col-6,
|
|
||||||
.p-megamenu-col-12 {
|
|
||||||
flex: 0 0 auto;
|
|
||||||
padding: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-megamenu-col-2 {
|
|
||||||
width: 16.6667%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-megamenu-col-3 {
|
|
||||||
width: 25%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-megamenu-col-4 {
|
|
||||||
width: 33.3333%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-megamenu-col-6 {
|
|
||||||
width: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-megamenu-col-12 {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-megamenu.p-megamenu-mobile .p-megamenu-button {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-megamenu.p-megamenu-mobile .p-megamenu-root-list {
|
|
||||||
position: absolute;
|
|
||||||
display: none;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-megamenu.p-megamenu-mobile .p-submenu-list {
|
|
||||||
width: 100%;
|
|
||||||
position: static;
|
|
||||||
box-shadow: none;
|
|
||||||
border: 0 none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem {
|
|
||||||
width: 100%;
|
|
||||||
position: static;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
top: 100%;
|
|
||||||
left: 0;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-megamenu.p-megamenu-mobile .p-megamenu-grid {
|
|
||||||
flex-wrap: wrap;
|
|
||||||
overflow: auto;
|
|
||||||
max-height: 90%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const inlineStyles = {
|
const inlineStyles = {
|
||||||
submenu: ({ instance, processedItem }) => ({ display: instance.isItemActive(processedItem) ? 'block' : 'none' })
|
submenu: ({ instance, processedItem }) => ({ display: instance.isItemActive(processedItem) ? 'block' : 'none' })
|
||||||
};
|
};
|
||||||
|
|
@ -242,7 +77,6 @@ const classes = {
|
||||||
|
|
||||||
export default BaseStyle.extend({
|
export default BaseStyle.extend({
|
||||||
name: 'megamenu',
|
name: 'megamenu',
|
||||||
css,
|
|
||||||
classes,
|
classes,
|
||||||
inlineStyles
|
inlineStyles
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,28 +1,5 @@
|
||||||
import BaseStyle from 'primevue/base/style';
|
import BaseStyle from 'primevue/base/style';
|
||||||
|
|
||||||
const css = `
|
|
||||||
@layer primevue {
|
|
||||||
.p-menu ul {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-menu .p-menuitem-link {
|
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
text-decoration: none;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-menu .p-menuitem-text {
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const classes = {
|
const classes = {
|
||||||
root: ({ instance, props }) => [
|
root: ({ instance, props }) => [
|
||||||
'p-menu p-component',
|
'p-menu p-component',
|
||||||
|
|
@ -51,6 +28,5 @@ const classes = {
|
||||||
|
|
||||||
export default BaseStyle.extend({
|
export default BaseStyle.extend({
|
||||||
name: 'menu',
|
name: 'menu',
|
||||||
css,
|
|
||||||
classes
|
classes
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,115 +1,5 @@
|
||||||
import BaseStyle from 'primevue/base/style';
|
import BaseStyle from 'primevue/base/style';
|
||||||
|
|
||||||
const css = `
|
|
||||||
@layer primevue {
|
|
||||||
.p-menubar {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-menubar ul {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-menubar .p-menuitem-link {
|
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
text-decoration: none;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-menubar .p-menuitem-text {
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-menubar .p-menuitem {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-menubar-root-list {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-menubar-root-list > li ul {
|
|
||||||
display: none;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-menubar-root-list > .p-menuitem-active > .p-submenu-list {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-menubar .p-submenu-list {
|
|
||||||
display: none;
|
|
||||||
position: absolute;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list {
|
|
||||||
display: block;
|
|
||||||
left: 100%;
|
|
||||||
top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
|
|
||||||
margin-left: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-menubar .p-menubar-end {
|
|
||||||
margin-left: auto;
|
|
||||||
align-self: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-menubar-button {
|
|
||||||
display: none;
|
|
||||||
cursor: pointer;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-menubar.p-menubar-mobile {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-menubar.p-menubar-mobile .p-menubar-button {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-menubar.p-menubar-mobile .p-menubar-root-list {
|
|
||||||
position: absolute;
|
|
||||||
display: none;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-menubar.p-menubar-mobile .p-submenu-list {
|
|
||||||
width: 100%;
|
|
||||||
position: static;
|
|
||||||
box-shadow: none;
|
|
||||||
border: 0 none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem {
|
|
||||||
width: 100%;
|
|
||||||
position: static;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-menubar.p-menubar-mobile-active .p-menubar-root-list {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
top: 100%;
|
|
||||||
left: 0;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const inlineStyles = {
|
const inlineStyles = {
|
||||||
submenu: ({ instance, processedItem }) => ({ display: instance.isItemActive(processedItem) ? 'block' : 'none' })
|
submenu: ({ instance, processedItem }) => ({ display: instance.isItemActive(processedItem) ? 'block' : 'none' })
|
||||||
};
|
};
|
||||||
|
|
@ -145,7 +35,6 @@ const classes = {
|
||||||
|
|
||||||
export default BaseStyle.extend({
|
export default BaseStyle.extend({
|
||||||
name: 'menubar',
|
name: 'menubar',
|
||||||
css,
|
|
||||||
classes,
|
classes,
|
||||||
inlineStyles
|
inlineStyles
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,58 +1,5 @@
|
||||||
import BaseStyle from 'primevue/base/style';
|
import BaseStyle from 'primevue/base/style';
|
||||||
|
|
||||||
const css = `
|
|
||||||
@layer primevue {
|
|
||||||
.p-message-wrapper {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-message-icon {
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-message-close {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-message-close.p-link {
|
|
||||||
margin-left: auto;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-message-enter-from {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-message-enter-active {
|
|
||||||
transition: opacity 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-message.p-message-leave-from {
|
|
||||||
max-height: 1000px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-message.p-message-leave-to {
|
|
||||||
max-height: 0;
|
|
||||||
opacity: 0;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-message-leave-active {
|
|
||||||
overflow: hidden;
|
|
||||||
transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-message-leave-active .p-message-close {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const classes = {
|
const classes = {
|
||||||
root: ({ props }) => 'p-message p-component p-message-' + props.severity,
|
root: ({ props }) => 'p-message p-component p-message-' + props.severity,
|
||||||
wrapper: 'p-message-wrapper',
|
wrapper: 'p-message-wrapper',
|
||||||
|
|
@ -64,6 +11,5 @@ const classes = {
|
||||||
|
|
||||||
export default BaseStyle.extend({
|
export default BaseStyle.extend({
|
||||||
name: 'message',
|
name: 'message',
|
||||||
css,
|
|
||||||
classes
|
classes
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,54 +1,5 @@
|
||||||
import BaseStyle from 'primevue/base/style';
|
import BaseStyle from 'primevue/base/style';
|
||||||
|
|
||||||
const css = `
|
|
||||||
@layer primevue {
|
|
||||||
.p-metergroup {
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-metergroup-vertical.p-metergroup {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-metergroup-vertical .p-metergroup-meter-container {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-metergroup-meter-container {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-metergroup-label-list {
|
|
||||||
display: flex;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
list-style-type: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-metergroup-vertical .p-metergroup-label-list {
|
|
||||||
align-items: start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-metergroup-horizontal .p-metergroup-label-list-vertical {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-metergroup-vertical .p-metergroup-label-list-horizontal {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-metergroup-label-list-item {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-metergroup-label-type {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const classes = {
|
const classes = {
|
||||||
root: ({ props }) => [
|
root: ({ props }) => [
|
||||||
'p-metergroup p-component',
|
'p-metergroup p-component',
|
||||||
|
|
@ -57,26 +8,22 @@ const classes = {
|
||||||
'p-metergroup-vertical': props.orientation === 'vertical'
|
'p-metergroup-vertical': props.orientation === 'vertical'
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
metercontainer: 'p-metergroup-meter-container',
|
metercontainer: 'p-metergroup-meters',
|
||||||
meter: 'p-metergroup-meter',
|
meter: 'p-metergroup-meter',
|
||||||
labellist: ({ props }) => [
|
labellist: ({ props }) => [
|
||||||
'p-metergroup-label-list',
|
'p-metergroup-labels',
|
||||||
|
|
||||||
{
|
{
|
||||||
'p-metergroup-label-list-start': props.labelPosition === 'start',
|
'p-metergroup-labels-vertical': props.labelOrientation === 'vertical',
|
||||||
'p-metergroup-label-list-end': props.labelPosition === 'end',
|
'p-metergroup-labels-horizontal': props.labelOrientation === 'horizontal'
|
||||||
'p-metergroup-label-list-vertical': props.labelOrientation === 'vertical',
|
|
||||||
'p-metergroup-label-list-horizontal': props.labelOrientation === 'horizontal'
|
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
labellistitem: 'p-metergroup-label-list-item',
|
labellistitem: 'p-metergroup-label',
|
||||||
labelicon: 'p-metergroup-label-icon',
|
labelicon: 'p-metergroup-label-icon',
|
||||||
labellisttype: 'p-metergroup-label-type',
|
labellisttype: 'p-metergroup-label-marker',
|
||||||
label: 'p-metergroup-label'
|
label: 'p-metergroup-label-text'
|
||||||
};
|
};
|
||||||
|
|
||||||
export default BaseStyle.extend({
|
export default BaseStyle.extend({
|
||||||
name: 'metergroup',
|
name: 'metergroup',
|
||||||
css,
|
|
||||||
classes
|
classes
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,115 +1,5 @@
|
||||||
import BaseStyle from 'primevue/base/style';
|
import BaseStyle from 'primevue/base/style';
|
||||||
|
|
||||||
const css = `
|
|
||||||
@layer primevue {
|
|
||||||
.p-multiselect {
|
|
||||||
display: inline-flex;
|
|
||||||
cursor: pointer;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-multiselect-trigger {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-multiselect-label-container {
|
|
||||||
overflow: hidden;
|
|
||||||
flex: 1 1 auto;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-multiselect-label {
|
|
||||||
display: block;
|
|
||||||
white-space: nowrap;
|
|
||||||
cursor: pointer;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-multiselect-label-empty {
|
|
||||||
overflow: hidden;
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-multiselect-token {
|
|
||||||
cursor: default;
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
flex: 0 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-multiselect-token-icon {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-multiselect .p-multiselect-panel {
|
|
||||||
min-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-multiselect-items-wrapper {
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-multiselect-items {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
list-style-type: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-multiselect-item {
|
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
font-weight: normal;
|
|
||||||
white-space: nowrap;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-multiselect-item-group {
|
|
||||||
cursor: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-multiselect-header {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-multiselect-filter-container {
|
|
||||||
position: relative;
|
|
||||||
flex: 1 1 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-multiselect-filter-icon {
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
margin-top: -0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-multiselect-filter-container .p-inputtext {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-multiselect-close {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
flex-shrink: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
margin-left: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-fluid .p-multiselect {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const inlineStyles = {
|
const inlineStyles = {
|
||||||
root: ({ props }) => ({ position: props.appendTo === 'self' ? 'relative' : undefined })
|
root: ({ props }) => ({ position: props.appendTo === 'self' ? 'relative' : undefined })
|
||||||
};
|
};
|
||||||
|
|
@ -175,7 +65,6 @@ const classes = {
|
||||||
|
|
||||||
export default BaseStyle.extend({
|
export default BaseStyle.extend({
|
||||||
name: 'multiselect',
|
name: 'multiselect',
|
||||||
css,
|
|
||||||
classes,
|
classes,
|
||||||
inlineStyles
|
inlineStyles
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,47 +1,5 @@
|
||||||
import BaseStyle from 'primevue/base/style';
|
import BaseStyle from 'primevue/base/style';
|
||||||
|
|
||||||
const css = `
|
|
||||||
@layer primevue {
|
|
||||||
.p-orderlist {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-orderlist-controls {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-orderlist-list-container {
|
|
||||||
flex: 1 1 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-orderlist-list {
|
|
||||||
list-style-type: none;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
overflow: auto;
|
|
||||||
min-height: 12rem;
|
|
||||||
max-height: 24rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-orderlist-item {
|
|
||||||
cursor: pointer;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-orderlist.p-state-disabled .p-orderlist-item,
|
|
||||||
.p-orderlist.p-state-disabled .p-button {
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-orderlist.p-state-disabled .p-orderlist-list {
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const classes = {
|
const classes = {
|
||||||
root: ({ props }) => [
|
root: ({ props }) => [
|
||||||
'p-orderlist p-component',
|
'p-orderlist p-component',
|
||||||
|
|
@ -64,6 +22,5 @@ const classes = {
|
||||||
|
|
||||||
export default BaseStyle.extend({
|
export default BaseStyle.extend({
|
||||||
name: 'orderlist',
|
name: 'orderlist',
|
||||||
css,
|
|
||||||
classes
|
classes
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,62 +1,5 @@
|
||||||
import BaseStyle from 'primevue/base/style';
|
import BaseStyle from 'primevue/base/style';
|
||||||
|
|
||||||
const css = `
|
|
||||||
@layer primevue {
|
|
||||||
.p-organizationchart-table {
|
|
||||||
border-spacing: 0;
|
|
||||||
border-collapse: separate;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-organizationchart-table > tbody > tr > td {
|
|
||||||
text-align: center;
|
|
||||||
vertical-align: top;
|
|
||||||
padding: 0 0.75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-organizationchart-node-content {
|
|
||||||
display: inline-block;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-organizationchart-node-content .p-node-toggler {
|
|
||||||
position: absolute;
|
|
||||||
bottom: -0.75rem;
|
|
||||||
margin-left: -0.75rem;
|
|
||||||
z-index: 2;
|
|
||||||
left: 50%;
|
|
||||||
user-select: none;
|
|
||||||
cursor: pointer;
|
|
||||||
width: 1.5rem;
|
|
||||||
height: 1.5rem;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon {
|
|
||||||
position: relative;
|
|
||||||
top: 0.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-organizationchart-line-down {
|
|
||||||
margin: 0 auto;
|
|
||||||
height: 20px;
|
|
||||||
width: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-organizationchart-line-right {
|
|
||||||
border-radius: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-organizationchart-line-left {
|
|
||||||
border-radius: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-organizationchart-selectable-node {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const classes = {
|
const classes = {
|
||||||
root: 'p-organizationchart p-component',
|
root: 'p-organizationchart p-component',
|
||||||
table: 'p-organizationchart-table',
|
table: 'p-organizationchart-table',
|
||||||
|
|
@ -72,6 +15,5 @@ const classes = {
|
||||||
|
|
||||||
export default BaseStyle.extend({
|
export default BaseStyle.extend({
|
||||||
name: 'organizationchart',
|
name: 'organizationchart',
|
||||||
css,
|
|
||||||
classes
|
classes
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,79 +1,5 @@
|
||||||
import BaseStyle from 'primevue/base/style';
|
import BaseStyle from 'primevue/base/style';
|
||||||
|
|
||||||
const css = `
|
|
||||||
@layer primevue {
|
|
||||||
.p-overlaypanel {
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-overlaypanel-flipped {
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-overlaypanel-close {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Animation */
|
|
||||||
.p-overlaypanel-enter-from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: scaleY(0.8);
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-overlaypanel-leave-to {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-overlaypanel-enter-active {
|
|
||||||
transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-overlaypanel-leave-active {
|
|
||||||
transition: opacity 0.1s linear;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-overlaypanel:after,
|
|
||||||
.p-overlaypanel:before {
|
|
||||||
bottom: 100%;
|
|
||||||
left: calc(var(--overlayArrowLeft, 0) + 1.25rem);
|
|
||||||
content: ' ';
|
|
||||||
height: 0;
|
|
||||||
width: 0;
|
|
||||||
position: absolute;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-overlaypanel:after {
|
|
||||||
border-width: 8px;
|
|
||||||
margin-left: -8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-overlaypanel:before {
|
|
||||||
border-width: 10px;
|
|
||||||
margin-left: -10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-overlaypanel-flipped:after,
|
|
||||||
.p-overlaypanel-flipped:before {
|
|
||||||
bottom: auto;
|
|
||||||
top: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-overlaypanel.p-overlaypanel-flipped:after {
|
|
||||||
border-bottom-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-overlaypanel.p-overlaypanel-flipped:before {
|
|
||||||
border-bottom-color: transparent;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const classes = {
|
const classes = {
|
||||||
root: ({ instance }) => [
|
root: ({ instance }) => [
|
||||||
'p-overlaypanel p-component',
|
'p-overlaypanel p-component',
|
||||||
|
|
@ -88,6 +14,5 @@ const classes = {
|
||||||
|
|
||||||
export default BaseStyle.extend({
|
export default BaseStyle.extend({
|
||||||
name: 'overlaypanel',
|
name: 'overlaypanel',
|
||||||
css,
|
|
||||||
classes
|
classes
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,49 +1,5 @@
|
||||||
import BaseStyle from 'primevue/base/style';
|
import BaseStyle from 'primevue/base/style';
|
||||||
|
|
||||||
const css = `
|
|
||||||
@layer primevue {
|
|
||||||
.p-paginator-default {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-paginator {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-paginator-left-content {
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-paginator-right-content {
|
|
||||||
margin-left: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-paginator-page,
|
|
||||||
.p-paginator-next,
|
|
||||||
.p-paginator-last,
|
|
||||||
.p-paginator-first,
|
|
||||||
.p-paginator-prev,
|
|
||||||
.p-paginator-current {
|
|
||||||
cursor: pointer;
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
line-height: 1;
|
|
||||||
user-select: none;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-paginator-element:focus {
|
|
||||||
z-index: 1;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const classes = {
|
const classes = {
|
||||||
paginator: ({ instance, key }) => [
|
paginator: ({ instance, key }) => [
|
||||||
'p-paginator p-component',
|
'p-paginator p-component',
|
||||||
|
|
@ -97,6 +53,5 @@ const classes = {
|
||||||
|
|
||||||
export default BaseStyle.extend({
|
export default BaseStyle.extend({
|
||||||
name: 'paginator',
|
name: 'paginator',
|
||||||
css,
|
|
||||||
classes
|
classes
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,29 +1,5 @@
|
||||||
import BaseStyle from 'primevue/base/style';
|
import BaseStyle from 'primevue/base/style';
|
||||||
|
|
||||||
const css = `
|
|
||||||
@layer primevue {
|
|
||||||
.p-panel-header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-panel-title {
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-panel-header-icon {
|
|
||||||
display: inline-flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
cursor: pointer;
|
|
||||||
text-decoration: none;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const classes = {
|
const classes = {
|
||||||
root: ({ props }) => [
|
root: ({ props }) => [
|
||||||
'p-panel p-component',
|
'p-panel p-component',
|
||||||
|
|
@ -42,6 +18,5 @@ const classes = {
|
||||||
|
|
||||||
export default BaseStyle.extend({
|
export default BaseStyle.extend({
|
||||||
name: 'panel',
|
name: 'panel',
|
||||||
//css, // @todo remove
|
|
||||||
classes
|
classes
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,42 +1,5 @@
|
||||||
import BaseStyle from 'primevue/base/style';
|
import BaseStyle from 'primevue/base/style';
|
||||||
|
|
||||||
const css = `
|
|
||||||
@layer primevue {
|
|
||||||
.p-panelmenu .p-panelmenu-header-action {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
user-select: none;
|
|
||||||
cursor: pointer;
|
|
||||||
position: relative;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-panelmenu .p-panelmenu-header-action:focus {
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-panelmenu .p-submenu-list {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-panelmenu .p-menuitem-link {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
user-select: none;
|
|
||||||
cursor: pointer;
|
|
||||||
text-decoration: none;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-panelmenu .p-menuitem-text {
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const classes = {
|
const classes = {
|
||||||
root: 'p-panelmenu p-component',
|
root: 'p-panelmenu p-component',
|
||||||
panel: 'p-panelmenu-panel',
|
panel: 'p-panelmenu-panel',
|
||||||
|
|
@ -72,6 +35,5 @@ const classes = {
|
||||||
|
|
||||||
export default BaseStyle.extend({
|
export default BaseStyle.extend({
|
||||||
name: 'panelmenu',
|
name: 'panelmenu',
|
||||||
css,
|
|
||||||
classes
|
classes
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,36 +1,5 @@
|
||||||
import BaseStyle from 'primevue/base/style';
|
import BaseStyle from 'primevue/base/style';
|
||||||
|
|
||||||
const css = `
|
|
||||||
@layer primevue {
|
|
||||||
.p-password {
|
|
||||||
display: inline-flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-password .p-password-panel {
|
|
||||||
min-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-password-meter {
|
|
||||||
height: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-password-strength {
|
|
||||||
height: 100%;
|
|
||||||
width: 0;
|
|
||||||
transition: width 1s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-fluid .p-password {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-password-input::-ms-reveal,
|
|
||||||
.p-password-input::-ms-clear {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const inlineStyles = {
|
const inlineStyles = {
|
||||||
root: ({ props }) => ({ position: props.appendTo === 'self' ? 'relative' : undefined })
|
root: ({ props }) => ({ position: props.appendTo === 'self' ? 'relative' : undefined })
|
||||||
};
|
};
|
||||||
|
|
@ -63,7 +32,6 @@ const classes = {
|
||||||
|
|
||||||
export default BaseStyle.extend({
|
export default BaseStyle.extend({
|
||||||
name: 'password',
|
name: 'password',
|
||||||
css,
|
|
||||||
classes,
|
classes,
|
||||||
inlineStyles
|
inlineStyles
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,43 +1,5 @@
|
||||||
import BaseStyle from 'primevue/base/style';
|
import BaseStyle from 'primevue/base/style';
|
||||||
|
|
||||||
const css = `
|
|
||||||
@layer primevue {
|
|
||||||
.p-picklist {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-picklist-buttons {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-picklist-list-wrapper {
|
|
||||||
flex: 1 1 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-picklist-list {
|
|
||||||
list-style-type: none;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
overflow: auto;
|
|
||||||
min-height: 12rem;
|
|
||||||
max-height: 24rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-picklist-item {
|
|
||||||
cursor: pointer;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to,
|
|
||||||
.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to {
|
|
||||||
transition: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const classes = {
|
const classes = {
|
||||||
root: ({ props }) => [
|
root: ({ props }) => [
|
||||||
'p-picklist p-component',
|
'p-picklist p-component',
|
||||||
|
|
@ -65,6 +27,5 @@ const classes = {
|
||||||
|
|
||||||
export default BaseStyle.extend({
|
export default BaseStyle.extend({
|
||||||
name: 'picklist',
|
name: 'picklist',
|
||||||
css,
|
|
||||||
classes
|
classes
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,118 +1,5 @@
|
||||||
import BaseStyle from 'primevue/base/style';
|
import BaseStyle from 'primevue/base/style';
|
||||||
|
|
||||||
const css = `
|
|
||||||
@layer primevue {
|
|
||||||
.p-progressbar {
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-progressbar-determinate .p-progressbar-value {
|
|
||||||
height: 100%;
|
|
||||||
width: 0%;
|
|
||||||
position: absolute;
|
|
||||||
display: none;
|
|
||||||
border: 0 none;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-progressbar-determinate .p-progressbar-label {
|
|
||||||
display: inline-flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-progressbar-determinate .p-progressbar-value-animate {
|
|
||||||
transition: width 1s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-progressbar-indeterminate .p-progressbar-value::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
background-color: inherit;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
bottom: 0;
|
|
||||||
will-change: left, right;
|
|
||||||
-webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
|
|
||||||
animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-progressbar-indeterminate .p-progressbar-value::after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
background-color: inherit;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
bottom: 0;
|
|
||||||
will-change: left, right;
|
|
||||||
-webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
|
|
||||||
animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
|
|
||||||
-webkit-animation-delay: 1.15s;
|
|
||||||
animation-delay: 1.15s;
|
|
||||||
}
|
|
||||||
|
|
||||||
@-webkit-keyframes p-progressbar-indeterminate-anim {
|
|
||||||
0% {
|
|
||||||
left: -35%;
|
|
||||||
right: 100%;
|
|
||||||
}
|
|
||||||
60% {
|
|
||||||
left: 100%;
|
|
||||||
right: -90%;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
left: 100%;
|
|
||||||
right: -90%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@keyframes p-progressbar-indeterminate-anim {
|
|
||||||
0% {
|
|
||||||
left: -35%;
|
|
||||||
right: 100%;
|
|
||||||
}
|
|
||||||
60% {
|
|
||||||
left: 100%;
|
|
||||||
right: -90%;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
left: 100%;
|
|
||||||
right: -90%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@-webkit-keyframes p-progressbar-indeterminate-anim-short {
|
|
||||||
0% {
|
|
||||||
left: -200%;
|
|
||||||
right: 100%;
|
|
||||||
}
|
|
||||||
60% {
|
|
||||||
left: 107%;
|
|
||||||
right: -8%;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
left: 107%;
|
|
||||||
right: -8%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@keyframes p-progressbar-indeterminate-anim-short {
|
|
||||||
0% {
|
|
||||||
left: -200%;
|
|
||||||
right: 100%;
|
|
||||||
}
|
|
||||||
60% {
|
|
||||||
left: 107%;
|
|
||||||
right: -8%;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
left: 107%;
|
|
||||||
right: -8%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const classes = {
|
const classes = {
|
||||||
root: ({ instance }) => [
|
root: ({ instance }) => [
|
||||||
'p-progressbar p-component',
|
'p-progressbar p-component',
|
||||||
|
|
@ -128,6 +15,5 @@ const classes = {
|
||||||
|
|
||||||
export default BaseStyle.extend({
|
export default BaseStyle.extend({
|
||||||
name: 'progressbar',
|
name: 'progressbar',
|
||||||
css,
|
|
||||||
classes
|
classes
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,35 +1,5 @@
|
||||||
import BaseStyle from 'primevue/base/style';
|
import BaseStyle from 'primevue/base/style';
|
||||||
|
|
||||||
const css = `
|
|
||||||
@layer primevue {
|
|
||||||
.p-progress-spinner {
|
|
||||||
position: relative;
|
|
||||||
margin: 0 auto;
|
|
||||||
width: 100px;
|
|
||||||
height: 100px;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-progress-spinner::before {
|
|
||||||
content: '';
|
|
||||||
display: block;
|
|
||||||
padding-top: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-progress-spinner-svg {
|
|
||||||
height: 100%;
|
|
||||||
transform-origin: center center;
|
|
||||||
width: 100%;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
margin: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const classes = {
|
const classes = {
|
||||||
root: 'p-progress-spinner',
|
root: 'p-progress-spinner',
|
||||||
spinner: 'p-progress-spinner-svg',
|
spinner: 'p-progress-spinner-svg',
|
||||||
|
|
@ -38,6 +8,5 @@ const classes = {
|
||||||
|
|
||||||
export default BaseStyle.extend({
|
export default BaseStyle.extend({
|
||||||
name: 'progressspinner',
|
name: 'progressspinner',
|
||||||
css,
|
|
||||||
classes
|
classes
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,39 +1,5 @@
|
||||||
import BaseStyle from 'primevue/base/style';
|
import BaseStyle from 'primevue/base/style';
|
||||||
|
|
||||||
const css = `
|
|
||||||
@layer primevue {
|
|
||||||
.p-radiobutton {
|
|
||||||
position: relative;
|
|
||||||
display: inline-flex;
|
|
||||||
user-select: none;
|
|
||||||
vertical-align: bottom;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-radiobutton-input {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-radiobutton-box {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-radiobutton-icon {
|
|
||||||
-webkit-backface-visibility: hidden;
|
|
||||||
backface-visibility: hidden;
|
|
||||||
transform: translateZ(0) scale(.1);
|
|
||||||
border-radius: 50%;
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-radiobutton.p-highlight .p-radiobutton-icon {
|
|
||||||
transform: translateZ(0) scale(1.0, 1.0);
|
|
||||||
visibility: visible;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const classes = {
|
const classes = {
|
||||||
root: ({ instance, props }) => [
|
root: ({ instance, props }) => [
|
||||||
'p-radiobutton p-component',
|
'p-radiobutton p-component',
|
||||||
|
|
@ -51,6 +17,5 @@ const classes = {
|
||||||
|
|
||||||
export default BaseStyle.extend({
|
export default BaseStyle.extend({
|
||||||
name: 'radiobutton',
|
name: 'radiobutton',
|
||||||
css,
|
|
||||||
classes
|
classes
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,25 +1,5 @@
|
||||||
import BaseStyle from 'primevue/base/style';
|
import BaseStyle from 'primevue/base/style';
|
||||||
|
|
||||||
const css = `
|
|
||||||
@layer primevue {
|
|
||||||
.p-rating {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-rating-item {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-rating.p-readonly .p-rating-item {
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const classes = {
|
const classes = {
|
||||||
root: ({ props }) => [
|
root: ({ props }) => [
|
||||||
'p-rating',
|
'p-rating',
|
||||||
|
|
@ -48,6 +28,5 @@ const classes = {
|
||||||
|
|
||||||
export default BaseStyle.extend({
|
export default BaseStyle.extend({
|
||||||
name: 'rating',
|
name: 'rating',
|
||||||
css,
|
|
||||||
classes
|
classes
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,44 +1,10 @@
|
||||||
import BaseStyle from 'primevue/base/style';
|
import BaseStyle from 'primevue/base/style';
|
||||||
|
|
||||||
const css = `
|
|
||||||
@keyframes ripple {
|
|
||||||
100% {
|
|
||||||
opacity: 0;
|
|
||||||
transform: scale(2.5);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@layer primevue {
|
|
||||||
.p-ripple {
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-ink {
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
background: rgba(255, 255, 255, 0.5);
|
|
||||||
border-radius: 100%;
|
|
||||||
transform: scale(0);
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-ink-active {
|
|
||||||
animation: ripple 0.4s linear;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-ripple-disabled .p-ink {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const classes = {
|
const classes = {
|
||||||
root: 'p-ink'
|
root: 'p-ink'
|
||||||
};
|
};
|
||||||
|
|
||||||
export default BaseStyle.extend({
|
export default BaseStyle.extend({
|
||||||
name: 'ripple',
|
name: 'ripple',
|
||||||
css,
|
|
||||||
classes
|
classes
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,65 +1,5 @@
|
||||||
import BaseStyle from 'primevue/base/style';
|
import BaseStyle from 'primevue/base/style';
|
||||||
|
|
||||||
const css = `
|
|
||||||
@layer primevue {
|
|
||||||
.p-scrollpanel-wrapper {
|
|
||||||
overflow: hidden;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-scrollpanel-content {
|
|
||||||
height: calc(100% + 18px);
|
|
||||||
width: calc(100% + 18px);
|
|
||||||
padding: 0 18px 18px 0;
|
|
||||||
position: relative;
|
|
||||||
overflow: auto;
|
|
||||||
box-sizing: border-box;
|
|
||||||
scrollbar-width: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-scrollpanel-content::-webkit-scrollbar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-scrollpanel-bar {
|
|
||||||
position: relative;
|
|
||||||
background: #c1c1c1;
|
|
||||||
border-radius: 3px;
|
|
||||||
z-index: 2;
|
|
||||||
cursor: pointer;
|
|
||||||
opacity: 0;
|
|
||||||
transition: opacity 0.25s linear;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-scrollpanel-bar-y {
|
|
||||||
width: 9px;
|
|
||||||
top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-scrollpanel-bar-x {
|
|
||||||
height: 9px;
|
|
||||||
bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-scrollpanel-hidden {
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-scrollpanel:hover .p-scrollpanel-bar,
|
|
||||||
.p-scrollpanel:active .p-scrollpanel-bar {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-scrollpanel-grabbed {
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const classes = {
|
const classes = {
|
||||||
root: 'p-scrollpanel p-component',
|
root: 'p-scrollpanel p-component',
|
||||||
wrapper: 'p-scrollpanel-wrapper',
|
wrapper: 'p-scrollpanel-wrapper',
|
||||||
|
|
@ -70,6 +10,5 @@ const classes = {
|
||||||
|
|
||||||
export default BaseStyle.extend({
|
export default BaseStyle.extend({
|
||||||
name: 'scrollpanel',
|
name: 'scrollpanel',
|
||||||
//css,
|
|
||||||
classes
|
classes
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,42 +1,5 @@
|
||||||
import BaseStyle from 'primevue/base/style';
|
import BaseStyle from 'primevue/base/style';
|
||||||
|
|
||||||
const css = `
|
|
||||||
@layer primevue {
|
|
||||||
.p-scrolltop {
|
|
||||||
position: fixed;
|
|
||||||
bottom: 20px;
|
|
||||||
right: 20px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-scrolltop-sticky {
|
|
||||||
position: sticky;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-scrolltop-sticky.p-link {
|
|
||||||
margin-left: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-scrolltop-enter-from {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-scrolltop-enter-active {
|
|
||||||
transition: opacity 0.15s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-scrolltop.p-scrolltop-leave-to {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-scrolltop-leave-active {
|
|
||||||
transition: opacity 0.15s;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const classes = {
|
const classes = {
|
||||||
root: ({ props }) => ['p-scrolltop p-link p-component', { 'p-scrolltop-sticky': props.target !== 'window' }],
|
root: ({ props }) => ['p-scrolltop p-link p-component', { 'p-scrolltop-sticky': props.target !== 'window' }],
|
||||||
icon: 'p-scrolltop-icon'
|
icon: 'p-scrolltop-icon'
|
||||||
|
|
@ -44,6 +7,5 @@ const classes = {
|
||||||
|
|
||||||
export default BaseStyle.extend({
|
export default BaseStyle.extend({
|
||||||
name: 'scrolltop',
|
name: 'scrolltop',
|
||||||
css,
|
|
||||||
classes
|
classes
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,158 +1,5 @@
|
||||||
import BaseStyle from 'primevue/base/style';
|
import BaseStyle from 'primevue/base/style';
|
||||||
|
|
||||||
const css = `
|
|
||||||
@layer primevue {
|
|
||||||
.p-sidebar-mask {
|
|
||||||
display: none;
|
|
||||||
pointer-events: none;
|
|
||||||
background-color: transparent;
|
|
||||||
transition-property: background-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-sidebar-mask.p-component-overlay {
|
|
||||||
pointer-events: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-sidebar-visible {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-sidebar {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
pointer-events: auto;
|
|
||||||
transform: translate3d(0px, 0px, 0px);
|
|
||||||
position: relative;
|
|
||||||
transition: transform 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-sidebar-content {
|
|
||||||
overflow-y: auto;
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-sidebar-header {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-sidebar-icon {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-sidebar-full .p-sidebar {
|
|
||||||
transition: none;
|
|
||||||
transform: none;
|
|
||||||
width: 100vw !important;
|
|
||||||
height: 100vh !important;
|
|
||||||
max-height: 100%;
|
|
||||||
top: 0px !important;
|
|
||||||
left: 0px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Animation */
|
|
||||||
/* Center */
|
|
||||||
.p-sidebar-left .p-sidebar-enter-from,
|
|
||||||
.p-sidebar-left .p-sidebar-leave-to {
|
|
||||||
transform: translateX(-100%);
|
|
||||||
}
|
|
||||||
.p-sidebar-right .p-sidebar-enter-from,
|
|
||||||
.p-sidebar-right .p-sidebar-leave-to {
|
|
||||||
transform: translateX(100%);
|
|
||||||
}
|
|
||||||
.p-sidebar-top .p-sidebar-enter-from,
|
|
||||||
.p-sidebar-top .p-sidebar-leave-to {
|
|
||||||
transform: translateY(-100%);
|
|
||||||
}
|
|
||||||
.p-sidebar-bottom .p-sidebar-enter-from,
|
|
||||||
.p-sidebar-bottom .p-sidebar-leave-to {
|
|
||||||
transform: translateY(100%);
|
|
||||||
}
|
|
||||||
.p-sidebar-full .p-sidebar-enter-from,
|
|
||||||
.p-sidebar-full .p-sidebar-leave-to {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
.p-sidebar-full .p-sidebar-enter-active,
|
|
||||||
.p-sidebar-full .p-sidebar-leave-active {
|
|
||||||
transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Size */
|
|
||||||
.p-sidebar-left .p-sidebar {
|
|
||||||
width: 20rem;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-sidebar-right .p-sidebar {
|
|
||||||
width: 20rem;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-sidebar-top .p-sidebar {
|
|
||||||
height: 10rem;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-sidebar-bottom .p-sidebar {
|
|
||||||
height: 10rem;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-sidebar-left .p-sidebar-sm,
|
|
||||||
.p-sidebar-right .p-sidebar-sm {
|
|
||||||
width: 20rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-sidebar-left .p-sidebar-md,
|
|
||||||
.p-sidebar-right .p-sidebar-md {
|
|
||||||
width: 40rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-sidebar-left .p-sidebar-lg,
|
|
||||||
.p-sidebar-right .p-sidebar-lg {
|
|
||||||
width: 60rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-sidebar-top .p-sidebar-sm,
|
|
||||||
.p-sidebar-bottom .p-sidebar-sm {
|
|
||||||
height: 10rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-sidebar-top .p-sidebar-md,
|
|
||||||
.p-sidebar-bottom .p-sidebar-md {
|
|
||||||
height: 20rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-sidebar-top .p-sidebar-lg,
|
|
||||||
.p-sidebar-bottom .p-sidebar-lg {
|
|
||||||
height: 30rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-sidebar-left .p-sidebar-content,
|
|
||||||
.p-sidebar-right .p-sidebar-content,
|
|
||||||
.p-sidebar-top .p-sidebar-content,
|
|
||||||
.p-sidebar-bottom .p-sidebar-content {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 64em) {
|
|
||||||
.p-sidebar-left .p-sidebar-lg,
|
|
||||||
.p-sidebar-left .p-sidebar-md,
|
|
||||||
.p-sidebar-right .p-sidebar-lg,
|
|
||||||
.p-sidebar-right .p-sidebar-md {
|
|
||||||
width: 20rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const inlineStyles = {
|
const inlineStyles = {
|
||||||
mask: ({ position }) => ({
|
mask: ({ position }) => ({
|
||||||
position: 'fixed',
|
position: 'fixed',
|
||||||
|
|
@ -198,7 +45,6 @@ const classes = {
|
||||||
|
|
||||||
export default BaseStyle.extend({
|
export default BaseStyle.extend({
|
||||||
name: 'sidebar',
|
name: 'sidebar',
|
||||||
css,
|
|
||||||
classes,
|
classes,
|
||||||
inlineStyles
|
inlineStyles
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,42 +1,5 @@
|
||||||
import BaseStyle from 'primevue/base/style';
|
import BaseStyle from 'primevue/base/style';
|
||||||
|
|
||||||
const css = `
|
|
||||||
@layer primevue {
|
|
||||||
.p-skeleton {
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-skeleton::after {
|
|
||||||
content: '';
|
|
||||||
animation: p-skeleton-animation 1.2s infinite;
|
|
||||||
height: 100%;
|
|
||||||
left: 0;
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
top: 0;
|
|
||||||
transform: translateX(-100%);
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-skeleton.p-skeleton-circle {
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-skeleton-none::after {
|
|
||||||
animation: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes p-skeleton-animation {
|
|
||||||
from {
|
|
||||||
transform: translateX(-100%);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
transform: translateX(100%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const inlineStyles = {
|
const inlineStyles = {
|
||||||
root: { position: 'relative' }
|
root: { position: 'relative' }
|
||||||
};
|
};
|
||||||
|
|
@ -53,7 +16,6 @@ const classes = {
|
||||||
|
|
||||||
export default BaseStyle.extend({
|
export default BaseStyle.extend({
|
||||||
name: 'skeleton',
|
name: 'skeleton',
|
||||||
css,
|
|
||||||
classes,
|
classes,
|
||||||
inlineStyles
|
inlineStyles
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,47 +1,5 @@
|
||||||
import BaseStyle from 'primevue/base/style';
|
import BaseStyle from 'primevue/base/style';
|
||||||
|
|
||||||
const css = `
|
|
||||||
@layer primevue {
|
|
||||||
.p-slider {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-slider .p-slider-handle {
|
|
||||||
cursor: grab;
|
|
||||||
touch-action: none;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-slider-range {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-slider-horizontal .p-slider-range {
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-slider-horizontal .p-slider-handle {
|
|
||||||
top: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-slider-vertical {
|
|
||||||
height: 100px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-slider-vertical .p-slider-handle {
|
|
||||||
left: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-slider-vertical .p-slider-range {
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const inlineStyles = {
|
const inlineStyles = {
|
||||||
handle: { position: 'absolute' },
|
handle: { position: 'absolute' },
|
||||||
range: { position: 'absolute' }
|
range: { position: 'absolute' }
|
||||||
|
|
@ -62,7 +20,6 @@ const classes = {
|
||||||
|
|
||||||
export default BaseStyle.extend({
|
export default BaseStyle.extend({
|
||||||
name: 'slider',
|
name: 'slider',
|
||||||
css,
|
|
||||||
classes,
|
classes,
|
||||||
inlineStyles
|
inlineStyles
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,86 +1,5 @@
|
||||||
import BaseStyle from 'primevue/base/style';
|
import BaseStyle from 'primevue/base/style';
|
||||||
|
|
||||||
const css = `
|
|
||||||
@layer primevue {
|
|
||||||
.p-speeddial {
|
|
||||||
position: absolute;
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-speeddial-button {
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-speeddial-list {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
list-style: none;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
transition: top 0s linear 0.2s;
|
|
||||||
pointer-events: none;
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-speeddial-item {
|
|
||||||
transform: scale(0);
|
|
||||||
opacity: 0;
|
|
||||||
transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s;
|
|
||||||
will-change: transform;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-speeddial-action {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
border-radius: 50%;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-speeddial-circle .p-speeddial-item,
|
|
||||||
.p-speeddial-semi-circle .p-speeddial-item,
|
|
||||||
.p-speeddial-quarter-circle .p-speeddial-item {
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-speeddial-rotate {
|
|
||||||
transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
|
|
||||||
will-change: transform;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-speeddial-mask {
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
opacity: 0;
|
|
||||||
transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-speeddial-mask-visible {
|
|
||||||
pointer-events: none;
|
|
||||||
opacity: 1;
|
|
||||||
transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-speeddial-opened .p-speeddial-list {
|
|
||||||
pointer-events: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-speeddial-opened .p-speeddial-item {
|
|
||||||
transform: scale(1);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-speeddial-opened .p-speeddial-rotate {
|
|
||||||
transform: rotate(45deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
/* Direction */
|
/* Direction */
|
||||||
const inlineStyles = {
|
const inlineStyles = {
|
||||||
root: ({ props }) => ({
|
root: ({ props }) => ({
|
||||||
|
|
@ -132,7 +51,6 @@ const classes = {
|
||||||
|
|
||||||
export default BaseStyle.extend({
|
export default BaseStyle.extend({
|
||||||
name: 'speeddial',
|
name: 'speeddial',
|
||||||
css,
|
|
||||||
classes,
|
classes,
|
||||||
inlineStyles
|
inlineStyles
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,42 +1,5 @@
|
||||||
import BaseStyle from 'primevue/base/style';
|
import BaseStyle from 'primevue/base/style';
|
||||||
|
|
||||||
const css = `
|
|
||||||
@layer primevue {
|
|
||||||
.p-splitbutton {
|
|
||||||
display: inline-flex;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-splitbutton .p-splitbutton-defaultbutton,
|
|
||||||
.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button,
|
|
||||||
.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button,
|
|
||||||
.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover {
|
|
||||||
flex: 1 1 auto;
|
|
||||||
border-top-right-radius: 0;
|
|
||||||
border-bottom-right-radius: 0;
|
|
||||||
border-right: 0 none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-splitbutton-menubutton,
|
|
||||||
.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button,
|
|
||||||
.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
border-top-left-radius: 0;
|
|
||||||
border-bottom-left-radius: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-splitbutton .p-menu {
|
|
||||||
min-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-fluid .p-splitbutton {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const classes = {
|
const classes = {
|
||||||
root: ({ props }) => [
|
root: ({ props }) => [
|
||||||
'p-splitbutton p-component',
|
'p-splitbutton p-component',
|
||||||
|
|
@ -55,6 +18,5 @@ const classes = {
|
||||||
|
|
||||||
export default BaseStyle.extend({
|
export default BaseStyle.extend({
|
||||||
name: 'splitbutton',
|
name: 'splitbutton',
|
||||||
css,
|
|
||||||
classes
|
classes
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,55 +1,5 @@
|
||||||
import BaseStyle from 'primevue/base/style';
|
import BaseStyle from 'primevue/base/style';
|
||||||
|
|
||||||
const css = `
|
|
||||||
@layer primevue {
|
|
||||||
.p-splitter {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-splitter-vertical {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-splitter-gutter {
|
|
||||||
flex-grow: 0;
|
|
||||||
flex-shrink: 0;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
cursor: col-resize;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-splitter-horizontal.p-splitter-resizing {
|
|
||||||
cursor: col-resize;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle {
|
|
||||||
height: 24px;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-splitter-horizontal > .p-splitter-gutter {
|
|
||||||
cursor: col-resize;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-splitter-vertical.p-splitter-resizing {
|
|
||||||
cursor: row-resize;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-splitter-vertical > .p-splitter-gutter {
|
|
||||||
cursor: row-resize;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle {
|
|
||||||
width: 24px;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const classes = {
|
const classes = {
|
||||||
root: ({ props }) => ['p-splitter p-component', 'p-splitter-' + props.layout],
|
root: ({ props }) => ['p-splitter p-component', 'p-splitter-' + props.layout],
|
||||||
gutter: 'p-splitter-gutter',
|
gutter: 'p-splitter-gutter',
|
||||||
|
|
@ -62,7 +12,6 @@ const inlineStyles = {
|
||||||
|
|
||||||
export default BaseStyle.extend({
|
export default BaseStyle.extend({
|
||||||
name: 'splitter',
|
name: 'splitter',
|
||||||
//css,
|
|
||||||
classes,
|
classes,
|
||||||
inlineStyles
|
inlineStyles
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,29 +1,10 @@
|
||||||
import BaseStyle from 'primevue/base/style';
|
import BaseStyle from 'primevue/base/style';
|
||||||
|
|
||||||
const css = `
|
|
||||||
@layer primevue {
|
|
||||||
.p-splitter-panel {
|
|
||||||
flex-grow: 1;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-splitter-panel-nested {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-splitter-panel .p-splitter {
|
|
||||||
flex-grow: 1;
|
|
||||||
border: 0 none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const classes = {
|
const classes = {
|
||||||
root: ({ instance }) => ['p-splitter-panel', { 'p-splitter-panel-nested': instance.isNested }]
|
root: ({ instance }) => ['p-splitter-panel', { 'p-splitter-panel-nested': instance.isNested }]
|
||||||
};
|
};
|
||||||
|
|
||||||
export default BaseStyle.extend({
|
export default BaseStyle.extend({
|
||||||
name: 'splitterpanel',
|
name: 'splitterpanel',
|
||||||
css,
|
|
||||||
classes
|
classes
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,62 +1,5 @@
|
||||||
import BaseStyle from 'primevue/base/style';
|
import BaseStyle from 'primevue/base/style';
|
||||||
|
|
||||||
const css = `
|
|
||||||
@layer primevue {
|
|
||||||
.p-steps {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-steps .p-steps-list {
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
list-style-type: none;
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-steps-item {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
flex: 1 1 auto;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-steps-item .p-menuitem-link {
|
|
||||||
display: inline-flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
overflow: hidden;
|
|
||||||
text-decoration: none;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-steps.p-steps-readonly .p-steps-item {
|
|
||||||
cursor: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-steps-item.p-steps-current .p-menuitem-link {
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-steps-title {
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-steps-number {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-steps-title {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const classes = {
|
const classes = {
|
||||||
root: ({ props }) => ['p-steps p-component', { 'p-readonly': props.readonly }],
|
root: ({ props }) => ['p-steps p-component', { 'p-readonly': props.readonly }],
|
||||||
menu: 'p-steps-list',
|
menu: 'p-steps-list',
|
||||||
|
|
@ -74,6 +17,5 @@ const classes = {
|
||||||
|
|
||||||
export default BaseStyle.extend({
|
export default BaseStyle.extend({
|
||||||
name: 'steps',
|
name: 'steps',
|
||||||
css,
|
|
||||||
classes
|
classes
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,49 +1,5 @@
|
||||||
import BaseStyle from 'primevue/base/style';
|
import BaseStyle from 'primevue/base/style';
|
||||||
|
|
||||||
const css = `
|
|
||||||
@layer primevue {
|
|
||||||
.p-tabmenu {
|
|
||||||
overflow-x: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-tabmenu-nav {
|
|
||||||
display: flex;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
list-style-type: none;
|
|
||||||
flex-wrap: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-tabmenu-nav a {
|
|
||||||
cursor: pointer;
|
|
||||||
user-select: none;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
position: relative;
|
|
||||||
text-decoration: none;
|
|
||||||
text-decoration: none;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-tabmenu-nav a:focus {
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-tabmenu-nav .p-menuitem-text {
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-tabmenu-ink-bar {
|
|
||||||
display: none;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-tabmenu::-webkit-scrollbar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const classes = {
|
const classes = {
|
||||||
root: 'p-tabmenu p-component',
|
root: 'p-tabmenu p-component',
|
||||||
menu: 'p-tabmenu-nav p-reset',
|
menu: 'p-tabmenu-nav p-reset',
|
||||||
|
|
@ -62,6 +18,5 @@ const classes = {
|
||||||
|
|
||||||
export default BaseStyle.extend({
|
export default BaseStyle.extend({
|
||||||
name: 'tabmenu',
|
name: 'tabmenu',
|
||||||
css,
|
|
||||||
classes
|
classes
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,79 +1,5 @@
|
||||||
import BaseStyle from 'primevue/base/style';
|
import BaseStyle from 'primevue/base/style';
|
||||||
|
|
||||||
const css = `
|
|
||||||
@layer primevue {
|
|
||||||
.p-tabview-nav-container {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-tabview-scrollable .p-tabview-nav-container {
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-tabview-nav-content {
|
|
||||||
overflow-x: auto;
|
|
||||||
overflow-y: hidden;
|
|
||||||
scroll-behavior: smooth;
|
|
||||||
scrollbar-width: none;
|
|
||||||
overscroll-behavior: contain auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-tabview-nav {
|
|
||||||
display: flex;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
list-style-type: none;
|
|
||||||
flex: 1 1 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-tabview-header-action {
|
|
||||||
cursor: pointer;
|
|
||||||
user-select: none;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
position: relative;
|
|
||||||
text-decoration: none;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-tabview-ink-bar {
|
|
||||||
display: none;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-tabview-header-action:focus {
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-tabview-title {
|
|
||||||
line-height: 1;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-tabview-nav-btn {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
z-index: 2;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-tabview-nav-prev {
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-tabview-nav-next {
|
|
||||||
right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-tabview-nav-content::-webkit-scrollbar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const classes = {
|
const classes = {
|
||||||
root: ({ props }) => [
|
root: ({ props }) => [
|
||||||
'p-tabview p-component',
|
'p-tabview p-component',
|
||||||
|
|
@ -105,6 +31,5 @@ const classes = {
|
||||||
|
|
||||||
export default BaseStyle.extend({
|
export default BaseStyle.extend({
|
||||||
name: 'tabview',
|
name: 'tabview',
|
||||||
//css,
|
|
||||||
classes
|
classes
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,25 +1,5 @@
|
||||||
import BaseStyle from 'primevue/base/style';
|
import BaseStyle from 'primevue/base/style';
|
||||||
|
|
||||||
const css = `
|
|
||||||
@layer primevue {
|
|
||||||
.p-tag {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-tag-icon,
|
|
||||||
.p-tag-value,
|
|
||||||
.p-tag-icon.pi {
|
|
||||||
line-height: 1.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-tag.p-tag-rounded {
|
|
||||||
border-radius: 10rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const classes = {
|
const classes = {
|
||||||
root: ({ props }) => [
|
root: ({ props }) => [
|
||||||
'p-tag p-component',
|
'p-tag p-component',
|
||||||
|
|
@ -39,6 +19,5 @@ const classes = {
|
||||||
|
|
||||||
export default BaseStyle.extend({
|
export default BaseStyle.extend({
|
||||||
name: 'tag',
|
name: 'tag',
|
||||||
css,
|
|
||||||
classes
|
classes
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,32 +1,5 @@
|
||||||
import BaseStyle from 'primevue/base/style';
|
import BaseStyle from 'primevue/base/style';
|
||||||
|
|
||||||
const css = `
|
|
||||||
@layer primevue {
|
|
||||||
.p-terminal {
|
|
||||||
height: 18rem;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-terminal-prompt-container {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-terminal-input {
|
|
||||||
flex: 1 1 auto;
|
|
||||||
border: 0 none;
|
|
||||||
background-color: transparent;
|
|
||||||
color: inherit;
|
|
||||||
padding: 0;
|
|
||||||
outline: 0 none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-terminal-input::-ms-clear {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const classes = {
|
const classes = {
|
||||||
root: 'p-terminal p-component',
|
root: 'p-terminal p-component',
|
||||||
content: 'p-terminal-content',
|
content: 'p-terminal-content',
|
||||||
|
|
@ -39,6 +12,5 @@ const classes = {
|
||||||
|
|
||||||
export default BaseStyle.extend({
|
export default BaseStyle.extend({
|
||||||
name: 'terminal',
|
name: 'terminal',
|
||||||
css,
|
|
||||||
classes
|
classes
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,18 +1,5 @@
|
||||||
import BaseStyle from 'primevue/base/style';
|
import BaseStyle from 'primevue/base/style';
|
||||||
|
|
||||||
const css = `
|
|
||||||
@layer primevue {
|
|
||||||
.p-inputtextarea-resizable {
|
|
||||||
overflow: hidden;
|
|
||||||
resize: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-fluid .p-inputtextarea {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const classes = {
|
const classes = {
|
||||||
root: ({ instance, props }) => [
|
root: ({ instance, props }) => [
|
||||||
'p-inputtextarea p-inputtext p-component',
|
'p-inputtextarea p-inputtext p-component',
|
||||||
|
|
@ -27,6 +14,5 @@ const classes = {
|
||||||
|
|
||||||
export default BaseStyle.extend({
|
export default BaseStyle.extend({
|
||||||
name: 'textarea',
|
name: 'textarea',
|
||||||
css,
|
|
||||||
classes
|
classes
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,58 +1,5 @@
|
||||||
import BaseStyle from 'primevue/base/style';
|
import BaseStyle from 'primevue/base/style';
|
||||||
|
|
||||||
const css = `
|
|
||||||
@layer primevue {
|
|
||||||
.p-tieredmenu ul {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-tieredmenu .p-submenu-list {
|
|
||||||
position: absolute;
|
|
||||||
min-width: 100%;
|
|
||||||
z-index: 1;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-tieredmenu .p-menuitem-link {
|
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
text-decoration: none;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-tieredmenu .p-menuitem-text {
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-tieredmenu .p-menuitem {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-tieredmenu .p-menuitem-link .p-submenu-icon {
|
|
||||||
margin-left: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-tieredmenu .p-menuitem-active > .p-submenu-list {
|
|
||||||
display: block;
|
|
||||||
left: 100%;
|
|
||||||
top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-tieredmenu-enter-from,
|
|
||||||
.p-tieredmenu-leave-active {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-tieredmenu-enter-active {
|
|
||||||
transition: opacity 250ms;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const inlineStyles = {
|
const inlineStyles = {
|
||||||
submenu: ({ instance, processedItem }) => ({ display: instance.isItemActive(processedItem) ? 'block' : 'none' })
|
submenu: ({ instance, processedItem }) => ({ display: instance.isItemActive(processedItem) ? 'block' : 'none' })
|
||||||
};
|
};
|
||||||
|
|
@ -87,7 +34,6 @@ const classes = {
|
||||||
|
|
||||||
export default BaseStyle.extend({
|
export default BaseStyle.extend({
|
||||||
name: 'tieredmenu',
|
name: 'tieredmenu',
|
||||||
css,
|
|
||||||
classes,
|
classes,
|
||||||
inlineStyles
|
inlineStyles
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,120 +1,5 @@
|
||||||
import BaseStyle from 'primevue/base/style';
|
import BaseStyle from 'primevue/base/style';
|
||||||
|
|
||||||
const css = `
|
|
||||||
@layer primevue {
|
|
||||||
.p-timeline {
|
|
||||||
display: flex;
|
|
||||||
flex-grow: 1;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-timeline-left .p-timeline-event-opposite {
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-timeline-left .p-timeline-event-content {
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-timeline-right .p-timeline-event {
|
|
||||||
flex-direction: row-reverse;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-timeline-right .p-timeline-event-opposite {
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-timeline-right .p-timeline-event-content {
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) {
|
|
||||||
flex-direction: row-reverse;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite {
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content {
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite {
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content {
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-timeline-event {
|
|
||||||
display: flex;
|
|
||||||
position: relative;
|
|
||||||
min-height: 70px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-timeline-event:last-child {
|
|
||||||
min-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-timeline-event-opposite {
|
|
||||||
flex: 1;
|
|
||||||
padding: 0 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-timeline-event-content {
|
|
||||||
flex: 1;
|
|
||||||
padding: 0 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-timeline-event-separator {
|
|
||||||
flex: 0;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-timeline-event-marker {
|
|
||||||
display: flex;
|
|
||||||
align-self: baseline;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-timeline-event-connector {
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-timeline-horizontal {
|
|
||||||
flex-direction: row;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-timeline-horizontal .p-timeline-event {
|
|
||||||
flex-direction: column;
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-timeline-horizontal .p-timeline-event:last-child {
|
|
||||||
flex: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-timeline-horizontal .p-timeline-event-separator {
|
|
||||||
flex-direction: row;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-timeline-horizontal .p-timeline-event-connector {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-timeline-bottom .p-timeline-event {
|
|
||||||
flex-direction: column-reverse;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) {
|
|
||||||
flex-direction: column-reverse;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const classes = {
|
const classes = {
|
||||||
root: ({ props }) => ['p-timeline p-component', 'p-timeline-' + props.align, 'p-timeline-' + props.layout],
|
root: ({ props }) => ['p-timeline p-component', 'p-timeline-' + props.align, 'p-timeline-' + props.layout],
|
||||||
event: 'p-timeline-event',
|
event: 'p-timeline-event',
|
||||||
|
|
@ -127,6 +12,5 @@ const classes = {
|
||||||
|
|
||||||
export default BaseStyle.extend({
|
export default BaseStyle.extend({
|
||||||
name: 'timeline',
|
name: 'timeline',
|
||||||
css,
|
|
||||||
classes
|
classes
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,82 +1,5 @@
|
||||||
import BaseStyle from 'primevue/base/style';
|
import BaseStyle from 'primevue/base/style';
|
||||||
|
|
||||||
const css = `
|
|
||||||
@layer primevue {
|
|
||||||
.p-toast {
|
|
||||||
width: 25rem;
|
|
||||||
white-space: pre-line;
|
|
||||||
word-break: break-word;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-toast-message-icon {
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-toast-message-content {
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-toast-message-text {
|
|
||||||
flex: 1 1 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-toast-top-center {
|
|
||||||
transform: translateX(-50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-toast-bottom-center {
|
|
||||||
transform: translateX(-50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-toast-center {
|
|
||||||
min-width: 20vw;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-toast-icon-close {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-toast-icon-close.p-link {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Animations */
|
|
||||||
.p-toast-message-enter-from {
|
|
||||||
opacity: 0;
|
|
||||||
-webkit-transform: translateY(50%);
|
|
||||||
-ms-transform: translateY(50%);
|
|
||||||
transform: translateY(50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-toast-message-leave-from {
|
|
||||||
max-height: 1000px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-toast .p-toast-message.p-toast-message-leave-to {
|
|
||||||
max-height: 0;
|
|
||||||
opacity: 0;
|
|
||||||
margin-bottom: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-toast-message-enter-active {
|
|
||||||
-webkit-transition: transform 0.3s, opacity 0.3s;
|
|
||||||
transition: transform 0.3s, opacity 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-toast-message-leave-active {
|
|
||||||
-webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s;
|
|
||||||
transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
// Position
|
// Position
|
||||||
const inlineStyles = {
|
const inlineStyles = {
|
||||||
root: ({ position }) => ({
|
root: ({ position }) => ({
|
||||||
|
|
@ -125,7 +48,6 @@ const classes = {
|
||||||
|
|
||||||
export default BaseStyle.extend({
|
export default BaseStyle.extend({
|
||||||
name: 'toast',
|
name: 'toast',
|
||||||
css,
|
|
||||||
classes,
|
classes,
|
||||||
inlineStyles
|
inlineStyles
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,24 +1,5 @@
|
||||||
import BaseStyle from 'primevue/base/style';
|
import BaseStyle from 'primevue/base/style';
|
||||||
|
|
||||||
const css = `
|
|
||||||
@layer primevue {
|
|
||||||
.p-togglebutton {
|
|
||||||
position: relative;
|
|
||||||
display: inline-flex;
|
|
||||||
user-select: none;
|
|
||||||
vertical-align: bottom;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-togglebutton-input {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-togglebutton .p-button {
|
|
||||||
flex: 1 1 auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const classes = {
|
const classes = {
|
||||||
root: ({ instance, props }) => [
|
root: ({ instance, props }) => [
|
||||||
'p-togglebutton p-component',
|
'p-togglebutton p-component',
|
||||||
|
|
@ -47,6 +28,5 @@ const classes = {
|
||||||
|
|
||||||
export default BaseStyle.extend({
|
export default BaseStyle.extend({
|
||||||
name: 'togglebutton',
|
name: 'togglebutton',
|
||||||
css,
|
|
||||||
classes
|
classes
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,29 +1,5 @@
|
||||||
import BaseStyle from 'primevue/base/style';
|
import BaseStyle from 'primevue/base/style';
|
||||||
|
|
||||||
const css = `
|
|
||||||
@layer primevue {
|
|
||||||
.p-toolbar {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-toolbar-group-start,
|
|
||||||
.p-toolbar-group-center,
|
|
||||||
.p-toolbar-group-end {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-toolbar-group-left,
|
|
||||||
.p-toolbar-group-right {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const classes = {
|
const classes = {
|
||||||
root: 'p-toolbar p-component',
|
root: 'p-toolbar p-component',
|
||||||
start: 'p-toolbar-group-start p-toolbar-group-left',
|
start: 'p-toolbar-group-start p-toolbar-group-left',
|
||||||
|
|
@ -33,6 +9,5 @@ const classes = {
|
||||||
|
|
||||||
export default BaseStyle.extend({
|
export default BaseStyle.extend({
|
||||||
name: 'toolbar',
|
name: 'toolbar',
|
||||||
//css,
|
|
||||||
classes
|
classes
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,64 +1,5 @@
|
||||||
import BaseStyle from 'primevue/base/style';
|
import BaseStyle from 'primevue/base/style';
|
||||||
|
|
||||||
const css = `
|
|
||||||
@layer primevue {
|
|
||||||
.p-tooltip {
|
|
||||||
position:absolute;
|
|
||||||
display:none;
|
|
||||||
padding: .25em .5rem;
|
|
||||||
max-width: 12.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-tooltip.p-tooltip-right,
|
|
||||||
.p-tooltip.p-tooltip-left {
|
|
||||||
padding: 0 .25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-tooltip.p-tooltip-top,
|
|
||||||
.p-tooltip.p-tooltip-bottom {
|
|
||||||
padding:.25em 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-tooltip .p-tooltip-text {
|
|
||||||
white-space: pre-line;
|
|
||||||
word-break: break-word;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-tooltip-arrow {
|
|
||||||
position: absolute;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
border-color: transparent;
|
|
||||||
border-style: solid;
|
|
||||||
scale: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-tooltip-right .p-tooltip-arrow {
|
|
||||||
margin-top: -.25rem;
|
|
||||||
border-width: .25em .25em .25em 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-tooltip-left .p-tooltip-arrow {
|
|
||||||
margin-top: -.25rem;
|
|
||||||
border-width: .25em 0 .25em .25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-tooltip.p-tooltip-top {
|
|
||||||
padding: .25em 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-tooltip-top .p-tooltip-arrow {
|
|
||||||
margin-left: -.25rem;
|
|
||||||
border-width: .25em .25em 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-tooltip-bottom .p-tooltip-arrow {
|
|
||||||
margin-left: -.25rem;
|
|
||||||
border-width: 0 .25em .25rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const classes = {
|
const classes = {
|
||||||
root: 'p-tooltip p-component',
|
root: 'p-tooltip p-component',
|
||||||
arrow: 'p-tooltip-arrow',
|
arrow: 'p-tooltip-arrow',
|
||||||
|
|
@ -67,6 +8,5 @@ const classes = {
|
||||||
|
|
||||||
export default BaseStyle.extend({
|
export default BaseStyle.extend({
|
||||||
name: 'tooltip',
|
name: 'tooltip',
|
||||||
css,
|
|
||||||
classes
|
classes
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,91 +1,5 @@
|
||||||
import BaseStyle from 'primevue/base/style';
|
import BaseStyle from 'primevue/base/style';
|
||||||
|
|
||||||
const css = `
|
|
||||||
@layer primevue {
|
|
||||||
.p-tree-container {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
list-style-type: none;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-treenode-children {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
list-style-type: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-tree-wrapper {
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-treenode-selectable {
|
|
||||||
cursor: pointer;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-tree-toggler {
|
|
||||||
cursor: pointer;
|
|
||||||
user-select: none;
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-treenode-leaf > .p-treenode-content .p-tree-toggler {
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-treenode-content {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-tree-filter {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-tree-filter-container {
|
|
||||||
position: relative;
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-tree-filter-icon {
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
margin-top: -0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-tree-loading {
|
|
||||||
position: relative;
|
|
||||||
min-height: 4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-tree .p-tree-loading-overlay {
|
|
||||||
position: absolute;
|
|
||||||
z-index: 1;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-tree-flex-scrollable {
|
|
||||||
display: flex;
|
|
||||||
flex: 1;
|
|
||||||
height: 100%;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-tree-flex-scrollable .p-tree-wrapper {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const classes = {
|
const classes = {
|
||||||
root: ({ props }) => [
|
root: ({ props }) => [
|
||||||
'p-tree p-component',
|
'p-tree p-component',
|
||||||
|
|
@ -126,6 +40,5 @@ const classes = {
|
||||||
|
|
||||||
export default BaseStyle.extend({
|
export default BaseStyle.extend({
|
||||||
name: 'tree',
|
name: 'tree',
|
||||||
css,
|
|
||||||
classes
|
classes
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,60 +1,5 @@
|
||||||
import BaseStyle from 'primevue/base/style';
|
import BaseStyle from 'primevue/base/style';
|
||||||
|
|
||||||
const css = `
|
|
||||||
@layer primevue {
|
|
||||||
.p-treeselect {
|
|
||||||
display: inline-flex;
|
|
||||||
cursor: pointer;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-treeselect-trigger {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-treeselect-label-container {
|
|
||||||
overflow: hidden;
|
|
||||||
flex: 1 1 auto;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-treeselect-label {
|
|
||||||
display: block;
|
|
||||||
white-space: nowrap;
|
|
||||||
cursor: pointer;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-treeselect-label-empty {
|
|
||||||
overflow: hidden;
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-treeselect-token {
|
|
||||||
cursor: default;
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
flex: 0 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-treeselect .p-treeselect-panel {
|
|
||||||
min-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-treeselect-items-wrapper {
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-fluid .p-treeselect {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const inlineStyles = {
|
const inlineStyles = {
|
||||||
root: ({ props }) => ({ position: props.appendTo === 'self' ? 'relative' : undefined })
|
root: ({ props }) => ({ position: props.appendTo === 'self' ? 'relative' : undefined })
|
||||||
};
|
};
|
||||||
|
|
@ -87,7 +32,6 @@ const classes = {
|
||||||
panel: ({ props, instance }) => [
|
panel: ({ props, instance }) => [
|
||||||
'p-treeselect-panel p-component',
|
'p-treeselect-panel p-component',
|
||||||
{
|
{
|
||||||
'p-input-filled': props.variant === 'filled' || instance.$primevue.config.inputStyle === 'filled',
|
|
||||||
'p-ripple-disabled': instance.$primevue.config.ripple === false
|
'p-ripple-disabled': instance.$primevue.config.ripple === false
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
|
@ -97,7 +41,6 @@ const classes = {
|
||||||
|
|
||||||
export default BaseStyle.extend({
|
export default BaseStyle.extend({
|
||||||
name: 'treeselect',
|
name: 'treeselect',
|
||||||
css,
|
|
||||||
classes,
|
classes,
|
||||||
inlineStyles
|
inlineStyles
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,178 +1,5 @@
|
||||||
import BaseStyle from 'primevue/base/style';
|
import BaseStyle from 'primevue/base/style';
|
||||||
|
|
||||||
const css = `
|
|
||||||
@layer primevue {
|
|
||||||
.p-treetable {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-treetable table {
|
|
||||||
border-collapse: collapse;
|
|
||||||
width: 100%;
|
|
||||||
table-layout: fixed;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-treetable .p-sortable-column {
|
|
||||||
cursor: pointer;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-treetable-responsive-scroll > .p-treetable-wrapper {
|
|
||||||
overflow-x: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-treetable-responsive-scroll > .p-treetable-wrapper > table,
|
|
||||||
.p-treetable-auto-layout > .p-treetable-wrapper > table {
|
|
||||||
table-layout: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-treetable-hoverable-rows .p-treetable-tbody > tr {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-treetable-toggler {
|
|
||||||
cursor: pointer;
|
|
||||||
user-select: none;
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
vertical-align: middle;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-treetable-toggler + .p-checkbox {
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-treetable-toggler + .p-checkbox + span {
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Resizable */
|
|
||||||
.p-treetable-resizable > .p-treetable-wrapper {
|
|
||||||
overflow-x: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-treetable-resizable .p-treetable-thead > tr > th,
|
|
||||||
.p-treetable-resizable .p-treetable-tfoot > tr > td,
|
|
||||||
.p-treetable-resizable .p-treetable-tbody > tr > td {
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-treetable-resizable .p-resizable-column:not(.p-frozen-column) {
|
|
||||||
background-clip: padding-box;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-treetable .p-column-resizer {
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
margin: 0;
|
|
||||||
width: 0.5rem;
|
|
||||||
height: 100%;
|
|
||||||
padding: 0px;
|
|
||||||
cursor: col-resize;
|
|
||||||
border: 1px solid transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-treetable .p-column-resizer-helper {
|
|
||||||
width: 1px;
|
|
||||||
position: absolute;
|
|
||||||
z-index: 10;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-treetable .p-treetable-loading-overlay {
|
|
||||||
position: absolute;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Scrollable */
|
|
||||||
.p-treetable-scrollable .p-treetable-wrapper {
|
|
||||||
position: relative;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-treetable-scrollable .p-treetable-table {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-treetable-scrollable .p-treetable-thead,
|
|
||||||
.p-treetable-scrollable .p-treetable-tbody,
|
|
||||||
.p-treetable-scrollable .p-treetable-tfoot {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-treetable-scrollable .p-treetable-thead > tr,
|
|
||||||
.p-treetable-scrollable .p-treetable-tbody > tr,
|
|
||||||
.p-treetable-scrollable .p-treetable-tfoot > tr {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: nowrap;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-treetable-scrollable .p-treetable-thead > tr > th,
|
|
||||||
.p-treetable-scrollable .p-treetable-tbody > tr > td,
|
|
||||||
.p-treetable-scrollable .p-treetable-tfoot > tr > td {
|
|
||||||
display: flex;
|
|
||||||
flex: 1 1 0;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-treetable-scrollable .p-treetable-thead {
|
|
||||||
position: sticky;
|
|
||||||
top: 0;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-treetable-scrollable .p-treetable-tfoot {
|
|
||||||
position: sticky;
|
|
||||||
bottom: 0;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-treetable-scrollable .p-frozen-column {
|
|
||||||
position: sticky;
|
|
||||||
background: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-treetable-scrollable th.p-frozen-column {
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-treetable-scrollable-both .p-treetable-thead > tr > th,
|
|
||||||
.p-treetable-scrollable-both .p-treetable-tbody > tr > td,
|
|
||||||
.p-treetable-scrollable-both .p-treetable-tfoot > tr > td,
|
|
||||||
.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td,
|
|
||||||
.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td {
|
|
||||||
flex: 0 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-treetable-flex-scrollable {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-treetable-flex-scrollable .p-treetable-wrapper {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
flex: 1;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const classes = {
|
const classes = {
|
||||||
root: ({ instance, props }) => [
|
root: ({ instance, props }) => [
|
||||||
'p-treetable p-component',
|
'p-treetable p-component',
|
||||||
|
|
@ -257,6 +84,5 @@ const classes = {
|
||||||
|
|
||||||
export default BaseStyle.extend({
|
export default BaseStyle.extend({
|
||||||
name: 'treetable',
|
name: 'treetable',
|
||||||
css,
|
|
||||||
classes
|
classes
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,26 +1,5 @@
|
||||||
import BaseStyle from 'primevue/base/style';
|
import BaseStyle from 'primevue/base/style';
|
||||||
|
|
||||||
const css = `
|
|
||||||
@layer primevue {
|
|
||||||
.p-checkbox {
|
|
||||||
position: relative;
|
|
||||||
display: inline-flex;
|
|
||||||
user-select: none;
|
|
||||||
vertical-align: bottom;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-checkbox-input {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-checkbox-box {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const classes = {
|
const classes = {
|
||||||
root: ({ instance, props }) => [
|
root: ({ instance, props }) => [
|
||||||
'p-tristatecheckbox p-checkbox p-component',
|
'p-tristatecheckbox p-checkbox p-component',
|
||||||
|
|
@ -40,6 +19,5 @@ const classes = {
|
||||||
|
|
||||||
export default BaseStyle.extend({
|
export default BaseStyle.extend({
|
||||||
name: 'tristatecheckbox',
|
name: 'tristatecheckbox',
|
||||||
css,
|
|
||||||
classes
|
classes
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
<p>Title section of a tab is customized with the <i>header</i> slot.</p>
|
<p>Title section of a tab is customized with the <i>header</i> slot.</p>
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<Accordion :activeIndex="0">
|
<Accordion :activeIndex="0" expandIcon="pi pi-plus" collapseIcon="pi pi-minus">
|
||||||
<AccordionTab>
|
<AccordionTab>
|
||||||
<template #header>
|
<template #header>
|
||||||
<span class="flex align-items-center gap-2 w-full">
|
<span class="flex align-items-center gap-2 w-full">
|
||||||
|
|
@ -54,7 +54,7 @@ export default {
|
||||||
return {
|
return {
|
||||||
code: {
|
code: {
|
||||||
basic: `
|
basic: `
|
||||||
<Accordion :activeIndex="0">
|
<Accordion :activeIndex="0" expandIcon="pi pi-plus" collapseIcon="pi pi-minus">
|
||||||
<AccordionTab>
|
<AccordionTab>
|
||||||
<template #header>
|
<template #header>
|
||||||
<span class="flex align-items-center gap-2 w-full">
|
<span class="flex align-items-center gap-2 w-full">
|
||||||
|
|
@ -99,7 +99,7 @@ export default {
|
||||||
options: `
|
options: `
|
||||||
<template>
|
<template>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<Accordion :activeIndex="0">
|
<Accordion :activeIndex="0" expandIcon="pi pi-plus" collapseIcon="pi pi-minus">
|
||||||
<AccordionTab>
|
<AccordionTab>
|
||||||
<template #header>
|
<template #header>
|
||||||
<span class="flex align-items-center gap-2 w-full">
|
<span class="flex align-items-center gap-2 w-full">
|
||||||
|
|
@ -149,7 +149,7 @@ export default {
|
||||||
composition: `
|
composition: `
|
||||||
<template>
|
<template>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<Accordion :activeIndex="0">
|
<Accordion :activeIndex="0" expandIcon="pi pi-plus" collapseIcon="pi pi-minus">
|
||||||
<AccordionTab>
|
<AccordionTab>
|
||||||
<template #header>
|
<template #header>
|
||||||
<span class="flex align-items-center gap-2 w-full">
|
<span class="flex align-items-center gap-2 w-full">
|
||||||
|
|
|
||||||
|
|
@ -14,7 +14,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="flex-auto">
|
<div class="flex-auto">
|
||||||
<label for="horizontal-buttons" class="font-bold block mb-2"> Horizontal with Step </label>
|
<label for="horizontal-buttons" class="font-bold block mb-2"> Horizontal with Step </label>
|
||||||
<InputNumber v-model="value3" inputId="horizontal-buttons" showButtons buttonLayout="horizontal" :step="0.25" decrementButtonClass="p-button-danger" incrementButtonClass="p-button-success" mode="currency" currency="EUR">
|
<InputNumber v-model="value3" inputId="horizontal-buttons" showButtons buttonLayout="horizontal" :step="0.25" mode="currency" currency="EUR">
|
||||||
<template #incrementbuttonicon>
|
<template #incrementbuttonicon>
|
||||||
<span class="pi pi-plus" />
|
<span class="pi pi-plus" />
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -38,7 +38,7 @@ export default {
|
||||||
basic: `
|
basic: `
|
||||||
<InputNumber v-model="value1" inputId="stacked-buttons" showButtons mode="currency" currency="USD" />
|
<InputNumber v-model="value1" inputId="stacked-buttons" showButtons mode="currency" currency="USD" />
|
||||||
<InputNumber v-model="value2" inputId="minmax-buttons" mode="decimal" showButtons :min="0" :max="100" />
|
<InputNumber v-model="value2" inputId="minmax-buttons" mode="decimal" showButtons :min="0" :max="100" />
|
||||||
<InputNumber v-model="value3" inputId="horizontal-buttons" showButtons buttonLayout="horizontal" :step="0.25" decrementButtonClass="p-button-danger" incrementButtonClass="p-button-success" mode="currency" currency="EUR">
|
<InputNumber v-model="value3" inputId="horizontal-buttons" showButtons buttonLayout="horizontal" :step="0.25" mode="currency" currency="EUR">
|
||||||
<template #incrementbuttonicon>
|
<template #incrementbuttonicon>
|
||||||
<span class="pi pi-plus" />
|
<span class="pi pi-plus" />
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -61,7 +61,7 @@ export default {
|
||||||
</div>
|
</div>
|
||||||
<div class="flex-auto">
|
<div class="flex-auto">
|
||||||
<label for="horizontal-buttons" class="font-bold block mb-2"> Horizontal with Step </label>
|
<label for="horizontal-buttons" class="font-bold block mb-2"> Horizontal with Step </label>
|
||||||
<InputNumber v-model="value3" inputId="horizontal-buttons" showButtons buttonLayout="horizontal" :step="0.25" decrementButtonClass="p-button-danger" incrementButtonClass="p-button-success" mode="currency" currency="EUR">
|
<InputNumber v-model="value3" inputId="horizontal-buttons" showButtons buttonLayout="horizontal" :step="0.25" mode="currency" currency="EUR">
|
||||||
<template #incrementbuttonicon>
|
<template #incrementbuttonicon>
|
||||||
<span class="pi pi-plus" />
|
<span class="pi pi-plus" />
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -99,7 +99,7 @@ export default {
|
||||||
</div>
|
</div>
|
||||||
<div class="flex-auto">
|
<div class="flex-auto">
|
||||||
<label for="horizontal-buttons" class="font-bold block mb-2"> Horizontal with Step </label>
|
<label for="horizontal-buttons" class="font-bold block mb-2"> Horizontal with Step </label>
|
||||||
<InputNumber v-model="value3" inputId="horizontal-buttons" showButtons buttonLayout="horizontal" :step="0.25" decrementButtonClass="p-button-danger" incrementButtonClass="p-button-success" mode="currency" currency="EUR">
|
<InputNumber v-model="value3" inputId="horizontal-buttons" showButtons buttonLayout="horizontal" :step="0.25" mode="currency" currency="EUR">
|
||||||
<template #incrementbuttonicon>
|
<template #incrementbuttonicon>
|
||||||
<span class="pi pi-plus" />
|
<span class="pi pi-plus" />
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
<p>Buttons can also placed vertically by setting <i>buttonLayout</i> as <i>vertical</i>.</p>
|
<p>Buttons can also placed vertically by setting <i>buttonLayout</i> as <i>vertical</i>.</p>
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
<div class="card flex justify-content-center">
|
<div class="card flex justify-content-center">
|
||||||
<InputNumber v-model="value" showButtons buttonLayout="vertical" style="width: 4rem" decrementButtonClassName="p-button-secondary" incrementButtonClassName="p-button-secondary">
|
<InputNumber v-model="value" showButtons buttonLayout="vertical" style="width: 3rem" :min="0" :max="99">
|
||||||
<template #incrementbuttonicon>
|
<template #incrementbuttonicon>
|
||||||
<span class="pi pi-plus" />
|
<span class="pi pi-plus" />
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -22,7 +22,7 @@ export default {
|
||||||
value: 50,
|
value: 50,
|
||||||
code: {
|
code: {
|
||||||
basic: `
|
basic: `
|
||||||
<InputNumber v-model="value" showButtons buttonLayout="vertical" style="width: 4rem" decrementButtonClassName="p-button-secondary" incrementButtonClassName="p-button-secondary">
|
<InputNumber v-model="value" showButtons buttonLayout="vertical" style="width: 3rem" :min="0" :max="99">
|
||||||
<template #incrementbuttonicon>
|
<template #incrementbuttonicon>
|
||||||
<span class="pi pi-plus" />
|
<span class="pi pi-plus" />
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -34,7 +34,7 @@ export default {
|
||||||
options: `
|
options: `
|
||||||
<template>
|
<template>
|
||||||
<div class="card flex justify-content-center">
|
<div class="card flex justify-content-center">
|
||||||
<InputNumber v-model="value" showButtons buttonLayout="vertical" style="width: 4rem" decrementButtonClassName="p-button-secondary" incrementButtonClassName="p-button-secondary">
|
<InputNumber v-model="value" showButtons buttonLayout="vertical" style="width: 3rem" :min="0" :max="99">
|
||||||
<template #incrementbuttonicon>
|
<template #incrementbuttonicon>
|
||||||
<span class="pi pi-plus" />
|
<span class="pi pi-plus" />
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -58,7 +58,7 @@ export default {
|
||||||
composition: `
|
composition: `
|
||||||
<template>
|
<template>
|
||||||
<div class="card flex justify-content-center">
|
<div class="card flex justify-content-center">
|
||||||
<InputNumber v-model="value" showButtons buttonLayout="vertical" style="width: 4rem" decrementButtonClassName="p-button-secondary" incrementButtonClassName="p-button-secondary">
|
<InputNumber v-model="value" showButtons buttonLayout="vertical" style="width: 3rem" :min="0" :max="99">
|
||||||
<template #incrementbuttonicon>
|
<template #incrementbuttonicon>
|
||||||
<span class="pi pi-plus" />
|
<span class="pi pi-plus" />
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs">
|
<DocSectionText v-bind="$attrs">
|
||||||
<p>MeterGroup requires <i>value</i> as the data to display.</p>
|
<p>MeterGroup requires a <i>value</i> as the data to display where each item in the collection should be a type of <i>MeterItem</i>.</p>
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<MeterGroup :value="value" />
|
<MeterGroup :value="value" />
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,69 @@
|
||||||
|
<template>
|
||||||
|
<DocSectionText v-bind="$attrs">
|
||||||
|
<p>Icons can be displayed next to the labels instead of the default marker.</p>
|
||||||
|
</DocSectionText>
|
||||||
|
<div class="card">
|
||||||
|
<MeterGroup :value="value" />
|
||||||
|
</div>
|
||||||
|
<DocSectionCode :code="code" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
value: [
|
||||||
|
{ label: 'Apps', color: '#34d399', value: 16, icon: 'pi pi-table' },
|
||||||
|
{ label: 'Messages', color: '#fbbf24', value: 8, icon: 'pi pi-inbox' },
|
||||||
|
{ label: 'Media', color: '#60a5fa', value: 24, icon: 'pi pi-image' },
|
||||||
|
{ label: 'System', color: '#c084fc', value: 10, icon: 'pi pi-cog' }
|
||||||
|
],
|
||||||
|
code: {
|
||||||
|
basic: `
|
||||||
|
<MeterGroup :value="value" />
|
||||||
|
`,
|
||||||
|
options: `
|
||||||
|
<template>
|
||||||
|
<div class="card">
|
||||||
|
<MeterGroup :value="value" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
value: [
|
||||||
|
{ label: 'Apps', color: '#34d399', value: 16, icon: 'pi pi-table' },
|
||||||
|
{ label: 'Messages', color: '#fbbf24', value: 8, icon: 'pi pi-inbox' },
|
||||||
|
{ label: 'Media', color: '#60a5fa', value: 24, icon: 'pi pi-image' },
|
||||||
|
{ label: 'System', color: '#c084fc', value: 10, icon: 'pi pi-cog' }
|
||||||
|
]
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
<\/script>
|
||||||
|
`,
|
||||||
|
composition: `
|
||||||
|
<template>
|
||||||
|
<div class="card">
|
||||||
|
<MeterGroup :value="value" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from "vue";
|
||||||
|
|
||||||
|
const value = ref([
|
||||||
|
{ label: 'Apps', color: '#34d399', value: 16, icon: 'pi pi-table' },
|
||||||
|
{ label: 'Messages', color: '#fbbf24', value: 8, icon: 'pi pi-inbox' },
|
||||||
|
{ label: 'Media', color: '#60a5fa', value: 24, icon: 'pi pi-image' },
|
||||||
|
{ label: 'System', color: '#c084fc', value: 10, icon: 'pi pi-cog' }
|
||||||
|
]);
|
||||||
|
<\/script>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -1,12 +1,12 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs">
|
<DocSectionText v-bind="$attrs">
|
||||||
<p>
|
<p>
|
||||||
Default layout of MeterGroup is <i>horizontal</i>, and also <i>labelOrientation</i> property can be set as <i>vertical</i>.In addition, position of the label can be changed using <i>labelPosition</i> property that the default value is
|
The position of the labels relative to the meters is defined using the <i>labelPosition</i> property. The default orientation of the labels is horizontal, and the vertical alternative is available through the
|
||||||
<i>end</i> and also <i>start</i> option is available.
|
<i>labelOrientation</i> option.
|
||||||
</p>
|
</p>
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<MeterGroup :value="value" labelPosition="start" />
|
<MeterGroup :value="value" labelPosition="start" labelOrientation="vertical" />
|
||||||
</div>
|
</div>
|
||||||
<DocSectionCode :code="code" />
|
<DocSectionCode :code="code" />
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -16,19 +16,19 @@ export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
value: [
|
value: [
|
||||||
{ label: 'Apps', value: 16, color: '#EB9A9C', icon: 'pi pi-cog' },
|
{ label: 'Apps', color: '#34d399', value: 16 },
|
||||||
{ label: 'Messages', value: 8, color: '#FFCF91', icon: 'pi pi-envelope' },
|
{ label: 'Messages', color: '#fbbf24', value: 8 },
|
||||||
{ label: 'Media', value: 24, color: '#93DEAC', icon: 'pi pi-image' },
|
{ label: 'Media', color: '#60a5fa', value: 24 },
|
||||||
{ label: 'System Data', value: 20, color: '#91cff8', icon: 'pi pi-database' }
|
{ label: 'System', color: '#c084fc', value: 10 }
|
||||||
],
|
],
|
||||||
code: {
|
code: {
|
||||||
basic: `
|
basic: `
|
||||||
<MeterGroup :value="value" labelPosition="start" />
|
<MeterGroup :value="value" labelPosition="start" labelOrientation="vertical" />
|
||||||
`,
|
`,
|
||||||
options: `
|
options: `
|
||||||
<template>
|
<template>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<MeterGroup :value="value" labelPosition="start" />
|
<MeterGroup :value="value" labelPosition="start" labelOrientation="vertical" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -37,10 +37,10 @@ export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
value: [
|
value: [
|
||||||
{ label: 'Apps', value: 16, color: '#EB9A9C', icon: 'pi pi-cog' },
|
{ label: 'Apps', color: '#34d399', value: 16 },
|
||||||
{ label: 'Messages', value: 8, color: '#FFCF91', icon: 'pi pi-envelope' },
|
{ label: 'Messages', color: '#fbbf24', value: 8 },
|
||||||
{ label: 'Media', value: 24, color: '#93DEAC', icon: 'pi pi-image' },
|
{ label: 'Media', color: '#60a5fa', value: 24 },
|
||||||
{ label: 'System Data', value: 20, color: '#91cff8', icon: 'pi pi-database' }
|
{ label: 'System', color: '#c084fc', value: 10 }
|
||||||
]
|
]
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
@ -50,7 +50,7 @@ export default {
|
||||||
composition: `
|
composition: `
|
||||||
<template>
|
<template>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<MeterGroup :value="value" labelPosition="start" />
|
<MeterGroup :value="value" labelPosition="start" labelOrientation="vertical" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -58,10 +58,10 @@ export default {
|
||||||
import { ref } from "vue";
|
import { ref } from "vue";
|
||||||
|
|
||||||
const value = ref([
|
const value = ref([
|
||||||
{ label: 'Apps', value: 16, color: '#EB9A9C', icon: 'pi pi-cog' },
|
{ label: 'Apps', color: '#34d399', value: 16 },
|
||||||
{ label: 'Messages', value: 8, color: '#FFCF91', icon: 'pi pi-envelope' },
|
{ label: 'Messages', color: '#fbbf24', value: 8 },
|
||||||
{ label: 'Media', value: 24, color: '#93DEAC', icon: 'pi pi-image' },
|
{ label: 'Media', color: '#60a5fa', value: 24 },
|
||||||
{ label: 'System Data', value: 20, color: '#91cff8', icon: 'pi pi-database' }
|
{ label: 'System', color: '#c084fc', value: 10 }
|
||||||
]);
|
]);
|
||||||
<\/script>
|
<\/script>
|
||||||
`
|
`
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
<p>Boundaries are configured with the <i>min</i> and <i>max</i> values whose defaults are 0 and 100 respectively.</p>
|
<p>Boundaries are configured with the <i>min</i> and <i>max</i> values whose defaults are 0 and 100 respectively.</p>
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<MeterGroup :value="value" :max="120" />
|
<MeterGroup :value="value" :max="200" />
|
||||||
</div>
|
</div>
|
||||||
<DocSectionCode :code="code" />
|
<DocSectionCode :code="code" />
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -13,19 +13,19 @@ export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
value: [
|
value: [
|
||||||
{ label: 'Apps', value: 16, color: '#EB9A9C', icon: 'pi pi-cog' },
|
{ label: 'Apps', color: '#34d399', value: 16 },
|
||||||
{ label: 'Messages', value: 8, color: '#FFCF91', icon: 'pi pi-envelope' },
|
{ label: 'Messages', color: '#fbbf24', value: 8 },
|
||||||
{ label: 'Media', value: 24, color: '#93DEAC', icon: 'pi pi-image' },
|
{ label: 'Media', color: '#60a5fa', value: 24 },
|
||||||
{ label: 'System Data', value: 20, color: '#91cff8', icon: 'pi pi-database' }
|
{ label: 'System', color: '#c084fc', value: 10 }
|
||||||
],
|
],
|
||||||
code: {
|
code: {
|
||||||
basic: `
|
basic: `
|
||||||
<MeterGroup :value="value" :max="120" />
|
<MeterGroup :value="value" :max="200" />
|
||||||
`,
|
`,
|
||||||
options: `
|
options: `
|
||||||
<template>
|
<template>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<MeterGroup :value="value" :max="120" />
|
<MeterGroup :value="value" :max="200" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -34,10 +34,10 @@ export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
value: [
|
value: [
|
||||||
{ label: 'Apps', value: 16, color: '#EB9A9C', icon: 'pi pi-cog' },
|
{ label: 'Apps', color: '#34d399', value: 16 },
|
||||||
{ label: 'Messages', value: 8, color: '#FFCF91', icon: 'pi pi-envelope' },
|
{ label: 'Messages', color: '#fbbf24', value: 8 },
|
||||||
{ label: 'Media', value: 24, color: '#93DEAC', icon: 'pi pi-image' },
|
{ label: 'Media', color: '#60a5fa', value: 24 },
|
||||||
{ label: 'System Data', value: 20, color: '#91cff8', icon: 'pi pi-database' }
|
{ label: 'System', color: '#c084fc', value: 10 }
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
@ -47,7 +47,7 @@ export default {
|
||||||
composition: `
|
composition: `
|
||||||
<template>
|
<template>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<MeterGroup :value="value" :max="120" />
|
<MeterGroup :value="value" :max="200" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -55,10 +55,10 @@ export default {
|
||||||
import { ref } from "vue";
|
import { ref } from "vue";
|
||||||
|
|
||||||
const value = ref([
|
const value = ref([
|
||||||
{ label: 'Apps', value: 16, color: '#EB9A9C', icon: 'pi pi-cog' },
|
{ label: 'Apps', color: '#34d399', value: 16 },
|
||||||
{ label: 'Messages', value: 8, color: '#FFCF91', icon: 'pi pi-envelope' },
|
{ label: 'Messages', color: '#fbbf24', value: 8 },
|
||||||
{ label: 'Media', value: 24, color: '#93DEAC', icon: 'pi pi-image' },
|
{ label: 'Media', color: '#60a5fa', value: 24 },
|
||||||
{ label: 'System Data', value: 20, color: '#91cff8', icon: 'pi pi-database' }
|
{ label: 'System', color: '#c084fc', value: 10 }
|
||||||
]);
|
]);
|
||||||
<\/script>
|
<\/script>
|
||||||
`
|
`
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs">
|
<DocSectionText v-bind="$attrs">
|
||||||
<p><i>value</i> property accepts multiple meter group objects.</p>
|
<p>Adding more items to the array displays the meters in a group.</p>
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<MeterGroup :value="value" />
|
<MeterGroup :value="value" />
|
||||||
|
|
@ -13,9 +13,10 @@ export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
value: [
|
value: [
|
||||||
{ color: '#239EF0', label: 'Mortgage', value: 25 },
|
{ label: 'Apps', color: '#34d399', value: 16 },
|
||||||
{ color: '#FAA419', label: 'Loan', value: 15 },
|
{ label: 'Messages', color: '#fbbf24', value: 8 },
|
||||||
{ color: '#EE5879', label: 'Credit Card', value: 20 }
|
{ label: 'Media', color: '#60a5fa', value: 24 },
|
||||||
|
{ label: 'System', color: '#c084fc', value: 10 }
|
||||||
],
|
],
|
||||||
code: {
|
code: {
|
||||||
basic: `
|
basic: `
|
||||||
|
|
@ -33,9 +34,10 @@ export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
value: [
|
value: [
|
||||||
{ color: '#239EF0', label: 'Mortgage', value: 25 },
|
{ label: 'Apps', color: '#34d399', value: 16 },
|
||||||
{ color: '#FAA419', label: 'Loan', value: 15 },
|
{ label: 'Messages', color: '#fbbf24', value: 8 },
|
||||||
{ color: '#EE5879', label: 'Credit Card', value: 20 }
|
{ label: 'Media', color: '#60a5fa', value: 24 },
|
||||||
|
{ label: 'System', color: '#c084fc', value: 10 }
|
||||||
]
|
]
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
@ -53,9 +55,10 @@ export default {
|
||||||
import { ref } from "vue";
|
import { ref } from "vue";
|
||||||
|
|
||||||
const value = ref([
|
const value = ref([
|
||||||
{ color: '#239EF0', label: 'Mortgage', value: 25 },
|
{ label: 'Apps', color: '#34d399', value: 16 },
|
||||||
{ color: '#FAA419', label: 'Loan', value: 15 },
|
{ label: 'Messages', color: '#fbbf24', value: 8 },
|
||||||
{ color: '#EE5879', label: 'Credit Card', value: 20 }
|
{ label: 'Media', color: '#60a5fa', value: 24 },
|
||||||
|
{ label: 'System', color: '#c084fc', value: 10 }
|
||||||
]);
|
]);
|
||||||
<\/script>
|
<\/script>
|
||||||
`
|
`
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,213 @@
|
||||||
|
<template>
|
||||||
|
<DocSectionText v-bind="$attrs">
|
||||||
|
<p>MeterGroup provides templating support for labels, meter items, and content around the meters.</p>
|
||||||
|
</DocSectionText>
|
||||||
|
<div class="card">
|
||||||
|
<MeterGroup :value="value" labelPosition="start">
|
||||||
|
<template #label="{ value }">
|
||||||
|
<div class="flex flex-wrap gap-3">
|
||||||
|
<template v-for="val of value" :key="val.label">
|
||||||
|
<Card class="flex-1">
|
||||||
|
<template #content>
|
||||||
|
<div class="flex justify-content-between gap-5">
|
||||||
|
<div class="flex flex-column gap-1">
|
||||||
|
<span class="text-secondary text-sm">{{ val.label }}</span>
|
||||||
|
<span class="font-bold text-lg">{{ val.value }}%</span>
|
||||||
|
</div>
|
||||||
|
<span class="w-2rem h-2rem border-circle inline-flex justify-content-center align-items-center text-center" :style="{ backgroundColor: `${val.color1}`, color: '#ffffff' }">
|
||||||
|
<i :class="val.icon" />
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</Card>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template #meter="slotProps">
|
||||||
|
<span :class="slotProps.class" :style="{ background: `linear-gradient(to right, ${slotProps.value.color1}, ${slotProps.value.color2})`, width: slotProps.size }" />
|
||||||
|
</template>
|
||||||
|
<template #start="{ totalPercent }">
|
||||||
|
<div class="flex justify-content-between mt-3 mb-2 relative">
|
||||||
|
<span>Storage</span>
|
||||||
|
<span :style="{ width: totalPercent + '%' }" class="absolute text-right">{{ totalPercent }}%</span>
|
||||||
|
<span class="font-medium">1TB</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template #end>
|
||||||
|
<div class="flex justify-content-between mt-3">
|
||||||
|
<Button label="Manage Storage" outlined size="small" />
|
||||||
|
<Button label="Update Plan" size="small" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</MeterGroup>
|
||||||
|
</div>
|
||||||
|
<DocSectionCode :code="code" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
value: [
|
||||||
|
{ label: 'Apps', color1: '#34d399', color2: '#fbbf24', value: 25, icon: 'pi pi-table' },
|
||||||
|
{ label: 'Messages', color1: '#fbbf24', color2: '#60a5fa', value: 15, icon: 'pi pi-inbox' },
|
||||||
|
{ label: 'Media', color1: '#60a5fa', color2: '#c084fc', value: 20, icon: 'pi pi-image' },
|
||||||
|
{ label: 'System', color1: '#c084fc', color2: '#c084fc', value: 10, icon: 'pi pi-cog' }
|
||||||
|
],
|
||||||
|
code: {
|
||||||
|
basic: `
|
||||||
|
<MeterGroup :value="value" labelPosition="start">
|
||||||
|
<template #label="{ value }">
|
||||||
|
<div class="flex flex-wrap gap-3">
|
||||||
|
<template v-for="val of value" :key="val.label">
|
||||||
|
<Card class="flex-1">
|
||||||
|
<template #content>
|
||||||
|
<div class="flex justify-content-between gap-5">
|
||||||
|
<div class="flex flex-column gap-1">
|
||||||
|
<span class="text-secondary text-sm">{{ val.label }}</span>
|
||||||
|
<span class="font-bold text-lg">{{ val.value }}%</span>
|
||||||
|
</div>
|
||||||
|
<span class="w-2rem h-2rem border-circle inline-flex justify-content-center align-items-center text-center" :style="{ backgroundColor: \`\${val.color1}\`, color: '#ffffff' }">
|
||||||
|
<i :class="val.icon" />
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</Card>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template #meter="slotProps">
|
||||||
|
<span :class="slotProps.class" :style="{ background: \`linear-gradient(to right, \${slotProps.value.color1}, \${slotProps.value.color2})\`, width: slotProps.size }" />
|
||||||
|
</template>
|
||||||
|
<template #start="{ totalPercent }">
|
||||||
|
<div class="flex justify-content-between mt-3 mb-2 relative">
|
||||||
|
<span>Storage</span>
|
||||||
|
<span :style="{ width: totalPercent + '%' }" class="absolute text-right">{{ totalPercent }}%</span>
|
||||||
|
<span class="font-medium">1TB</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template #end>
|
||||||
|
<div class="flex justify-content-between mt-3">
|
||||||
|
<Button label="Manage Storage" outlined size="small" />
|
||||||
|
<Button label="Update Plan" size="small" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</MeterGroup>
|
||||||
|
`,
|
||||||
|
options: `
|
||||||
|
<template>
|
||||||
|
<div class="card">
|
||||||
|
<MeterGroup :value="value" labelPosition="start">
|
||||||
|
<template #label="{ value }">
|
||||||
|
<div class="flex flex-wrap gap-3">
|
||||||
|
<template v-for="val of value" :key="val.label">
|
||||||
|
<Card class="flex-1">
|
||||||
|
<template #content>
|
||||||
|
<div class="flex justify-content-between gap-5">
|
||||||
|
<div class="flex flex-column gap-1">
|
||||||
|
<span class="text-secondary text-sm">{{ val.label }}</span>
|
||||||
|
<span class="font-bold text-lg">{{ val.value }}%</span>
|
||||||
|
</div>
|
||||||
|
<span class="w-2rem h-2rem border-circle inline-flex justify-content-center align-items-center text-center" :style="{ backgroundColor: \`\${val.color1}\`, color: '#ffffff' }">
|
||||||
|
<i :class="val.icon" />
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</Card>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template #meter="slotProps">
|
||||||
|
<span :class="slotProps.class" :style="{ background: \`linear-gradient(to right, \${slotProps.value.color1}, \${slotProps.value.color2})\`, width: slotProps.size }" />
|
||||||
|
</template>
|
||||||
|
<template #start="{ totalPercent }">
|
||||||
|
<div class="flex justify-content-between mt-3 mb-2 relative">
|
||||||
|
<span>Storage</span>
|
||||||
|
<span :style="{ width: totalPercent + '%' }" class="absolute text-right">{{ totalPercent }}%</span>
|
||||||
|
<span class="font-medium">1TB</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template #end>
|
||||||
|
<div class="flex justify-content-between mt-3">
|
||||||
|
<Button label="Manage Storage" outlined size="small" />
|
||||||
|
<Button label="Update Plan" size="small" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</MeterGroup>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
value: [
|
||||||
|
{ label: 'Apps', color1: '#34d399', color2: '#fbbf24', value: 25, icon: 'pi pi-table' },
|
||||||
|
{ label: 'Messages', color1: '#fbbf24', color2: '#60a5fa', value: 15, icon: 'pi pi-inbox' },
|
||||||
|
{ label: 'Media', color1: '#60a5fa', color2: '#c084fc', value: 20, icon: 'pi pi-image' },
|
||||||
|
{ label: 'System', color1: '#c084fc', color2: '#c084fc', value: 10, icon: 'pi pi-cog' }
|
||||||
|
]
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
<\/script>
|
||||||
|
`,
|
||||||
|
composition: `
|
||||||
|
<template>
|
||||||
|
<div class="card">
|
||||||
|
<MeterGroup :value="value" labelPosition="start">
|
||||||
|
<template #label="{ value }">
|
||||||
|
<div class="flex flex-wrap gap-3">
|
||||||
|
<template v-for="val of value" :key="i">
|
||||||
|
<Card class="flex-1">
|
||||||
|
<template #content>
|
||||||
|
<div class="flex justify-content-between gap-5">
|
||||||
|
<div class="flex flex-column gap-1">
|
||||||
|
<span class="text-secondary text-sm">{{ val.label }}</span>
|
||||||
|
<span class="font-bold text-lg">{{ val.value }}%</span>
|
||||||
|
</div>
|
||||||
|
<span class="w-2rem h-2rem border-circle inline-flex justify-content-center align-items-center text-center" :style="{ backgroundColor: \`\${val.color1}\`, color: '#ffffff' }">
|
||||||
|
<i :class="val.icon" />
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</Card>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template #meter="slotProps">
|
||||||
|
<span :class="slotProps.class" :style="{ background: \`linear-gradient(to right, \${slotProps.value.color1}, \${slotProps.value.color2})\`, width: slotProps.size }" />
|
||||||
|
</template>
|
||||||
|
<template #start="{ totalPercent }">
|
||||||
|
<div class="flex justify-content-between mt-3 mb-2 relative">
|
||||||
|
<span>Storage</span>
|
||||||
|
<span :style="{ width: totalPercent + '%' }" class="absolute text-right">{{ totalPercent }}%</span>
|
||||||
|
<span class="font-medium">1TB</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template #end>
|
||||||
|
<div class="flex justify-content-between mt-3">
|
||||||
|
<Button label="Manage Storage" outlined size="small" />
|
||||||
|
<Button label="Update Plan" size="small" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</MeterGroup>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from "vue";
|
||||||
|
|
||||||
|
const value = ref([
|
||||||
|
{ label: 'Apps', color1: '#34d399', color2: '#fbbf24', value: 25, icon: 'pi pi-table' },
|
||||||
|
{ label: 'Messages', color1: '#fbbf24', color2: '#60a5fa', value: 15, icon: 'pi pi-inbox' },
|
||||||
|
{ label: 'Media', color1: '#60a5fa', color2: '#c084fc', value: 20, icon: 'pi pi-image' },
|
||||||
|
{ label: 'System', color1: '#c084fc', color2: '#c084fc', value: 10, icon: 'pi pi-cog' }
|
||||||
|
]);
|
||||||
|
<\/script>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -1,153 +0,0 @@
|
||||||
<template>
|
|
||||||
<DocSectionText v-bind="$attrs">
|
|
||||||
<p>
|
|
||||||
MeterGroup offers meter customization with the <i>meter</i> template that receives the meter instance from the value as a parameter and also <i>label</i> template receives value instance. In addition, the <i>start</i> and <i>end</i> slots
|
|
||||||
are available to define the start and end templating for MeterGroup respectively.
|
|
||||||
</p>
|
|
||||||
</DocSectionText>
|
|
||||||
<div class="card">
|
|
||||||
<MeterGroup :value="value" labelPosition="start">
|
|
||||||
<template #label="{ value }">
|
|
||||||
<div class="flex flex-column text-sm gap-2">
|
|
||||||
<template v-for="(val, i) of value" :key="i">
|
|
||||||
<span :style="{ color: val.color }" class="flex gap-2">
|
|
||||||
<i :class="val.icon" />
|
|
||||||
{{ val.label }} ({{ val.value }}%)</span
|
|
||||||
>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<template #start="{ totalPercent }">
|
|
||||||
<div class="flex justify-content-between mt-3 mb-2">
|
|
||||||
<span>Account </span>
|
|
||||||
<span :style="{ width: totalPercent + '%' }" class="absolute text-right">{{ totalPercent }}%</span>
|
|
||||||
<span>Savings: 1000$ </span>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<template #meter="slotProps">
|
|
||||||
<span :class="slotProps.class" :style="{ backgroundColor: slotProps.value.color, width: slotProps.size }" />
|
|
||||||
</template>
|
|
||||||
</MeterGroup>
|
|
||||||
</div>
|
|
||||||
<DocSectionCode :code="code" />
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
value: [
|
|
||||||
{ color: '#239EF0', label: 'Mortgage', value: 25, icon: 'pi pi-home' },
|
|
||||||
{ color: '#FAA419', label: 'Loan', value: 15, icon: 'pi pi-money-bill' },
|
|
||||||
{ color: '#EE5879', label: 'Credit Card', value: 20, icon: 'pi pi-credit-card' }
|
|
||||||
],
|
|
||||||
code: {
|
|
||||||
basic: `
|
|
||||||
<MeterGroup :value="value" labelPosition="start">
|
|
||||||
<template #label="{ value }">
|
|
||||||
<div class="flex flex-column text-sm gap-2">
|
|
||||||
<template v-for="(val, i) of value" :key="i">
|
|
||||||
<span :style="{ color: val.color }" class="flex gap-2">
|
|
||||||
<i :class="val.icon" />
|
|
||||||
{{ val.label }} ({{ val.value }}%)</span
|
|
||||||
>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<template #start="{ totalPercent }">
|
|
||||||
<div class="flex justify-content-between mt-3 mb-2">
|
|
||||||
<span>Account </span>
|
|
||||||
<span :style="{ width: totalPercent + '%' }" class="absolute text-right">{{ totalPercent }}%</span>
|
|
||||||
<span>Savings: 1000$ </span>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<template #meter="slotProps">
|
|
||||||
<span :class="slotProps.class" :style="{ backgroundColor: slotProps.value.color, width: slotProps.size }" />
|
|
||||||
</template>
|
|
||||||
</MeterGroup>
|
|
||||||
`,
|
|
||||||
options: `
|
|
||||||
<template>
|
|
||||||
<div class="card">
|
|
||||||
<MeterGroup :value="value" labelPosition="start">
|
|
||||||
<template #label="{ value }">
|
|
||||||
<div class="flex flex-column text-sm gap-2">
|
|
||||||
<template v-for="(val, i) of value" :key="i">
|
|
||||||
<span :style="{ color: val.color }" class="flex gap-2">
|
|
||||||
<i :class="val.icon" />
|
|
||||||
{{ val.label }} ({{ val.value }}%)</span
|
|
||||||
>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<template #start="{ totalPercent }">
|
|
||||||
<div class="flex justify-content-between mt-3 mb-2">
|
|
||||||
<span>Account </span>
|
|
||||||
<span :style="{ width: totalPercent + '%' }" class="absolute text-right">{{ totalPercent }}%</span>
|
|
||||||
<span>Savings: 1000$ </span>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<template #meter="slotProps">
|
|
||||||
<span :class="slotProps.class" :style="{ backgroundColor: slotProps.value.color, width: slotProps.size }" />
|
|
||||||
</template>
|
|
||||||
</MeterGroup>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
value: [
|
|
||||||
{ color: '#239EF0', label: 'Mortgage', value: 25 },
|
|
||||||
{ color: '#FAA419', label: 'Loan', value: 15 },
|
|
||||||
{ color: '#EE5879', label: 'Credit Card', value: 20 }
|
|
||||||
]
|
|
||||||
};
|
|
||||||
}
|
|
||||||
};
|
|
||||||
<\/script>
|
|
||||||
`,
|
|
||||||
composition: `
|
|
||||||
<template>
|
|
||||||
<div class="card">
|
|
||||||
<MeterGroup :value="value" labelPosition="start">
|
|
||||||
<template #label="{ value }">
|
|
||||||
<div class="flex flex-column text-sm gap-2">
|
|
||||||
<template v-for="(val, i) of value" :key="i">
|
|
||||||
<span :style="{ color: val.color }" class="flex gap-2">
|
|
||||||
<i :class="val.icon" />
|
|
||||||
{{ val.label }} ({{ val.value }}%)</span
|
|
||||||
>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<template #start="{ totalPercent }">
|
|
||||||
<div class="flex justify-content-between mt-3 mb-2">
|
|
||||||
<span>Account </span>
|
|
||||||
<span :style="{ width: totalPercent + '%' }" class="absolute text-right">{{ totalPercent }}%</span>
|
|
||||||
<span>Savings: 1000$ </span>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<template #meter="slotProps">
|
|
||||||
<span :class="slotProps.class" :style="{ backgroundColor: slotProps.value.color, width: slotProps.size }" />
|
|
||||||
</template>
|
|
||||||
</MeterGroup>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { ref } from "vue";
|
|
||||||
|
|
||||||
const value = ref([
|
|
||||||
{ color: '#239EF0', label: 'Mortgage', value: 25 },
|
|
||||||
{ color: '#FAA419', label: 'Loan', value: 15 },
|
|
||||||
{ color: '#EE5879', label: 'Credit Card', value: 20 }
|
|
||||||
]);
|
|
||||||
<\/script>
|
|
||||||
`
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,9 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs">
|
<DocSectionText v-bind="$attrs">
|
||||||
<p>Layout of the MeterGroup is configured with the <i>orientation</i> property that accepts <i>horizontal</i> and <i>vertical</i> as options.</p>
|
<p>Layout of the MeterGroup is configured with the <i>orientation</i> property that accepts either <i>horizontal</i> or <i>vertical</i> as available options.</p>
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
<div class="card flex justify-content-center" style="height: 350px">
|
<div class="card flex justify-content-center" style="height: 360px">
|
||||||
<MeterGroup :value="value" orientation="vertical" />
|
<MeterGroup :value="value" orientation="vertical" labelOrientation="vertical" />
|
||||||
</div>
|
</div>
|
||||||
<DocSectionCode :code="code" />
|
<DocSectionCode :code="code" />
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -13,18 +13,19 @@ export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
value: [
|
value: [
|
||||||
{ color: '#4ADE81', label: 'E-mails', value: 17 },
|
{ label: 'Apps', color: '#34d399', value: 24 },
|
||||||
{ color: '#FB923C', label: 'Messages', value: 36 },
|
{ label: 'Messages', color: '#fbbf24', value: 16 },
|
||||||
{ color: '#C084FC', label: 'Other', value: 24 }
|
{ label: 'Media', color: '#60a5fa', value: 24 },
|
||||||
|
{ label: 'System', color: '#c084fc', value: 12 }
|
||||||
],
|
],
|
||||||
code: {
|
code: {
|
||||||
basic: `
|
basic: `
|
||||||
<MeterGroup :value="value" orientation="vertical" />
|
<MeterGroup :value="value" orientation="vertical" labelOrientation="vertical" />
|
||||||
`,
|
`,
|
||||||
options: `
|
options: `
|
||||||
<template>
|
<template>
|
||||||
<div class="card flex justify-content-center" style="height: 350px">
|
<div class="card flex justify-content-center" style="height: 360px">
|
||||||
<MeterGroup :value="value" orientation="vertical" />
|
<MeterGroup :value="value" orientation="vertical" labelOrientation="vertical" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -33,9 +34,10 @@ export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
value: [
|
value: [
|
||||||
{ color: '#4ADE81', label: 'E-mails', value: 17 },
|
{ label: 'Apps', color: '#34d399', value: 24 },
|
||||||
{ color: '#FB923C', label: 'Messages', value: 36 },
|
{ label: 'Messages', color: '#fbbf24', value: 16 },
|
||||||
{ color: '#C084FC', label: 'Other', value: 24 }
|
{ label: 'Media', color: '#60a5fa', value: 24 },
|
||||||
|
{ label: 'System', color: '#c084fc', value: 12 }
|
||||||
]
|
]
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
@ -44,8 +46,8 @@ export default {
|
||||||
`,
|
`,
|
||||||
composition: `
|
composition: `
|
||||||
<template>
|
<template>
|
||||||
<div class="card flex justify-content-center" style="height: 350px">
|
<div class="card flex justify-content-center" style="height: 360px">
|
||||||
<MeterGroup :value="value" orientation="vertical" />
|
<MeterGroup :value="value" orientation="vertical" labelOrientation="vertical" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -53,9 +55,10 @@ export default {
|
||||||
import { ref } from "vue";
|
import { ref } from "vue";
|
||||||
|
|
||||||
const value = ref([
|
const value = ref([
|
||||||
{ color: '#4ADE81', label: 'E-mails', value: 17 },
|
{ label: 'Apps', color: '#34d399', value: 24 },
|
||||||
{ color: '#FB923C', label: 'Messages', value: 36 },
|
{ label: 'Messages', color: '#fbbf24', value: 16 },
|
||||||
{ color: '#C084FC', label: 'Other', value: 24 }
|
{ label: 'Media', color: '#60a5fa', value: 24 },
|
||||||
|
{ label: 'System', color: '#c084fc', value: 12 }
|
||||||
]);
|
]);
|
||||||
<\/script>
|
<\/script>
|
||||||
`
|
`
|
||||||
|
|
|
||||||
|
|
@ -1,34 +1,31 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs">
|
<DocSectionText v-bind="$attrs">
|
||||||
<p>A customized toolbar with navigation bar like functionality.</p>
|
<p>A customized toolbar with navigation bar functionality.</p>
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<Toolbar class="bg-gray-900" style="border-radius: 3rem; background-image: linear-gradient(to right, var(--bluegray-500), var(--bluegray-800))">
|
<Toolbar style="border-radius: 3rem; padding: 1rem 1rem 1rem 1.5rem">
|
||||||
<template #start>
|
<template #start>
|
||||||
<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<div class="flex align-items-center gap-2">
|
||||||
<path
|
<svg viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" style="width: 2rem; margin-right: 1rem">
|
||||||
d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
|
<path
|
||||||
fill="#ffffff"
|
d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
|
||||||
/>
|
fill="var(--text-color)"
|
||||||
<path
|
/>
|
||||||
d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
|
<path
|
||||||
fill="#10b981"
|
d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
|
||||||
/>
|
fill="var(--surface-card)"
|
||||||
</svg>
|
/>
|
||||||
</template>
|
</svg>
|
||||||
|
<Button label="Files" text plain />
|
||||||
<template #center>
|
<Button label="Edit" text plain />
|
||||||
<div class="flex flex-wrap align-items-center gap-3">
|
<Button label="View" text plain />
|
||||||
<button class="p-link inline-flex justify-content-center align-items-center text-white h-3rem w-3rem border-circle hover:bg-white-alpha-10 transition-all transition-duration-200"><i class="pi pi-home text-2xl"></i></button>
|
|
||||||
<button class="p-link inline-flex justify-content-center align-items-center text-white h-3rem w-3rem border-circle hover:bg-white-alpha-10 transition-all transition-duration-200"><i class="pi pi-user text-2xl"></i></button>
|
|
||||||
<button class="p-link inline-flex justify-content-center align-items-center text-white h-3rem w-3rem border-circle hover:bg-white-alpha-10 transition-all transition-duration-200"><i class="pi pi-search text-2xl"></i></button>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #end>
|
<template #end>
|
||||||
<div class="flex align-items-center gap-2">
|
<div class="flex align-items-center gap-2">
|
||||||
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
|
<Button label="Share" severity="contrast" size="small" />
|
||||||
<span class="font-bold text-bluegray-50">Amy Elsner</span>
|
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" style="width: 32px; height: 32px" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</Toolbar>
|
</Toolbar>
|
||||||
|
|
@ -42,26 +39,23 @@ export default {
|
||||||
return {
|
return {
|
||||||
code: {
|
code: {
|
||||||
basic: `
|
basic: `
|
||||||
<Toolbar class="bg-gray-900" style="border-radius: 3rem; background-image: linear-gradient(to right, var(--bluegray-500), var(--bluegray-800))">
|
<Toolbar style="border-radius: 3rem; padding: 1rem 1rem 1rem 1.5rem">
|
||||||
<template #start>
|
<template #start>
|
||||||
<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<div class="flex align-items-center gap-2">
|
||||||
<path d="..." fill="#ffffff" />
|
<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<path d="..." fill="#10b981" />
|
<path d="..." fill="var(--text-color)" />
|
||||||
</svg>
|
<path d="..." fill="var(--surface-card)" />
|
||||||
</template>
|
</svg>
|
||||||
|
<Button label="Files" text plain />
|
||||||
<template #center>
|
<Button label="Edit" text plain />
|
||||||
<div class="flex flex-wrap align-items-center gap-3">
|
<Button label="View" text plain />
|
||||||
<button class="p-link inline-flex justify-content-center align-items-center text-white h-3rem w-3rem border-circle hover:bg-white-alpha-10 transition-all transition-duration-200"><i class="pi pi-home text-2xl"></i></button>
|
|
||||||
<button class="p-link inline-flex justify-content-center align-items-center text-white h-3rem w-3rem border-circle hover:bg-white-alpha-10 transition-all transition-duration-200"><i class="pi pi-user text-2xl"></i></button>
|
|
||||||
<button class="p-link inline-flex justify-content-center align-items-center text-white h-3rem w-3rem border-circle hover:bg-white-alpha-10 transition-all transition-duration-200"><i class="pi pi-search text-2xl"></i></button>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #end>
|
<template #end>
|
||||||
<div class="flex align-items-center gap-2">
|
<div class="flex align-items-center gap-2">
|
||||||
<Avatar image="/images/avatar/amyelsner.png" shape="circle" />
|
<Button label="Share" severity="contrast" size="small" />
|
||||||
<span class="font-bold text-bluegray-50">Amy Elsner</span>
|
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" style="width: 32px; height: 32px" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</Toolbar>
|
</Toolbar>
|
||||||
|
|
@ -69,32 +63,29 @@ export default {
|
||||||
options: `
|
options: `
|
||||||
<template>
|
<template>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<Toolbar class="bg-gray-900" style="border-radius: 3rem; background-image: linear-gradient(to right, var(--bluegray-500), var(--bluegray-800))">
|
<Toolbar style="border-radius: 3rem; padding: 1rem 1rem 1rem 1.5rem">
|
||||||
<template #start>
|
<template #start>
|
||||||
<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<div class="flex align-items-center gap-2">
|
||||||
<path
|
<svg viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" style="width: 2rem; margin-right: 1rem">
|
||||||
d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
|
<path
|
||||||
fill="#ffffff"
|
d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
|
||||||
/>
|
fill="var(--text-color)"
|
||||||
<path
|
/>
|
||||||
d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
|
<path
|
||||||
fill="#10b981"
|
d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
|
||||||
/>
|
fill="var(--surface-card)"
|
||||||
</svg>
|
/>
|
||||||
</template>
|
</svg>
|
||||||
|
<Button label="Files" text plain />
|
||||||
<template #center>
|
<Button label="Edit" text plain />
|
||||||
<div class="flex flex-wrap align-items-center gap-3">
|
<Button label="View" text plain />
|
||||||
<button class="p-link inline-flex justify-content-center align-items-center text-white h-3rem w-3rem border-circle hover:bg-white-alpha-10 transition-all transition-duration-200"><i class="pi pi-home text-2xl"></i></button>
|
|
||||||
<button class="p-link inline-flex justify-content-center align-items-center text-white h-3rem w-3rem border-circle hover:bg-white-alpha-10 transition-all transition-duration-200"><i class="pi pi-user text-2xl"></i></button>
|
|
||||||
<button class="p-link inline-flex justify-content-center align-items-center text-white h-3rem w-3rem border-circle hover:bg-white-alpha-10 transition-all transition-duration-200"><i class="pi pi-search text-2xl"></i></button>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #end>
|
<template #end>
|
||||||
<div class="flex align-items-center gap-2">
|
<div class="flex align-items-center gap-2">
|
||||||
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
|
<Button label="Share" severity="contrast" size="small" />
|
||||||
<span class="font-bold text-bluegray-50">Amy Elsner</span>
|
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" style="width: 32px; height: 32px" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</Toolbar>
|
</Toolbar>
|
||||||
|
|
@ -107,32 +98,29 @@ export default {
|
||||||
composition: `
|
composition: `
|
||||||
<template>
|
<template>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<Toolbar class="bg-gray-900" style="border-radius: 3rem; background-image: linear-gradient(to right, var(--bluegray-500), var(--bluegray-800))">
|
<Toolbar style="border-radius: 3rem; padding: 1rem 1rem 1rem 1.5rem">
|
||||||
<template #start>
|
<template #start>
|
||||||
<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<div class="flex align-items-center gap-2">
|
||||||
<path
|
<svg viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" style="width: 2rem; margin-right: 1rem">
|
||||||
d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
|
<path
|
||||||
fill="#ffffff"
|
d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
|
||||||
/>
|
fill="var(--text-color)"
|
||||||
<path
|
/>
|
||||||
d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
|
<path
|
||||||
fill="#10b981"
|
d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
|
||||||
/>
|
fill="var(--surface-card)"
|
||||||
</svg>
|
/>
|
||||||
</template>
|
</svg>
|
||||||
|
<Button label="Files" text plain />
|
||||||
<template #center>
|
<Button label="Edit" text plain />
|
||||||
<div class="flex flex-wrap align-items-center gap-3">
|
<Button label="View" text plain />
|
||||||
<button class="p-link inline-flex justify-content-center align-items-center text-white h-3rem w-3rem border-circle hover:bg-white-alpha-10 transition-all transition-duration-200"><i class="pi pi-home text-2xl"></i></button>
|
|
||||||
<button class="p-link inline-flex justify-content-center align-items-center text-white h-3rem w-3rem border-circle hover:bg-white-alpha-10 transition-all transition-duration-200"><i class="pi pi-user text-2xl"></i></button>
|
|
||||||
<button class="p-link inline-flex justify-content-center align-items-center text-white h-3rem w-3rem border-circle hover:bg-white-alpha-10 transition-all transition-duration-200"><i class="pi pi-search text-2xl"></i></button>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #end>
|
<template #end>
|
||||||
<div class="flex align-items-center gap-2">
|
<div class="flex align-items-center gap-2">
|
||||||
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
|
<Button label="Share" severity="contrast" size="small" />
|
||||||
<span class="font-bold text-bluegray-50">Amy Elsner</span>
|
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" style="width: 32px; height: 32px" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</Toolbar>
|
</Toolbar>
|
||||||
|
|
|
||||||
|
|
@ -13,14 +13,14 @@
|
||||||
<i :class="menuitem.icon"></i>
|
<i :class="menuitem.icon"></i>
|
||||||
</span>
|
</span>
|
||||||
<span>{{ menuitem.name }}</span>
|
<span>{{ menuitem.name }}</span>
|
||||||
<Badge v-if="menuitem.badge" :value="menuitem.badge" class="ml-auto"></Badge>
|
<Tag v-if="menuitem.badge" :value="menuitem.badge" class="ml-auto"></Tag>
|
||||||
</a>
|
</a>
|
||||||
<PrimeVueNuxtLink v-if="menuitem.to" :to="menuitem.to" :class="{ 'router-link-active': menuitem.to === $route.fullPath }">
|
<PrimeVueNuxtLink v-if="menuitem.to" :to="menuitem.to" :class="{ 'router-link-active': menuitem.to === $route.fullPath }">
|
||||||
<span v-if="menuitem.icon && root" class="menu-icon">
|
<span v-if="menuitem.icon && root" class="menu-icon">
|
||||||
<i :class="menuitem.icon"></i>
|
<i :class="menuitem.icon"></i>
|
||||||
</span>
|
</span>
|
||||||
<span>{{ menuitem.name }}</span>
|
<span>{{ menuitem.name }}</span>
|
||||||
<Badge v-if="menuitem.badge" :value="menuitem.badge" class="ml-auto"></Badge>
|
<Tag v-if="menuitem.badge" :value="menuitem.badge"></Tag>
|
||||||
</PrimeVueNuxtLink>
|
</PrimeVueNuxtLink>
|
||||||
|
|
||||||
<span v-if="!root && menuitem.children" class="menu-child-category">{{ menuitem.name }}</span>
|
<span v-if="!root && menuitem.children" class="menu-child-category">{{ menuitem.name }}</span>
|
||||||
|
|
|
||||||
|
|
@ -121,7 +121,6 @@ export default {
|
||||||
{
|
{
|
||||||
'layout-news-active': this.$appState.newsActive,
|
'layout-news-active': this.$appState.newsActive,
|
||||||
'p-ripple-disabled': this.$appState.ripple === false,
|
'p-ripple-disabled': this.$appState.ripple === false,
|
||||||
'p-input-filled': this.$primevue.config.inputStyle === 'filled',
|
|
||||||
'layout-dark': this.$appState.darkTheme,
|
'layout-dark': this.$appState.darkTheme,
|
||||||
'layout-light': !this.$appState.darkTheme
|
'layout-light': !this.$appState.darkTheme
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,16 +1,25 @@
|
||||||
<template>
|
<template>
|
||||||
<DocComponent title="Vue MeterGroup Component" header="MeterGroup" description="MeterGroup is a group of process status indicators." :componentDocs="docs" :apiDocs="['MeterGroup']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
|
<DocComponent
|
||||||
|
title="Vue MeterGroup Component"
|
||||||
|
header="MeterGroup"
|
||||||
|
description="MeterGroup displays scalar measurements within a known range."
|
||||||
|
:componentDocs="docs"
|
||||||
|
:apiDocs="['MeterGroup']"
|
||||||
|
:ptTabComponent="ptComponent"
|
||||||
|
:themingDocs="themingDoc"
|
||||||
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import AccessibilityDoc from '@/doc/metergroup/AccessibilityDoc.vue';
|
import AccessibilityDoc from '@/doc/metergroup/AccessibilityDoc.vue';
|
||||||
import BasicDoc from '@/doc/metergroup/BasicDoc.vue';
|
import BasicDoc from '@/doc/metergroup/BasicDoc.vue';
|
||||||
import MultipleDoc from '@/doc/metergroup/MultipleDoc.vue';
|
import IconDoc from '@/doc/metergroup/IconDoc.vue';
|
||||||
import ImportDoc from '@/doc/metergroup/ImportDoc.vue';
|
import ImportDoc from '@/doc/metergroup/ImportDoc.vue';
|
||||||
import VerticalDoc from '@/doc/metergroup/VerticalDoc.vue';
|
|
||||||
import LabelDoc from '@/doc/metergroup/LabelDoc.vue';
|
import LabelDoc from '@/doc/metergroup/LabelDoc.vue';
|
||||||
import TemplatingDoc from '@/doc/metergroup/TemplatingDoc.vue';
|
|
||||||
import MinMaxDoc from '@/doc/metergroup/MinMaxDoc.vue';
|
import MinMaxDoc from '@/doc/metergroup/MinMaxDoc.vue';
|
||||||
|
import MultipleDoc from '@/doc/metergroup/MultipleDoc.vue';
|
||||||
|
import TemplateDoc from '@/doc/metergroup/TemplateDoc.vue';
|
||||||
|
import VerticalDoc from '@/doc/metergroup/VerticalDoc.vue';
|
||||||
import PTComponent from '@/doc/metergroup/pt/index.vue';
|
import PTComponent from '@/doc/metergroup/pt/index.vue';
|
||||||
import ThemingDoc from '@/doc/metergroup/theming/index.vue';
|
import ThemingDoc from '@/doc/metergroup/theming/index.vue';
|
||||||
|
|
||||||
|
|
@ -33,6 +42,11 @@ export default {
|
||||||
label: 'Multiple',
|
label: 'Multiple',
|
||||||
component: MultipleDoc
|
component: MultipleDoc
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
id: 'icon',
|
||||||
|
label: 'Icon',
|
||||||
|
component: IconDoc
|
||||||
|
},
|
||||||
{
|
{
|
||||||
id: 'label',
|
id: 'label',
|
||||||
label: 'Label',
|
label: 'Label',
|
||||||
|
|
@ -49,9 +63,9 @@ export default {
|
||||||
component: MinMaxDoc
|
component: MinMaxDoc
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'templating',
|
id: 'template',
|
||||||
label: 'Templating',
|
label: 'Template',
|
||||||
component: TemplatingDoc
|
component: TemplateDoc
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'accessibility',
|
id: 'accessibility',
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue