pull/4107/head
mertsincan 2023-07-04 00:12:09 +01:00
parent 62605e92b9
commit 37b65d8b47
2 changed files with 17 additions and 15 deletions

View File

@ -35,13 +35,14 @@ const BaseDirective = {
}, },
_extend: (name, options = {}) => { _extend: (name, options = {}) => {
const handleHook = (hook, el, binding, vnode, prevVnode) => { const handleHook = (hook, el, binding, vnode, prevVnode) => {
el.$instance = el.$instance || {}; el._$instances = el._$instances || {};
const config = binding?.instance?.$primevue?.config; const config = binding?.instance?.$primevue?.config;
const $instance = el.$instance[name] || {}; const $instance = el._$instances[name] || {};
const $options = ObjectUtils.isEmpty($instance) ? { ...options, ...options?.methods } : {}; const $options = ObjectUtils.isEmpty($instance) ? { ...options, ...options?.methods } : {};
el.$instance[name] = { el.$instance = $instance;
el._$instances[name] = {
...$instance, ...$instance,
/* new instance variables to pass in directive methods */ /* new instance variables to pass in directive methods */
$name: name, $name: name,
@ -53,10 +54,10 @@ const BaseDirective = {
defaultPT: config?.pt?.directives?.[name], defaultPT: config?.pt?.directives?.[name],
isUnstyled: config?.unstyled, isUnstyled: config?.unstyled,
/* instance's methods */ /* instance's methods */
ptm: (key = '', params = {}) => BaseDirective._getPTValue(el.$instance[name], el.$instance?.[name]?.$binding?.value?.pt, key, { ...params }), ptm: (key = '', params = {}) => BaseDirective._getPTValue(el._$instances[name], el._$instances?.[name]?.$binding?.value?.pt, key, { ...params }),
ptmo: (obj = {}, key = '', params = {}) => BaseDirective._getPTValue(el.$instance?.[name], obj, key, params, false), ptmo: (obj = {}, key = '', params = {}) => BaseDirective._getPTValue(el._$instances?.[name], obj, key, params, false),
cx: (key = '', params = {}) => (!el.$instance?.[name]?.isUnstyled ? BaseDirective._getOptionValue(el.$instance?.[name]?.$css?.classes, key, { ...params }) : undefined), cx: (key = '', params = {}) => (!el._$instances?.[name]?.isUnstyled ? BaseDirective._getOptionValue(el._$instances?.[name]?.$css?.classes, key, { ...params }) : undefined),
sx: (key = '', when = true, params = {}) => (when ? BaseDirective._getOptionValue(el.$instance?.[name]?.$css?.inlineStyles, key, { ...params }) : undefined), sx: (key = '', when = true, params = {}) => (when ? BaseDirective._getOptionValue(el._$instances?.[name]?.$css?.inlineStyles, key, { ...params }) : undefined),
...$options ...$options
}; };
@ -69,10 +70,8 @@ const BaseDirective = {
handleHook('created', el, binding, vnode, prevVnode); handleHook('created', el, binding, vnode, prevVnode);
}, },
beforeMount: (el, binding, vnode, prevVnode) => { beforeMount: (el, binding, vnode, prevVnode) => {
const instance = el.$instance[name];
loadBaseStyle(); loadBaseStyle();
!instance?.isUnstyled && instance?.$css?.loadStyle(); !el.$instance?.isUnstyled && el.$instance?.$css?.loadStyle();
handleHook('beforeMount', el, binding, vnode, prevVnode); handleHook('beforeMount', el, binding, vnode, prevVnode);
}, },
mounted: (el, binding, vnode, prevVnode) => { mounted: (el, binding, vnode, prevVnode) => {

View File

@ -26,6 +26,9 @@ const FocusTrap = BaseFocusTrap.extend('focustrap', {
this.unbind(el); this.unbind(el);
}, },
methods: { methods: {
getComputedSelector(selector) {
return `:not(.p-hidden-focusable):not([data-p-hidden-focusable="true"])${selector}`;
},
bind(el, binding) { bind(el, binding) {
const { onFocusIn, onFocusOut } = binding.value || {}; const { onFocusIn, onFocusOut } = binding.value || {};
@ -61,16 +64,16 @@ const FocusTrap = BaseFocusTrap.extend('focustrap', {
}, },
autoFocus(el, binding) { autoFocus(el, binding) {
const { autoFocusSelector = '', firstFocusableSelector = '', autoFocus = false } = binding.value || {}; const { autoFocusSelector = '', firstFocusableSelector = '', autoFocus = false } = binding.value || {};
let focusableElement = DomHandler.getFirstFocusableElement(el, `[autofocus]:not([data-p-hidden-focusable="true"])${autoFocusSelector}`); let focusableElement = DomHandler.getFirstFocusableElement(el, `[autofocus]${this.getComputedSelector(autoFocusSelector)}`);
autoFocus && !focusableElement && (focusableElement = DomHandler.getFirstFocusableElement(el, `:not([data-p-hidden-focusable="true"])${firstFocusableSelector}`)); autoFocus && !focusableElement && (focusableElement = DomHandler.getFirstFocusableElement(el, this.getComputedSelector(firstFocusableSelector)));
DomHandler.focus(focusableElement); DomHandler.focus(focusableElement);
}, },
onFirstHiddenElementFocus(event) { onFirstHiddenElementFocus(event) {
const { currentTarget, relatedTarget } = event; const { currentTarget, relatedTarget } = event;
const focusableElement = const focusableElement =
relatedTarget === currentTarget.$_pfocustrap_lasthiddenfocusableelement relatedTarget === currentTarget.$_pfocustrap_lasthiddenfocusableelement
? DomHandler.getFirstFocusableElement(currentTarget.parentElement, `:not([data-p-hidden-focusable="true"])${currentTarget.$_pfocustrap_focusableselector}`) ? DomHandler.getFirstFocusableElement(currentTarget.parentElement, this.getComputedSelector(currentTarget.$_pfocustrap_focusableselector))
: currentTarget.$_pfocustrap_lasthiddenfocusableelement; : currentTarget.$_pfocustrap_lasthiddenfocusableelement;
DomHandler.focus(focusableElement); DomHandler.focus(focusableElement);
@ -79,7 +82,7 @@ const FocusTrap = BaseFocusTrap.extend('focustrap', {
const { currentTarget, relatedTarget } = event; const { currentTarget, relatedTarget } = event;
const focusableElement = const focusableElement =
relatedTarget === currentTarget.$_pfocustrap_firsthiddenfocusableelement relatedTarget === currentTarget.$_pfocustrap_firsthiddenfocusableelement
? DomHandler.getLastFocusableElement(currentTarget.parentElement, `:not([data-p-hidden-focusable="true"])${currentTarget.$_pfocustrap_focusableselector}`) ? DomHandler.getLastFocusableElement(currentTarget.parentElement, this.getComputedSelector(currentTarget.$_pfocustrap_focusableselector))
: currentTarget.$_pfocustrap_firsthiddenfocusableelement; : currentTarget.$_pfocustrap_firsthiddenfocusableelement;
DomHandler.focus(focusableElement); DomHandler.focus(focusableElement);
@ -95,7 +98,7 @@ const FocusTrap = BaseFocusTrap.extend('focustrap', {
'aria-hidden': true, 'aria-hidden': true,
'data-p-hidden-accessible': true, 'data-p-hidden-accessible': true,
'data-p-hidden-focusable': true, 'data-p-hidden-focusable': true,
onFocus onFocus: onFocus?.bind(this)
}); });
}; };