Refactor #3965, Improve build and Added *Base models
mertsincan
parent
f4ba20b222
commit
9247620421
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
|
|
|
|||
|
|
@ -1,3 +1,7 @@
|
|||
import BaseDirective from 'primevue/basedirective';
|
||||
import { useStyle } from 'primevue/usestyle';
|
||||
|
||||
const styles = `
|
||||
.p-badge {
|
||||
display: inline-block;
|
||||
border-radius: 10px;
|
||||
|
|
@ -29,4 +33,20 @@
|
|||
.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
|
||||
}
|
||||
});
|
||||
|
||||
export default BaseBadgeDirective;
|
||||
|
|
@ -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;
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"main": "./base.cjs.js",
|
||||
"module": "./base.esm.js",
|
||||
"unpkg": "./base.min.js"
|
||||
}
|
||||
|
|
@ -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,10 +375,16 @@ 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) {
|
||||
return instance ? (this.$options.hostName ? (instance.$.type.name === this.$options.hostName ? instance : this._getHostInstance(instance.$parentInstance)) : instance.$parentInstance) : undefined;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
},
|
||||
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 = [];
|
||||
return {
|
||||
extend: (..._args) => {
|
||||
const [_name, _options] = BaseDirective._getMeta(..._args);
|
||||
|
||||
// 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);
|
||||
});
|
||||
}
|
||||
return BaseDirective.extend(_name, { ...options, ...options?.methods, ..._options });
|
||||
},
|
||||
...BaseDirective._extend(name, options)
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
export default BaseDirective;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
{
|
||||
"main": "./basedirective.cjs.js",
|
||||
"module": "./basedirective.esm.js",
|
||||
"unpkg": "./basedirective.min.js",
|
||||
"types": "./BaseDirective.d.ts"
|
||||
"unpkg": "./basedirective.min.js"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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 || ' ' }}</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
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 293 B |
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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')">
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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')"
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
import BaseDirective from 'primevue/basedirective';
|
||||
|
||||
const BaseFocusTrap = BaseDirective.extend({});
|
||||
|
||||
export default BaseFocusTrap;
|
||||
|
|
@ -1,137 +1,118 @@
|
|||
import { BaseDirective } from 'primevue/basedirective';
|
||||
import { DomHandler, ObjectUtils } from 'primevue/utils';
|
||||
import BaseFocusTrap from './BaseFocusTrap';
|
||||
|
||||
function bind(el, binding) {
|
||||
const { onFocusIn, onFocusOut } = binding.value || {};
|
||||
|
||||
el.$_pfocustrap_mutationobserver = new MutationObserver((mutationList) => {
|
||||
mutationList.forEach((mutation) => {
|
||||
if (mutation.type === 'childList' && !el.contains(document.activeElement)) {
|
||||
const findNextFocusableElement = (el) => {
|
||||
const focusableElement = DomHandler.isFocusableElement(el) ? el : DomHandler.getFirstFocusableElement(el);
|
||||
|
||||
return ObjectUtils.isNotEmpty(focusableElement) ? focusableElement : findNextFocusableElement(el.nextSibling);
|
||||
};
|
||||
|
||||
DomHandler.focus(findNextFocusableElement(mutation.nextSibling));
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
el.$_pfocustrap_mutationobserver.disconnect();
|
||||
el.$_pfocustrap_mutationobserver.observe(el, {
|
||||
childList: true
|
||||
});
|
||||
|
||||
el.$_pfocustrap_focusinlistener = (event) => onFocusIn && onFocusIn(event);
|
||||
el.$_pfocustrap_focusoutlistener = (event) => onFocusOut && onFocusOut(event);
|
||||
|
||||
el.addEventListener('focusin', el.$_pfocustrap_focusinlistener);
|
||||
el.addEventListener('focusout', el.$_pfocustrap_focusoutlistener);
|
||||
}
|
||||
|
||||
function 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) {
|
||||
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) {
|
||||
const { currentTarget, relatedTarget } = event;
|
||||
const focusableElement =
|
||||
relatedTarget === currentTarget.$_pfocustrap_lasthiddenfocusableelement
|
||||
? DomHandler.getFirstFocusableElement(currentTarget.parentElement, `:not([data-p-hidden-focusable="true"])${currentTarget.$_pfocustrap_focusableselector}`)
|
||||
: currentTarget.$_pfocustrap_lasthiddenfocusableelement;
|
||||
|
||||
DomHandler.focus(focusableElement);
|
||||
}
|
||||
|
||||
function onLastHiddenElementFocus(event) {
|
||||
const { currentTarget, relatedTarget } = event;
|
||||
const focusableElement =
|
||||
relatedTarget === currentTarget.$_pfocustrap_firsthiddenfocusableelement
|
||||
? DomHandler.getLastFocusableElement(currentTarget.parentElement, `:not([data-p-hidden-focusable="true"])${currentTarget.$_pfocustrap_focusableselector}`)
|
||||
: currentTarget.$_pfocustrap_firsthiddenfocusableelement;
|
||||
|
||||
DomHandler.focus(focusableElement);
|
||||
}
|
||||
|
||||
function 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;
|
||||
};
|
||||
|
||||
const firstFocusableElement = createFocusableElement(onFirstHiddenElementFocus);
|
||||
const lastFocusableElement = createFocusableElement(onLastHiddenElementFocus);
|
||||
|
||||
firstFocusableElement.$_pfocustrap_lasthiddenfocusableelement = lastFocusableElement;
|
||||
firstFocusableElement.$_pfocustrap_focusableselector = firstFocusableSelector;
|
||||
firstFocusableElement.setAttribute('data-pc-section', 'firstfocusableelement');
|
||||
|
||||
lastFocusableElement.$_pfocustrap_firsthiddenfocusableelement = firstFocusableElement;
|
||||
lastFocusableElement.$_pfocustrap_focusableselector = lastFocusableSelector;
|
||||
lastFocusableElement.setAttribute('data-pc-section', 'lastfocusableelement');
|
||||
|
||||
el.prepend(firstFocusableElement);
|
||||
el.append(lastFocusableElement);
|
||||
}
|
||||
|
||||
const FocusTrap = BaseDirective.extend('focustrap', {
|
||||
const FocusTrap = BaseFocusTrap.extend('focustrap', {
|
||||
mounted(el, binding) {
|
||||
const { disabled } = binding.value || {};
|
||||
|
||||
if (!disabled) {
|
||||
createHiddenFocusableElements(el, binding);
|
||||
bind(el, binding);
|
||||
autoFocus(el, binding);
|
||||
this.createHiddenFocusableElements(el, binding);
|
||||
this.bind(el, binding);
|
||||
this.autoFocus(el, binding);
|
||||
}
|
||||
|
||||
el.setAttribute('data-pc-section', 'root');
|
||||
el.setAttribute('data-pc-name', 'focustrap');
|
||||
DomHandler.setAttributes(el, {
|
||||
'p-bind': this.ptm('root')
|
||||
});
|
||||
|
||||
el.$pEl = el;
|
||||
BaseDirective.handleCSS('focustrap', el, binding);
|
||||
this.$el = el;
|
||||
},
|
||||
|
||||
updated(el, binding) {
|
||||
const { disabled } = binding.value || {};
|
||||
|
||||
disabled && unbind(el);
|
||||
disabled && this.unbind(el);
|
||||
},
|
||||
unmounted(el) {
|
||||
unbind(el);
|
||||
this.unbind(el);
|
||||
},
|
||||
methods: {
|
||||
bind(el, binding) {
|
||||
const { onFocusIn, onFocusOut } = binding.value || {};
|
||||
|
||||
el.$_pfocustrap_mutationobserver = new MutationObserver((mutationList) => {
|
||||
mutationList.forEach((mutation) => {
|
||||
if (mutation.type === 'childList' && !el.contains(document.activeElement)) {
|
||||
const findNextFocusableElement = (el) => {
|
||||
const focusableElement = DomHandler.isFocusableElement(el) ? el : DomHandler.getFirstFocusableElement(el);
|
||||
|
||||
return ObjectUtils.isNotEmpty(focusableElement) ? focusableElement : findNextFocusableElement(el.nextSibling);
|
||||
};
|
||||
|
||||
DomHandler.focus(findNextFocusableElement(mutation.nextSibling));
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
el.$_pfocustrap_mutationobserver.disconnect();
|
||||
el.$_pfocustrap_mutationobserver.observe(el, {
|
||||
childList: true
|
||||
});
|
||||
|
||||
el.$_pfocustrap_focusinlistener = (event) => onFocusIn && onFocusIn(event);
|
||||
el.$_pfocustrap_focusoutlistener = (event) => onFocusOut && onFocusOut(event);
|
||||
|
||||
el.addEventListener('focusin', el.$_pfocustrap_focusinlistener);
|
||||
el.addEventListener('focusout', el.$_pfocustrap_focusoutlistener);
|
||||
},
|
||||
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);
|
||||
},
|
||||
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);
|
||||
},
|
||||
onFirstHiddenElementFocus(event) {
|
||||
const { currentTarget, relatedTarget } = event;
|
||||
const focusableElement =
|
||||
relatedTarget === currentTarget.$_pfocustrap_lasthiddenfocusableelement
|
||||
? DomHandler.getFirstFocusableElement(currentTarget.parentElement, `:not([data-p-hidden-focusable="true"])${currentTarget.$_pfocustrap_focusableselector}`)
|
||||
: currentTarget.$_pfocustrap_lasthiddenfocusableelement;
|
||||
|
||||
DomHandler.focus(focusableElement);
|
||||
},
|
||||
onLastHiddenElementFocus(event) {
|
||||
const { currentTarget, relatedTarget } = event;
|
||||
const focusableElement =
|
||||
relatedTarget === currentTarget.$_pfocustrap_firsthiddenfocusableelement
|
||||
? DomHandler.getLastFocusableElement(currentTarget.parentElement, `:not([data-p-hidden-focusable="true"])${currentTarget.$_pfocustrap_focusableselector}`)
|
||||
: currentTarget.$_pfocustrap_firsthiddenfocusableelement;
|
||||
|
||||
DomHandler.focus(focusableElement);
|
||||
},
|
||||
createHiddenFocusableElements(el, binding) {
|
||||
const { tabIndex = 0, firstFocusableSelector = '', lastFocusableSelector = '' } = binding.value || {};
|
||||
|
||||
const createFocusableElement = (onFocus) => {
|
||||
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(this.onFirstHiddenElementFocus);
|
||||
const lastFocusableElement = createFocusableElement(this.onLastHiddenElementFocus);
|
||||
|
||||
firstFocusableElement.$_pfocustrap_lasthiddenfocusableelement = lastFocusableElement;
|
||||
firstFocusableElement.$_pfocustrap_focusableselector = firstFocusableSelector;
|
||||
firstFocusableElement.setAttribute('data-pc-section', 'firstfocusableelement');
|
||||
|
||||
lastFocusableElement.$_pfocustrap_firsthiddenfocusableelement = firstFocusableElement;
|
||||
lastFocusableElement.$_pfocustrap_focusableselector = lastFocusableSelector;
|
||||
lastFocusableElement.setAttribute('data-pc-section', 'lastfocusableelement');
|
||||
|
||||
el.prepend(firstFocusableElement);
|
||||
el.append(lastFocusableElement);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
}
|
||||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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')"
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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')"
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -1,113 +1,104 @@
|
|||
import { BaseDirective } from 'primevue/basedirective';
|
||||
import { DomHandler } from 'primevue/utils';
|
||||
import BaseRipple from './BaseRipple';
|
||||
|
||||
let timeout;
|
||||
|
||||
function bindEvents(el) {
|
||||
el.addEventListener('mousedown', onMouseDown);
|
||||
}
|
||||
|
||||
function unbindEvents(el) {
|
||||
el.removeEventListener('mousedown', onMouseDown);
|
||||
}
|
||||
|
||||
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);
|
||||
|
||||
if (ink) {
|
||||
unbindEvents(el);
|
||||
ink.removeEventListener('animationend', onAnimationEnd);
|
||||
ink.remove();
|
||||
}
|
||||
}
|
||||
|
||||
function onMouseDown(event) {
|
||||
let target = event.currentTarget;
|
||||
let ink = getInk(target);
|
||||
|
||||
if (!ink || getComputedStyle(ink, null).display === 'none') {
|
||||
return;
|
||||
}
|
||||
|
||||
!target.$_prippleUnstyled && DomHandler.removeClass(ink, 'p-ink-active');
|
||||
ink.setAttribute('data-p-ink-active', 'false');
|
||||
|
||||
if (!DomHandler.getHeight(ink) && !DomHandler.getWidth(ink)) {
|
||||
let d = Math.max(DomHandler.getOuterWidth(target), DomHandler.getOuterHeight(target));
|
||||
|
||||
ink.style.height = d + 'px';
|
||||
ink.style.width = d + 'px';
|
||||
}
|
||||
|
||||
let offset = DomHandler.getOffset(target);
|
||||
let x = event.pageX - offset.left + document.body.scrollTop - DomHandler.getWidth(ink) / 2;
|
||||
let y = event.pageY - offset.top + document.body.scrollLeft - DomHandler.getHeight(ink) / 2;
|
||||
|
||||
ink.style.top = y + 'px';
|
||||
ink.style.left = x + 'px';
|
||||
|
||||
!target.$_prippleUnstyled && DomHandler.addClass(ink, 'p-ink-active');
|
||||
ink.setAttribute('data-p-ink-active', 'true');
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
!event.currentTarget.$_prippleUnstyled && DomHandler.removeClass(event.currentTarget, 'p-ink-active');
|
||||
event.currentTarget.setAttribute('data-p-ink-active', 'false');
|
||||
}
|
||||
|
||||
function getInk(el) {
|
||||
for (let i = 0; i < el.children.length; i++) {
|
||||
if (el.children[i].getAttribute('data-pc-name') === 'ripple') {
|
||||
return el.children[i];
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
const Ripple = BaseDirective.extend('ripple', {
|
||||
const Ripple = BaseRipple.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);
|
||||
this.create(el, binding);
|
||||
this.bindEvents(el);
|
||||
}
|
||||
},
|
||||
|
||||
unmounted(el) {
|
||||
remove(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')
|
||||
});
|
||||
|
||||
el.appendChild(ink);
|
||||
|
||||
this.$el = ink;
|
||||
},
|
||||
remove(el) {
|
||||
let ink = this.getInk(el);
|
||||
|
||||
if (ink) {
|
||||
this.unbindEvents(el);
|
||||
ink.removeEventListener('animationend', this.onAnimationEnd);
|
||||
ink.remove();
|
||||
}
|
||||
},
|
||||
onMouseDown(event) {
|
||||
let target = event.currentTarget;
|
||||
let ink = this.getInk(target);
|
||||
|
||||
if (!ink || getComputedStyle(ink, null).display === 'none') {
|
||||
return;
|
||||
}
|
||||
|
||||
!target.$_prippleUnstyled && DomHandler.removeClass(ink, 'p-ink-active');
|
||||
ink.setAttribute('data-p-ink-active', 'false');
|
||||
|
||||
if (!DomHandler.getHeight(ink) && !DomHandler.getWidth(ink)) {
|
||||
let d = Math.max(DomHandler.getOuterWidth(target), DomHandler.getOuterHeight(target));
|
||||
|
||||
ink.style.height = d + 'px';
|
||||
ink.style.width = d + 'px';
|
||||
}
|
||||
|
||||
let offset = DomHandler.getOffset(target);
|
||||
let x = event.pageX - offset.left + document.body.scrollTop - DomHandler.getWidth(ink) / 2;
|
||||
let y = event.pageY - offset.top + document.body.scrollLeft - DomHandler.getHeight(ink) / 2;
|
||||
|
||||
ink.style.top = y + 'px';
|
||||
ink.style.left = x + 'px';
|
||||
|
||||
!target.$_prippleUnstyled && DomHandler.addClass(ink, 'p-ink-active');
|
||||
ink.setAttribute('data-p-ink-active', 'true');
|
||||
|
||||
this.timeout = setTimeout(() => {
|
||||
if (ink) {
|
||||
!target.$_prippleUnstyled && DomHandler.removeClass(ink, 'p-ink-active');
|
||||
ink.setAttribute('data-p-ink-active', 'false');
|
||||
}
|
||||
}, 401);
|
||||
},
|
||||
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');
|
||||
},
|
||||
getInk(el) {
|
||||
for (let i = 0; i < el.children.length; i++) {
|
||||
if (el.children[i].getAttribute('data-pc-name') === 'ripple') {
|
||||
return el.children[i];
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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
Loading…
Reference in New Issue