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

Refactor #3965, Improve build and Added *Base models

pull/4107/head
mertsincan 2023-07-03 23:20:35 +01:00
parent f4ba20b222
commit 9247620421
134 changed files with 4230 additions and 1729 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.eslintrc.js
View File

@ -15,7 +15,7 @@ module.exports = {
}
},
plugins: ['prettier'],
ignorePatterns: ['**/public/**'],
ignorePatterns: ['**/public/**', '**/dist/**'],
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',

10
assets/styles/primevue.css
View File

@ -1,10 +0,0 @@
@import '../../components/lib/common/Common.css';
/* Todo: badge.css should be removed for unstyled */
@import '../../components/lib/badge/Badge.css';
@import '../../components/lib/button/Button.css';
@import '../../components/lib/checkbox/Checkbox.css';
@import '../../components/lib/colorpicker/ColorPicker.css';
@import '../../components/lib/inputtext/InputText.css';
@import '../../components/lib/radiobutton/RadioButton.css';
@import '../../components/lib/ripple/Ripple.css';
@import '../../components/lib/tooltip/Tooltip.css';

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

@ -45,7 +45,7 @@ const classes = {
}
};
const { load: loadStyle } = useStyle(styles, { id: 'primevue_accordion_style', manual: true });
const { load: loadStyle } = useStyle(styles, { name: 'accordion', manual: true });
export default {
name: 'BaseAccordion',

4
components/lib/autocomplete/AutoComplete.vue
View File

@ -110,7 +110,7 @@
</slot>
</template>
</Button>
<span role="status" aria-live="polite" :class="cx('hiddenSearchResult')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="ptm('hiddenSearchResult')" :data-p-hidden-accessible="true">
<span role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenSearchResult')" :data-p-hidden-accessible="true">
{{ searchResultMessageText }}
</span>
<Portal :appendTo="appendTo">
@ -166,7 +166,7 @@
</template>
</VirtualScroller>
<slot name="footer" :value="modelValue" :suggestions="visibleOptions"></slot>
<span role="status" aria-live="polite" :class="cx('hiddenSelectedMessage')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="ptm('hiddenSelectedMessage')" :data-p-hidden-accessible="true">
<span role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenSelectedMessage')" :data-p-hidden-accessible="true">
{{ selectedMessageText }}
</span>
</div>

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

@ -126,7 +126,6 @@ const classes = {
inputToken: 'p-autocomplete-input-token',
loadingIcon: 'p-autocomplete-loader',
dropdownButton: 'p-autocomplete-dropdown',
hiddenSearchResult: 'p-hidden-accessible',
panel: ({ instance }) => [
'p-autocomplete-panel p-component',
{
@ -144,11 +143,10 @@ const classes = {
'p-disabled': instance.isOptionDisabled(option)
}
],
emptyMessage: 'p-autocomplete-empty-message',
hiddenSelectedMessage: 'p-hidden-accessible'
emptyMessage: 'p-autocomplete-empty-message'
};
const { load: loadStyle } = useStyle(styles, { id: 'primevue_autocomplete_style', manual: true });
const { load: loadStyle } = useStyle(styles, { name: 'autocomplete', manual: true });
export default {
name: 'BaseAutoComplete',

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

@ -48,7 +48,7 @@ const classes = {
icon: 'p-avatar-icon'
};
const { load: loadStyle } = useStyle(styles, { id: 'primevue_avatar_style', manual: true });
const { load: loadStyle } = useStyle(styles, { name: 'avatar', manual: true });
export default {
name: 'BaseAvatar',

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

@ -17,7 +17,7 @@ const classes = {
root: 'p-avatar-group p-component'
};
const { load: loadStyle } = useStyle(styles, { id: 'primevue_avatargroup_style', manual: true });
const { load: loadStyle } = useStyle(styles, { name: 'avatargroup', manual: true });
export default {
name: 'BaseAvatarGroup',

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

@ -54,7 +54,7 @@ const classes = {
]
};
const { load: loadStyle } = useStyle(styles, { id: 'primevue_badge_style', manual: true });
const { load: loadStyle } = useStyle(styles, { name: 'badge', manual: true });
export default {
name: 'BaseBadge',

19
components/lib/badgedirective/BadgeDirective.js
View File

@ -1,19 +1,19 @@
import { BaseDirective } from 'primevue/basedirective';
import { DomHandler, UniqueComponentId } from 'primevue/utils';
import BaseBadgeDirective from './BaseBadgeDirective';
const BadgeDirective = BaseDirective.extend('badge', {
const BadgeDirective = BaseBadgeDirective.extend('badge', {
mounted(el, binding) {
const id = UniqueComponentId() + '_badge';
el.$_pbadgeId = id;
el.$_pbadgeUnstyled = binding.instance.$primevue.config.unstyled || false;
let badge = document.createElement('span');
const badge = DomHandler.createElement('span', {
id,
class: this.cx('root'),
'p-bind': this.ptm('root')
});
badge.id = id;
!el.$_pbadgeUnstyled && (badge.className = 'p-badge p-component');
badge.setAttribute('data-pc-name', 'badge');
badge.setAttribute('data-pc-section', 'root');
el.$_pbadgeId = badge.getAttribute('id');
for (let modifier in binding.modifiers) {
!el.$_pbadgeUnstyled && DomHandler.addClass(badge, 'p-badge-' + modifier);
@ -34,9 +34,8 @@ const BadgeDirective = BaseDirective.extend('badge', {
!el.$_pbadgeUnstyled && DomHandler.addClass(el, 'p-overlay-badge');
el.setAttribute('data-p-overlay-badge', 'true');
el.appendChild(badge);
el.$pEl = badge;
BaseDirective.handleCSS('badge', el, binding);
this.$el = badge;
},
updated(el, binding) {
!el.$_pbadgeUnstyled && DomHandler.addClass(el, 'p-overlay-badge');

20
components/lib/badge/Badge.css → components/lib/badgedirective/BaseBadgeDirective.js
View File

@ -1,3 +1,7 @@
import BaseDirective from 'primevue/basedirective';
import { useStyle } from 'primevue/usestyle';
const styles = `
.p-badge {
display: inline-block;
border-radius: 10px;
@ -30,3 +34,19 @@
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
}
});
export default BaseBadgeDirective;

48
components/lib/base/Base.js Normal file
View File

@ -0,0 +1,48 @@
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;
}
.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;
}
`;
export const { load: loadBaseStyle } = useStyle(styles, { name: 'base', manual: true });
const Base = {
styles
};
export default Base;

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

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

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

@ -1,19 +1,358 @@
<script>
import { loadBaseStyle } from 'primevue/base';
import { useStyle } from 'primevue/usestyle';
import { ObjectUtils } from 'primevue/utils';
import { mergeProps } from 'vue';
const inlineStyles = {
hiddenAccessible: {
border: '0',
clip: 'rect(0 0 0 0)',
height: '1px',
margin: '-1px',
overflow: 'hidden',
padding: '0',
position: 'absolute',
width: '1px'
}
};
const inlineStyles = {};
const buttonStyles = `
.p-button {
margin: 0;
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) {
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 {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.p-buttonset .p-button:last-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-inputtext {
margin: 0;
}
.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 = `
.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%;
}
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="file"]::-webkit-file-upload-button,
button { /* @todo */
border-radius: 0;
}
.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 });
export default {
name: 'BaseComponent',
@ -36,9 +375,15 @@ export default {
isUnstyled: {
immediate: true,
handler(newValue) {
!newValue && this.$options.css && this.$css.loadStyle();
if (!newValue) {
loadStyle();
this.$options.css && this.$css.loadStyle();
}
}
}
},
beforeMount() {
loadBaseStyle();
},
methods: {
_getHostInstance(instance) {

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

@ -1,69 +1,109 @@
import { DomHandler, ObjectUtils } from 'primevue/utils';
import { loadBaseStyle } from 'primevue/base';
import { ObjectUtils } from 'primevue/utils';
import { mergeProps } from 'vue';
const BaseDirective = {
_getMeta: (...args) => [ObjectUtils.isObject(args[0]) ? undefined : args[0], ObjectUtils.getItemValue(ObjectUtils.isObject(args[0]) ? args[0] : args[1])],
_getOptionValue: (options, key = '', params = {}) => {
const fKeys = ObjectUtils.convertToFlatCase(key).split('.');
const fKey = fKeys.shift();
return fKey
? ObjectUtils.isObject(options)
? BaseDirective._getOptionValue(ObjectUtils.getItemValue(options[Object.keys(options).find((k) => ObjectUtils.convertToFlatCase(k) === fKey) || ''], params), fKeys.join('.'), params)
: undefined
: ObjectUtils.getItemValue(options, params);
},
_getPTValue: (instance = {}, obj = {}, key = '', params = {}, searchInDefaultPT = true) => {
const datasetPrefix = 'data-pc-';
const self = BaseDirective._getOptionValue(obj, key, params);
const globalPT = searchInDefaultPT ? BaseDirective._getOptionValue(instance.defaultPT, key, params) : undefined;
const merged = mergeProps(self, globalPT, {
...(key === 'root' && { [`${datasetPrefix}name`]: ObjectUtils.convertToFlatCase(instance.$name) }),
[`${datasetPrefix}section`]: ObjectUtils.convertToFlatCase(key)
});
return merged;
},
_hook: (directiveName, hookName, el, binding, vnode, prevVnode) => {
const config = binding?.instance?.$primevue?.config;
const globalHook = config?.pt?.directives?.[directiveName]?.hooks?.[hookName];
const selfHook = binding?.value?.pt?.hooks?.[hookName];
globalHook?.(el, binding, vnode, prevVnode);
selfHook?.(el, binding, vnode, prevVnode);
},
_extend: (name, options = {}) => {
const handleHook = (hook, el, binding, vnode, prevVnode) => {
el.$instance = el.$instance || {};
const config = binding?.instance?.$primevue?.config;
const $instance = el.$instance[name] || {};
const $options = ObjectUtils.isEmpty($instance) ? { ...options, ...options?.methods } : {};
el.$instance[name] = {
...$instance,
/* new instance variables to pass in directive methods */
$name: name,
$host: el,
$binding: binding,
$el: $instance['$el'] || undefined,
$css: { classes: undefined, inlineStyles: undefined, loadStyle: () => {}, ...options?.css },
/* computed instance variables */
defaultPT: config?.pt?.directives?.[name],
isUnstyled: config?.unstyled,
/* instance's methods */
ptm: (key = '', params = {}) => BaseDirective._getPTValue(el.$instance[name], el.$instance?.[name]?.$binding?.value?.pt, key, { ...params }),
ptmo: (obj = {}, key = '', params = {}) => BaseDirective._getPTValue(el.$instance?.[name], obj, key, params, false),
cx: (key = '', params = {}) => (!el.$instance?.[name]?.isUnstyled ? BaseDirective._getOptionValue(el.$instance?.[name]?.$css?.classes, key, { ...params }) : undefined),
sx: (key = '', when = true, params = {}) => (when ? BaseDirective._getOptionValue(el.$instance?.[name]?.$css?.inlineStyles, key, { ...params }) : undefined),
...$options
};
$instance[hook]?.(el, binding, vnode, prevVnode); // handle hook in directive implementation
BaseDirective._hook(name, hook, el, binding, vnode, prevVnode); // handle hooks during directive uses (global and self-definition)
};
export const BaseDirective = {
extend: (directiveName, hooks) => {
return {
created: (el, binding, vnode, prevVnode) => {
hooks['created'] && hooks['created'](el, binding, vnode, prevVnode);
BaseDirective.handleHook(directiveName, 'created', el, binding, vnode, prevVnode);
handleHook('created', el, binding, vnode, prevVnode);
},
beforeMount: (el, binding, vnode, prevVnode) => {
hooks['beforeMount'] && hooks['beforeMount'](el, binding, vnode, prevVnode);
BaseDirective.handleHook(directiveName, 'beforeMount', el, binding, vnode, prevVnode);
const instance = el.$instance[name];
loadBaseStyle();
!instance?.isUnstyled && instance?.$css?.loadStyle();
handleHook('beforeMount', el, binding, vnode, prevVnode);
},
mounted: (el, binding, vnode, prevVnode) => {
hooks['mounted'] && hooks['mounted'](el, binding, vnode, prevVnode);
BaseDirective.handleHook(directiveName, 'mounted', el, binding, vnode, prevVnode);
handleHook('mounted', el, binding, vnode, prevVnode);
},
beforeUpdate: (el, binding, vnode, prevVnode) => {
hooks['beforeUpdate'] && hooks['beforeUpdate'](el, binding, vnode, prevVnode);
BaseDirective.handleHook(directiveName, 'beforeUpdate', el, binding, vnode, prevVnode);
handleHook('beforeUpdate', el, binding, vnode, prevVnode);
},
updated: (el, binding, vnode, prevVnode) => {
hooks['updated'] && hooks['updated'](el, binding, vnode, prevVnode);
BaseDirective.handleHook(directiveName, 'updated', el, binding, vnode, prevVnode);
handleHook('updated', el, binding, vnode, prevVnode);
},
beforeUnmount: (el, binding, vnode, prevVnode) => {
hooks['beforeUnmount'] && hooks['beforeUnmount'](el, binding, vnode, prevVnode);
BaseDirective.handleHook(directiveName, 'beforeUnmount', el, binding, vnode, prevVnode);
handleHook('beforeUnmount', el, binding, vnode, prevVnode);
},
unmounted: (el, binding, vnode, prevVnode) => {
hooks['unmounted'] && hooks['unmounted'](el, binding, vnode, prevVnode);
BaseDirective.handleHook(directiveName, 'unmounted', el, binding, vnode, prevVnode);
handleHook('unmounted', el, binding, vnode, prevVnode);
}
};
},
handleHook: (directiveName, hookName, el, binding, vnode, prevVnode) => {
let _config = binding.instance.$primevue && binding.instance.$primevue.config;
let _directive = _config && _config.pt && _config.pt.directives && _config.pt.directives[directiveName];
extend: (...args) => {
const [name, options] = BaseDirective._getMeta(...args);
// global pt hook
_directive && _directive.hooks && _directive.hooks[hookName] && _directive.hooks[hookName](el.$pEl, el, binding, vnode, prevVnode);
// options pt hook
binding.value && typeof binding.value === 'object' && binding.value.pt && binding.value.pt.hooks && binding.value.pt.hooks[hookName] && binding.value.pt.hooks[hookName](el.$pEl, el, binding, vnode, prevVnode);
return {
extend: (..._args) => {
const [_name, _options] = BaseDirective._getMeta(..._args);
return BaseDirective.extend(_name, { ...options, ...options?.methods, ..._options });
},
handleCSS: (directiveName, el, binding) => {
let _config = binding.instance.$primevue && binding.instance.$primevue.config;
let _directive = _config && _config.pt && _config.pt.directives && _config.pt.directives[directiveName];
let ptCSSOptions = [];
// global pt css
_directive && _directive.css && ptCSSOptions.push(_directive.css);
// options pt css
binding.value && binding.value.pt && binding.value.pt.css && ptCSSOptions.push(binding.value.pt.css);
for (let option of ptCSSOptions) {
Object.entries(option).forEach(([key, value]) => {
let styledElement;
if (key === 'root' && directiveName !== 'badge') styledElement = el;
else {
styledElement = DomHandler.findSingle(el, `[data-pc-section="${ObjectUtils.convertToFlatCase(key)}"]`);
}
value.class && DomHandler.addMultipleClasses(styledElement, value.class);
value.style && DomHandler.addStyles(styledElement, value.style);
});
}
...BaseDirective._extend(name, options)
};
}
};
export default BaseDirective;

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

@ -1,6 +1,5 @@
{
"main": "./basedirective.cjs.js",
"module": "./basedirective.esm.js",
"unpkg": "./basedirective.min.js",
"types": "./BaseDirective.d.ts"
"unpkg": "./basedirective.min.js"
}

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

@ -28,7 +28,7 @@ const classes = {
root: 'p-blockui-container'
};
const { load: loadStyle } = useStyle(styles, { id: 'primevue_blockui_style', manual: true });
const { load: loadStyle } = useStyle(styles, { name: 'blockui', manual: true });
export default {
name: 'BaseBlockUI',

4
components/lib/blockui/BlockUI.vue
View File

@ -38,7 +38,7 @@ export default {
this.mask = document.createElement('div');
!this.isUnstyled && this.mask.setAttribute('class', styleClass);
document.body.appendChild(this.mask);
!this.isUnstyled && DomHandler.addClass(document.body, 'p-overflow-hidden');
DomHandler.addClass(document.body, 'p-overflow-hidden');
document.activeElement.blur();
} else {
this.mask = document.createElement('div');
@ -65,7 +65,7 @@ export default {
if (this.fullScreen) {
if (!this.isUnstyled) {
document.body.removeChild(this.mask);
!this.isUnstyled && DomHandler.removeClass(document.body, 'p-overflow-hidden');
DomHandler.removeClass(document.body, 'p-overflow-hidden');
}
} else {
this.$refs.container.removeChild(this.mask);

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

@ -53,7 +53,7 @@ const classes = {
label: 'p-menuitem-text'
};
const { load: loadStyle } = useStyle(styles, { id: 'primevue_breadcrumb_style', manual: true });
const { load: loadStyle } = useStyle(styles, { name: 'breadcrumb', manual: true });
export default {
name: 'BaseBreadcrumb',

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

@ -103,16 +103,10 @@ const classes = {
'p-button-icon-bottom': props.iconPos === 'bottom' && props.label
}
],
label: 'p-button-label',
badge: ({ props }) => [
'p-badge p-component',
{
'p-badge-no-gutter': props.badge && String(props.badge).length === 1
}
]
label: 'p-button-label'
};
const { load: loadStyle } = useStyle(styles, { id: 'primevue_button_style', manual: true });
const { load: loadStyle } = useStyle(styles, { name: 'button', manual: true });
export default {
name: 'BaseButton',

68
components/lib/button/Button.css
View File

@ -1,68 +0,0 @@
.p-button {
margin: 0;
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) {
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 {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.p-buttonset .p-button:last-of-type {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.p-buttonset .p-button:focus {
position: relative;
z-index: 1;
}

6
components/lib/button/Button.vue
View File

@ -9,7 +9,7 @@
<span v-if="icon" :class="[cx('icon'), icon]" v-bind="ptm('icon')"></span>
</slot>
<span :class="cx('label')" v-bind="ptm('label')">{{ label || '&nbsp;' }}</span>
<span v-if="badge" :class="[cx('badge'), badgeClass]" v-bind="ptm('badge')">{{ badge }}</span>
<Badge v-if="badge" :value="badge" :class="badgeClass" :unstyled="unstyled" v-bind="ptm('badge')"></Badge>
</slot>
</button>
</template>
@ -17,6 +17,7 @@
<script>
import SpinnerIcon from 'primevue/icons/spinner';
import Ripple from 'primevue/ripple';
import Badge from 'primevue/badge';
import BaseButton from './BaseButton.vue';
export default {
@ -43,7 +44,8 @@ export default {
}
},
components: {
SpinnerIcon
SpinnerIcon,
Badge
},
directives: {
ripple: Ripple

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

@ -200,13 +200,10 @@ const classes = {
weekLabelContainer: 'p-disabled',
day: ({ date }) => [{ 'p-datepicker-other-month': date.otherMonth, 'p-datepicker-today': date.today }],
dayLabel: ({ instance, date }) => [{ 'p-highlight': instance.isSelected(date), 'p-disabled': !date.selectable }],
hiddenSelectedDay: 'p-hidden-accessible',
monthPicker: 'p-monthpicker',
month: ({ instance, month, index }) => ['p-monthpicker-month', { 'p-highlight': instance.isMonthSelected(index), 'p-disabled': !month.selectable }],
hiddenMonth: 'p-hidden-accessible',
yearPicker: 'p-yearpicker',
year: ({ instance, year }) => ['p-yearpicker-year', { 'p-highlight': instance.isYearSelected(year.value), 'p-disabled': !year.selectable }],
hiddenYear: 'p-hidden-accessible',
timePicker: 'p-timepicker',
hourPicker: 'p-hour-picker',
incrementButton: 'p-link',
@ -222,7 +219,7 @@ const classes = {
clearButton: 'p-button-text'
};
const { load: loadStyle } = useStyle(styles, { id: 'primevue_calendar_style', manual: true });
const { load: loadStyle } = useStyle(styles, { name: 'calendar', manual: true });
export default {
name: 'BaseCalendar',

12
components/lib/calendar/Calendar.vue
View File

@ -165,7 +165,7 @@
>
<slot name="date" :date="date">{{ date.day }}</slot>
</span>
<div v-if="isSelected(date)" :class="cx('hiddenSelectedDay')" :style="sx('hiddenAccessible', isUnstyled)" aria-live="polite" v-bind="ptm('hiddenSelectedDay')" :data-p-hidden-accessible="true">
<div v-if="isSelected(date)" class="p-hidden-accessible" aria-live="polite" v-bind="ptm('hiddenSelectedDay')" :data-p-hidden-accessible="true">
{{ date.day }}
</div>
</td>
@ -188,7 +188,7 @@
:data-p-highlight="isMonthSelected(i)"
>
{{ m.value }}
<div v-if="isMonthSelected(i)" :class="cx('hiddenMonth')" :style="sx('hiddenAccessible', isUnstyled)" aria-live="polite" v-bind="ptm('hiddenMonth')" :data-p-hidden-accessible="true">
<div v-if="isMonthSelected(i)" class="p-hidden-accessible" aria-live="polite" v-bind="ptm('hiddenMonth')" :data-p-hidden-accessible="true">
{{ m.value }}
</div>
</span>
@ -206,7 +206,7 @@
:data-p-highlight="isYearSelected(y.value)"
>
{{ y.value }}
<div v-if="isYearSelected(y.value)" :class="cx('hiddenYear')" :style="sx('hiddenAccessible', isUnstyled)" aria-live="polite" v-bind="ptm('hiddenYear')" :data-p-hidden-accessible="true">
<div v-if="isYearSelected(y.value)" class="p-hidden-accessible" aria-live="polite" v-bind="ptm('hiddenYear')" :data-p-hidden-accessible="true">
{{ y.value }}
</div>
</span>
@ -1543,8 +1543,7 @@ export default {
this.mask.addEventListener('click', this.maskClickListener);
document.body.appendChild(this.mask);
document.body.setAttribute('data-p-overflow-hidden', 'true');
!this.isUnstyled && DomHandler.addClass(document.body, 'p-overflow-hidden');
DomHandler.addClass(document.body, 'p-overflow-hidden');
}
},
disableModality() {
@ -1578,8 +1577,7 @@ export default {
}
if (!hasBlockerMasks) {
document.body.removeAttribute('data-p-overflow-hidden');
!this.isUnstyled && DomHandler.removeClass(document.body, 'p-overflow-hidden');
DomHandler.removeClass(document.body, 'p-overflow-hidden');
}
},
updateCurrentMetaData() {

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

@ -128,7 +128,7 @@ const classes = {
footer: 'p-carousel-footer'
};
const { load: loadStyle } = useStyle(styles, { id: 'primevue_carousel_style', manual: true });
const { load: loadStyle } = useStyle(styles, { name: 'carousel', manual: true });
export default {
name: 'BaseCarousel',

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

@ -100,7 +100,6 @@ const classes = {
'p-overlay-open': instance.overlayVisible
}
],
hiddenInputWrapper: 'p-hidden-accessible',
label: ({ instance, props }) => [
'p-cascadeselect-label p-inputtext',
{
@ -111,7 +110,6 @@ const classes = {
dropdownButton: 'p-cascadeselect-trigger',
loadingIcon: 'p-cascadeselect-trigger-icon',
dropdownIcon: 'p-cascadeselect-trigger-icon',
hiddenSearchResult: 'p-hidden-accessible',
panel: ({ instance }) => [
'p-cascadeselect-panel p-component',
{
@ -120,7 +118,6 @@ const classes = {
}
],
wrapper: 'p-cascadeselect-items-wrapper',
hiddenSelectedMessage: 'p-hidden-accessible',
list: 'p-cascadeselect-panel p-cascadeselect-items',
item: ({ instance, processedOption }) => [
'p-cascadeselect-item',
@ -137,7 +134,7 @@ const classes = {
sublist: 'p-cascadeselect-sublist'
};
const { load: loadStyle } = useStyle(styles, { id: 'primevue_cascadeselect_style', manual: true });
const { load: loadStyle } = useStyle(styles, { name: 'cascadeselect', manual: true });
export default {
name: 'BaseCascadeSelect',

6
components/lib/cascadeselect/CascadeSelect.vue
View File

@ -1,6 +1,6 @@
<template>
<div ref="container" :class="cx('root')" :style="sx('root')" @click="onContainerClick($event)" v-bind="ptm('root')" data-pc-name="cascadeselect">
<div :class="cx('hiddenInputWrapper')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="ptm('hiddenInputWrapper')" :data-p-hidden-accessible="true">
<div class="p-hidden-accessible" v-bind="ptm('hiddenInputWrapper')" :data-p-hidden-accessible="true">
<input
ref="focusInput"
:id="inputId"
@ -38,7 +38,7 @@
<component :is="dropdownIcon ? 'span' : 'ChevronDownIcon'" :class="[cx('dropdownIcon'), dropdownIcon]" aria-hidden="true" v-bind="ptm('dropdownIcon')" />
</slot>
</div>
<span role="status" aria-live="polite" :class="cx('hiddenSearchResult')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="ptm('hiddenSearchResult')" :data-p-hidden-accessible="true">
<span role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenSearchResult')" :data-p-hidden-accessible="true">
{{ searchResultMessageText }}
</span>
<Portal :appendTo="appendTo">
@ -65,7 +65,7 @@
:pt="pt"
/>
</div>
<span role="status" aria-live="polite" :class="cx('hiddenSelectedMessage')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="ptm('hiddenSelectedMessage')" :data-p-hidden-accessible="true">
<span role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenSelectedMessage')" :data-p-hidden-accessible="true">
{{ selectedMessageText }}
</span>
</div>

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

@ -12,7 +12,7 @@ const classes = {
root: 'p-chart'
};
const { load: loadStyle } = useStyle(styles, { id: 'primevue_chart_style', manual: true });
const { load: loadStyle } = useStyle(styles, { name: 'chart', manual: true });
export default {
name: 'BaseChart',

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

@ -31,7 +31,6 @@ const classes = {
'p-checkbox-focused': instance.focused
}
],
hiddenInputWrapper: 'p-hidden-accessible',
input: ({ instance, props }) => [
'p-checkbox-box',
{
@ -43,7 +42,7 @@ const classes = {
icon: 'p-checkbox-icon'
};
const { load: loadStyle } = useStyle(styles, { id: 'primevue_checkbox_style', manual: true });
const { load: loadStyle } = useStyle(styles, { name: 'checkbox', manual: true });
export default {
name: 'BaseCheckbox',

17
components/lib/checkbox/Checkbox.css
View File

@ -1,17 +0,0 @@
.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;
}

2
components/lib/checkbox/Checkbox.vue
View File

@ -1,6 +1,6 @@
<template>
<div :class="cx('root')" @click="onClick($event)" v-bind="getPTOptions('root')" data-pc-name="checkbox">
<div :class="cx('hiddenInputWrapper')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="ptm('hiddenInputWrapper')" :data-p-hidden-accessible="true">
<div class="p-hidden-accessible" v-bind="ptm('hiddenInputWrapper')" :data-p-hidden-accessible="true">
<input
ref="input"
:id="inputId"

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

@ -38,7 +38,7 @@ const classes = {
removeIcon: 'p-chip-remove-icon'
};
const { load: loadStyle } = useStyle(styles, { id: 'primevue_chip_style', manual: true });
const { load: loadStyle } = useStyle(styles, { name: 'chip', manual: true });
export default {
name: 'BaseChip',

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

@ -67,7 +67,7 @@ const classes = {
inputToken: 'p-chips-input-token'
};
const { load: loadStyle } = useStyle(styles, { id: 'primevue_chips_style', manual: true });
const { load: loadStyle } = useStyle(styles, { name: 'chips', manual: true });
export default {
name: 'BaseChips',

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

@ -4,11 +4,11 @@ import { useStyle } from 'primevue/usestyle';
const styles = `
.p-colorpicker-panel .p-colorpicker-color {
background: transparent url("./images/color.png") no-repeat left top;
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: transparent url("./images/hue.png") no-repeat left top;
background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red)
}
`;
@ -32,7 +32,7 @@ const classes = {
hueHandle: 'p-colorpicker-hue-handle'
};
const { load: loadStyle } = useStyle(styles, { id: 'primevue_colorpicker_style', manual: true });
const { load: loadStyle } = useStyle(styles, { name: 'colorpicker', manual: true });
export default {
name: 'BaseColorPicker',

7
components/lib/colorpicker/ColorPicker.css
View File

@ -1,7 +0,0 @@
.p-colorpicker-panel .p-colorpicker-color {
background: transparent url("./images/color.png") no-repeat left top;
}
.p-colorpicker-panel .p-colorpicker-hue {
background: transparent url("./images/hue.png") no-repeat left top;
}

BIN
components/lib/colorpicker/images/color.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 10 KiB

BIN
components/lib/colorpicker/images/hue.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 293 B

168
components/lib/common/Common.css
View File

@ -1,168 +0,0 @@
.p-component, .p-component * {
box-sizing: border-box;
}
.p-hidden {
display: none;
}
.p-hidden-space {
visibility: hidden;
}
.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-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-overflow-hidden {
overflow: hidden;
}
.p-unselectable-text {
user-select: none;
}
.p-scrollbar-measure {
width: 100px;
height: 100px;
overflow: scroll;
position: absolute;
top: -9999px;
}
@-webkit-keyframes p-fadein {
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes p-fadein {
0% { opacity: 0; }
100% { opacity: 1; }
}
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="file"]::-webkit-file-upload-button,
button {
border-radius: 0;
}
.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;
}
.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;
}

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

@ -90,7 +90,7 @@ const classes = {
acceptButton: ({ instance }) => ['p-confirm-dialog-accept', instance.confirmation ? instance.confirmation.acceptClass : null]
};
const { load: loadStyle } = useStyle(styles, { id: 'primevue_confirmpopup_style', manual: true });
const { load: loadStyle } = useStyle(styles, { name: 'confirmpopup', manual: true });
export default {
name: 'BaseConfirmPopup',

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

@ -77,7 +77,7 @@ const classes = {
separator: 'p-menuitem-separator'
};
const { load: loadStyle } = useStyle(styles, { id: 'primevue_contextmenu_style', manual: true });
const { load: loadStyle } = useStyle(styles, { name: 'contextmenu', manual: true });
export default {
name: 'BaseContextMenu',

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

@ -309,7 +309,6 @@ const classes = {
'p-disabled': instance.disabled
}
],
hiddenHeaderInputWrapper: 'p-hidden-accessible',
headerCheckbox: ({ instance }) => [
'p-checkbox-box p-component',
{
@ -423,7 +422,6 @@ const classes = {
'p-checkbox-focused': instance.focused
}
],
hiddenInputWrapper: 'p-hidden-accessible',
checkbox: ({ instance }) => [
'p-checkbox-box p-component',
{
@ -465,7 +463,7 @@ const classes = {
reorderIndicatorDown: 'p-datatable-reorder-indicator-down'
};
const { load: loadStyle } = useStyle(styles, { id: 'primevue_datatable_style', manual: true });
const { load: loadStyle } = useStyle(styles, { name: 'datatable', manual: true });
export default {
name: 'BaseDataTable',

2
components/lib/datatable/HeaderCheckbox.vue
View File

@ -1,6 +1,6 @@
<template>
<div :class="cx('headerCheckboxWrapper')" @click="onClick" @keydown.space.prevent="onClick" v-bind="getColumnPT('headerCheckboxWrapper')">
<div :class="cx('hiddenHeaderInputWrapper')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="getColumnPT('hiddenHeaderInputWrapper')" :data-p-hidden-accessible="true">
<div class="p-hidden-accessible" v-bind="getColumnPT('hiddenHeaderInputWrapper')" :data-p-hidden-accessible="true">
<input
ref="input"
type="checkbox"

2
components/lib/datatable/RowCheckbox.vue
View File

@ -1,6 +1,6 @@
<template>
<div :class="cx('checkboxWrapper')" @click="onClick" v-bind="getColumnPT('checkboxWrapper')">
<div :class="cx('hiddenInputWrapper')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="getColumnPT('hiddenInputWrapper')" :data-p-hidden-accessible="true">
<div class="p-hidden-accessible" v-bind="getColumnPT('hiddenInputWrapper')" :data-p-hidden-accessible="true">
<input
ref="input"
type="checkbox"

2
components/lib/datatable/RowRadioButton.vue
View File

@ -1,6 +1,6 @@
<template>
<div :class="cx('radiobuttonWrapper')" @click="onClick" v-bind="getColumnPT('radiobuttonWrapper')">
<div :class="cx('hiddenInputWrapper')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="getColumnPT('hiddenInputWrapper')" :data-p-hidden-accessible="true">
<div class="p-hidden-accessible" v-bind="getColumnPT('hiddenInputWrapper')" :data-p-hidden-accessible="true">
<input ref="input" type="radio" :checked="checked" :disabled="$attrs.disabled" :name="name" tabindex="0" @focus="onFocus($event)" @blur="onBlur($event)" @keydown.space.prevent="onClick" v-bind="getColumnPT('hiddenInput')" />
</div>
<div ref="box" :class="cx('radiobutton')" v-bind="getColumnPT('radiobutton')">

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

@ -203,7 +203,7 @@ const classes = {
footer: 'p-dialog-footer'
};
const { load: loadStyle } = useStyle(styles, { id: 'primevue_dialog_style', manual: true });
const { load: loadStyle } = useStyle(styles, { name: 'dialog', manual: true });
export default {
name: 'BaseDialog',

8
components/lib/dialog/Dialog.vue
View File

@ -189,19 +189,19 @@ export default {
if (!this.modal) {
if (this.maximized) {
!this.isUnstyled && DomHandler.addClass(document.body, 'p-overflow-hidden');
DomHandler.addClass(document.body, 'p-overflow-hidden');
} else {
!this.isUnstyled && DomHandler.removeClass(document.body, 'p-overflow-hidden');
DomHandler.removeClass(document.body, 'p-overflow-hidden');
}
}
},
enableDocumentSettings() {
if (this.modal || (this.maximizable && this.maximized && !this.isUnstyled)) {
if (this.modal || (this.maximizable && this.maximized)) {
DomHandler.addClass(document.body, 'p-overflow-hidden');
}
},
unbindDocumentState() {
if (this.modal || (this.maximizable && this.maximized && !this.isUnstyled)) {
if (this.modal || (this.maximizable && this.maximized)) {
DomHandler.removeClass(document.body, 'p-overflow-hidden');
}
},

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

@ -104,7 +104,7 @@ const classes = {
content: 'p-divider-content'
};
const { load: loadStyle } = useStyle(styles, { id: 'primevue_divider_style', manual: true });
const { load: loadStyle } = useStyle(styles, { name: 'divider', manual: true });
export default {
name: 'BaseDivider',

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

@ -137,7 +137,7 @@ const classes = {
icon: 'p-dock-icon'
};
const { load: loadStyle } = useStyle(styles, { id: 'primevue_dock_style', manual: true });
const { load: loadStyle } = useStyle(styles, { name: 'dock', manual: true });
export default {
name: 'BaseDock',

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

@ -127,12 +127,10 @@ const classes = {
'p-ripple-disabled': instance.$primevue.config.ripple === false
}
],
hiddenFirstFocusableEl: 'p-hidden-accessible p-hidden-focusable',
header: 'p-dropdown-header',
filterContainer: 'p-dropdown-filter-container',
filterInput: 'p-dropdown-filter p-inputtext p-component',
filterIcon: 'p-dropdown-filter-icon',
hiddenFilterResult: 'p-hidden-accessible',
wrapper: 'p-dropdown-items-wrapper',
list: 'p-dropdown-items',
itemGroup: 'p-dropdown-item-group',
@ -144,13 +142,10 @@ const classes = {
'p-disabled': instance.isOptionDisabled(option)
}
],
emptyMessage: 'p-dropdown-empty-message',
hiddenEmptyMessage: 'p-hidden-accessible',
hiddenSelectedMessage: 'p-hidden-accessible',
hiddenLastFocusableEl: 'p-hidden-accessible p-hidden-focusable'
emptyMessage: 'p-dropdown-empty-message'
};
const { load: loadStyle } = useStyle(styles, { id: 'primevue_dropdown_style', manual: true });
const { load: loadStyle } = useStyle(styles, { name: 'dropdown', manual: true });
export default {
name: 'BaseDropdown',

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

@ -66,8 +66,7 @@
ref="firstHiddenFocusableElementOnOverlay"
role="presentation"
aria-hidden="true"
:class="cx('hiddenFirstFocusableEl')"
:style="sx('hiddenAccessible', isUnstyled)"
class="p-hidden-accessible p-hidden-focusable"
:tabindex="0"
@focus="onFirstHiddenFocus"
v-bind="ptm('hiddenFirstFocusableEl')"
@ -97,7 +96,7 @@
<component :is="filterIcon ? 'span' : 'FilterIcon'" :class="[cx('filterIcon'), filterIcon]" v-bind="ptm('filterIcon')" />
</slot>
</div>
<span role="status" aria-live="polite" :class="cx('hiddenFilterResult')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="ptm('hiddenFilterResult')" :data-p-hidden-accessible="true">
<span role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenFilterResult')" :data-p-hidden-accessible="true">
{{ filterResultMessageText }}
</span>
</div>
@ -131,17 +130,10 @@
<slot name="option" :option="option" :index="getOptionIndex(i, getItemOptions)">{{ getOptionLabel(option) }}</slot>
</li>
</template>
<li
v-if="filterValue && (!items || (items && items.length === 0))"
:class="cx('emptyMessage')"
:style="sx('hiddenAccessible', isUnstyled)"
role="option"
v-bind="ptm('emptyMessage')"
:data-p-hidden-accessible="true"
>
<li v-if="filterValue && (!items || (items && items.length === 0))" :class="cx('emptyMessage')" role="option" v-bind="ptm('emptyMessage')" :data-p-hidden-accessible="true">
<slot name="emptyfilter">{{ emptyFilterMessageText }}</slot>
</li>
<li v-else-if="!options || (options && options.length === 0)" :class="cx('emptyMessage')" :style="sx('hiddenAccessible', isUnstyled)" role="option" v-bind="ptm('emptyMessage')" :data-p-hidden-accessible="true">
<li v-else-if="!options || (options && options.length === 0)" :class="cx('emptyMessage')" role="option" v-bind="ptm('emptyMessage')" :data-p-hidden-accessible="true">
<slot name="empty">{{ emptyMessageText }}</slot>
</li>
</ul>
@ -152,26 +144,17 @@
</VirtualScroller>
</div>
<slot name="footer" :value="modelValue" :options="visibleOptions"></slot>
<span
v-if="!options || (options && options.length === 0)"
role="status"
aria-live="polite"
:class="cx('emptyHiddenMessage')"
:style="sx('hiddenAccessible', isUnstyled)"
v-bind="ptm('hiddenEmptyMessage')"
:data-p-hidden-accessible="true"
>
<span v-if="!options || (options && options.length === 0)" role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenEmptyMessage')" :data-p-hidden-accessible="true">
{{ emptyMessageText }}
</span>
<span role="status" aria-live="polite" :class="cx('hiddenSelectedMessage')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="ptm('hiddenSelectedMessage')" :data-p-hidden-accessible="true">
<span role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenSelectedMessage')" :data-p-hidden-accessible="true">
{{ selectedMessageText }}
</span>
<span
ref="lastHiddenFocusableElementOnOverlay"
role="presentation"
aria-hidden="true"
:class="cx('hiddenLastFocusableEl')"
:style="sx('hiddenAccessible', isUnstyled)"
class="p-hidden-accessible p-hidden-focusable"
:tabindex="0"
@focus="onLastHiddenFocus"
v-bind="ptm('hiddenLastFocusableEl')"

2
components/lib/editor/BaseEditor.vue
View File

@ -970,7 +970,7 @@ const classes = {
content: 'p-editor-content'
};
const { load: loadStyle } = useStyle(styles, { id: 'primevue_editor_style', manual: true });
const { load: loadStyle } = useStyle(styles, { name: 'editor', manual: true });
export default {
name: 'BaseEditor',

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

@ -38,7 +38,7 @@ const classes = {
content: 'p-fieldset-content'
};
const { load: loadStyle } = useStyle(styles, { id: 'primevue_fieldset_style', manual: true });
const { load: loadStyle } = useStyle(styles, { name: 'fieldset', manual: true });
export default {
name: 'BaseFieldset',

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

@ -75,7 +75,7 @@ const classes = {
removeButton: 'p-fileupload-file-remove'
};
const { load: loadStyle } = useStyle(styles, { id: 'primevue_fileupload_style', manual: true });
const { load: loadStyle } = useStyle(styles, { name: 'fileupload', manual: true });
export default {
name: 'BaseFileUpload',

5
components/lib/focustrap/BaseFocusTrap.js Normal file
View File

@ -0,0 +1,5 @@
import BaseDirective from 'primevue/basedirective';
const BaseFocusTrap = BaseDirective.extend({});
export default BaseFocusTrap;

115
components/lib/focustrap/FocusTrap.js
View File

@ -1,7 +1,32 @@
import { BaseDirective } from 'primevue/basedirective';
import { DomHandler, ObjectUtils } from 'primevue/utils';
import BaseFocusTrap from './BaseFocusTrap';
function bind(el, binding) {
const FocusTrap = BaseFocusTrap.extend('focustrap', {
mounted(el, binding) {
const { disabled } = binding.value || {};
if (!disabled) {
this.createHiddenFocusableElements(el, binding);
this.bind(el, binding);
this.autoFocus(el, binding);
}
DomHandler.setAttributes(el, {
'p-bind': this.ptm('root')
});
this.$el = el;
},
updated(el, binding) {
const { disabled } = binding.value || {};
disabled && this.unbind(el);
},
unmounted(el) {
this.unbind(el);
},
methods: {
bind(el, binding) {
const { onFocusIn, onFocusOut } = binding.value || {};
el.$_pfocustrap_mutationobserver = new MutationObserver((mutationList) => {
@ -28,23 +53,20 @@ function bind(el, binding) {
el.addEventListener('focusin', el.$_pfocustrap_focusinlistener);
el.addEventListener('focusout', el.$_pfocustrap_focusoutlistener);
}
function unbind(el) {
},
unbind(el) {
el.$_pfocustrap_mutationobserver && el.$_pfocustrap_mutationobserver.disconnect();
el.$_pfocustrap_focusinlistener && el.removeEventListener('focusin', el.$_pfocustrap_focusinlistener) && (el.$_pfocustrap_focusinlistener = null);
el.$_pfocustrap_focusoutlistener && el.removeEventListener('focusout', el.$_pfocustrap_focusoutlistener) && (el.$_pfocustrap_focusoutlistener = null);
}
function autoFocus(el, binding) {
},
autoFocus(el, binding) {
const { autoFocusSelector = '', firstFocusableSelector = '', autoFocus = false } = binding.value || {};
let focusableElement = DomHandler.getFirstFocusableElement(el, `[autofocus]:not([data-p-hidden-focusable="true"])${autoFocusSelector}`);
autoFocus && !focusableElement && (focusableElement = DomHandler.getFirstFocusableElement(el, `:not([data-p-hidden-focusable="true"])${firstFocusableSelector}`));
DomHandler.focus(focusableElement);
}
function onFirstHiddenElementFocus(event) {
},
onFirstHiddenElementFocus(event) {
const { currentTarget, relatedTarget } = event;
const focusableElement =
relatedTarget === currentTarget.$_pfocustrap_lasthiddenfocusableelement
@ -52,9 +74,8 @@ function onFirstHiddenElementFocus(event) {
: currentTarget.$_pfocustrap_lasthiddenfocusableelement;
DomHandler.focus(focusableElement);
}
function onLastHiddenElementFocus(event) {
},
onLastHiddenElementFocus(event) {
const { currentTarget, relatedTarget } = event;
const focusableElement =
relatedTarget === currentTarget.$_pfocustrap_firsthiddenfocusableelement
@ -62,39 +83,24 @@ function onLastHiddenElementFocus(event) {
: currentTarget.$_pfocustrap_firsthiddenfocusableelement;
DomHandler.focus(focusableElement);
}
function createHiddenFocusableElements(el, binding) {
},
createHiddenFocusableElements(el, binding) {
const { tabIndex = 0, firstFocusableSelector = '', lastFocusableSelector = '' } = binding.value || {};
const createFocusableElement = (onFocus) => {
const element = document.createElement('span');
if (binding.instance.$primevue && binding.instance.$primevue.config && binding.instance.$primevue.config.unstyled) {
element.style.border = '0';
element.style.clip = 'rect(0 0 0 0)';
element.style.height = '1px';
element.style.margin = '-1px';
element.style.overflow = 'hidden';
element.style.padding = '0';
element.style.position = 'absolute';
element.style.width = '1px';
} else {
element.classList = 'p-hidden-accessible p-hidden-focusable';
}
element.tabIndex = tabIndex;
element.setAttribute('aria-hidden', 'true');
element.setAttribute('role', 'presentation');
element.setAttribute('data-p-hidden-accessible', true);
element.setAttribute('data-p-hidden-focusable', true);
element.addEventListener('focus', onFocus);
return element;
return DomHandler.createElement('span', {
class: 'p-hidden-accessible p-hidden-focusable',
tabIndex,
role: 'presentation',
'aria-hidden': true,
'data-p-hidden-accessible': true,
'data-p-hidden-focusable': true,
onFocus
});
};
const firstFocusableElement = createFocusableElement(onFirstHiddenElementFocus);
const lastFocusableElement = createFocusableElement(onLastHiddenElementFocus);
const firstFocusableElement = createFocusableElement(this.onFirstHiddenElementFocus);
const lastFocusableElement = createFocusableElement(this.onLastHiddenElementFocus);
firstFocusableElement.$_pfocustrap_lasthiddenfocusableelement = lastFocusableElement;
firstFocusableElement.$_pfocustrap_focusableselector = firstFocusableSelector;
@ -106,32 +112,7 @@ function createHiddenFocusableElements(el, binding) {
el.prepend(firstFocusableElement);
el.append(lastFocusableElement);
}
const FocusTrap = BaseDirective.extend('focustrap', {
mounted(el, binding) {
const { disabled } = binding.value || {};
if (!disabled) {
createHiddenFocusableElements(el, binding);
bind(el, binding);
autoFocus(el, binding);
}
el.setAttribute('data-pc-section', 'root');
el.setAttribute('data-pc-name', 'focustrap');
el.$pEl = el;
BaseDirective.handleCSS('focustrap', el, binding);
},
updated(el, binding) {
const { disabled } = binding.value || {};
disabled && unbind(el);
},
unmounted(el) {
unbind(el);
}
});

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

@ -371,7 +371,7 @@ const classes = {
nextThumbnailIcon: 'p-galleria-thumbnail-next-icon'
};
const { load: loadStyle } = useStyle(styles, { id: 'primevue_galleria_style', manual: true });
const { load: loadStyle } = useStyle(styles, { name: 'galleria', manual: true });
export default {
name: 'BaseGalleria',

9
components/lib/galleria/Galleria.vue
View File

@ -35,8 +35,7 @@ export default {
},
beforeUnmount() {
if (this.fullScreen) {
document.body.setAttribute('data-p-overflow-hidden', 'false');
!this.isUnstyled && DomHandler.removeClass(document.body, 'p-overflow-hidden');
DomHandler.removeClass(document.body, 'p-overflow-hidden');
}
this.mask = null;
@ -52,8 +51,7 @@ export default {
},
onEnter(el) {
this.mask.style.zIndex = String(parseInt(el.style.zIndex, 10) - 1);
document.body.setAttribute('data-p-overflow-hidden', 'true');
!this.isUnstyled && DomHandler.addClass(document.body, 'p-overflow-hidden');
DomHandler.addClass(document.body, 'p-overflow-hidden');
this.focus();
},
onBeforeLeave() {
@ -62,8 +60,7 @@ export default {
onAfterLeave(el) {
ZIndexUtils.clear(el);
this.containerVisible = false;
document.body.setAttribute('data-p-overflow-hidden', 'false');
!this.isUnstyled && DomHandler.removeClass(document.body, 'p-overflow-hidden');
DomHandler.removeClass(document.body, 'p-overflow-hidden');
},
onActiveItemChange(index) {
if (this.activeIndex !== index) {

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

@ -97,7 +97,7 @@ const classes = {
preview: 'p-image-preview'
};
const { load: loadStyle } = useStyle(styles, { id: 'primevue_image_style', manual: true });
const { load: loadStyle } = useStyle(styles, { name: 'image', manual: true });
export default {
name: 'BaseImage',

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

@ -26,7 +26,7 @@ const classes = {
text: 'p-inline-message-text'
};
const { load: loadStyle } = useStyle(styles, { id: 'primevue_inlinemessage_style', manual: true });
const { load: loadStyle } = useStyle(styles, { name: 'inlinemessage', manual: true });
export default {
name: 'BaseInlineMessage',

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

@ -28,7 +28,7 @@ const classes = {
content: 'p-inplace-content'
};
const { load: loadStyle } = useStyle(styles, { id: 'primevue_inplace_style', manual: true });
const { load: loadStyle } = useStyle(styles, { name: 'inplace', manual: true });
export default {
name: 'BaseInplace',

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

@ -132,7 +132,7 @@ const classes = {
]
};
const { load: loadStyle } = useStyle(styles, { id: 'primevue_inputnumber_style', manual: true });
const { load: loadStyle } = useStyle(styles, { name: 'inputnumber', manual: true });
export default {
name: 'BaseInputNumber',

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

@ -37,11 +37,10 @@ const classes = {
'p-focus': instance.focused
}
],
hiddenInputWrapper: 'p-hidden-accessible',
slider: 'p-inputswitch-slider'
};
const { load: loadStyle } = useStyle(styles, { id: 'primevue_inputswitch_style', manual: true });
const { load: loadStyle } = useStyle(styles, { name: 'inputswitch', manual: true });
export default {
name: 'BaseInputSwitch',

2
components/lib/inputswitch/InputSwitch.vue
View File

@ -1,6 +1,6 @@
<template>
<div :class="cx('root')" :style="sx('root')" @click="onClick($event)" v-bind="ptm('root')" data-pc-name="inputswitch">
<div :class="cx('hiddenInputWrapper')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="ptm('hiddenInputWrapper')" :data-p-hidden-accessible="true">
<div class="p-hidden-accessible" v-bind="ptm('hiddenInputWrapper')" :data-p-hidden-accessible="true">
<input
ref="input"
:id="inputId"

2
components/lib/inputtext/BaseInputText.vue
View File

@ -116,7 +116,7 @@ const classes = {
root: ({ instance }) => ['p-inputtext p-component', { 'p-filled': instance.filled }]
};
const { load: loadStyle } = useStyle(styles, { id: 'primevue_inputtext_style', manual: true });
const { load: loadStyle } = useStyle(styles, { name: 'inputtext', manual: true });
export default {
name: 'BaseInputText',

106
components/lib/inputtext/InputText.css
View File

@ -1,106 +0,0 @@
.p-inputtext {
margin: 0;
}
.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%;
}

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

@ -30,7 +30,7 @@ const classes = {
label: 'p-knob-text'
};
const { load: loadStyle } = useStyle(styles, { id: 'primevue_knob_style', manual: true });
const { load: loadStyle } = useStyle(styles, { name: 'knob', manual: true });
export default {
name: 'BaseKnob',

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

@ -46,12 +46,10 @@ const classes = {
'p-disabled': props.disabled
}
],
hiddenFirstFocusableEl: 'p-hidden-accessible p-hidden-focusable',
header: 'p-listbox-header',
filterContainer: 'p-listbox-filter-container',
filterInput: 'p-listbox-filter p-inputtext p-component',
filterIcon: 'p-listbox-filter-icon',
hiddenFilterResult: 'p-hidden-accessible',
wrapper: 'p-listbox-list-wrapper',
list: 'p-listbox-list',
itemGroup: 'p-listbox-item-group',
@ -63,13 +61,10 @@ const classes = {
'p-disabled': instance.isOptionDisabled(option)
}
],
emptyMessage: 'p-listbox-empty-message',
hiddenEmptyMessage: 'p-hidden-accessible',
hiddenSelectedMessage: 'p-hidden-accessible',
hiddenLastFocusableEl: 'p-hidden-accessible p-hidden-focusable'
emptyMessage: 'p-listbox-empty-message'
};
const { load: loadStyle } = useStyle(styles, { id: 'primevue_listbox_style', manual: true });
const { load: loadStyle } = useStyle(styles, { name: 'listbox', manual: true });
export default {
name: 'BaseListbox',

12
components/lib/listbox/Listbox.vue
View File

@ -4,8 +4,7 @@
ref="firstHiddenFocusableElement"
role="presentation"
aria-hidden="true"
:class="cx('hiddenFirstFocusableEl')"
:style="sx('hiddenAccessible', isUnstyled)"
class="p-hidden-accessible p-hidden-focusable"
:tabindex="!disabled ? tabindex : -1"
@focus="onFirstHiddenFocus"
v-bind="ptm('hiddenFirstFocusableEl')"
@ -36,7 +35,7 @@
<component :is="filterIcon ? 'span' : 'SearchIcon'" :class="[cx('filterIcon'), filterIcon]" v-bind="ptm('filterIcon')" />
</slot>
</div>
<span role="status" aria-live="polite" :class="cx('hiddenFilterResult')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="ptm('hiddenFilterResult')" :data-p-hidden-accessible="true">
<span role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenFilterResult')" :data-p-hidden-accessible="true">
{{ filterResultMessageText }}
</span>
</div>
@ -102,18 +101,17 @@
</VirtualScroller>
</div>
<slot name="footer" :value="modelValue" :options="visibleOptions"></slot>
<span v-if="!options || (options && options.length === 0)" role="status" aria-live="polite" :class="cx('hiddenEmptyMessage')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="ptm('hiddenEmptyMessage')" :data-p-hidden-accessible="true">
<span v-if="!options || (options && options.length === 0)" role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenEmptyMessage')" :data-p-hidden-accessible="true">
{{ emptyMessageText }}
</span>
<span role="status" aria-live="polite" :class="cx('hiddenSelectedMessage')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="ptm('hiddenSelectedMessage')" :data-p-hidden-accessible="true">
<span role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenSelectedMessage')" :data-p-hidden-accessible="true">
{{ selectedMessageText }}
</span>
<span
ref="lastHiddenFocusableElement"
role="presentation"
aria-hidden="true"
:class="cx('hiddenLastFocusableEl')"
:style="sx('hiddenAccessible', isUnstyled)"
class="p-hidden-accessible p-hidden-focusable"
:tabindex="!disabled ? tabindex : -1"
@focus="onLastHiddenFocus"
v-bind="ptm('hiddenLastFocusableEl')"

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

@ -189,7 +189,7 @@ const classes = {
end: 'p-megamenu-end'
};
const { load: loadStyle } = useStyle(styles, { id: 'primevue_megamenu_style', manual: true });
const { load: loadStyle } = useStyle(styles, { name: 'megamenu', manual: true });
export default {
name: 'BaseMegaMenu',

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

@ -56,7 +56,7 @@ const classes = {
label: 'p-menuitem-text'
};
const { load: loadStyle } = useStyle(styles, { id: 'primevue_menu_style', manual: true });
const { load: loadStyle } = useStyle(styles, { name: 'menu', manual: true });
export default {
name: 'BaseMenu',

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

@ -114,7 +114,7 @@ const classes = {
end: 'p-menubar-end'
};
const { load: loadStyle } = useStyle(styles, { id: 'primevue_menubar_style', manual: true });
const { load: loadStyle } = useStyle(styles, { name: 'menubar', manual: true });
export default {
name: 'BaseMenubar',

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

@ -57,7 +57,7 @@ const classes = {
buttonIcon: ({ props }) => ['p-message-close-icon', props.closeIcon]
};
const { load: loadStyle } = useStyle(styles, { id: 'primevue_message_style', manual: true });
const { load: loadStyle } = useStyle(styles, { name: 'message', manual: true });
export default {
name: 'BaseMessage',

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

@ -126,7 +126,6 @@ const classes = {
'p-overlay-open': instance.overlayVisible
}
],
hiddenInputWrapper: 'p-hidden-accessible',
labelContainer: 'p-multiselect-label-container',
label: ({ instance, props }) => [
'p-multiselect-label',
@ -148,7 +147,6 @@ const classes = {
'p-ripple-disabled': instance.$primevue.config.ripple === false
}
],
hiddenFirstFocusableEl: 'p-hidden-accessible p-hidden-focusable',
header: 'p-multiselect-header',
headerCheckboxContainer: ({ instance }) => [
'p-checkbox p-component',
@ -157,7 +155,6 @@ const classes = {
'p-checkbox-focused': instance.headerCheckboxFocused
}
],
hiddenInputWrapper: 'p-hidden-accessible',
headerCheckbox: ({ instance }) => [
'p-checkbox-box',
{
@ -169,7 +166,6 @@ const classes = {
filterContainer: 'p-multiselect-filter-container',
filterInput: 'p-multiselect-filter p-inputtext p-component',
filterIcon: 'p-multiselect-filter-icon',
hiddenFilterResult: 'p-hidden-accessible',
closeButton: 'p-multiselect-close p-link',
closeIcon: 'p-multiselect-close-icon',
wrapper: 'p-multiselect-items-wrapper',
@ -186,13 +182,10 @@ const classes = {
checkboxContainer: 'p-checkbox p-component',
checkbox: ({ instance, option }) => ['p-checkbox-box', { 'p-highlight': instance.isSelected(option) }],
checkboxIcon: 'p-checkbox-icon',
emptyMessage: 'p-multiselect-empty-message',
hiddenEmptyMessage: 'p-hidden-accessible',
hiddenSelectedMessage: 'p-hidden-accessible',
hiddenLastFocusableEl: 'p-hidden-accessible p-hidden-focusable'
emptyMessage: 'p-multiselect-empty-message'
};
const { load: loadStyle } = useStyle(styles, { id: 'primevue_multiselect_style', manual: true });
const { load: loadStyle } = useStyle(styles, { name: 'multiselect', manual: true });
export default {
name: 'BaseMultiSelect',

24
components/lib/multiselect/MultiSelect.vue
View File

@ -1,6 +1,6 @@
<template>
<div ref="container" :class="cx('root')" @click="onContainerClick" v-bind="ptm('root')" data-pc-name="multiselect">
<div :class="cx('hiddenInputWrapper')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="ptm('hiddenInputWrapper')" :data-p-hidden-accessible="true">
<div class="p-hidden-accessible" v-bind="ptm('hiddenInputWrapper')" :data-p-hidden-accessible="true">
<input
ref="focusInput"
:id="inputId"
@ -59,8 +59,7 @@
ref="firstHiddenFocusableElementOnOverlay"
role="presentation"
aria-hidden="true"
:class="cx('hiddenFirstFocusableEl')"
:style="sx('hiddenAccessible', isUnstyled)"
class="p-hidden-accessible p-hidden-focusable"
:tabindex="0"
@focus="onFirstHiddenFocus"
v-bind="ptm('hiddenFirstFocusableEl')"
@ -70,7 +69,7 @@
<slot name="header" :value="modelValue" :options="visibleOptions"></slot>
<div v-if="(showToggleAll && selectionLimit == null) || filter" :class="cx('header')" v-bind="ptm('header')">
<div v-if="showToggleAll && selectionLimit == null" :class="cx('headerCheckboxContainer')" @click="onToggleAll" v-bind="ptm('headerCheckboxContainer')">
<div :class="cx('hiddenInputWrapper')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="ptm('hiddenInputWrapper')" :data-p-hidden-accessible="true">
<div class="p-hidden-accessible" v-bind="ptm('hiddenInputWrapper')" :data-p-hidden-accessible="true">
<input type="checkbox" readonly :checked="allSelected" :aria-label="toggleAllAriaLabel" @focus="onHeaderCheckboxFocus" @blur="onHeaderCheckboxBlur" v-bind="ptm('headerCheckbox')" />
</div>
<div :class="cx('headerCheckbox')" v-bind="getHeaderCheckboxPTOptions('headerCheckbox')">
@ -100,7 +99,7 @@
<component :is="filterIcon ? 'span' : 'SearchIcon'" :class="[cx('filterIcon'), filterIcon]" v-bind="ptm('filterIcon')" />
</slot>
</div>
<span v-if="filter" role="status" aria-live="polite" :class="cx('hiddenFilterResult')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="ptm('hiddenFilterResult')" :data-p-hidden-accessible="true">
<span v-if="filter" role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenFilterResult')" :data-p-hidden-accessible="true">
{{ filterResultMessageText }}
</span>
<button v-ripple :class="cx('closeButton')" :aria-label="closeAriaLabel" @click="onCloseClick" type="button" v-bind="{ ...closeButtonProps, ...ptm('closeButton') }">
@ -166,26 +165,17 @@
</VirtualScroller>
</div>
<slot name="footer" :value="modelValue" :options="visibleOptions"></slot>
<span
v-if="!options || (options && options.length === 0)"
role="status"
aria-live="polite"
:class="cx('hiddenEmptyMessage')"
:style="sx('hiddenAccessible', isUnstyled)"
v-bind="ptm('hiddenEmptyMessage')"
:data-p-hidden-accessible="true"
>
<span v-if="!options || (options && options.length === 0)" role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenEmptyMessage')" :data-p-hidden-accessible="true">
{{ emptyMessageText }}
</span>
<span role="status" aria-live="polite" :class="cx('hiddenSelectedMessage')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="ptm('hiddenSelectedMessage')" :data-p-hidden-accessible="true">
<span role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenSelectedMessage')" :data-p-hidden-accessible="true">
{{ selectedMessageText }}
</span>
<span
ref="lastHiddenFocusableElementOnOverlay"
role="presentation"
aria-hidden="true"
:class="cx('hiddenLastFocusableEl')"
:style="sx('hiddenAccessible', isUnstyled)"
class="p-hidden-accessible p-hidden-focusable"
:tabindex="0"
@focus="onLastHiddenFocus"
v-bind="ptm('hiddenLastFocusableEl')"

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

@ -62,7 +62,7 @@ const classes = {
]
};
const { load: loadStyle } = useStyle(styles, { id: 'primevue_orderlist_style', manual: true });
const { load: loadStyle } = useStyle(styles, { name: 'orderlist', manual: true });
export default {
name: 'BaseOrderList',

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

@ -71,7 +71,7 @@ const classes = {
nodes: 'p-organizationchart-nodes'
};
const { load: loadStyle } = useStyle(styles, { id: 'primevue_organizationchart_style', manual: true });
const { load: loadStyle } = useStyle(styles, { name: 'organizationchart', manual: true });
export default {
name: 'BaseOrganizationChart',

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

@ -87,7 +87,7 @@ const classes = {
closeIcon: 'p-overlaypanel-close-icon'
};
const { load: loadStyle } = useStyle(styles, { id: 'primevue_overlaypanel_style', manual: true });
const { load: loadStyle } = useStyle(styles, { name: 'overlaypanel', manual: true });
export default {
name: 'BaseOverlayPanel',

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

@ -95,7 +95,7 @@ const classes = {
jumpToPageInput: 'p-paginator-page-input'
};
const { load: loadStyle } = useStyle(styles, { id: 'primevue_paginator_style', manual: true });
const { load: loadStyle } = useStyle(styles, { name: 'paginator', manual: true });
export default {
name: 'BasePaginator',

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

@ -40,7 +40,7 @@ const classes = {
footer: 'p-panel-footer'
};
const { load: loadStyle } = useStyle(styles, { id: 'primevue_panel_style', manual: true });
const { load: loadStyle } = useStyle(styles, { name: 'panel', manual: true });
export default {
name: 'BasePanel',

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

@ -82,7 +82,7 @@ const classes = {
separator: 'p-menuitem-separator'
};
const { load: loadStyle } = useStyle(styles, { id: 'primevue_panelmenu_style', manual: true });
const { load: loadStyle } = useStyle(styles, { name: 'panelmenu', manual: true });
export default {
name: 'BasePanelMenu',

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

@ -50,7 +50,6 @@ const classes = {
'p-disabled': props.disabled
}
],
hiddenAccesible: 'p-hidden-accessible',
panel: ({ instance }) => [
'p-password-panel p-component',
{
@ -63,7 +62,7 @@ const classes = {
info: 'p-password-info'
};
const { load: loadStyle } = useStyle(styles, { id: 'primevue_password_style', manual: true });
const { load: loadStyle } = useStyle(styles, { name: 'password', manual: true });
export default {
name: 'BasePassword',

2
components/lib/password/Password.vue
View File

@ -28,7 +28,7 @@
<slot v-if="toggleMask && !unmasked" name="showicon" :onClick="onMaskToggle">
<component :is="showIcon ? 'i' : 'EyeIcon'" :class="showIcon" @click="onMaskToggle" v-bind="ptm('showIcon')" />
</slot>
<span :class="cx('hiddenAccesible')" :style="sx('hiddenAccessible', isUnstyled)" aria-live="polite" v-bind="ptm('hiddenAccesible')" :data-p-hidden-accessible="true">
<span class="p-hidden-accessible" aria-live="polite" v-bind="ptm('hiddenAccesible')" :data-p-hidden-accessible="true">
{{ infoText }}
</span>
<Portal :appendTo="appendTo">

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

@ -63,7 +63,7 @@ const classes = {
targetControls: 'p-picklist-buttons p-picklist-target-controls'
};
const { load: loadStyle } = useStyle(styles, { id: 'primevue_picklist_style', manual: true });
const { load: loadStyle } = useStyle(styles, { name: 'picklist', manual: true });
export default {
name: 'BasePickList',

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

@ -126,7 +126,7 @@ const classes = {
label: 'p-progressbar-label'
};
const { load: loadStyle } = useStyle(styles, { id: 'primevue_progressbar_style', manual: true });
const { load: loadStyle } = useStyle(styles, { name: 'progressbar', manual: true });
export default {
name: 'BaseProgressBar',

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

@ -36,7 +36,7 @@ const classes = {
circle: 'p-progress-spinner-circle'
};
const { load: loadStyle } = useStyle(styles, { id: 'primevue_progressspinner_style', manual: true });
const { load: loadStyle } = useStyle(styles, { name: 'progressspinner', manual: true });
export default {
name: 'BaseProgressSpinner',

3
components/lib/radiobutton/BaseRadioButton.vue
View File

@ -44,7 +44,6 @@ const classes = {
'p-radiobutton-focused': instance.focused
}
],
hiddenInputWrapper: 'p-hidden-accessible',
input: ({ instance, props }) => [
'p-radiobutton-box',
{
@ -56,7 +55,7 @@ const classes = {
icon: 'p-radiobutton-icon'
};
const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_radiobutton_style', manual: true });
const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { name: 'radiobutton', manual: true });
export default {
name: 'BaseRadioButton',

30
components/lib/radiobutton/RadioButton.css
View File

@ -1,30 +0,0 @@
.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;
}

2
components/lib/radiobutton/RadioButton.vue
View File

@ -1,6 +1,6 @@
<template>
<div :class="cx('root')" @click="onClick($event)" v-bind="ptm('root')" data-pc-name="radiobutton">
<div :class="cx('hiddenInputWrapper')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="ptm('hiddenInputWrapper')" :data-p-hidden-accessible="true">
<div class="p-hidden-accessible" v-bind="ptm('hiddenInputWrapper')" :data-p-hidden-accessible="true">
<input ref="input" :id="inputId" type="radio" :name="name" :checked="checked" :disabled="disabled" :value="value" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" @focus="onFocus" @blur="onBlur" v-bind="ptm('hiddenInput')" />
</div>
<div ref="box" :class="[cx('input'), inputClass]" :style="inputStyle" v-bind="{ ...inputProps, ...ptm('input') }" :data-p-highlight="checked" :data-p-disabled="disabled" :data-p-focused="focused">

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

@ -34,7 +34,6 @@ const classes = {
'p-focus': instance.focusedOptionIndex === 0
}
],
hiddenCancelInputWrapper: 'p-hidden-accessible',
cancelIcon: 'p-rating-icon p-rating-cancel',
item: ({ instance, props, value }) => [
'p-rating-item',
@ -43,12 +42,11 @@ const classes = {
'p-focus': value === instance.focusedOptionIndex
}
],
hiddenItemInputWrapper: 'p-hidden-accessible',
onIcon: 'p-rating-icon',
offIcon: 'p-rating-icon'
};
const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_rating_style', manual: true });
const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { name: 'rating', manual: true });
export default {
name: 'BaseRating',

4
components/lib/rating/Rating.vue
View File

@ -1,7 +1,7 @@
<template>
<div :class="cx('root')" v-bind="ptm('root')" data-pc-name="rating">
<div v-if="cancel" :class="cx('cancelItem')" @click="onOptionClick($event, 0)" v-bind="ptm('cancelItem')" :data-p-focused="focusedOptionIndex === 0">
<span :class="cx('hiddenCancelInputWrapper')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="ptm('hiddenCancelInputWrapper')" :data-p-hidden-accessible="true">
<span class="p-hidden-accessible" v-bind="ptm('hiddenCancelInputWrapper')" :data-p-hidden-accessible="true">
<input
type="radio"
value="0"
@ -22,7 +22,7 @@
</div>
<template v-for="value in stars" :key="value">
<div :class="cx('item', { value })" @click="onOptionClick($event, value)" v-bind="getPTOptions(value, 'item')" :data-p-active="value <= modelValue" :data-p-focused="value === focusedOptionIndex">
<span :class="cx('hiddenItemInputWrapper')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="ptm('hiddenItemInputWrapper')" :data-p-hidden-accessible="true">
<span class="p-hidden-accessible" v-bind="ptm('hiddenItemInputWrapper')" :data-p-hidden-accessible="true">
<input
type="radio"
:value="value"

20
components/lib/ripple/Ripple.css → components/lib/ripple/BaseRipple.js
View File

@ -1,3 +1,7 @@
import BaseDirective from 'primevue/basedirective';
import { useStyle } from 'primevue/usestyle';
const styles = `
.p-ripple {
overflow: hidden;
position: relative;
@ -26,3 +30,19 @@
transform: scale(2.5);
}
}
`;
const classes = {
root: 'p-ink'
};
const { load: loadStyle } = useStyle(styles, { name: 'ripple', manual: true });
const BaseRipple = BaseDirective.extend({
css: {
classes,
loadStyle
}
});
export default BaseRipple;

103
components/lib/ripple/Ripple.js
View File

@ -1,47 +1,55 @@
import { BaseDirective } from 'primevue/basedirective';
import { DomHandler } from 'primevue/utils';
import BaseRipple from './BaseRipple';
let timeout;
const Ripple = BaseRipple.extend('ripple', {
mounted(el, binding) {
const primevue = binding.instance.$primevue;
function bindEvents(el) {
el.addEventListener('mousedown', onMouseDown);
}
if (primevue && primevue.config && primevue.config.ripple) {
el.$_prippleUnstyled = primevue.config.unstyled || false;
function unbindEvents(el) {
el.removeEventListener('mousedown', onMouseDown);
}
this.create(el, binding);
this.bindEvents(el);
}
},
unmounted(el) {
this.remove(el);
},
timeout: undefined,
methods: {
bindEvents(el) {
el.addEventListener('mousedown', this.onMouseDown.bind(this));
},
unbindEvents(el) {
el.removeEventListener('mousedown', this.onMouseDown.bind(this));
},
create(el, binding) {
const ink = DomHandler.createElement('span', {
role: 'presentation',
'aria-hidden': true,
'data-p-ink': true,
'data-p-ink-active': false,
class: this.cx('root'),
onAnimationEnd: this.onAnimationEnd,
'p-bind': this.ptm('root')
});
function create(el, binding) {
let ink = document.createElement('span');
!el.$_prippleUnstyled && (ink.className = 'p-ink');
ink.setAttribute('data-pc-name', 'ripple');
ink.setAttribute('data-pc-section', 'root');
ink.setAttribute('role', 'presentation');
ink.setAttribute('aria-hidden', 'true');
ink.setAttribute('data-p-ink', 'true');
ink.setAttribute('data-p-ink-active', 'false');
el.appendChild(ink);
el.$pEl = ink;
ink.addEventListener('animationend', onAnimationEnd);
BaseDirective.handleCSS('ripple', ink, binding);
}
function remove(el) {
let ink = getInk(el);
this.$el = ink;
},
remove(el) {
let ink = this.getInk(el);
if (ink) {
unbindEvents(el);
ink.removeEventListener('animationend', onAnimationEnd);
this.unbindEvents(el);
ink.removeEventListener('animationend', this.onAnimationEnd);
ink.remove();
}
}
function onMouseDown(event) {
},
onMouseDown(event) {
let target = event.currentTarget;
let ink = getInk(target);
let ink = this.getInk(target);
if (!ink || getComputedStyle(ink, null).display === 'none') {
return;
@ -67,24 +75,22 @@ function onMouseDown(event) {
!target.$_prippleUnstyled && DomHandler.addClass(ink, 'p-ink-active');
ink.setAttribute('data-p-ink-active', 'true');
timeout = setTimeout(() => {
this.timeout = setTimeout(() => {
if (ink) {
!target.$_prippleUnstyled && DomHandler.removeClass(ink, 'p-ink-active');
ink.setAttribute('data-p-ink-active', 'false');
}
}, 401);
}
function onAnimationEnd(event) {
if (timeout) {
clearTimeout(timeout);
},
onAnimationEnd(event) {
if (this.timeout) {
clearTimeout(this.timeout);
}
!event.currentTarget.$_prippleUnstyled && DomHandler.removeClass(event.currentTarget, 'p-ink-active');
event.currentTarget.setAttribute('data-p-ink-active', 'false');
}
function getInk(el) {
},
getInk(el) {
for (let i = 0; i < el.children.length; i++) {
if (el.children[i].getAttribute('data-pc-name') === 'ripple') {
return el.children[i];
@ -92,22 +98,7 @@ function getInk(el) {
}
return null;
}
const Ripple = BaseDirective.extend('ripple', {
mounted(el, binding) {
const primevue = binding.instance.$primevue;
if (primevue && primevue.config && primevue.config.ripple) {
el.$_prippleUnstyled = primevue.config.unstyled || false;
create(el, binding);
bindEvents(el);
}
},
unmounted(el) {
remove(el);
}
});

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

@ -68,7 +68,7 @@ const classes = {
bary: 'p-scrollpanel-bar p-scrollpanel-bar-y'
};
const { load: loadStyle } = useStyle(styles, { id: 'primevue_scrollpanel_style', manual: true });
const { load: loadStyle } = useStyle(styles, { name: 'scrollpanel', manual: true });
export default {
name: 'BaseScrollPanel',

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

@ -42,7 +42,7 @@ const classes = {
icon: 'p-scrolltop-icon'
};
const { load: loadStyle } = useStyle(styles, { id: 'primevue_scrolltop_style', manual: true });
const { load: loadStyle } = useStyle(styles, { name: 'scrolltop', manual: true });
export default {
name: 'BaseScrollTop',

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

@ -203,7 +203,7 @@ const classes = {
content: 'p-sidebar-content'
};
const { load: loadStyle } = useStyle(styles, { id: 'primevue_sidebar_style', manual: true });
const { load: loadStyle } = useStyle(styles, { name: 'sidebar', manual: true });
export default {
name: 'BaseSidebar',

6
components/lib/sidebar/Sidebar.vue
View File

@ -121,16 +121,14 @@ export default {
}
if (this.blockScroll) {
document.body.setAttribute('data-p-overflow-hidden', 'true');
!this.isUnstyled && DomHandler.addClass(document.body, 'p-overflow-hidden');
DomHandler.addClass(document.body, 'p-overflow-hidden');
}
},
disableDocumentSettings() {
this.unbindOutsideClickListener();
if (this.blockScroll) {
document.body.setAttribute('data-p-overflow-hidden', 'false');
!this.isUnstyled && DomHandler.removeClass(document.body, 'p-overflow-hidden');
DomHandler.removeClass(document.body, 'p-overflow-hidden');
}
},
onKeydown(event) {

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

@ -51,7 +51,7 @@ const classes = {
]
};
const { load: loadStyle } = useStyle(styles, { id: 'primevue_skeleton_style', manual: true });
const { load: loadStyle } = useStyle(styles, { name: 'skeleton', manual: true });
export default {
name: 'BaseSkeleton',

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

@ -60,7 +60,7 @@ const classes = {
handle: 'p-slider-handle'
};
const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_slider_style', manual: true });
const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { name: 'slider', manual: true });
export default {
name: 'BaseSlider',

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

@ -156,7 +156,7 @@ const classes = {
]
};
const { load: loadStyle } = useStyle(styles, { id: 'primevue_speeddial_style', manual: true });
const { load: loadStyle } = useStyle(styles, { name: 'speeddial', manual: true });
export default {
name: 'BaseSpeedDial',

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

@ -53,7 +53,7 @@ const classes = {
menuButton: 'p-splitbutton-menubutton'
};
const { load: loadStyle } = useStyle(styles, { id: 'primevue_splitbutton_style', manual: true });
const { load: loadStyle } = useStyle(styles, { name: 'splitbutton', manual: true });
export default {
name: 'BaseSplitButton',

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

@ -60,7 +60,7 @@ const inlineStyles = {
root: ({ props }) => [{ display: 'flex', 'flex-wrap': 'nowrap' }, props.layout === 'vertical' ? { 'flex-direction': 'column' } : '']
};
const { load: loadStyle } = useStyle(styles, { id: 'primevue_splitter_style', manual: true });
const { load: loadStyle } = useStyle(styles, { name: 'splitter', manual: true });
export default {
name: 'BaseSplitter',

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