Refactor
parent
62605e92b9
commit
37b65d8b47
|
@ -35,13 +35,14 @@ const BaseDirective = {
|
|||
},
|
||||
_extend: (name, options = {}) => {
|
||||
const handleHook = (hook, el, binding, vnode, prevVnode) => {
|
||||
el.$instance = el.$instance || {};
|
||||
el._$instances = el._$instances || {};
|
||||
|
||||
const config = binding?.instance?.$primevue?.config;
|
||||
const $instance = el.$instance[name] || {};
|
||||
const $instance = el._$instances[name] || {};
|
||||
const $options = ObjectUtils.isEmpty($instance) ? { ...options, ...options?.methods } : {};
|
||||
|
||||
el.$instance[name] = {
|
||||
el.$instance = $instance;
|
||||
el._$instances[name] = {
|
||||
...$instance,
|
||||
/* new instance variables to pass in directive methods */
|
||||
$name: name,
|
||||
|
@ -53,10 +54,10 @@ const BaseDirective = {
|
|||
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),
|
||||
ptm: (key = '', params = {}) => BaseDirective._getPTValue(el._$instances[name], el._$instances?.[name]?.$binding?.value?.pt, key, { ...params }),
|
||||
ptmo: (obj = {}, key = '', params = {}) => BaseDirective._getPTValue(el._$instances?.[name], obj, key, params, false),
|
||||
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._$instances?.[name]?.$css?.inlineStyles, key, { ...params }) : undefined),
|
||||
...$options
|
||||
};
|
||||
|
||||
|
@ -69,10 +70,8 @@ const BaseDirective = {
|
|||
handleHook('created', el, binding, vnode, prevVnode);
|
||||
},
|
||||
beforeMount: (el, binding, vnode, prevVnode) => {
|
||||
const instance = el.$instance[name];
|
||||
|
||||
loadBaseStyle();
|
||||
!instance?.isUnstyled && instance?.$css?.loadStyle();
|
||||
!el.$instance?.isUnstyled && el.$instance?.$css?.loadStyle();
|
||||
handleHook('beforeMount', el, binding, vnode, prevVnode);
|
||||
},
|
||||
mounted: (el, binding, vnode, prevVnode) => {
|
||||
|
|
|
@ -26,6 +26,9 @@ const FocusTrap = BaseFocusTrap.extend('focustrap', {
|
|||
this.unbind(el);
|
||||
},
|
||||
methods: {
|
||||
getComputedSelector(selector) {
|
||||
return `:not(.p-hidden-focusable):not([data-p-hidden-focusable="true"])${selector}`;
|
||||
},
|
||||
bind(el, binding) {
|
||||
const { onFocusIn, onFocusOut } = binding.value || {};
|
||||
|
||||
|
@ -61,16 +64,16 @@ const FocusTrap = BaseFocusTrap.extend('focustrap', {
|
|||
},
|
||||
autoFocus(el, binding) {
|
||||
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);
|
||||
},
|
||||
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}`)
|
||||
? DomHandler.getFirstFocusableElement(currentTarget.parentElement, this.getComputedSelector(currentTarget.$_pfocustrap_focusableselector))
|
||||
: currentTarget.$_pfocustrap_lasthiddenfocusableelement;
|
||||
|
||||
DomHandler.focus(focusableElement);
|
||||
|
@ -79,7 +82,7 @@ const FocusTrap = BaseFocusTrap.extend('focustrap', {
|
|||
const { currentTarget, relatedTarget } = event;
|
||||
const focusableElement =
|
||||
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;
|
||||
|
||||
DomHandler.focus(focusableElement);
|
||||
|
@ -95,7 +98,7 @@ const FocusTrap = BaseFocusTrap.extend('focustrap', {
|
|||
'aria-hidden': true,
|
||||
'data-p-hidden-accessible': true,
|
||||
'data-p-hidden-focusable': true,
|
||||
onFocus
|
||||
onFocus: onFocus?.bind(this)
|
||||
});
|
||||
};
|
||||
|
||||
|
|
Loading…
Reference in New Issue