Refactor
parent
62605e92b9
commit
37b65d8b47
|
@ -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) => {
|
||||||
|
|
|
@ -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)
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue