45 lines
1.3 KiB
TypeScript
45 lines
1.3 KiB
TypeScript
|
import { watchEffect } from 'vue';
|
||
|
|
import type { Directive } from 'vue';
|
||
|
|
import { useAuthStore } from '@/store/modules/auth';
|
||
|
|
import { useObjectContextStore } from '@/store/modules/object-context';
|
||
|
|
import { type AuthDirectiveBindingValue, resolveAuthVisible } from './auth-shared';
|
||
|
|
|
||
|
|
type AuthDirectiveElement = HTMLElement & {
|
||
|
|
authStopHandle?: (() => void) | null;
|
||
|
|
};
|
||
|
|
|
||
|
|
function toggleElementVisible(el: HTMLElement, visible: boolean) {
|
||
|
|
el.style.display = visible ? '' : 'none';
|
||
|
|
}
|
||
|
|
|
||
|
|
function getVisible(bindingValue: string | AuthDirectiveBindingValue) {
|
||
|
|
const authStore = useAuthStore();
|
||
|
|
const objectContextStore = useObjectContextStore();
|
||
|
|
|
||
|
|
return resolveAuthVisible(bindingValue, {
|
||
|
|
globalButtonCodes: authStore.userInfo.buttons,
|
||
|
|
objectButtonCodes: objectContextStore.buttonCodes
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function bindAuthEffect(el: AuthDirectiveElement, bindingValue: string | AuthDirectiveBindingValue) {
|
||
|
|
el.authStopHandle?.();
|
||
|
|
|
||
|
|
el.authStopHandle = watchEffect(() => {
|
||
|
|
toggleElementVisible(el, getVisible(bindingValue));
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
export const authDirective: Directive<AuthDirectiveElement, string | AuthDirectiveBindingValue> = {
|
||
|
|
mounted(el, binding) {
|
||
|
|
bindAuthEffect(el, binding.value);
|
||
|
|
},
|
||
|
|
updated(el, binding) {
|
||
|
|
bindAuthEffect(el, binding.value);
|
||
|
|
},
|
||
|
|
unmounted(el) {
|
||
|
|
el.authStopHandle?.();
|
||
|
|
el.authStopHandle = null;
|
||
|
|
}
|
||
|
|
};
|