fine-true/lib/utils/directive.ts

A small and beautiful Vue3 version of the UI Library

const findShadowChild = (el: HTMLElement): HTMLElement | undefined => {
  let dom;
  const find = (el: HTMLElement) => {
    const children: HTMLCollection = el.children;
    for (let i = 0; i < children.length; i++) {
      const child: any = children[i];
      if (child && child.dataset && child.dataset.shadow !== undefined) {
        dom = child;
      } else {
        find(child);
      }
    }
  };
  find(el);
  return dom;
};

const shadow = {
  mounted(el: HTMLElement) {
    const shadowDom: any = findShadowChild(el);

    (el as unknown as Record<string, unknown>).method = function () {
      if (shadowDom) {
        clearTimeout(shadowDom.timer);
        shadowDom.dataset.shadow = '';
        setTimeout(() => {
          shadowDom.dataset.shadow = 'active';
          shadowDom.timer = setTimeout(() => {
            shadowDom.dataset.shadow = '';
          }, 600);
        }, 0);
      }
    };
    el.addEventListener('click', (el as any).method);
  },
  unmounted(el: HTMLElement) {
    el.removeEventListener('click', (el as any).method);
  },
};

export { shadow };