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

Fixed #4530 - Export styles of all components

pull/4534/head
mertsincan 2023-10-02 11:46:09 +01:00
parent 7b6d458067
commit dc2913e887
463 changed files with 10696 additions and 9670 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
.editorconfig Normal file
View File

@ -0,0 +1,13 @@
# Editor configuration, see https://editorconfig.org
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 4
insert_final_newline = true
trim_trailing_whitespace = true
[*.md]
max_line_length = off
trim_trailing_whitespace = false

4
.vscode/settings.team.json vendored
View File

@ -15,5 +15,9 @@
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
}
}

14
build-meta.js
View File

@ -1,7 +1,7 @@
const fs = require('fs-extra');
const path = require('path');
function copyDependencies(inFolder, outFolder) {
function copyDependencies(inFolder, outFolder, subFolder) {
fs.readdirSync(path.resolve(__dirname, inFolder), { withFileTypes: true })
.filter((dir) => dir.isDirectory())
.forEach(({ name: folderName }) => {
@ -10,10 +10,20 @@ function copyDependencies(inFolder, outFolder) {
fs.copySync(path.resolve(__dirname, inFolder + folderName) + '/' + file, outFolder + folderName + '/' + file);
}
});
if (subFolder) {
try {
fs.readdirSync(path.resolve(__dirname, inFolder + folderName + subFolder)).forEach((subFile) => {
if (subFile === 'package.json' || subFile.endsWith('d.ts') || subFile.endsWith('vue')) {
fs.copySync(path.resolve(__dirname, inFolder + folderName + subFolder) + '/' + subFile, outFolder + folderName + subFolder + '/' + subFile);
}
});
} catch {}
}
});
}
copyDependencies('./components/lib/', 'dist/');
copyDependencies('./components/lib/', 'dist/', '/style');
copyDependencies('./components/lib/icons/', 'dist/icons/');
copyDependencies('./components/lib/passthrough/', 'dist/passthrough/');

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

@ -1,53 +1,6 @@
<script>
import AccordionStyle from 'primevue/accordion/style';
import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
@layer primevue {
.p-accordion-header-action {
cursor: pointer;
display: flex;
align-items: center;
user-select: none;
position: relative;
text-decoration: none;
}
.p-accordion-header-action:focus {
z-index: 1;
}
.p-accordion-header-text {
line-height: 1;
}
}
`;
const classes = {
root: 'p-accordion p-component',
tab: {
root: ({ instance, index }) => [
'p-accordion-tab',
{
'p-accordion-tab-active': instance.isTabActive(index)
}
],
header: ({ instance, tab, index }) => [
'p-accordion-header',
{
'p-highlight': instance.isTabActive(index),
'p-disabled': instance.getTabProp(tab, 'disabled')
}
],
headerAction: 'p-accordion-header-link p-accordion-header-action',
headerIcon: 'p-accordion-toggle-icon',
headerTitle: 'p-accordion-header-text',
toggleableContent: 'p-toggleable-content',
content: 'p-accordion-content'
}
};
const { load: loadStyle } = useStyle(styles, { name: 'accordion', manual: true });
export default {
name: 'BaseAccordion',
@ -82,10 +35,7 @@ export default {
default: false
}
},
css: {
classes,
loadStyle
},
style: AccordionStyle,
provide() {
return {
$parentInstance: this

52
components/lib/accordion/style/AccordionStyle.js Normal file
View File

@ -0,0 +1,52 @@
import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-accordion-header-action {
cursor: pointer;
display: flex;
align-items: center;
user-select: none;
position: relative;
text-decoration: none;
}
.p-accordion-header-action:focus {
z-index: 1;
}
.p-accordion-header-text {
line-height: 1;
}
}
`;
const classes = {
root: 'p-accordion p-component',
tab: {
root: ({ instance, index }) => [
'p-accordion-tab',
{
'p-accordion-tab-active': instance.isTabActive(index)
}
],
header: ({ instance, tab, index }) => [
'p-accordion-header',
{
'p-highlight': instance.isTabActive(index),
'p-disabled': instance.getTabProp(tab, 'disabled')
}
],
headerAction: 'p-accordion-header-link p-accordion-header-action',
headerIcon: 'p-accordion-toggle-icon',
headerTitle: 'p-accordion-header-text',
toggleableContent: 'p-toggleable-content',
content: 'p-accordion-content'
}
};
export default BaseStyle.extend({
name: 'accordion',
css,
classes
});

5
components/lib/accordion/style/package.json Normal file
View File

@ -0,0 +1,5 @@
{
"main": "./accordionstyle.cjs.js",
"module": "./accordionstyle.esm.js",
"unpkg": "./accordionstyle.min.js"
}

2
components/lib/accordiontab/BaseAccordionTab.vue
View File

@ -1,4 +1,5 @@
<script>
import AccordionTabStyle from 'primevue/accordiontab/style';
import BaseComponent from 'primevue/basecomponent';
export default {
@ -15,6 +16,7 @@ export default {
contentProps: null,
disabled: Boolean
},
style: AccordionTabStyle,
provide() {
return {
$parentInstance: this

1
components/lib/accordiontab/style/AccordionTabStyle.js Normal file
View File

@ -0,0 +1 @@
export default {};

5
components/lib/accordiontab/style/package.json Normal file
View File

@ -0,0 +1,5 @@
{
"main": "./accordiontabstyle.cjs.js",
"module": "./accordiontabstyle.esm.js",
"unpkg": "./accordiontabstyle.min.js"
}

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

@ -1,154 +1,6 @@
<script>
import AutoCompleteStyle from 'primevue/autocomplete/style';
import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
import { ObjectUtils } from 'primevue/utils';
const styles = `
@layer primevue {
.p-autocomplete {
display: inline-flex;
}
.p-autocomplete-loader {
position: absolute;
top: 50%;
margin-top: -0.5rem;
}
.p-autocomplete-dd .p-autocomplete-input {
flex: 1 1 auto;
width: 1%;
}
.p-autocomplete-dd .p-autocomplete-input,
.p-autocomplete-dd .p-autocomplete-multiple-container {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.p-autocomplete-dd .p-autocomplete-dropdown {
border-top-left-radius: 0;
border-bottom-left-radius: 0px;
}
.p-autocomplete .p-autocomplete-panel {
min-width: 100%;
}
.p-autocomplete-panel {
position: absolute;
overflow: auto;
top: 0;
left: 0;
}
.p-autocomplete-items {
margin: 0;
padding: 0;
list-style-type: none;
}
.p-autocomplete-item {
cursor: pointer;
white-space: nowrap;
position: relative;
overflow: hidden;
}
.p-autocomplete-multiple-container {
margin: 0;
padding: 0;
list-style-type: none;
cursor: text;
overflow: hidden;
display: flex;
align-items: center;
flex-wrap: wrap;
}
.p-autocomplete-token {
cursor: default;
display: inline-flex;
align-items: center;
flex: 0 0 auto;
}
.p-autocomplete-token-icon {
cursor: pointer;
}
.p-autocomplete-input-token {
flex: 1 1 auto;
display: inline-flex;
}
.p-autocomplete-input-token input {
border: 0 none;
outline: 0 none;
background-color: transparent;
margin: 0;
padding: 0;
box-shadow: none;
border-radius: 0;
width: 100%;
}
.p-fluid .p-autocomplete {
display: flex;
}
.p-fluid .p-autocomplete-dd .p-autocomplete-input {
width: 1%;
}
}
`;
const inlineStyles = {
root: { position: 'relative' }
};
const classes = {
root: ({ instance, props }) => [
'p-autocomplete p-component p-inputwrapper',
{
'p-disabled': props.disabled,
'p-focus': instance.focused,
'p-autocomplete-dd': props.dropdown,
'p-autocomplete-multiple': props.multiple,
'p-inputwrapper-filled': props.modelValue || ObjectUtils.isNotEmpty(instance.inputValue),
'p-inputwrapper-focus': instance.focused,
'p-overlay-open': instance.overlayVisible
}
],
input: ({ props }) => ['p-autocomplete-input p-inputtext p-component', { 'p-autocomplete-dd-input': props.dropdown }],
container: 'p-autocomplete-multiple-container p-component p-inputtext',
token: ({ instance, i }) => ['p-autocomplete-token', { 'p-focus': instance.focusedMultipleOptionIndex === i }],
tokenLabel: 'p-autocomplete-token-label',
removeTokenIcon: 'p-autocomplete-token-icon',
inputToken: 'p-autocomplete-input-token',
loadingIcon: 'p-autocomplete-loader',
dropdownButton: 'p-autocomplete-dropdown',
panel: ({ instance }) => [
'p-autocomplete-panel p-component',
{
'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
'p-ripple-disabled': instance.$primevue.config.ripple === false
}
],
list: 'p-autocomplete-items',
itemGroup: 'p-autocomplete-item-group',
item: ({ instance, option, i, getItemOptions }) => [
'p-autocomplete-item',
{
'p-highlight': instance.isSelected(option),
'p-focus': instance.focusedOptionIndex === instance.getOptionIndex(i, getItemOptions),
'p-disabled': instance.isOptionDisabled(option)
}
],
emptyMessage: 'p-autocomplete-empty-message'
};
const { load: loadStyle } = useStyle(styles, { name: 'autocomplete', manual: true });
export default {
name: 'BaseAutoComplete',
@ -314,11 +166,7 @@ export default {
default: null
}
},
css: {
classes,
inlineStyles,
loadStyle
},
style: AutoCompleteStyle,
provide() {
return {
$parentInstance: this

154
components/lib/autocomplete/style/AutoCompleteStyle.js Normal file
View File

@ -0,0 +1,154 @@
import BaseStyle from 'primevue/base/style';
import { ObjectUtils } from 'primevue/utils';
const css = `
@layer primevue {
.p-autocomplete {
display: inline-flex;
}
.p-autocomplete-loader {
position: absolute;
top: 50%;
margin-top: -0.5rem;
}
.p-autocomplete-dd .p-autocomplete-input {
flex: 1 1 auto;
width: 1%;
}
.p-autocomplete-dd .p-autocomplete-input,
.p-autocomplete-dd .p-autocomplete-multiple-container {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.p-autocomplete-dd .p-autocomplete-dropdown {
border-top-left-radius: 0;
border-bottom-left-radius: 0px;
}
.p-autocomplete .p-autocomplete-panel {
min-width: 100%;
}
.p-autocomplete-panel {
position: absolute;
overflow: auto;
top: 0;
left: 0;
}
.p-autocomplete-items {
margin: 0;
padding: 0;
list-style-type: none;
}
.p-autocomplete-item {
cursor: pointer;
white-space: nowrap;
position: relative;
overflow: hidden;
}
.p-autocomplete-multiple-container {
margin: 0;
padding: 0;
list-style-type: none;
cursor: text;
overflow: hidden;
display: flex;
align-items: center;
flex-wrap: wrap;
}
.p-autocomplete-token {
cursor: default;
display: inline-flex;
align-items: center;
flex: 0 0 auto;
}
.p-autocomplete-token-icon {
cursor: pointer;
}
.p-autocomplete-input-token {
flex: 1 1 auto;
display: inline-flex;
}
.p-autocomplete-input-token input {
border: 0 none;
outline: 0 none;
background-color: transparent;
margin: 0;
padding: 0;
box-shadow: none;
border-radius: 0;
width: 100%;
}
.p-fluid .p-autocomplete {
display: flex;
}
.p-fluid .p-autocomplete-dd .p-autocomplete-input {
width: 1%;
}
}
`;
const inlineStyles = {
root: { position: 'relative' }
};
const classes = {
root: ({ instance, props }) => [
'p-autocomplete p-component p-inputwrapper',
{
'p-disabled': props.disabled,
'p-focus': instance.focused,
'p-autocomplete-dd': props.dropdown,
'p-autocomplete-multiple': props.multiple,
'p-inputwrapper-filled': props.modelValue || ObjectUtils.isNotEmpty(instance.inputValue),
'p-inputwrapper-focus': instance.focused,
'p-overlay-open': instance.overlayVisible
}
],
input: ({ props }) => ['p-autocomplete-input p-inputtext p-component', { 'p-autocomplete-dd-input': props.dropdown }],
container: 'p-autocomplete-multiple-container p-component p-inputtext',
token: ({ instance, i }) => ['p-autocomplete-token', { 'p-focus': instance.focusedMultipleOptionIndex === i }],
tokenLabel: 'p-autocomplete-token-label',
removeTokenIcon: 'p-autocomplete-token-icon',
inputToken: 'p-autocomplete-input-token',
loadingIcon: 'p-autocomplete-loader',
dropdownButton: 'p-autocomplete-dropdown',
panel: ({ instance }) => [
'p-autocomplete-panel p-component',
{
'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
'p-ripple-disabled': instance.$primevue.config.ripple === false
}
],
list: 'p-autocomplete-items',
itemGroup: 'p-autocomplete-item-group',
item: ({ instance, option, i, getItemOptions }) => [
'p-autocomplete-item',
{
'p-highlight': instance.isSelected(option),
'p-focus': instance.focusedOptionIndex === instance.getOptionIndex(i, getItemOptions),
'p-disabled': instance.isOptionDisabled(option)
}
],
emptyMessage: 'p-autocomplete-empty-message'
};
export default BaseStyle.extend({
name: 'autocomplete',
css,
classes,
inlineStyles
});

5
components/lib/autocomplete/style/package.json Normal file
View File

@ -0,0 +1,5 @@
{
"main": "./autocompletestyle.cjs.js",
"module": "./autocompletestyle.esm.js",
"unpkg": "./autocompletestyle.min.js"
}

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

@ -1,56 +1,6 @@
<script>
import AvatarStyle from 'primevue/avatar/style';
import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
@layer primevue {
.p-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
font-size: 1rem;
}
.p-avatar.p-avatar-image {
background-color: transparent;
}
.p-avatar.p-avatar-circle {
border-radius: 50%;
}
.p-avatar-circle img {
border-radius: 50%;
}
.p-avatar .p-avatar-icon {
font-size: 1rem;
}
.p-avatar img {
width: 100%;
height: 100%;
}
}
`;
const classes = {
root: ({ props }) => [
'p-avatar p-component',
{
'p-avatar-image': props.image != null,
'p-avatar-circle': props.shape === 'circle',
'p-avatar-lg': props.size === 'large',
'p-avatar-xl': props.size === 'xlarge'
}
],
label: 'p-avatar-text',
icon: 'p-avatar-icon'
};
const { load: loadStyle } = useStyle(styles, { name: 'avatar', manual: true });
export default {
name: 'BaseAvatar',
@ -85,10 +35,7 @@ export default {
default: null
}
},
css: {
classes,
loadStyle
},
style: AvatarStyle,
provide() {
return {
$parentInstance: this

55
components/lib/avatar/style/AvatarStyle.js Normal file
View File

@ -0,0 +1,55 @@
import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
font-size: 1rem;
}
.p-avatar.p-avatar-image {
background-color: transparent;
}
.p-avatar.p-avatar-circle {
border-radius: 50%;
}
.p-avatar-circle img {
border-radius: 50%;
}
.p-avatar .p-avatar-icon {
font-size: 1rem;
}
.p-avatar img {
width: 100%;
height: 100%;
}
}
`;
const classes = {
root: ({ props }) => [
'p-avatar p-component',
{
'p-avatar-image': props.image != null,
'p-avatar-circle': props.shape === 'circle',
'p-avatar-lg': props.size === 'large',
'p-avatar-xl': props.size === 'xlarge'
}
],
label: 'p-avatar-text',
icon: 'p-avatar-icon'
};
export default BaseStyle.extend({
name: 'avatar',
css,
classes
});

5
components/lib/avatar/style/package.json Normal file
View File

@ -0,0 +1,5 @@
{
"main": "./avatarstyle.cjs.js",
"module": "./avatarstyle.esm.js",
"unpkg": "./avatarstyle.min.js"
}

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

@ -1,33 +1,11 @@
<script>
import AvatarGroupStyle from 'primevue/avatargroup/style';
import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
@layer primevue {
.p-avatar-group .p-avatar + .p-avatar {
margin-left: -1rem;
}
.p-avatar-group {
display: flex;
align-items: center;
}
}
`;
const classes = {
root: 'p-avatar-group p-component'
};
const { load: loadStyle } = useStyle(styles, { name: 'avatargroup', manual: true });
export default {
name: 'BaseAvatarGroup',
extends: BaseComponent,
css: {
classes,
loadStyle
},
style: AvatarGroupStyle,
provide() {
return {
$parentInstance: this

24
components/lib/avatargroup/style/AvatarGroupStyle.js Normal file
View File

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

5
components/lib/avatargroup/style/package.json Normal file
View File

@ -0,0 +1,5 @@
{
"main": "./avatargroupstyle.cjs.js",
"module": "./avatargroupstyle.esm.js",
"unpkg": "./avatargroupstyle.min.js"
}

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

@ -1,62 +1,6 @@
<script>
import BadgeStyle from 'primevue/badge/style';
import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
import { ObjectUtils } from 'primevue/utils';
const styles = `
@layer primevue {
.p-badge {
display: inline-block;
border-radius: 10px;
text-align: center;
padding: 0 .5rem;
}
.p-overlay-badge {
position: relative;
}
.p-overlay-badge .p-badge {
position: absolute;
top: 0;
right: 0;
transform: translate(50%,-50%);
transform-origin: 100% 0;
margin: 0;
}
.p-badge-dot {
width: .5rem;
min-width: .5rem;
height: .5rem;
border-radius: 50%;
padding: 0;
}
.p-badge-no-gutter {
padding: 0;
border-radius: 50%;
}
}
`;
const classes = {
root: ({ props, instance }) => [
'p-badge p-component',
{
'p-badge-no-gutter': ObjectUtils.isNotEmpty(props.value) && String(props.value).length === 1,
'p-badge-dot': ObjectUtils.isEmpty(props.value) && !instance.$slots.default,
'p-badge-lg': props.size === 'large',
'p-badge-xl': props.size === 'xlarge',
'p-badge-info': props.severity === 'info',
'p-badge-success': props.severity === 'success',
'p-badge-warning': props.severity === 'warning',
'p-badge-danger': props.severity === 'danger'
}
]
};
const { load: loadStyle } = useStyle(styles, { name: 'badge', manual: true });
export default {
name: 'BaseBadge',
@ -75,10 +19,7 @@ export default {
default: null
}
},
css: {
classes,
loadStyle
},
style: BadgeStyle,
provide() {
return {
$parentInstance: this

61
components/lib/badge/style/BadgeStyle.js Normal file
View File

@ -0,0 +1,61 @@
import BaseStyle from 'primevue/base/style';
import { ObjectUtils } from 'primevue/utils';
const css = `
@layer primevue {
.p-badge {
display: inline-block;
border-radius: 10px;
text-align: center;
padding: 0 .5rem;
}
.p-overlay-badge {
position: relative;
}
.p-overlay-badge .p-badge {
position: absolute;
top: 0;
right: 0;
transform: translate(50%,-50%);
transform-origin: 100% 0;
margin: 0;
}
.p-badge-dot {
width: .5rem;
min-width: .5rem;
height: .5rem;
border-radius: 50%;
padding: 0;
}
.p-badge-no-gutter {
padding: 0;
border-radius: 50%;
}
}
`;
const classes = {
root: ({ props, instance }) => [
'p-badge p-component',
{
'p-badge-no-gutter': ObjectUtils.isNotEmpty(props.value) && String(props.value).length === 1,
'p-badge-dot': ObjectUtils.isEmpty(props.value) && !instance.$slots.default,
'p-badge-lg': props.size === 'large',
'p-badge-xl': props.size === 'xlarge',
'p-badge-info': props.severity === 'info',
'p-badge-success': props.severity === 'success',
'p-badge-warning': props.severity === 'warning',
'p-badge-danger': props.severity === 'danger'
}
]
};
export default BaseStyle.extend({
name: 'badge',
css,
classes
});

5
components/lib/badge/style/package.json Normal file
View File

@ -0,0 +1,5 @@
{
"main": "./badgestyle.cjs.js",
"module": "./badgestyle.esm.js",
"unpkg": "./badgestyle.min.js"
}

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

@ -1,54 +1,8 @@
import BadgeDirectiveStyle from 'primevue/badgedirective/style';
import BaseDirective from 'primevue/basedirective';
import { useStyle } from 'primevue/usestyle';
const styles = `
@layer primevue {
.p-badge {
display: inline-block;
border-radius: 10px;
text-align: center;
padding: 0 .5rem;
}
.p-overlay-badge {
position: relative;
}
.p-overlay-badge .p-badge {
position: absolute;
top: 0;
right: 0;
transform: translate(50%,-50%);
transform-origin: 100% 0;
margin: 0;
}
.p-badge-dot {
width: .5rem;
min-width: .5rem;
height: .5rem;
border-radius: 50%;
padding: 0;
}
.p-badge-no-gutter {
padding: 0;
border-radius: 50%;
}
}
`;
const classes = {
root: 'p-badge p-component'
};
const { load: loadStyle } = useStyle(styles, { name: 'badge', manual: true });
const BaseBadgeDirective = BaseDirective.extend({
css: {
classes,
loadStyle
}
style: BadgeDirectiveStyle
});
export default BaseBadgeDirective;

48
components/lib/badgedirective/style/BadgeDirectiveStyle.js Normal file
View File

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

5
components/lib/badgedirective/style/package.json Normal file
View File

@ -0,0 +1,5 @@
{
"main": "./badgedirectivestyle.cjs.js",
"module": "./badgedirectivestyle.esm.js",
"unpkg": "./badgedirectivestyle.min.js"
}

33
components/lib/base/Base.js
View File

@ -1,32 +1 @@
import { useStyle } from 'primevue/usestyle';
const styles = `
.p-hidden-accessible {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.p-hidden-accessible input,
.p-hidden-accessible select {
transform: scale(0);
}
.p-overflow-hidden {
overflow: hidden;
padding-right: var(--scrollbar-width);
}
`;
export const { load: loadBaseStyle } = useStyle(styles, { name: 'base', manual: true });
const Base = {
styles
};
export default Base;
export default {};

48
components/lib/base/style/BaseStyle.js Normal file
View File

@ -0,0 +1,48 @@
import { useStyle } from 'primevue/usestyle';
const css = `
.p-hidden-accessible {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.p-hidden-accessible input,
.p-hidden-accessible select {
transform: scale(0);
}
.p-overflow-hidden {
overflow: hidden;
padding-right: var(--scrollbar-width);
}
`;
const classes = {};
const inlineStyles = {};
export default {
name: 'base',
css,
classes,
inlineStyles,
loadStyle(options = {}) {
return useStyle(this.css, { name: this.name, ...options });
},
getStyleSheet(extendedCSS = '', props = {}) {
const _props = Object.entries(props)
.reduce((acc, [k, v]) => acc.push(`${k}="${v}"`) && acc, [])
.join(' ');
return `<style type="text/css" data-primevue-style-id="${this.name}" ${_props}>${this.css}${extendedCSS}</style>`;
},
extend(style) {
return { ...this, ...style };
}
};

5
components/lib/base/style/package.json Normal file
View File

@ -0,0 +1,5 @@
{
"main": "./basestyle.cjs.js",
"module": "./basestyle.esm.js",
"unpkg": "./basestyle.min.js"
}

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

@ -1,365 +1,8 @@
<script>
import { loadBaseStyle } from 'primevue/base';
import { useStyle } from 'primevue/usestyle';
import BaseStyle from 'primevue/base/style';
import { ObjectUtils } from 'primevue/utils';
import { mergeProps } from 'vue';
const inlineStyles = {};
const buttonStyles = `
.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 checkboxStyles = `
.p-checkbox {
display: inline-flex;
cursor: pointer;
user-select: none;
vertical-align: bottom;
position: relative;
}
.p-checkbox.p-checkbox-disabled {
cursor: default;
}
.p-checkbox-box {
display: flex;
justify-content: center;
align-items: center;
}
`;
const inputTextStyles = `
.p-fluid .p-inputtext {
width: 100%;
}
/* InputGroup */
.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%;
}
/* Floating Label */
.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 textarea ~ label {
top: 1rem;
}
.p-float-label input:focus ~ label,
.p-float-label input.p-filled ~ label,
.p-float-label textarea:focus ~ label,
.p-float-label textarea.p-filled ~ label,
.p-float-label .p-inputwrapper-focus ~ label,
.p-float-label .p-inputwrapper-filled ~ label {
top: -.75rem;
font-size: 12px;
}
.p-float-label .input:-webkit-autofill ~ label {
top: -20px;
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;
}
.p-input-icon-left,
.p-input-icon-right {
position: relative;
display: inline-block;
}
.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;
}
.p-fluid .p-input-icon-left,
.p-fluid .p-input-icon-right {
display: block;
width: 100%;
}
`;
const radioButtonStyles = `
.p-radiobutton {
position: relative;
display: inline-flex;
cursor: pointer;
user-select: none;
vertical-align: bottom;
}
.p-radiobutton.p-radiobutton-disabled {
cursor: default;
}
.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-box.p-highlight .p-radiobutton-icon {
transform: translateZ(0) scale(1.0, 1.0);
visibility: visible;
}
`;
const styles = `
@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 !important;
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 !important;
}
.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;
}
${buttonStyles}
${checkboxStyles}
${inputTextStyles}
${radioButtonStyles}
}
`;
const { load: loadStyle } = useStyle(styles, { name: 'common', manual: true });
const { load: loadGlobalStyle } = useStyle('', { name: 'global', manual: true });
import BaseComponentStyle from './style/BaseComponentStyle';
export default {
name: 'BaseComponent',
@ -387,8 +30,8 @@ export default {
immediate: true,
handler(newValue) {
if (!newValue) {
loadStyle(undefined, { nonce: this.$config?.csp?.nonce });
this.$options.css && this.$css.loadStyle(undefined, { nonce: this.$config?.csp?.nonce });
BaseComponentStyle.loadStyle({ nonce: this.$config?.csp?.nonce });
this.$options.style && this.$style.loadStyle({ nonce: this.$config?.csp?.nonce });
}
}
}
@ -410,7 +53,7 @@ export default {
this._hook('onCreated');
},
beforeMount() {
loadBaseStyle(undefined, { nonce: this.$config?.csp?.nonce });
BaseStyle.loadStyle({ nonce: this.$config?.csp?.nonce });
this._loadGlobalStyles();
this._hook('onBeforeMount');
},
@ -452,7 +95,7 @@ export default {
const globalCSS = this._useGlobalPT(this._getOptionValue, 'global.css', this.$params);
ObjectUtils.isNotEmpty(globalCSS) && loadGlobalStyle(globalCSS, { nonce: this.$config?.csp?.nonce });
ObjectUtils.isNotEmpty(globalCSS) && BaseComponentStyle.loadGlobalStyle(globalCSS, { nonce: this.$config?.csp?.nonce });
},
_getHostInstance(instance) {
return instance ? (this.$options.hostName ? (instance.$.type.name === this.$options.hostName ? instance : this._getHostInstance(instance.$parentInstance)) : instance.$parentInstance) : undefined;
@ -535,12 +178,12 @@ export default {
return this._getPTValue(obj, key, { instance: this, ...params }, false);
},
cx(key = '', params = {}) {
return !this.isUnstyled ? this._getOptionValue(this.$css.classes, key, { ...this.$params, ...params }) : undefined;
return !this.isUnstyled ? this._getOptionValue(this.$style.classes, key, { ...this.$params, ...params }) : undefined;
},
sx(key = '', when = true, params = {}) {
if (when) {
const self = this._getOptionValue(this.$css.inlineStyles, key, { ...this.$params, ...params });
const base = this._getOptionValue(inlineStyles, key, { ...this.$params, ...params });
const self = this._getOptionValue(this.$style.inlineStyles, key, { ...this.$params, ...params });
const base = this._getOptionValue(BaseComponentStyle.inlineStyles, key, { ...this.$params, ...params });
return [base, self];
}
@ -561,8 +204,8 @@ export default {
$params() {
return { instance: this, props: this.$props, state: this.$data, parentInstance: this.$parentInstance };
},
$css() {
return { classes: undefined, inlineStyles: undefined, loadStyle: () => {}, loadCustomStyle: () => {}, ...(this._getHostInstance(this) || {}).$css, ...this.$options.css };
$style() {
return { classes: undefined, inlineStyles: undefined, loadStyle: () => {}, loadCustomStyle: () => {}, ...(this._getHostInstance(this) || {}).$style, ...this.$options.style };
},
$config() {
return this.$primevue?.config;

364
components/lib/basecomponent/style/BaseComponentStyle.js Normal file
View File

@ -0,0 +1,364 @@
import BaseStyle from 'primevue/base/style';
import { useStyle } from 'primevue/usestyle';
const buttonCSS = `
.p-button {
display: inline-flex;
cursor: pointer;
user-select: none;
align-items: center;
vertical-align: bottom;
text-align: center;
overflow: hidden;
position: relative;
}
.p-button-label {
flex: 1 1 auto;
}
.p-button-icon-right {
order: 1;
}
.p-button:disabled {
cursor: default;
}
.p-button-icon-only {
justify-content: center;
}
.p-button-icon-only .p-button-label {
visibility: hidden;
width: 0;
flex: 0 0 auto;
}
.p-button-vertical {
flex-direction: column;
}
.p-button-icon-bottom {
order: 2;
}
.p-buttonset .p-button {
margin: 0;
}
.p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover {
border-right: 0 none;
}
.p-buttonset .p-button:not(:first-of-type):not(:last-of-type) {
border-radius: 0;
}
.p-buttonset .p-button:first-of-type:not(:only-of-type) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.p-buttonset .p-button:last-of-type:not(:only-of-type) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.p-buttonset .p-button:focus {
position: relative;
z-index: 1;
}
`;
const checkboxCSS = `
.p-checkbox {
display: inline-flex;
cursor: pointer;
user-select: none;
vertical-align: bottom;
position: relative;
}
.p-checkbox.p-checkbox-disabled {
cursor: default;
}
.p-checkbox-box {
display: flex;
justify-content: center;
align-items: center;
}
`;
const inputTextCSS = `
.p-fluid .p-inputtext {
width: 100%;
}
/* InputGroup */
.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%;
}
/* Floating Label */
.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 textarea ~ label {
top: 1rem;
}
.p-float-label input:focus ~ label,
.p-float-label input.p-filled ~ label,
.p-float-label textarea:focus ~ label,
.p-float-label textarea.p-filled ~ label,
.p-float-label .p-inputwrapper-focus ~ label,
.p-float-label .p-inputwrapper-filled ~ label {
top: -.75rem;
font-size: 12px;
}
.p-float-label .input:-webkit-autofill ~ label {
top: -20px;
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;
}
.p-input-icon-left,
.p-input-icon-right {
position: relative;
display: inline-block;
}
.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;
}
.p-fluid .p-input-icon-left,
.p-fluid .p-input-icon-right {
display: block;
width: 100%;
}
`;
const radioButtonCSS = `
.p-radiobutton {
position: relative;
display: inline-flex;
cursor: pointer;
user-select: none;
vertical-align: bottom;
}
.p-radiobutton.p-radiobutton-disabled {
cursor: default;
}
.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-box.p-highlight .p-radiobutton-icon {
transform: translateZ(0) scale(1.0, 1.0);
visibility: visible;
}
`;
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 !important;
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 !important;
}
.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}
${checkboxCSS}
${inputTextCSS}
${radioButtonCSS}
}
`;
export default BaseStyle.extend({
name: 'common',
css,
loadGlobalStyle: (globalCSS, options = {}) => useStyle(globalCSS, { name: 'global', ...options })
});

5
components/lib/basecomponent/style/package.json Normal file
View File

@ -0,0 +1,5 @@
{
"main": "./basecomponentstyle.cjs.js",
"module": "./basecomponentstyle.esm.js",
"unpkg": "./basecomponentstyle.min.js"
}

12
components/lib/basedirective/BaseDirective.js
View File

@ -1,4 +1,4 @@
import { loadBaseStyle } from 'primevue/base';
import BaseStyle from 'primevue/base/style';
import { ObjectUtils } from 'primevue/utils';
import { mergeProps } from 'vue';
@ -94,7 +94,7 @@ const BaseDirective = {
$host: el,
$binding: binding,
$el: $prevInstance['$el'] || undefined,
$css: { classes: undefined, inlineStyles: undefined, loadStyle: () => {}, ...options?.css },
$style: { classes: undefined, inlineStyles: undefined, loadStyle: () => {}, ...options?.style },
$config: config,
/* computed instance variables */
defaultPT: BaseDirective._getPT(config?.pt, undefined, (value) => value?.directives?.[name]),
@ -102,8 +102,8 @@ const BaseDirective = {
/* instance's methods */
ptm: (key = '', params = {}) => BaseDirective._getPTValue(el.$instance, el.$instance?.$binding?.value?.pt, key, { ...params }),
ptmo: (obj = {}, key = '', params = {}) => BaseDirective._getPTValue(el.$instance, obj, key, params, false),
cx: (key = '', params = {}) => (!el.$instance?.isUnstyled ? BaseDirective._getOptionValue(el.$instance?.$css?.classes, key, { ...params }) : undefined),
sx: (key = '', when = true, params = {}) => (when ? BaseDirective._getOptionValue(el.$instance?.$css?.inlineStyles, key, { ...params }) : undefined),
cx: (key = '', params = {}) => (!el.$instance?.isUnstyled ? BaseDirective._getOptionValue(el.$instance?.$style?.classes, key, { ...params }) : undefined),
sx: (key = '', when = true, params = {}) => (when ? BaseDirective._getOptionValue(el.$instance?.$style?.inlineStyles, key, { ...params }) : undefined),
...$options
};
@ -119,8 +119,8 @@ const BaseDirective = {
beforeMount: (el, binding, vnode, prevVnode) => {
const config = binding?.instance?.$primevue?.config;
loadBaseStyle(undefined, { nonce: config?.csp?.nonce });
!el.$instance?.isUnstyled && el.$instance?.$css?.loadStyle(undefined, { nonce: config?.csp?.nonce });
BaseStyle.loadStyle(undefined, { nonce: config?.csp?.nonce });
!el.$instance?.isUnstyled && el.$instance?.$style?.loadStyle(undefined, { nonce: config?.csp?.nonce });
handleHook('beforeMount', el, binding, vnode, prevVnode);
},
mounted: (el, binding, vnode, prevVnode) => {

39
components/lib/baseicon/BaseIcon.vue
View File

@ -1,42 +1,7 @@
<script>
import { useStyle } from 'primevue/usestyle';
import BaseIconStyle from 'primevue/baseicon/style';
import { ObjectUtils } from 'primevue/utils';
const styles = `
.p-icon {
display: inline-block;
}
.p-icon-spin {
-webkit-animation: p-icon-spin 2s infinite linear;
animation: p-icon-spin 2s infinite linear;
}
@-webkit-keyframes p-icon-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@keyframes p-icon-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
`;
const { load: loadStyle } = useStyle(styles, { name: 'baseicon', manual: true });
export default {
name: 'BaseIcon',
props: {
@ -50,7 +15,7 @@ export default {
}
},
beforeMount() {
loadStyle(undefined, { nonce: this.$config?.csp?.nonce });
BaseIconStyle.loadStyle({ nonce: this.$config?.csp?.nonce });
},
methods: {
pti() {

39
components/lib/baseicon/style/BaseIconStyle.js Normal file
View File

@ -0,0 +1,39 @@
import BaseStyle from 'primevue/base/style';
const css = `
.p-icon {
display: inline-block;
}
.p-icon-spin {
-webkit-animation: p-icon-spin 2s infinite linear;
animation: p-icon-spin 2s infinite linear;
}
@-webkit-keyframes p-icon-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@keyframes p-icon-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
`;
export default BaseStyle.extend({
name: 'baseicon',
css
});

5
components/lib/baseicon/style/package.json Normal file
View File

@ -0,0 +1,5 @@
{
"main": "./baseiconstyle.cjs.js",
"module": "./baseiconstyle.esm.js",
"unpkg": "./baseiconstyle.min.js"
}

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

@ -1,28 +1,6 @@
<script>
import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
@layer primevue {
.p-blockui-container {
position: relative;
}
.p-blockui.p-component-overlay {
position: absolute;
}
.p-blockui-document.p-component-overlay {
position: fixed;
}
}
`;
const classes = {
root: 'p-blockui-container'
};
const { load: loadStyle } = useStyle(styles, { name: 'blockui', manual: true });
import BlockUIStyle from 'primevue/blockui/style';
export default {
name: 'BaseBlockUI',
@ -45,10 +23,7 @@ export default {
default: true
}
},
css: {
classes,
loadStyle
},
style: BlockUIStyle,
provide() {
return {
$parentInstance: this

27
components/lib/blockui/style/BlockUIStyle.js Normal file
View File

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

5
components/lib/blockui/style/package.json Normal file
View File

@ -0,0 +1,5 @@
{
"main": "./blockuistyle.cjs.js",
"module": "./blockuistyle.esm.js",
"unpkg": "./blockuistyle.min.js"
}

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

@ -1,61 +1,6 @@
<script>
import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
@layer primevue {
.p-breadcrumb {
overflow-x: auto;
}
.p-breadcrumb .p-breadcrumb-list {
margin: 0;
padding: 0;
list-style-type: none;
display: flex;
align-items: center;
flex-wrap: nowrap;
}
.p-breadcrumb .p-menuitem-text {
line-height: 1;
}
.p-breadcrumb .p-menuitem-link {
text-decoration: none;
display: flex;
align-items: center;
}
.p-breadcrumb .p-menuitem-separator {
display: flex;
align-items: center;
}
.p-breadcrumb::-webkit-scrollbar {
display: none;
}
}
`;
const classes = {
root: 'p-breadcrumb p-component',
menu: 'p-breadcrumb-list',
home: 'p-breadcrumb-home',
separator: 'p-menuitem-separator',
menuitem: ({ instance }) => ['p-menuitem', { 'p-disabled': instance.disabled() }],
action: ({ props, isActive, isExactActive }) => [
'p-menuitem-link',
{
'router-link-active': isActive,
'router-link-active-exact': props.exact && isExactActive
}
],
icon: 'p-menuitem-icon',
label: 'p-menuitem-text'
};
const { load: loadStyle } = useStyle(styles, { name: 'breadcrumb', manual: true });
import BreadcrumbStyle from 'primevue/breadcrumb/style';
export default {
name: 'BaseBreadcrumb',
@ -74,10 +19,7 @@ export default {
default: true
}
},
css: {
classes,
loadStyle
},
style: BreadcrumbStyle,
provide() {
return {
$parentInstance: this

3
components/lib/breadcrumb/package.json
View File

@ -2,8 +2,7 @@
"main": "./breadcrumb.cjs.js",
"module": "./breadcrumb.esm.js",
"unpkg": "./breadcrumb.min.js",
"types": "./Breadcrumb.d.ts"
,
"types": "./Breadcrumb.d.ts",
"browser": {
"./sfc": "./Breadcrumb.vue"
}

60
components/lib/breadcrumb/style/BreadcrumbStyle.js Normal file
View File

@ -0,0 +1,60 @@
import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-breadcrumb {
overflow-x: auto;
}
.p-breadcrumb .p-breadcrumb-list {
margin: 0;
padding: 0;
list-style-type: none;
display: flex;
align-items: center;
flex-wrap: nowrap;
}
.p-breadcrumb .p-menuitem-text {
line-height: 1;
}
.p-breadcrumb .p-menuitem-link {
text-decoration: none;
display: flex;
align-items: center;
}
.p-breadcrumb .p-menuitem-separator {
display: flex;
align-items: center;
}
.p-breadcrumb::-webkit-scrollbar {
display: none;
}
}
`;
const classes = {
root: 'p-breadcrumb p-component',
menu: 'p-breadcrumb-list',
home: 'p-breadcrumb-home',
separator: 'p-menuitem-separator',
menuitem: ({ instance }) => ['p-menuitem', { 'p-disabled': instance.disabled() }],
action: ({ props, isActive, isExactActive }) => [
'p-menuitem-link',
{
'router-link-active': isActive,
'router-link-active-exact': props.exact && isExactActive
}
],
icon: 'p-menuitem-icon',
label: 'p-menuitem-text'
};
export default BaseStyle.extend({
name: 'breadcrumb',
css,
classes
});

5
components/lib/breadcrumb/style/package.json Normal file
View File

@ -0,0 +1,5 @@
{
"main": "./breadcrumbstyle.cjs.js",
"module": "./breadcrumbstyle.esm.js",
"unpkg": "./breadcrumbstyle.min.js"
}

38
components/lib/button/BaseButton.vue
View File

@ -1,38 +1,6 @@
<script>
import BaseComponent from 'primevue/basecomponent';
const classes = {
root: ({ instance, props }) => [
'p-button p-component',
{
'p-button-icon-only': instance.hasIcon && !props.label && !props.badge,
'p-button-vertical': (props.iconPos === 'top' || props.iconPos === 'bottom') && props.label,
'p-disabled': instance.$attrs.disabled || instance.$attrs.disabled === '' || props.loading,
'p-button-loading': props.loading,
'p-button-loading-label-only': props.loading && !instance.hasIcon && props.label,
'p-button-link': props.link,
[`p-button-${props.severity}`]: props.severity,
'p-button-raised': props.raised,
'p-button-rounded': props.rounded,
'p-button-text': props.text,
'p-button-outlined': props.outlined,
'p-button-sm': props.size === 'small',
'p-button-lg': props.size === 'large',
'p-button-plain': props.plain
}
],
loadingIcon: 'p-button-loading-icon pi-spin',
icon: ({ props }) => [
'p-button-icon',
{
'p-button-icon-left': props.iconPos === 'left' && props.label,
'p-button-icon-right': props.iconPos === 'right' && props.label,
'p-button-icon-top': props.iconPos === 'top' && props.label,
'p-button-icon-bottom': props.iconPos === 'bottom' && props.label
}
],
label: 'p-button-label'
};
import ButtonStyle from 'primevue/button/style';
export default {
name: 'BaseButton',
@ -103,9 +71,7 @@ export default {
default: false
}
},
css: {
classes
},
style: ButtonStyle,
provide() {
return {
$parentInstance: this

40
components/lib/button/style/ButtonStyle.js Normal file
View File

@ -0,0 +1,40 @@
import BaseStyle from 'primevue/base/style';
const classes = {
root: ({ instance, props }) => [
'p-button p-component',
{
'p-button-icon-only': instance.hasIcon && !props.label && !props.badge,
'p-button-vertical': (props.iconPos === 'top' || props.iconPos === 'bottom') && props.label,
'p-disabled': instance.$attrs.disabled || instance.$attrs.disabled === '' || props.loading,
'p-button-loading': props.loading,
'p-button-loading-label-only': props.loading && !instance.hasIcon && props.label,
'p-button-link': props.link,
[`p-button-${props.severity}`]: props.severity,
'p-button-raised': props.raised,
'p-button-rounded': props.rounded,
'p-button-text': props.text,
'p-button-outlined': props.outlined,
'p-button-sm': props.size === 'small',
'p-button-lg': props.size === 'large',
'p-button-plain': props.plain
}
],
loadingIcon: 'p-button-loading-icon pi-spin',
icon: ({ props }) => [
'p-button-icon',
{
'p-button-icon-left': props.iconPos === 'left' && props.label,
'p-button-icon-right': props.iconPos === 'right' && props.label,
'p-button-icon-top': props.iconPos === 'top' && props.label,
'p-button-icon-bottom': props.iconPos === 'bottom' && props.label
}
],
label: 'p-button-label'
};
export default BaseStyle.extend({
name: 'button',
classes,
loadStyle: () => {}
});

5
components/lib/button/style/package.json Normal file
View File

@ -0,0 +1,5 @@
{
"main": "./buttonstyle.cjs.js",
"module": "./buttonstyle.esm.js",
"unpkg": "./buttonstyle.min.js"
}

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

@ -1,227 +1,6 @@
<script>
import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
@layer primevue {
.p-calendar {
display: inline-flex;
max-width: 100%;
}
.p-calendar .p-inputtext {
flex: 1 1 auto;
width: 1%;
}
.p-calendar-w-btn .p-inputtext {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.p-calendar-w-btn .p-datepicker-trigger {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
/* Fluid */
.p-fluid .p-calendar {
display: flex;
}
.p-fluid .p-calendar .p-inputtext {
width: 1%;
}
/* Datepicker */
.p-calendar .p-datepicker {
min-width: 100%;
}
.p-datepicker {
width: auto;
}
.p-datepicker-inline {
display: inline-block;
overflow-x: auto;
}
/* Header */
.p-datepicker-header {
display: flex;
align-items: center;
justify-content: space-between;
}
.p-datepicker-header .p-datepicker-title {
margin: 0 auto;
}
.p-datepicker-prev,
.p-datepicker-next {
cursor: pointer;
display: inline-flex;
justify-content: center;
align-items: center;
overflow: hidden;
position: relative;
}
/* Multiple Month DatePicker */
.p-datepicker-multiple-month .p-datepicker-group-container {
display: flex;
}
.p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group {
flex: 1 1 auto;
}
/* DatePicker Table */
.p-datepicker table {
width: 100%;
border-collapse: collapse;
}
.p-datepicker td > span {
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
margin: 0 auto;
overflow: hidden;
position: relative;
}
/* Month Picker */
.p-monthpicker-month {
width: 33.3%;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
overflow: hidden;
position: relative;
}
/* Year Picker */
.p-yearpicker-year {
width: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
overflow: hidden;
position: relative;
}
/* Button Bar */
.p-datepicker-buttonbar {
display: flex;
justify-content: space-between;
align-items: center;
}
/* Time Picker */
.p-timepicker {
display: flex;
justify-content: center;
align-items: center;
}
.p-timepicker button {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
overflow: hidden;
position: relative;
}
.p-timepicker > div {
display: flex;
align-items: center;
flex-direction: column;
}
/* Touch UI */
.p-datepicker-touch-ui,
.p-calendar .p-datepicker-touch-ui {
min-width: 80vw;
}
}
`;
const inlineStyles = {
root: ({ props }) => ({ position: props.appendTo === 'self' ? 'relative' : undefined })
};
const classes = {
root: ({ props, state }) => [
'p-calendar p-component p-inputwrapper',
{
'p-calendar-w-btn': props.showIcon,
'p-calendar-timeonly': props.timeOnly,
'p-calendar-disabled': props.disabled,
'p-inputwrapper-filled': props.modelValue,
'p-inputwrapper-focus': state.focused,
'p-focus': state.focused || state.overlayVisible
}
],
input: 'p-inputtext p-component',
dropdownButton: 'p-datepicker-trigger',
panel: ({ instance, props, state }) => [
'p-datepicker p-component',
{
'p-datepicker-inline': props.inline,
'p-disabled': props.disabled,
'p-datepicker-timeonly': props.timeOnly,
'p-datepicker-multiple-month': props.numberOfMonths > 1,
'p-datepicker-monthpicker': state.currentView === 'month',
'p-datepicker-yearpicker': state.currentView === 'year',
'p-datepicker-touch-ui': props.touchUI,
'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
'p-ripple-disabled': instance.$primevue.config.ripple === false
}
],
groupContainer: 'p-datepicker-group-container',
group: 'p-datepicker-group',
header: 'p-datepicker-header',
previousButton: 'p-datepicker-prev p-link',
previousIcon: 'p-datepicker-prev-icon',
title: 'p-datepicker-title',
monthTitle: 'p-datepicker-month p-link',
yearTitle: 'p-datepicker-year p-link',
decadeTitle: 'p-datepicker-decade',
nextButton: 'p-datepicker-next p-link',
nextIcon: 'p-datepicker-next-icon',
container: 'p-datepicker-calendar-container',
table: 'p-datepicker-calendar',
weekHeader: 'p-datepicker-weekheader p-disabled',
weekNumber: 'p-datepicker-weeknumber',
weekLabelContainer: 'p-disabled',
day: ({ date }) => [{ 'p-datepicker-other-month': date.otherMonth, 'p-datepicker-today': date.today }],
dayLabel: ({ instance, date }) => [{ 'p-highlight': instance.isSelected(date) && date.selectable, 'p-disabled': !date.selectable }],
monthPicker: 'p-monthpicker',
month: ({ instance, month, index }) => ['p-monthpicker-month', { 'p-highlight': instance.isMonthSelected(index), 'p-disabled': !month.selectable }],
yearPicker: 'p-yearpicker',
year: ({ instance, year }) => ['p-yearpicker-year', { 'p-highlight': instance.isYearSelected(year.value), 'p-disabled': !year.selectable }],
timePicker: 'p-timepicker',
hourPicker: 'p-hour-picker',
incrementButton: 'p-link',
decrementButton: 'p-link',
separatorContainer: 'p-separator',
minutePicker: 'p-minute-picker',
incrementButton: 'p-link',
decrementButton: 'p-link',
secondPicker: 'p-second-picker',
ampmPicker: 'p-ampm-picker',
buttonbar: 'p-datepicker-buttonbar',
todayButton: 'p-button-text',
clearButton: 'p-button-text'
};
const { load: loadStyle } = useStyle(styles, { name: 'calendar', manual: true });
import CalendarStyle from 'primevue/calendar/style';
export default {
name: 'BaseCalendar',
@ -442,11 +221,7 @@ export default {
default: null
}
},
css: {
inlineStyles,
classes,
loadStyle
},
style: CalendarStyle,
provide() {
return {
$parentInstance: this

227
components/lib/calendar/style/CalendarStyle.js Normal file
View File

@ -0,0 +1,227 @@
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;
}
/* Fluid */
.p-fluid .p-calendar {
display: flex;
}
.p-fluid .p-calendar .p-inputtext {
width: 1%;
}
/* Datepicker */
.p-calendar .p-datepicker {
min-width: 100%;
}
.p-datepicker {
width: auto;
}
.p-datepicker-inline {
display: inline-block;
overflow-x: auto;
}
/* Header */
.p-datepicker-header {
display: flex;
align-items: center;
justify-content: space-between;
}
.p-datepicker-header .p-datepicker-title {
margin: 0 auto;
}
.p-datepicker-prev,
.p-datepicker-next {
cursor: pointer;
display: inline-flex;
justify-content: center;
align-items: center;
overflow: hidden;
position: relative;
}
/* Multiple Month DatePicker */
.p-datepicker-multiple-month .p-datepicker-group-container {
display: flex;
}
.p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group {
flex: 1 1 auto;
}
/* DatePicker Table */
.p-datepicker table {
width: 100%;
border-collapse: collapse;
}
.p-datepicker td > span {
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
margin: 0 auto;
overflow: hidden;
position: relative;
}
/* Month Picker */
.p-monthpicker-month {
width: 33.3%;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
overflow: hidden;
position: relative;
}
/* Year Picker */
.p-yearpicker-year {
width: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
overflow: hidden;
position: relative;
}
/* Button Bar */
.p-datepicker-buttonbar {
display: flex;
justify-content: space-between;
align-items: center;
}
/* Time Picker */
.p-timepicker {
display: flex;
justify-content: center;
align-items: center;
}
.p-timepicker button {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
overflow: hidden;
position: relative;
}
.p-timepicker > div {
display: flex;
align-items: center;
flex-direction: column;
}
/* Touch UI */
.p-datepicker-touch-ui,
.p-calendar .p-datepicker-touch-ui {
min-width: 80vw;
}
}
`;
const inlineStyles = {
root: ({ props }) => ({ position: props.appendTo === 'self' ? 'relative' : undefined })
};
const classes = {
root: ({ props, state }) => [
'p-calendar p-component p-inputwrapper',
{
'p-calendar-w-btn': props.showIcon,
'p-calendar-timeonly': props.timeOnly,
'p-calendar-disabled': props.disabled,
'p-inputwrapper-filled': props.modelValue,
'p-inputwrapper-focus': state.focused,
'p-focus': state.focused || state.overlayVisible
}
],
input: 'p-inputtext p-component',
dropdownButton: 'p-datepicker-trigger',
panel: ({ instance, props, state }) => [
'p-datepicker p-component',
{
'p-datepicker-inline': props.inline,
'p-disabled': props.disabled,
'p-datepicker-timeonly': props.timeOnly,
'p-datepicker-multiple-month': props.numberOfMonths > 1,
'p-datepicker-monthpicker': state.currentView === 'month',
'p-datepicker-yearpicker': state.currentView === 'year',
'p-datepicker-touch-ui': props.touchUI,
'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
'p-ripple-disabled': instance.$primevue.config.ripple === false
}
],
groupContainer: 'p-datepicker-group-container',
group: 'p-datepicker-group',
header: 'p-datepicker-header',
previousButton: 'p-datepicker-prev p-link',
previousIcon: 'p-datepicker-prev-icon',
title: 'p-datepicker-title',
monthTitle: 'p-datepicker-month p-link',
yearTitle: 'p-datepicker-year p-link',
decadeTitle: 'p-datepicker-decade',
nextButton: 'p-datepicker-next p-link',
nextIcon: 'p-datepicker-next-icon',
container: 'p-datepicker-calendar-container',
table: 'p-datepicker-calendar',
weekHeader: 'p-datepicker-weekheader p-disabled',
weekNumber: 'p-datepicker-weeknumber',
weekLabelContainer: 'p-disabled',
day: ({ date }) => [{ 'p-datepicker-other-month': date.otherMonth, 'p-datepicker-today': date.today }],
dayLabel: ({ instance, date }) => [{ 'p-highlight': instance.isSelected(date) && date.selectable, 'p-disabled': !date.selectable }],
monthPicker: 'p-monthpicker',
month: ({ instance, month, index }) => ['p-monthpicker-month', { 'p-highlight': instance.isMonthSelected(index), 'p-disabled': !month.selectable }],
yearPicker: 'p-yearpicker',
year: ({ instance, year }) => ['p-yearpicker-year', { 'p-highlight': instance.isYearSelected(year.value), 'p-disabled': !year.selectable }],
timePicker: 'p-timepicker',
hourPicker: 'p-hour-picker',
incrementButton: 'p-link',
decrementButton: 'p-link',
separatorContainer: 'p-separator',
minutePicker: 'p-minute-picker',
incrementButton: 'p-link',
decrementButton: 'p-link',
secondPicker: 'p-second-picker',
ampmPicker: 'p-ampm-picker',
buttonbar: 'p-datepicker-buttonbar',
todayButton: 'p-button-text',
clearButton: 'p-button-text'
};
export default BaseStyle.extend({
name: 'calendar',
css,
classes,
inlineStyles
});

5
components/lib/calendar/style/package.json Normal file
View File

@ -0,0 +1,5 @@
{
"main": "./calendarstyle.cjs.js",
"module": "./calendarstyle.esm.js",
"unpkg": "./calendarstyle.min.js"
}

15
components/lib/card/BaseCard.vue
View File

@ -1,21 +1,10 @@
<script>
import BaseComponent from 'primevue/basecomponent';
const classes = {
root: 'p-card p-component',
header: 'p-card-header',
body: 'p-card-body',
title: 'p-card-title',
subtitle: 'p-card-subtitle',
content: 'p-card-content',
footer: 'p-card-footer'
};
import CardStyle from 'primevue/card/style';
export default {
name: 'BaseCard',
extends: BaseComponent,
css: {
classes
}
style: CardStyle
};
</script>

17
components/lib/card/style/CardStyle.js Normal file
View File

@ -0,0 +1,17 @@
import BaseStyle from 'primevue/base/style';
const classes = {
root: 'p-card p-component',
header: 'p-card-header',
body: 'p-card-body',
title: 'p-card-title',
subtitle: 'p-card-subtitle',
content: 'p-card-content',
footer: 'p-card-footer'
};
export default BaseStyle.extend({
name: 'card',
classes,
loadStyle: () => {}
});

5
components/lib/card/style/package.json Normal file
View File

@ -0,0 +1,5 @@
{
"main": "./cardstyle.cjs.js",
"module": "./cardstyle.esm.js",
"unpkg": "./cardstyle.min.js"
}

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

@ -1,136 +1,6 @@
<script>
import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
@layer primevue {
.p-carousel {
display: flex;
flex-direction: column;
}
.p-carousel-content {
display: flex;
flex-direction: column;
overflow: auto;
}
.p-carousel-prev,
.p-carousel-next {
align-self: center;
flex-grow: 0;
flex-shrink: 0;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
position: relative;
}
.p-carousel-container {
display: flex;
flex-direction: row;
}
.p-carousel-items-content {
overflow: hidden;
width: 100%;
}
.p-carousel-items-container {
display: flex;
flex-direction: row;
}
.p-carousel-indicators {
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
}
.p-carousel-indicator > button {
display: flex;
align-items: center;
justify-content: center;
}
/* Vertical */
.p-carousel-vertical .p-carousel-container {
flex-direction: column;
}
.p-carousel-vertical .p-carousel-items-container {
flex-direction: column;
height: 100%;
}
/* Keyboard Support */
.p-items-hidden .p-carousel-item {
visibility: hidden;
}
.p-items-hidden .p-carousel-item.p-carousel-item-active {
visibility: visible;
}
}
`;
const classes = {
root: ({ instance }) => [
'p-carousel p-component',
{
'p-carousel-vertical': instance.isVertical(),
'p-carousel-horizontal': !instance.isVertical()
}
],
header: 'p-carousel-header',
content: 'p-carousel-content',
container: 'p-carousel-container',
previousButton: ({ instance }) => [
'p-carousel-prev p-link',
{
'p-disabled': instance.backwardIsDisabled
}
],
previousButtonIcon: 'p-carousel-next-icon',
itemsContent: 'p-carousel-items-content',
itemsContainer: 'p-carousel-items-container',
itemCloned: ({ index, value, totalShiftedItems, d_numVisible }) => [
'p-carousel-item p-carousel-item-cloned',
{
'p-carousel-item-active': totalShiftedItems * -1 === value.length + d_numVisible,
'p-carousel-item-start': index === 0,
'p-carousel-item-end': value.slice(-1 * d_numVisible).length - 1 === index
}
],
item: ({ instance, index }) => [
'p-carousel-item',
{
'p-carousel-item-active': instance.firstIndex() <= index && instance.lastIndex() >= index,
'p-carousel-item-start': instance.firstIndex() === index,
'p-carousel-item-end': instance.lastIndex() === index
}
],
nextButton: ({ instance }) => [
'p-carousel-next p-link',
{
'p-disabled': instance.forwardIsDisabled
}
],
nextButtonIcon: 'p-carousel-prev-icon',
indicators: 'p-carousel-indicators p-reset',
indicator: ({ instance, index }) => [
'p-carousel-indicator',
{
'p-highlight': instance.d_page === index
}
],
indicatorButton: 'p-link',
footer: 'p-carousel-footer'
};
const { load: loadStyle } = useStyle(styles, { name: 'carousel', manual: true });
import CarouselStyle from 'primevue/carousel/style';
export default {
name: 'BaseCarousel',
@ -186,10 +56,7 @@ export default {
default: null
}
},
css: {
classes,
loadStyle
},
style: CarouselStyle,
provide() {
return {
$parentInstance: this

135
components/lib/carousel/style/CarouselStyle.js Normal file
View File

@ -0,0 +1,135 @@
import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-carousel {
display: flex;
flex-direction: column;
}
.p-carousel-content {
display: flex;
flex-direction: column;
overflow: auto;
}
.p-carousel-prev,
.p-carousel-next {
align-self: center;
flex-grow: 0;
flex-shrink: 0;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
position: relative;
}
.p-carousel-container {
display: flex;
flex-direction: row;
}
.p-carousel-items-content {
overflow: hidden;
width: 100%;
}
.p-carousel-items-container {
display: flex;
flex-direction: row;
}
.p-carousel-indicators {
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
}
.p-carousel-indicator > button {
display: flex;
align-items: center;
justify-content: center;
}
/* Vertical */
.p-carousel-vertical .p-carousel-container {
flex-direction: column;
}
.p-carousel-vertical .p-carousel-items-container {
flex-direction: column;
height: 100%;
}
/* Keyboard Support */
.p-items-hidden .p-carousel-item {
visibility: hidden;
}
.p-items-hidden .p-carousel-item.p-carousel-item-active {
visibility: visible;
}
}
`;
const classes = {
root: ({ instance }) => [
'p-carousel p-component',
{
'p-carousel-vertical': instance.isVertical(),
'p-carousel-horizontal': !instance.isVertical()
}
],
header: 'p-carousel-header',
content: 'p-carousel-content',
container: 'p-carousel-container',
previousButton: ({ instance }) => [
'p-carousel-prev p-link',
{
'p-disabled': instance.backwardIsDisabled
}
],
previousButtonIcon: 'p-carousel-next-icon',
itemsContent: 'p-carousel-items-content',
itemsContainer: 'p-carousel-items-container',
itemCloned: ({ index, value, totalShiftedItems, d_numVisible }) => [
'p-carousel-item p-carousel-item-cloned',
{
'p-carousel-item-active': totalShiftedItems * -1 === value.length + d_numVisible,
'p-carousel-item-start': index === 0,
'p-carousel-item-end': value.slice(-1 * d_numVisible).length - 1 === index
}
],
item: ({ instance, index }) => [
'p-carousel-item',
{
'p-carousel-item-active': instance.firstIndex() <= index && instance.lastIndex() >= index,
'p-carousel-item-start': instance.firstIndex() === index,
'p-carousel-item-end': instance.lastIndex() === index
}
],
nextButton: ({ instance }) => [
'p-carousel-next p-link',
{
'p-disabled': instance.forwardIsDisabled
}
],
nextButtonIcon: 'p-carousel-prev-icon',
indicators: 'p-carousel-indicators p-reset',
indicator: ({ instance, index }) => [
'p-carousel-indicator',
{
'p-highlight': instance.d_page === index
}
],
indicatorButton: 'p-link',
footer: 'p-carousel-footer'
};
export default BaseStyle.extend({
name: 'carousel',
css,
classes
});

5
components/lib/carousel/style/package.json Normal file
View File

@ -0,0 +1,5 @@
{
"main": "./carouselstyle.cjs.js",
"module": "./carouselstyle.esm.js",
"unpkg": "./carouselstyle.min.js"
}

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

@ -1,142 +1,6 @@
<script>
import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
@layer primevue {
.p-cascadeselect {
display: inline-flex;
cursor: pointer;
user-select: none;
}
.p-cascadeselect-trigger {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.p-cascadeselect-label {
display: block;
white-space: nowrap;
overflow: hidden;
flex: 1 1 auto;
width: 1%;
text-overflow: ellipsis;
cursor: pointer;
}
.p-cascadeselect-label-empty {
overflow: hidden;
visibility: hidden;
}
.p-cascadeselect .p-cascadeselect-panel {
min-width: 100%;
}
.p-cascadeselect-item {
cursor: pointer;
font-weight: normal;
white-space: nowrap;
}
.p-cascadeselect-item-content {
display: flex;
align-items: center;
overflow: hidden;
position: relative;
}
.p-cascadeselect-group-icon {
margin-left: auto;
}
.p-cascadeselect-items {
margin: 0;
padding: 0;
list-style-type: none;
min-width: 100%;
}
.p-fluid .p-cascadeselect {
display: flex;
}
.p-fluid .p-cascadeselect .p-cascadeselect-label {
width: 1%;
}
.p-cascadeselect-sublist {
position: absolute;
min-width: 100%;
z-index: 1;
display: none;
}
.p-cascadeselect-item-active {
overflow: visible !important;
}
.p-cascadeselect-item-active > .p-cascadeselect-sublist {
display: block;
left: 100%;
top: 0;
}
}
`;
const inlineStyles = {
root: ({ props }) => ({ position: props.appendTo === 'self' ? 'relative' : undefined })
};
const classes = {
root: ({ instance, props }) => [
'p-cascadeselect p-component p-inputwrapper',
{
'p-disabled': props.disabled,
'p-focus': instance.focused,
'p-inputwrapper-filled': props.modelValue,
'p-inputwrapper-focus': instance.focused || instance.overlayVisible,
'p-overlay-open': instance.overlayVisible
}
],
label: ({ instance, props }) => [
'p-cascadeselect-label p-inputtext',
{
'p-placeholder': instance.label === props.placeholder,
'p-cascadeselect-label-empty': !instance.$slots['value'] && (instance.label === 'p-emptylabel' || instance.label.length === 0)
}
],
dropdownButton: 'p-cascadeselect-trigger',
loadingIcon: 'p-cascadeselect-trigger-icon',
dropdownIcon: 'p-cascadeselect-trigger-icon',
panel: ({ instance }) => [
'p-cascadeselect-panel p-component',
{
'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
'p-ripple-disabled': instance.$primevue.config.ripple === false
}
],
wrapper: 'p-cascadeselect-items-wrapper',
list: 'p-cascadeselect-panel p-cascadeselect-items',
item: ({ instance, processedOption }) => [
'p-cascadeselect-item',
{
'p-cascadeselect-item-group': instance.isOptionGroup(processedOption),
'p-cascadeselect-item-active p-highlight': instance.isOptionActive(processedOption),
'p-focus': instance.isOptionFocused(processedOption),
'p-disabled': instance.isOptionDisabled(processedOption)
}
],
content: 'p-cascadeselect-item-content',
text: 'p-cascadeselect-item-text',
groupIcon: 'p-cascadeselect-group-icon',
sublist: 'p-cascadeselect-sublist'
};
const { load: loadStyle } = useStyle(styles, { name: 'cascadeselect', manual: true });
import CascadeSelectStyle from 'primevue/cascadeselect/style';
export default {
name: 'BaseCascadeSelect',
@ -245,11 +109,7 @@ export default {
default: null
}
},
css: {
classes,
inlineStyles,
loadStyle
},
style: CascadeSelectStyle,
provide() {
return {
$parentInstance: this

142
components/lib/cascadeselect/style/CascadeSelectStyle.js Normal file
View File

@ -0,0 +1,142 @@
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 !important;
}
.p-cascadeselect-item-active > .p-cascadeselect-sublist {
display: block;
left: 100%;
top: 0;
}
}
`;
const inlineStyles = {
root: ({ props }) => ({ position: props.appendTo === 'self' ? 'relative' : undefined })
};
const classes = {
root: ({ instance, props }) => [
'p-cascadeselect p-component p-inputwrapper',
{
'p-disabled': props.disabled,
'p-focus': instance.focused,
'p-inputwrapper-filled': props.modelValue,
'p-inputwrapper-focus': instance.focused || instance.overlayVisible,
'p-overlay-open': instance.overlayVisible
}
],
label: ({ instance, props }) => [
'p-cascadeselect-label p-inputtext',
{
'p-placeholder': instance.label === props.placeholder,
'p-cascadeselect-label-empty': !instance.$slots['value'] && (instance.label === 'p-emptylabel' || instance.label.length === 0)
}
],
dropdownButton: 'p-cascadeselect-trigger',
loadingIcon: 'p-cascadeselect-trigger-icon',
dropdownIcon: 'p-cascadeselect-trigger-icon',
panel: ({ instance }) => [
'p-cascadeselect-panel p-component',
{
'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
'p-ripple-disabled': instance.$primevue.config.ripple === false
}
],
wrapper: 'p-cascadeselect-items-wrapper',
list: 'p-cascadeselect-panel p-cascadeselect-items',
item: ({ instance, processedOption }) => [
'p-cascadeselect-item',
{
'p-cascadeselect-item-group': instance.isOptionGroup(processedOption),
'p-cascadeselect-item-active p-highlight': instance.isOptionActive(processedOption),
'p-focus': instance.isOptionFocused(processedOption),
'p-disabled': instance.isOptionDisabled(processedOption)
}
],
content: 'p-cascadeselect-item-content',
text: 'p-cascadeselect-item-text',
groupIcon: 'p-cascadeselect-group-icon',
sublist: 'p-cascadeselect-sublist'
};
export default BaseStyle.extend({
name: 'cascadeselect',
css,
classes,
inlineStyles
});

5
components/lib/cascadeselect/style/package.json Normal file
View File

@ -0,0 +1,5 @@
{
"main": "./cascadeselectstyle.cjs.js",
"module": "./cascadeselectstyle.esm.js",
"unpkg": "./cascadeselectstyle.min.js"
}

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

@ -1,20 +1,6 @@
<script>
import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
@layer primevue {
.p-chart {
position: relative;
}
}
`;
const classes = {
root: 'p-chart'
};
const { load: loadStyle } = useStyle(styles, { name: 'chart', manual: true });
import ChartStyle from 'primevue/chart/style';
export default {
name: 'BaseChart',
@ -37,10 +23,7 @@ export default {
default: null
}
},
css: {
classes,
loadStyle
},
style: ChartStyle,
provide() {
return {
$parentInstance: this

19
components/lib/chart/style/ChartStyle.js Normal file
View File

@ -0,0 +1,19 @@
import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-chart {
position: relative;
}
}
`;
const classes = {
root: 'p-chart'
};
export default BaseStyle.extend({
name: 'chart',
css,
classes
});

5
components/lib/chart/style/package.json Normal file
View File

@ -0,0 +1,5 @@
{
"main": "./chartstyle.cjs.js",
"module": "./chartstyle.esm.js",
"unpkg": "./chartstyle.min.js"
}

25
components/lib/checkbox/BaseCheckbox.vue
View File

@ -1,25 +1,6 @@
<script>
import BaseComponent from 'primevue/basecomponent';
const classes = {
root: ({ instance, props }) => [
'p-checkbox p-component',
{
'p-checkbox-checked': instance.checked,
'p-checkbox-disabled': props.disabled,
'p-checkbox-focused': instance.focused
}
],
input: ({ instance, props }) => [
'p-checkbox-box',
{
'p-highlight': instance.checked,
'p-disabled': props.disabled,
'p-focus': instance.focused
}
],
icon: 'p-checkbox-icon'
};
import CheckboxStyle from 'primevue/checkbox/style';
export default {
name: 'BaseCheckbox',
@ -81,9 +62,7 @@ export default {
default: null
}
},
css: {
classes
},
style: CheckboxStyle,
provide() {
return {
$parentInstance: this

27
components/lib/checkbox/style/CheckboxStyle.js Normal file
View File

@ -0,0 +1,27 @@
import BaseStyle from 'primevue/base/style';
const classes = {
root: ({ instance, props }) => [
'p-checkbox p-component',
{
'p-checkbox-checked': instance.checked,
'p-checkbox-disabled': props.disabled,
'p-checkbox-focused': instance.focused
}
],
input: ({ instance, props }) => [
'p-checkbox-box',
{
'p-highlight': instance.checked,
'p-disabled': props.disabled,
'p-focus': instance.focused
}
],
icon: 'p-checkbox-icon'
};
export default BaseStyle.extend({
name: 'checkbox',
classes,
loadStyle: () => {}
});

5
components/lib/checkbox/style/package.json Normal file
View File

@ -0,0 +1,5 @@
{
"main": "./checkboxstyle.cjs.js",
"module": "./checkboxstyle.esm.js",
"unpkg": "./checkboxstyle.min.js"
}

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

@ -1,46 +1,6 @@
<script>
import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
@layer primevue {
.p-chip {
display: inline-flex;
align-items: center;
}
.p-chip-text {
line-height: 1.5;
}
.p-chip-icon.pi {
line-height: 1.5;
}
.p-chip-remove-icon {
line-height: 1.5;
cursor: pointer;
}
.p-chip img {
border-radius: 50%;
}
}
`;
const classes = {
root: ({ props }) => [
'p-chip p-component',
{
'p-chip-image': props.image != null
}
],
icon: 'p-chip-icon',
label: 'p-chip-text',
removeIcon: 'p-chip-remove-icon'
};
const { load: loadStyle } = useStyle(styles, { name: 'chip', manual: true });
import ChipStyle from 'primevue/chip/style';
export default {
name: 'BaseChip',
@ -67,10 +27,7 @@ export default {
default: undefined
}
},
css: {
classes,
loadStyle
},
style: ChipStyle,
provide() {
return {
$parentInstance: this

45
components/lib/chip/style/ChipStyle.js Normal file
View File

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

5
components/lib/chip/style/package.json Normal file
View File

@ -0,0 +1,5 @@
{
"main": "./chipstyle.cjs.js",
"module": "./chipstyle.esm.js",
"unpkg": "./chipstyle.min.js"
}

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

@ -1,75 +1,6 @@
<script>
import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
@layer primevue {
.p-chips {
display: inline-flex;
}
.p-chips-multiple-container {
margin: 0;
padding: 0;
list-style-type: none;
cursor: text;
overflow: hidden;
display: flex;
align-items: center;
flex-wrap: wrap;
}
.p-chips-token {
cursor: default;
display: inline-flex;
align-items: center;
flex: 0 0 auto;
}
.p-chips-input-token {
flex: 1 1 auto;
display: inline-flex;
}
.p-chips-token-icon {
cursor: pointer;
}
.p-chips-input-token input {
border: 0 none;
outline: 0 none;
background-color: transparent;
margin: 0;
padding: 0;
box-shadow: none;
border-radius: 0;
width: 100%;
}
.p-fluid .p-chips {
display: flex;
}
}
`;
const classes = {
root: ({ instance, props }) => [
'p-chips p-component p-inputwrapper',
{
'p-disabled': props.disabled,
'p-focus': instance.focused,
'p-inputwrapper-filled': (props.modelValue && props.modelValue.length) || (instance.inputValue && instance.inputValue.length),
'p-inputwrapper-focus': instance.focused
}
],
container: 'p-inputtext p-chips-multiple-container',
token: ({ state, index }) => ['p-chips-token', { 'p-focus': state.focusedIndex === index }],
label: 'p-chips-token-label',
removeTokenIcon: 'p-chips-token-icon',
inputToken: 'p-chips-input-token'
};
const { load: loadStyle } = useStyle(styles, { name: 'chips', manual: true });
import ChipsStyle from 'primevue/chips/style';
export default {
name: 'BaseChips',
@ -132,10 +63,7 @@ export default {
default: null
}
},
css: {
classes,
loadStyle
},
style: ChipsStyle,
provide() {
return {
$parentInstance: this

74
components/lib/chips/style/ChipsStyle.js Normal file
View File

@ -0,0 +1,74 @@
import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-chips {
display: inline-flex;
}
.p-chips-multiple-container {
margin: 0;
padding: 0;
list-style-type: none;
cursor: text;
overflow: hidden;
display: flex;
align-items: center;
flex-wrap: wrap;
}
.p-chips-token {
cursor: default;
display: inline-flex;
align-items: center;
flex: 0 0 auto;
}
.p-chips-input-token {
flex: 1 1 auto;
display: inline-flex;
}
.p-chips-token-icon {
cursor: pointer;
}
.p-chips-input-token input {
border: 0 none;
outline: 0 none;
background-color: transparent;
margin: 0;
padding: 0;
box-shadow: none;
border-radius: 0;
width: 100%;
}
.p-fluid .p-chips {
display: flex;
}
}
`;
const classes = {
root: ({ instance, props }) => [
'p-chips p-component p-inputwrapper',
{
'p-disabled': props.disabled,
'p-focus': instance.focused,
'p-inputwrapper-filled': (props.modelValue && props.modelValue.length) || (instance.inputValue && instance.inputValue.length),
'p-inputwrapper-focus': instance.focused
}
],
container: 'p-inputtext p-chips-multiple-container',
token: ({ state, index }) => ['p-chips-token', { 'p-focus': state.focusedIndex === index }],
label: 'p-chips-token-label',
removeTokenIcon: 'p-chips-token-icon',
inputToken: 'p-chips-input-token'
};
export default BaseStyle.extend({
name: 'chips',
css,
classes
});

5
components/lib/chips/style/package.json Normal file
View File

@ -0,0 +1,5 @@
{
"main": "./chipsstyle.cjs.js",
"module": "./chipsstyle.esm.js",
"unpkg": "./chipsstyle.min.js"
}

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

@ -1,40 +1,6 @@
<script>
import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
@layer primevue {
.p-colorpicker-panel .p-colorpicker-color {
background: linear-gradient(to top, #000 0%, rgb(0 0 0 / 0) 100%), linear-gradient(to right, #fff 0%, rgb(255 255 255 / 0) 100%)
}
.p-colorpicker-panel .p-colorpicker-hue {
background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red)
}
}
`;
const classes = {
root: ({ props }) => ['p-colorpicker p-component', { 'p-colorpicker-overlay': !props.inline }],
input: ({ props }) => ['p-colorpicker-preview p-inputtext', { 'p-disabled': props.disabled }],
panel: ({ instance, props }) => [
'p-colorpicker-panel',
{
'p-colorpicker-overlay-panel': !props.inline,
'p-disabled': props.disabled,
'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
'p-ripple-disabled': instance.$primevue.config.ripple === false
}
],
content: 'p-colorpicker-content',
selector: 'p-colorpicker-color-selector',
color: 'p-colorpicker-color',
colorHandle: 'p-colorpicker-color-handle',
hue: 'p-colorpicker-hue',
hueHandle: 'p-colorpicker-hue-handle'
};
const { load: loadStyle } = useStyle(styles, { name: 'colorpicker', manual: true });
import ColorPickerStyle from 'primevue/colorpicker/style';
export default {
name: 'BaseColorPicker',
@ -78,10 +44,7 @@ export default {
},
panelClass: null
},
css: {
classes,
loadStyle
},
style: ColorPickerStyle,
provide() {
return {
$parentInstance: this

39
components/lib/colorpicker/style/ColorPickerStyle.js Normal file
View File

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

5
components/lib/colorpicker/style/package.json Normal file
View File

@ -0,0 +1,5 @@
{
"main": "./colorpickerstyle.cjs.js",
"module": "./colorpickerstyle.esm.js",
"unpkg": "./colorpickerstyle.min.js"
}

2
components/lib/column/BaseColumn.vue
View File

@ -1,5 +1,6 @@
<script>
import BaseComponent from 'primevue/basecomponent';
import ColumnStyle from 'primevue/column/style';
export default {
name: 'BaseColumn',
@ -182,6 +183,7 @@ export default {
default: false
}
},
style: ColumnStyle,
provide() {
return {
$parentInstance: this

1
components/lib/column/style/ColumnStyle.js Normal file
View File

@ -0,0 +1 @@
export default {};

5
components/lib/column/style/package.json Normal file
View File

@ -0,0 +1,5 @@
{
"main": "./columnstyle.cjs.js",
"module": "./columnstyle.esm.js",
"unpkg": "./columnstyle.min.js"
}

2
components/lib/columngroup/BaseColumnGroup.vue
View File

@ -1,5 +1,6 @@
<script>
import BaseComponent from 'primevue/basecomponent';
import ColumnGroupStyle from 'primevue/columngroup/style';
export default {
name: 'BaseColumnGroup',
@ -10,6 +11,7 @@ export default {
default: null
}
},
style: ColumnGroupStyle,
provide() {
return {
$parentInstance: this

1
components/lib/columngroup/style/ColumnGroupStyle.js Normal file
View File

@ -0,0 +1 @@
export default {};

5
components/lib/columngroup/style/package.json Normal file
View File

@ -0,0 +1,5 @@
{
"main": "./columngroupstyle.cjs.js",
"module": "./columngroupstyle.esm.js",
"unpkg": "./columngroupstyle.min.js"
}

13
components/lib/confirmdialog/BaseConfirmDialog.vue
View File

@ -1,13 +1,6 @@
<script>
import BaseComponent from 'primevue/basecomponent';
const classes = {
root: 'p-confirm-dialog',
icon: ({ instance }) => ['p-confirm-dialog-icon', instance.confirmation ? instance.confirmation.icon : null],
message: 'p-confirm-dialog-message',
rejectButton: ({ instance }) => ['p-confirm-dialog-reject', instance.confirmation && !instance.confirmation.rejectClass ? 'p-button-text' : null],
acceptButton: 'p-confirm-dialog-accept'
};
import ConfirmDialogStyle from 'primevue/confirmdialog/style';
export default {
name: 'BaseConfirmDialog',
@ -23,9 +16,7 @@ export default {
default: true
}
},
css: {
classes
},
style: ConfirmDialogStyle,
provide() {
return {
$parentInstance: this

15
components/lib/confirmdialog/style/ConfirmDialogStyle.js Normal file
View File

@ -0,0 +1,15 @@
import BaseStyle from 'primevue/base/style';
const classes = {
root: 'p-confirm-dialog',
icon: ({ instance }) => ['p-confirm-dialog-icon', instance.confirmation ? instance.confirmation.icon : null],
message: 'p-confirm-dialog-message',
rejectButton: ({ instance }) => ['p-confirm-dialog-reject', instance.confirmation && !instance.confirmation.rejectClass ? 'p-button-text' : null],
acceptButton: 'p-confirm-dialog-accept'
};
export default BaseStyle.extend({
name: 'confirmdialog',
classes,
loadStyle: () => {}
});

5
components/lib/confirmdialog/style/package.json Normal file
View File

@ -0,0 +1,5 @@
{
"main": "./confirmdialogstyle.cjs.js",
"module": "./confirmdialogstyle.esm.js",
"unpkg": "./confirmdialogstyle.min.js"
}

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

@ -1,98 +1,6 @@
<script>
import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
@layer primevue {
.p-confirm-popup {
position: absolute;
margin-top: 10px;
top: 0;
left: 0;
}
.p-confirm-popup-flipped {
margin-top: 0;
margin-bottom: 10px;
}
/* Animation */
.p-confirm-popup-enter-from {
opacity: 0;
transform: scaleY(0.8);
}
.p-confirm-popup-leave-to {
opacity: 0;
}
.p-confirm-popup-enter-active {
transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1);
}
.p-confirm-popup-leave-active {
transition: opacity 0.1s linear;
}
.p-confirm-popup:after,
.p-confirm-popup:before {
bottom: 100%;
left: calc(var(--overlayArrowLeft, 0) + 1.25rem);
content: ' ';
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.p-confirm-popup:after {
border-width: 8px;
margin-left: -8px;
}
.p-confirm-popup:before {
border-width: 10px;
margin-left: -10px;
}
.p-confirm-popup-flipped:after,
.p-confirm-popup-flipped:before {
bottom: auto;
top: 100%;
}
.p-confirm-popup.p-confirm-popup-flipped:after {
border-bottom-color: transparent;
}
.p-confirm-popup.p-confirm-popup-flipped:before {
border-bottom-color: transparent;
}
.p-confirm-popup .p-confirm-popup-content {
display: flex;
align-items: center;
}
}
`;
const classes = {
root: ({ instance }) => [
'p-confirm-popup p-component',
{
'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
'p-ripple-disabled': instance.$primevue.config.ripple === false
}
],
content: 'p-confirm-popup-content',
icon: ({ instance }) => ['p-confirm-popup-icon', instance.confirmation ? instance.confirmation.icon : null],
message: 'p-confirm-popup-message',
footer: 'p-confirm-popup-footer',
rejectButton: ({ instance }) => ['p-confirm-dialog-reject', instance.confirmation && !instance.confirmation.rejectClass ? 'p-button-text' : null],
acceptButton: 'p-confirm-dialog-accept'
};
const { load: loadStyle } = useStyle(styles, { name: 'confirmpopup', manual: true });
import ConfirmPopupStyle from 'primevue/confirmpopup/style';
export default {
name: 'BaseConfirmPopup',
@ -100,10 +8,7 @@ export default {
props: {
group: String
},
css: {
classes,
loadStyle
},
style: ConfirmPopupStyle,
provide() {
return {
$parentInstance: this

97
components/lib/confirmpopup/style/ConfirmPopupStyle.js Normal file
View File

@ -0,0 +1,97 @@
import BaseStyle from 'primevue/base/style';
const css = `
@layer primevue {
.p-confirm-popup {
position: absolute;
margin-top: 10px;
top: 0;
left: 0;
}
.p-confirm-popup-flipped {
margin-top: 0;
margin-bottom: 10px;
}
/* Animation */
.p-confirm-popup-enter-from {
opacity: 0;
transform: scaleY(0.8);
}
.p-confirm-popup-leave-to {
opacity: 0;
}
.p-confirm-popup-enter-active {
transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1);
}
.p-confirm-popup-leave-active {
transition: opacity 0.1s linear;
}
.p-confirm-popup:after,
.p-confirm-popup:before {
bottom: 100%;
left: calc(var(--overlayArrowLeft, 0) + 1.25rem);
content: ' ';
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.p-confirm-popup:after {
border-width: 8px;
margin-left: -8px;
}
.p-confirm-popup:before {
border-width: 10px;
margin-left: -10px;
}
.p-confirm-popup-flipped:after,
.p-confirm-popup-flipped:before {
bottom: auto;
top: 100%;
}
.p-confirm-popup.p-confirm-popup-flipped:after {
border-bottom-color: transparent;
}
.p-confirm-popup.p-confirm-popup-flipped:before {
border-bottom-color: transparent;
}
.p-confirm-popup .p-confirm-popup-content {
display: flex;
align-items: center;
}
}
`;
const classes = {
root: ({ instance }) => [
'p-confirm-popup p-component',
{
'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
'p-ripple-disabled': instance.$primevue.config.ripple === false
}
],
content: 'p-confirm-popup-content',
icon: ({ instance }) => ['p-confirm-popup-icon', instance.confirmation ? instance.confirmation.icon : null],
message: 'p-confirm-popup-message',
footer: 'p-confirm-popup-footer',
rejectButton: ({ instance }) => ['p-confirm-dialog-reject', instance.confirmation && !instance.confirmation.rejectClass ? 'p-button-text' : null],
acceptButton: 'p-confirm-dialog-accept'
};
export default BaseStyle.extend({
name: 'confirmpopup',
css,
classes
});

5
components/lib/confirmpopup/style/package.json Normal file
View File

@ -0,0 +1,5 @@
{
"main": "./confirmpopupstyle.cjs.js",
"module": "./confirmpopupstyle.esm.js",
"unpkg": "./confirmpopupstyle.min.js"
}

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

@ -1,85 +1,6 @@
<script>
import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
@layer primevue {
.p-contextmenu ul {
margin: 0;
padding: 0;
list-style: none;
}
.p-contextmenu .p-submenu-list {
position: absolute;
min-width: 100%;
z-index: 1;
}
.p-contextmenu .p-menuitem-link {
cursor: pointer;
display: flex;
align-items: center;
text-decoration: none;
overflow: hidden;
position: relative;
}
.p-contextmenu .p-menuitem-text {
line-height: 1;
}
.p-contextmenu .p-menuitem {
position: relative;
}
.p-contextmenu .p-menuitem-link .p-submenu-icon {
margin-left: auto;
}
.p-contextmenu-enter-from {
opacity: 0;
}
.p-contextmenu-enter-active {
transition: opacity 250ms;
}
}
`;
const classes = {
root: ({ instance }) => [
'p-contextmenu p-component',
{
'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
'p-ripple-disabled': instance.$primevue.config.ripple === false
}
],
menu: 'p-contextmenu-root-list',
menuitem: ({ instance, processedItem }) => [
'p-menuitem',
{
'p-menuitem-active p-highlight': instance.isItemActive(processedItem),
'p-focus': instance.isItemFocused(processedItem),
'p-disabled': instance.isItemDisabled(processedItem)
}
],
content: 'p-menuitem-content',
action: ({ props, isActive, isExactActive }) => [
'p-menuitem-link',
{
'router-link-active': isActive,
'router-link-active-exact': props.exact && isExactActive
}
],
icon: 'p-menuitem-icon',
label: 'p-menuitem-text',
submenuIcon: 'p-submenu-icon',
submenu: 'p-submenu-list',
separator: 'p-menuitem-separator'
};
const { load: loadStyle } = useStyle(styles, { name: 'contextmenu', manual: true });
import ContextMenuStyle from 'primevue/contextmenu/style';
export default {
name: 'BaseContextMenu',
@ -122,10 +43,7 @@ export default {
default: null
}
},
css: {
classes,
loadStyle
},
style: ContextMenuStyle,
provide() {
return {
$parentInstance: this

84
components/lib/contextmenu/style/ContextMenuStyle.js Normal file
View File

@ -0,0 +1,84 @@
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 {
opacity: 0;
}
.p-contextmenu-enter-active {
transition: opacity 250ms;
}
}
`;
const classes = {
root: ({ instance }) => [
'p-contextmenu p-component',
{
'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
'p-ripple-disabled': instance.$primevue.config.ripple === false
}
],
menu: 'p-contextmenu-root-list',
menuitem: ({ instance, processedItem }) => [
'p-menuitem',
{
'p-menuitem-active p-highlight': instance.isItemActive(processedItem),
'p-focus': instance.isItemFocused(processedItem),
'p-disabled': instance.isItemDisabled(processedItem)
}
],
content: 'p-menuitem-content',
action: ({ props, isActive, isExactActive }) => [
'p-menuitem-link',
{
'router-link-active': isActive,
'router-link-active-exact': props.exact && isExactActive
}
],
icon: 'p-menuitem-icon',
label: 'p-menuitem-text',
submenuIcon: 'p-submenu-icon',
submenu: 'p-submenu-list',
separator: 'p-menuitem-separator'
};
export default BaseStyle.extend({
name: 'contextmenu',
css,
classes
});

5
components/lib/contextmenu/style/package.json Normal file
View File

@ -0,0 +1,5 @@
{
"main": "./contextmenustyle.cjs.js",
"module": "./contextmenustyle.esm.js",
"unpkg": "./contextmenustyle.min.js"
}

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

@ -1,473 +1,6 @@
<script>
import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
@layer primevue {
.p-datatable {
position: relative;
}
.p-datatable-table {
border-spacing: 0px;
width: 100%;
}
.p-datatable .p-sortable-column {
cursor: pointer;
user-select: none;
}
.p-datatable .p-sortable-column .p-column-title,
.p-datatable .p-sortable-column .p-sortable-column-icon,
.p-datatable .p-sortable-column .p-sortable-column-badge {
vertical-align: middle;
}
.p-datatable .p-sortable-column .p-sortable-column-badge {
display: inline-flex;
align-items: center;
justify-content: center;
}
.p-datatable-hoverable-rows .p-selectable-row {
cursor: pointer;
}
/* Scrollable */
.p-datatable-scrollable > .p-datatable-wrapper {
position: relative;
}
.p-datatable-scrollable-table > .p-datatable-thead {
top: 0;
z-index: 1;
}
.p-datatable-scrollable-table > .p-datatable-frozen-tbody {
position: sticky;
z-index: 1;
}
.p-datatable-scrollable-table > .p-datatable-tfoot {
bottom: 0;
z-index: 1;
}
.p-datatable-scrollable .p-frozen-column {
position: sticky;
background: inherit;
}
.p-datatable-scrollable th.p-frozen-column {
z-index: 1;
}
.p-datatable-flex-scrollable {
display: flex;
flex-direction: column;
height: 100%;
}
.p-datatable-flex-scrollable > .p-datatable-wrapper {
display: flex;
flex-direction: column;
flex: 1;
height: 100%;
}
.p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header {
position: sticky;
z-index: 1;
}
/* Resizable */
.p-datatable-resizable-table > .p-datatable-thead > tr > th,
.p-datatable-resizable-table > .p-datatable-tfoot > tr > td,
.p-datatable-resizable-table > .p-datatable-tbody > tr > td {
overflow: hidden;
white-space: nowrap;
}
.p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) {
background-clip: padding-box;
position: relative;
}
.p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer {
display: none;
}
.p-datatable .p-column-resizer {
display: block;
position: absolute !important;
top: 0;
right: 0;
margin: 0;
width: 0.5rem;
height: 100%;
padding: 0px;
cursor: col-resize;
border: 1px solid transparent;
}
.p-datatable .p-column-header-content {
display: flex;
align-items: center;
}
.p-datatable .p-column-resizer-helper {
width: 1px;
position: absolute;
z-index: 10;
display: none;
}
.p-datatable .p-row-editor-init,
.p-datatable .p-row-editor-save,
.p-datatable .p-row-editor-cancel {
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
}
/* Expand */
.p-datatable .p-row-toggler {
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
}
/* Reorder */
.p-datatable-reorder-indicator-up,
.p-datatable-reorder-indicator-down {
position: absolute;
display: none;
}
.p-reorderable-column,
.p-datatable-reorderablerow-handle {
cursor: move;
}
/* Loader */
.p-datatable .p-datatable-loading-overlay {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
/* Filter */
.p-column-filter-row {
display: flex;
align-items: center;
width: 100%;
}
.p-column-filter-menu {
display: inline-flex;
margin-left: auto;
}
.p-column-filter-row .p-column-filter-element {
flex: 1 1 auto;
width: 1%;
}
.p-column-filter-menu-button,
.p-column-filter-clear-button {
display: inline-flex;
justify-content: center;
align-items: center;
cursor: pointer;
text-decoration: none;
overflow: hidden;
position: relative;
}
.p-column-filter-row-items {
margin: 0;
padding: 0;
list-style: none;
}
.p-column-filter-row-item {
cursor: pointer;
}
.p-column-filter-add-button,
.p-column-filter-remove-button {
justify-content: center;
}
.p-column-filter-add-button .p-button-label,
.p-column-filter-remove-button .p-button-label {
flex-grow: 0;
}
.p-column-filter-buttonbar {
display: flex;
align-items: center;
justify-content: space-between;
}
.p-column-filter-buttonbar .p-button:not(.p-button-icon-only) {
width: auto;
}
/* Responsive */
.p-datatable .p-datatable-tbody > tr > td > .p-column-title {
display: none;
}
/* VirtualScroller */
.p-datatable-virtualscroller-spacer {
display: flex;
}
.p-datatable .p-virtualscroller .p-virtualscroller-loading {
transform: none !important;
min-height: 0;
position: sticky;
top: 0;
left: 0;
}
}
`;
const inlineStyles = {
wrapper: { overflow: 'auto' },
thead: { position: 'sticky' },
tfoot: { position: 'sticky' }
};
const classes = {
root: ({ instance, props }) => [
'p-datatable p-component',
{
'p-datatable-hoverable-rows': props.rowHover || props.selectionMode,
'p-datatable-resizable': props.resizableColumns,
'p-datatable-resizable-fit': props.resizableColumns && props.columnResizeMode === 'fit',
'p-datatable-scrollable': props.scrollable,
'p-datatable-flex-scrollable': props.scrollable && props.scrollHeight === 'flex',
'p-datatable-responsive-stack': props.responsiveLayout === 'stack',
'p-datatable-responsive-scroll': props.responsiveLayout === 'scroll',
'p-datatable-striped': props.stripedRows,
'p-datatable-gridlines': props.showGridlines,
'p-datatable-grouped-header': instance.headerColumnGroup != null,
'p-datatable-grouped-footer': instance.footerColumnGroup != null,
'p-datatable-sm': props.size === 'small',
'p-datatable-lg': props.size === 'large'
}
],
loadingOverlay: 'p-datatable-loading-overlay p-component-overlay',
loadingIcon: 'p-datatable-loading-icon',
header: 'p-datatable-header',
paginator: ({ instance }) => (instance.paginatorTop ? 'p-paginator-top' : instance.paginatorBottom ? 'p-paginator-bottom' : ''),
wrapper: 'p-datatable-wrapper',
table: ({ props }) => [
'p-datatable-table',
{
'p-datatable-scrollable-table': props.scrollable,
'p-datatable-resizable-table': props.resizableColumns,
'p-datatable-resizable-table-fit': props.resizableColumns && props.columnResizeMode === 'fit'
}
],
//tablehead
thead: 'p-datatable-thead',
// headercell
headerCell: ({ instance, props, column }) =>
column && !instance.columnProp(column, 'hidden') && (props.rowGroupMode !== 'subheader' || props.groupRowsBy !== instance.columnProp(column, 'field'))
? [
'p-filter-column',
{
'p-frozen-column': instance.columnProp(column, 'frozen')
}
]
: [
{
'p-sortable-column': instance.columnProp('sortable'),
'p-resizable-column': instance.resizableColumns,
'p-highlight': instance.isColumnSorted(),
'p-filter-column': props.filterColumn,
'p-frozen-column': instance.columnProp('frozen'),
'p-reorderable-column': props.reorderableColumns
}
],
columnResizer: 'p-column-resizer',
headerContent: 'p-column-header-content',
headerTitle: 'p-column-title',
sortIcon: 'p-sortable-column-icon',
sortBadge: 'p-sortable-column-badge',
//headercheckbox
headerCheckboxWrapper: ({ instance }) => [
'p-checkbox p-component',
{
'p-checkbox-focused': instance.focused,
'p-disabled': instance.disabled
}
],
headerCheckbox: ({ instance }) => [
'p-checkbox-box p-component',
{
'p-highlight': instance.checked,
'p-disabled': instance.disabled,
'p-focus': instance.focused
}
],
headerCheckboxIcon: 'p-checkbox-icon',
// columnfilter
columnFilter: ({ props }) => [
'p-column-filter p-fluid',
{
'p-column-filter-row': props.display === 'row',
'p-column-filter-menu': props.display === 'menu'
}
],
filterInput: 'p-fluid p-column-filter-element',
filterMenuButton: ({ instance }) => [
'p-column-filter-menu-button p-link',
{
'p-column-filter-menu-button-open': instance.overlayVisible,
'p-column-filter-menu-button-active': instance.hasFilter()
}
],
headerFilterClearButton: ({ instance }) => [
'p-column-filter-clear-button p-link',
{
'p-hidden-space': !instance.hasRowFilter()
}
],
filterOverlay: ({ instance, props }) => [
{
'p-column-filter-overlay p-component p-fluid': true,
'p-column-filter-overlay-menu': props.display === 'menu',
'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
'p-ripple-disabled': instance.$primevue.config.ripple === false
}
],
filterRowItems: 'p-column-filter-row-items',
filterRowItem: ({ instance, matchMode }) => [
'p-column-filter-row-item',
{
'p-highlight': matchMode && instance.isRowMatchModeSelected(matchMode.value)
}
],
filterSeparator: 'p-column-filter-separator',
filterOperator: 'p-column-filter-operator',
filterOperatorDropdown: 'p-column-filter-operator-dropdown',
filterConstraints: 'p-column-filter-constraints',
filterConstraint: 'p-column-filter-constraint',
filterMatchModeDropdown: 'p-column-filter-matchmode-dropdown',
filterRemoveButton: 'p-column-filter-remove-button p-button-text p-button-danger p-button-sm',
filterAddRule: 'p-column-filter-add-rule',
filterAddRuleButton: 'p-column-filter-add-button p-button-text p-button-sm',
filterButtonbar: 'p-column-filter-buttonbar',
filterClearButton: 'p-button-outlined p-button-sm',
filterApplyButton: 'p-button-sm',
//tablebody
tbody: ({ props }) => (props.frozenRow ? 'p-datatable-tbody p-datatable-frozen-tbody' : 'p-datatable-tbody'),
rowgroupHeader: 'p-rowgroup-header',
rowGroupToggler: 'p-row-toggler p-link',
rowGroupTogglerIcon: 'p-row-toggler-icon',
row: ({ instance, props, rowData }) => {
let rowStyleClass = [];
if (props.selectionMode) {
rowStyleClass.push('p-selectable-row');
}
if (props.selection) {
rowStyleClass.push({
'p-highlight': instance.isSelected(rowData)
});
}
if (props.contextMenuSelection) {
rowStyleClass.push({
'p-highlight-contextmenu': instance.isSelectedWithContextMenu(rowData)
});
}
return rowStyleClass;
},
rowExpansion: 'p-datatable-row-expansion',
rowgroupFooter: 'p-rowgroup-footer',
emptyMessage: 'p-datatable-emptymessage',
//bodycell
bodyCell: ({ instance }) => [
{
'p-selection-column': instance.columnProp('selectionMode') != null,
'p-editable-column': instance.isEditable(),
'p-cell-editing': instance.d_editing,
'p-frozen-column': instance.columnProp('frozen')
}
],
columnTitle: 'p-column-title',
rowReorderIcon: 'p-datatable-reorderablerow-handle',
rowToggler: 'p-row-toggler p-link',
rowTogglerIcon: 'p-row-toggler-icon',
rowEditorInitButton: 'p-row-editor-init p-link',
rowEditorInitIcon: 'p-row-editor-init-icon',
rowEditorSaveButton: 'p-row-editor-save p-link',
rowEditorSaveIcon: 'p-row-editor-save-icon',
rowEditorCancelButton: 'p-row-editor-cancel p-link',
rowEditorCancelIcon: 'p-row-editor-cancel-icon',
//rowcheckbox
checkboxWrapper: ({ instance }) => [
'p-checkbox p-component',
{
'p-checkbox-focused': instance.focused
}
],
checkbox: ({ instance }) => [
'p-checkbox-box p-component',
{
'p-highlight': instance.checked,
'p-disabled': instance.$attrs.disabled,
'p-focus': instance.focused
}
],
checkboxIcon: 'p-checkbox-icon',
//rowradiobutton
radiobuttonWrapper: ({ instance }) => [
'p-radiobutton p-component',
{
'p-radiobutton-focused': instance.focused
}
],
radiobutton: ({ instance }) => [
'p-radiobutton-box p-component',
{
'p-highlight': instance.checked,
'p-disabled': instance.$attrs.disabled,
'p-focus': instance.focused
}
],
radiobuttonIcon: 'p-radiobutton-icon',
//tablefooter
tfoot: 'p-datatable-tfoot',
//footercell
footerCell: ({ instance }) => [
{
'p-frozen-column': instance.columnProp('frozen')
}
],
//datatable
virtualScrollerSpacer: 'p-datatable-virtualscroller-spacer',
footer: 'p-datatable-footer',
resizeHelper: 'p-column-resizer-helper',
reorderIndicatorUp: 'p-datatable-reorder-indicator-up',
reorderIndicatorDown: 'p-datatable-reorder-indicator-down'
};
const { load: loadStyle } = useStyle(styles, { name: 'datatable', manual: true });
import DataTableStyle from 'primevue/datatable/style';
export default {
name: 'BaseDataTable',
@ -734,11 +267,7 @@ export default {
default: null
}
},
css: {
classes,
inlineStyles,
loadStyle
},
style: DataTableStyle,
provide() {
return {
$parentInstance: this

473
components/lib/datatable/style/DataTableStyle.js Normal file
View File

@ -0,0 +1,473 @@
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 !important;
top: 0;
right: 0;
margin: 0;
width: 0.5rem;
height: 100%;
padding: 0px;
cursor: col-resize;
border: 1px solid transparent;
}
.p-datatable .p-column-header-content {
display: flex;
align-items: center;
}
.p-datatable .p-column-resizer-helper {
width: 1px;
position: absolute;
z-index: 10;
display: none;
}
.p-datatable .p-row-editor-init,
.p-datatable .p-row-editor-save,
.p-datatable .p-row-editor-cancel {
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
}
/* Expand */
.p-datatable .p-row-toggler {
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
}
/* Reorder */
.p-datatable-reorder-indicator-up,
.p-datatable-reorder-indicator-down {
position: absolute;
display: none;
}
.p-reorderable-column,
.p-datatable-reorderablerow-handle {
cursor: move;
}
/* Loader */
.p-datatable .p-datatable-loading-overlay {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
/* Filter */
.p-column-filter-row {
display: flex;
align-items: center;
width: 100%;
}
.p-column-filter-menu {
display: inline-flex;
margin-left: auto;
}
.p-column-filter-row .p-column-filter-element {
flex: 1 1 auto;
width: 1%;
}
.p-column-filter-menu-button,
.p-column-filter-clear-button {
display: inline-flex;
justify-content: center;
align-items: center;
cursor: pointer;
text-decoration: none;
overflow: hidden;
position: relative;
}
.p-column-filter-row-items {
margin: 0;
padding: 0;
list-style: none;
}
.p-column-filter-row-item {
cursor: pointer;
}
.p-column-filter-add-button,
.p-column-filter-remove-button {
justify-content: center;
}
.p-column-filter-add-button .p-button-label,
.p-column-filter-remove-button .p-button-label {
flex-grow: 0;
}
.p-column-filter-buttonbar {
display: flex;
align-items: center;
justify-content: space-between;
}
.p-column-filter-buttonbar .p-button:not(.p-button-icon-only) {
width: auto;
}
/* Responsive */
.p-datatable .p-datatable-tbody > tr > td > .p-column-title {
display: none;
}
/* VirtualScroller */
.p-datatable-virtualscroller-spacer {
display: flex;
}
.p-datatable .p-virtualscroller .p-virtualscroller-loading {
transform: none !important;
min-height: 0;
position: sticky;
top: 0;
left: 0;
}
}
`;
const classes = {
root: ({ instance, props }) => [
'p-datatable p-component',
{
'p-datatable-hoverable-rows': props.rowHover || props.selectionMode,
'p-datatable-resizable': props.resizableColumns,
'p-datatable-resizable-fit': props.resizableColumns && props.columnResizeMode === 'fit',
'p-datatable-scrollable': props.scrollable,
'p-datatable-flex-scrollable': props.scrollable && props.scrollHeight === 'flex',
'p-datatable-responsive-stack': props.responsiveLayout === 'stack',
'p-datatable-responsive-scroll': props.responsiveLayout === 'scroll',
'p-datatable-striped': props.stripedRows,
'p-datatable-gridlines': props.showGridlines,
'p-datatable-grouped-header': instance.headerColumnGroup != null,
'p-datatable-grouped-footer': instance.footerColumnGroup != null,
'p-datatable-sm': props.size === 'small',
'p-datatable-lg': props.size === 'large'
}
],
loadingOverlay: 'p-datatable-loading-overlay p-component-overlay',
loadingIcon: 'p-datatable-loading-icon',
header: 'p-datatable-header',
paginator: ({ instance }) => (instance.paginatorTop ? 'p-paginator-top' : instance.paginatorBottom ? 'p-paginator-bottom' : ''),
wrapper: 'p-datatable-wrapper',
table: ({ props }) => [
'p-datatable-table',
{
'p-datatable-scrollable-table': props.scrollable,
'p-datatable-resizable-table': props.resizableColumns,
'p-datatable-resizable-table-fit': props.resizableColumns && props.columnResizeMode === 'fit'
}
],
//tablehead
thead: 'p-datatable-thead',
// headercell
headerCell: ({ instance, props, column }) =>
column && !instance.columnProp(column, 'hidden') && (props.rowGroupMode !== 'subheader' || props.groupRowsBy !== instance.columnProp(column, 'field'))
? [
'p-filter-column',
{
'p-frozen-column': instance.columnProp(column, 'frozen')
}
]
: [
{
'p-sortable-column': instance.columnProp('sortable'),
'p-resizable-column': instance.resizableColumns,
'p-highlight': instance.isColumnSorted(),
'p-filter-column': props.filterColumn,
'p-frozen-column': instance.columnProp('frozen'),
'p-reorderable-column': props.reorderableColumns
}
],
columnResizer: 'p-column-resizer',
headerContent: 'p-column-header-content',
headerTitle: 'p-column-title',
sortIcon: 'p-sortable-column-icon',
sortBadge: 'p-sortable-column-badge',
//headercheckbox
headerCheckboxWrapper: ({ instance }) => [
'p-checkbox p-component',
{
'p-checkbox-focused': instance.focused,
'p-disabled': instance.disabled
}
],
headerCheckbox: ({ instance }) => [
'p-checkbox-box p-component',
{
'p-highlight': instance.checked,
'p-disabled': instance.disabled,
'p-focus': instance.focused
}
],
headerCheckboxIcon: 'p-checkbox-icon',
// columnfilter
columnFilter: ({ props }) => [
'p-column-filter p-fluid',
{
'p-column-filter-row': props.display === 'row',
'p-column-filter-menu': props.display === 'menu'
}
],
filterInput: 'p-fluid p-column-filter-element',
filterMenuButton: ({ instance }) => [
'p-column-filter-menu-button p-link',
{
'p-column-filter-menu-button-open': instance.overlayVisible,
'p-column-filter-menu-button-active': instance.hasFilter()
}
],
headerFilterClearButton: ({ instance }) => [
'p-column-filter-clear-button p-link',
{
'p-hidden-space': !instance.hasRowFilter()
}
],
filterOverlay: ({ instance, props }) => [
{
'p-column-filter-overlay p-component p-fluid': true,
'p-column-filter-overlay-menu': props.display === 'menu',
'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
'p-ripple-disabled': instance.$primevue.config.ripple === false
}
],
filterRowItems: 'p-column-filter-row-items',
filterRowItem: ({ instance, matchMode }) => [
'p-column-filter-row-item',
{
'p-highlight': matchMode && instance.isRowMatchModeSelected(matchMode.value)
}
],
filterSeparator: 'p-column-filter-separator',
filterOperator: 'p-column-filter-operator',
filterOperatorDropdown: 'p-column-filter-operator-dropdown',
filterConstraints: 'p-column-filter-constraints',
filterConstraint: 'p-column-filter-constraint',
filterMatchModeDropdown: 'p-column-filter-matchmode-dropdown',
filterRemoveButton: 'p-column-filter-remove-button p-button-text p-button-danger p-button-sm',
filterAddRule: 'p-column-filter-add-rule',
filterAddRuleButton: 'p-column-filter-add-button p-button-text p-button-sm',
filterButtonbar: 'p-column-filter-buttonbar',
filterClearButton: 'p-button-outlined p-button-sm',
filterApplyButton: 'p-button-sm',
//tablebody
tbody: ({ props }) => (props.frozenRow ? 'p-datatable-tbody p-datatable-frozen-tbody' : 'p-datatable-tbody'),
rowgroupHeader: 'p-rowgroup-header',
rowGroupToggler: 'p-row-toggler p-link',
rowGroupTogglerIcon: 'p-row-toggler-icon',
row: ({ instance, props, rowData }) => {
let rowStyleClass = [];
if (props.selectionMode) {
rowStyleClass.push('p-selectable-row');
}
if (props.selection) {
rowStyleClass.push({
'p-highlight': instance.isSelected(rowData)
});
}
if (props.contextMenuSelection) {
rowStyleClass.push({
'p-highlight-contextmenu': instance.isSelectedWithContextMenu(rowData)
});
}
return rowStyleClass;
},
rowExpansion: 'p-datatable-row-expansion',
rowgroupFooter: 'p-rowgroup-footer',
emptyMessage: 'p-datatable-emptymessage',
//bodycell
bodyCell: ({ instance }) => [
{
'p-selection-column': instance.columnProp('selectionMode') != null,
'p-editable-column': instance.isEditable(),
'p-cell-editing': instance.d_editing,
'p-frozen-column': instance.columnProp('frozen')
}
],
columnTitle: 'p-column-title',
rowReorderIcon: 'p-datatable-reorderablerow-handle',
rowToggler: 'p-row-toggler p-link',
rowTogglerIcon: 'p-row-toggler-icon',
rowEditorInitButton: 'p-row-editor-init p-link',
rowEditorInitIcon: 'p-row-editor-init-icon',
rowEditorSaveButton: 'p-row-editor-save p-link',
rowEditorSaveIcon: 'p-row-editor-save-icon',
rowEditorCancelButton: 'p-row-editor-cancel p-link',
rowEditorCancelIcon: 'p-row-editor-cancel-icon',
//rowcheckbox
checkboxWrapper: ({ instance }) => [
'p-checkbox p-component',
{
'p-checkbox-focused': instance.focused
}
],
checkbox: ({ instance }) => [
'p-checkbox-box p-component',
{
'p-highlight': instance.checked,
'p-disabled': instance.$attrs.disabled,
'p-focus': instance.focused
}
],
checkboxIcon: 'p-checkbox-icon',
//rowradiobutton
radiobuttonWrapper: ({ instance }) => [
'p-radiobutton p-component',
{
'p-radiobutton-focused': instance.focused
}
],
radiobutton: ({ instance }) => [
'p-radiobutton-box p-component',
{
'p-highlight': instance.checked,
'p-disabled': instance.$attrs.disabled,
'p-focus': instance.focused
}
],
radiobuttonIcon: 'p-radiobutton-icon',
//tablefooter
tfoot: 'p-datatable-tfoot',
//footercell
footerCell: ({ instance }) => [
{
'p-frozen-column': instance.columnProp('frozen')
}
],
//datatable
virtualScrollerSpacer: 'p-datatable-virtualscroller-spacer',
footer: 'p-datatable-footer',
resizeHelper: 'p-column-resizer-helper',
reorderIndicatorUp: 'p-datatable-reorder-indicator-up',
reorderIndicatorDown: 'p-datatable-reorder-indicator-down'
};
const inlineStyles = {
wrapper: { overflow: 'auto' },
thead: { position: 'sticky' },
tfoot: { position: 'sticky' }
};
export default BaseStyle.extend({
name: 'datatable',
css,
classes,
inlineStyles
});

5
components/lib/datatable/style/package.json Normal file
View File

@ -0,0 +1,5 @@
{
"main": "./datatablestyle.cjs.js",
"module": "./datatablestyle.esm.js",
"unpkg": "./datatablestyle.min.js"
}

22
components/lib/dataview/BaseDataView.vue
View File

@ -1,22 +1,6 @@
<script>
import BaseComponent from 'primevue/basecomponent';
const classes = {
root: ({ props }) => [
'p-dataview p-component',
{
'p-dataview-list': props.layout === 'list',
'p-dataview-grid': props.layout === 'grid'
}
],
header: 'p-dataview-header',
paginator: ({ instance }) => (instance.paginatorTop ? 'p-paginator-top' : instance.paginatorBottom ? 'p-paginator-bottom' : ''),
content: 'p-dataview-content',
grid: 'p-grid p-nogutter grid grid-nogutter',
column: 'p-col col',
emptyMessage: 'p-dataview-emptymessage',
footer: 'p-dataview-footer'
};
import DataViewStyle from 'primevue/dataview/style';
export default {
name: 'BaseDataView',
@ -87,9 +71,7 @@ export default {
default: null
}
},
css: {
classes
},
style: DataViewStyle,
provide() {
return {
$parentInstance: this

24
components/lib/dataview/style/DataViewStyle.js Normal file
View File

@ -0,0 +1,24 @@
import BaseStyle from 'primevue/base/style';
const classes = {
root: ({ props }) => [
'p-dataview p-component',
{
'p-dataview-list': props.layout === 'list',
'p-dataview-grid': props.layout === 'grid'
}
],
header: 'p-dataview-header',
paginator: ({ instance }) => (instance.paginatorTop ? 'p-paginator-top' : instance.paginatorBottom ? 'p-paginator-bottom' : ''),
content: 'p-dataview-content',
grid: 'p-grid p-nogutter grid grid-nogutter',
column: 'p-col col',
emptyMessage: 'p-dataview-emptymessage',
footer: 'p-dataview-footer'
};
export default BaseStyle.extend({
name: 'dataview',
classes,
loadStyle: () => {}
});

5
components/lib/dataview/style/package.json Normal file
View File

@ -0,0 +1,5 @@
{
"main": "./dataviewstyle.cjs.js",
"module": "./dataviewstyle.esm.js",
"unpkg": "./dataviewstyle.min.js"
}

21
components/lib/dataviewlayoutoptions/BaseDataViewLayoutOptions.vue
View File

@ -1,21 +1,6 @@
<script>
import BaseComponent from 'primevue/basecomponent';
const classes = {
root: 'p-dataview-layout-options p-selectbutton p-buttonset',
listButton: ({ props }) => [
'p-button p-button-icon-only',
{
'p-highlight': props.modelValue === 'list'
}
],
gridButton: ({ props }) => [
'p-button p-button-icon-only',
{
'p-highlight': props.modelValue === 'grid'
}
]
};
import DataViewLayoutOptionsStyle from 'primevue/dataviewlayoutoptions/style';
export default {
name: 'BaseDataViewLayoutOptions',
@ -23,9 +8,7 @@ export default {
props: {
modelValue: String
},
css: {
classes
},
style: DataViewLayoutOptionsStyle,
provide() {
return {
$parentInstance: this

23
components/lib/dataviewlayoutoptions/style/DataViewLayoutOptionsStyle.js Normal file
View File

@ -0,0 +1,23 @@
import BaseStyle from 'primevue/base/style';
const classes = {
root: 'p-dataview-layout-options p-selectbutton p-buttonset',
listButton: ({ props }) => [
'p-button p-button-icon-only',
{
'p-highlight': props.modelValue === 'list'
}
],
gridButton: ({ props }) => [
'p-button p-button-icon-only',
{
'p-highlight': props.modelValue === 'grid'
}
]
};
export default BaseStyle.extend({
name: 'dataviewlayoutoptions',
classes,
loadStyle: () => {}
});

5
components/lib/dataviewlayoutoptions/style/package.json Normal file
View File

@ -0,0 +1,5 @@
{
"main": "./dataviewlayoutoptionsstyle.cjs.js",
"module": "./dataviewlayoutoptionsstyle.esm.js",
"unpkg": "./dataviewlayoutoptionsstyle.min.js"
}

2
components/lib/deferredcontent/DeferredContent.vue
View File

@ -6,11 +6,13 @@
<script>
import BaseComponent from 'primevue/basecomponent';
import DeferredContentStyle from 'primevue/deferredcontent/style';
export default {
name: 'DeferredContent',
extends: BaseComponent,
emits: ['load'],
style: DeferredContentStyle,
data() {
return {
loaded: false

1
components/lib/deferredcontent/style/DeferredContentStyle.js Normal file
View File

@ -0,0 +1 @@
export default {};

5
components/lib/deferredcontent/style/package.json Normal file
View File

@ -0,0 +1,5 @@
{
"main": "./deferredcontentstyle.cjs.js",
"module": "./deferredcontentstyle.esm.js",
"unpkg": "./deferredcontentstyle.min.js"
}

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

@ -1,197 +1,6 @@
<script>
import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
@layer primevue {
.p-dialog-mask.p-component-overlay {
pointer-events: auto;
}
.p-dialog {
max-height: 90%;
transform: scale(1);
}
.p-dialog-content {
overflow-y: auto;
}
.p-dialog-header {
display: flex;
align-items: center;
justify-content: space-between;
flex-shrink: 0;
}
.p-dialog-footer {
flex-shrink: 0;
}
.p-dialog .p-dialog-header-icons {
display: flex;
align-items: center;
}
.p-dialog .p-dialog-header-icon {
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
}
/* Fluid */
.p-fluid .p-dialog-footer .p-button {
width: auto;
}
/* Animation */
/* Center */
.p-dialog-enter-active {
transition: all 150ms cubic-bezier(0, 0, 0.2, 1);
}
.p-dialog-leave-active {
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.p-dialog-enter-from,
.p-dialog-leave-to {
opacity: 0;
transform: scale(0.7);
}
/* Top, Bottom, Left, Right, Top* and Bottom* */
.p-dialog-top .p-dialog,
.p-dialog-bottom .p-dialog,
.p-dialog-left .p-dialog,
.p-dialog-right .p-dialog,
.p-dialog-topleft .p-dialog,
.p-dialog-topright .p-dialog,
.p-dialog-bottomleft .p-dialog,
.p-dialog-bottomright .p-dialog {
margin: 0.75rem;
transform: translate3d(0px, 0px, 0px);
}
.p-dialog-top .p-dialog-enter-active,
.p-dialog-top .p-dialog-leave-active,
.p-dialog-bottom .p-dialog-enter-active,
.p-dialog-bottom .p-dialog-leave-active,
.p-dialog-left .p-dialog-enter-active,
.p-dialog-left .p-dialog-leave-active,
.p-dialog-right .p-dialog-enter-active,
.p-dialog-right .p-dialog-leave-active,
.p-dialog-topleft .p-dialog-enter-active,
.p-dialog-topleft .p-dialog-leave-active,
.p-dialog-topright .p-dialog-enter-active,
.p-dialog-topright .p-dialog-leave-active,
.p-dialog-bottomleft .p-dialog-enter-active,
.p-dialog-bottomleft .p-dialog-leave-active,
.p-dialog-bottomright .p-dialog-enter-active,
.p-dialog-bottomright .p-dialog-leave-active {
transition: all 0.3s ease-out;
}
.p-dialog-top .p-dialog-enter-from,
.p-dialog-top .p-dialog-leave-to {
transform: translate3d(0px, -100%, 0px);
}
.p-dialog-bottom .p-dialog-enter-from,
.p-dialog-bottom .p-dialog-leave-to {
transform: translate3d(0px, 100%, 0px);
}
.p-dialog-left .p-dialog-enter-from,
.p-dialog-left .p-dialog-leave-to,
.p-dialog-topleft .p-dialog-enter-from,
.p-dialog-topleft .p-dialog-leave-to,
.p-dialog-bottomleft .p-dialog-enter-from,
.p-dialog-bottomleft .p-dialog-leave-to {
transform: translate3d(-100%, 0px, 0px);
}
.p-dialog-right .p-dialog-enter-from,
.p-dialog-right .p-dialog-leave-to,
.p-dialog-topright .p-dialog-enter-from,
.p-dialog-topright .p-dialog-leave-to,
.p-dialog-bottomright .p-dialog-enter-from,
.p-dialog-bottomright .p-dialog-leave-to {
transform: translate3d(100%, 0px, 0px);
}
/* Maximize */
.p-dialog-maximized {
-webkit-transition: none;
transition: none;
transform: none;
width: 100vw !important;
height: 100vh !important;
top: 0px !important;
left: 0px !important;
max-height: 100%;
height: 100%;
}
.p-dialog-maximized .p-dialog-content {
flex-grow: 1;
}
.p-confirm-dialog .p-dialog-content {
display: flex;
align-items: center;
}
}
`;
/* Position */
const inlineStyles = {
mask: ({ position, modal }) => ({
position: 'fixed',
height: '100%',
width: '100%',
left: 0,
top: 0,
display: 'flex',
justifyContent: position === 'left' || position === 'topleft' || position === 'bottomleft' ? 'flex-start' : position === 'right' || position === 'topright' || position === 'bottomright' ? 'flex-end' : 'center',
alignItems: position === 'top' || position === 'topleft' || position === 'topright' ? 'flex-start' : position === 'bottom' || position === 'bottomleft' || position === 'bottomright' ? 'flex-end' : 'center',
pointerEvents: modal ? 'auto' : 'none'
}),
root: {
display: 'flex',
flexDirection: 'column',
pointerEvents: 'auto'
}
};
const classes = {
mask: ({ props }) => {
const positions = ['left', 'right', 'top', 'topleft', 'topright', 'bottom', 'bottomleft', 'bottomright'];
const pos = positions.find((item) => item === props.position);
return [
'p-dialog-mask',
{
'p-component-overlay p-component-overlay-enter': props.modal
},
pos ? `p-dialog-${pos}` : ''
];
},
root: ({ props, instance }) => [
'p-dialog p-component',
{
'p-dialog-rtl': props.rtl,
'p-dialog-maximized': props.maximizable && instance.maximized,
'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
'p-ripple-disabled': instance.$primevue.config.ripple === false
}
],
header: 'p-dialog-header',
headerTitle: 'p-dialog-title',
headerIcons: 'p-dialog-header-icons',
maximizableButton: 'p-dialog-header-icon p-dialog-header-maximize p-link',
maximizableIcon: 'p-dialog-header-maximize-icon',
closeButton: 'p-dialog-header-icon p-dialog-header-close p-link',
closeButtonIcon: 'p-dialog-header-close-icon',
content: 'p-dialog-content',
footer: 'p-dialog-footer'
};
const { load: loadStyle } = useStyle(styles, { name: 'dialog', manual: true });
import DialogStyle from 'primevue/dialog/style';
export default {
name: 'BaseDialog',
@ -307,11 +116,7 @@ export default {
},
_instance: null
},
css: {
classes,
inlineStyles,
loadStyle
},
style: DialogStyle,
provide() {
return {
$parentInstance: this

197
components/lib/dialog/style/DialogStyle.js Normal file
View File

@ -0,0 +1,197 @@
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 {
-webkit-transition: none;
transition: none;
transform: none;
width: 100vw !important;
height: 100vh !important;
top: 0px !important;
left: 0px !important;
max-height: 100%;
height: 100%;
}
.p-dialog-maximized .p-dialog-content {
flex-grow: 1;
}
.p-confirm-dialog .p-dialog-content {
display: flex;
align-items: center;
}
}
`;
/* Position */
const inlineStyles = {
mask: ({ position, modal }) => ({
position: 'fixed',
height: '100%',
width: '100%',
left: 0,
top: 0,
display: 'flex',
justifyContent: position === 'left' || position === 'topleft' || position === 'bottomleft' ? 'flex-start' : position === 'right' || position === 'topright' || position === 'bottomright' ? 'flex-end' : 'center',
alignItems: position === 'top' || position === 'topleft' || position === 'topright' ? 'flex-start' : position === 'bottom' || position === 'bottomleft' || position === 'bottomright' ? 'flex-end' : 'center',
pointerEvents: modal ? 'auto' : 'none'
}),
root: {
display: 'flex',
flexDirection: 'column',
pointerEvents: 'auto'
}
};
const classes = {
mask: ({ props }) => {
const positions = ['left', 'right', 'top', 'topleft', 'topright', 'bottom', 'bottomleft', 'bottomright'];
const pos = positions.find((item) => item === props.position);
return [
'p-dialog-mask',
{
'p-component-overlay p-component-overlay-enter': props.modal
},
pos ? `p-dialog-${pos}` : ''
];
},
root: ({ props, instance }) => [
'p-dialog p-component',
{
'p-dialog-rtl': props.rtl,
'p-dialog-maximized': props.maximizable && instance.maximized,
'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
'p-ripple-disabled': instance.$primevue.config.ripple === false
}
],
header: 'p-dialog-header',
headerTitle: 'p-dialog-title',
headerIcons: 'p-dialog-header-icons',
maximizableButton: 'p-dialog-header-icon p-dialog-header-maximize p-link',
maximizableIcon: 'p-dialog-header-maximize-icon',
closeButton: 'p-dialog-header-icon p-dialog-header-close p-link',
closeButtonIcon: 'p-dialog-header-close-icon',
content: 'p-dialog-content',
footer: 'p-dialog-footer'
};
export default BaseStyle.extend({
name: 'dialog',
css,
classes,
inlineStyles
});

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