vue#DirectiveBinding TypeScript Examples

export function vTDirective(i18n: I18n): TranslationDirective<HTMLElement> {
  const bind = (
    el: HTMLElement,
    { instance, value, modifiers }: DirectiveBinding
  ): void => {
    /* istanbul ignore if */
    if (!instance || !instance.$) {
      throw createI18nError(I18nErrorCodes.UNEXPECTED_ERROR)
    }

    const composer = getComposer(i18n, instance.$)
    if (__DEV__ && modifiers.preserve) {
      warn(getWarnMessage(I18nWarnCodes.NOT_SUPPORTED_PRESERVE))
    }

    const parsedValue = parseValue(value)
    // el.textContent = composer.t(...makeParams(parsedValue))
    el.textContent = Reflect.apply(composer.t, composer, [
      ...makeParams(parsedValue)
    ])
  }

  return {
    beforeMount: bind,
    beforeUpdate: bind
  } as TranslationDirective<HTMLElement>
}

updateTranslation = (language: Language, el: HTMLElement, binding: DirectiveBinding, vnode: VNode) => {
  const attrs = vnode.props || {};
  const msgid = el.dataset.msgid!;
  const translateContext = attrs["translate-context"];
  const translateN = attrs["translate-n"];
  const translatePlural = attrs["translate-plural"];
  const isPlural = translateN !== undefined && translatePlural !== undefined;
  const disableHtmlEscaping = attrs["render-html"] === "true";

  if (!isPlural && (translateN || translatePlural)) {
    throw new Error("`translate-n` and `translate-plural` attributes must be used together:" + msgid + ".");
  }

  if (!language.silent && attrs["translate-params"]) {
    console.warn(
      `\`translate-params\` is required as an expression for v-translate directive. Please change to \`v-translate='params'\`: ${msgid}`,
    );
  }

  const translation = translate(language).getTranslation(
    msgid,
    translateN,
    translateContext,
    isPlural ? translatePlural : null,
    language.current,
  );

  const context = Object.assign(binding.instance, binding.value);
  const msg = interpolate(language)(translation, context, disableHtmlEscaping, null);

  el.innerHTML = msg;
}

add (el: HTMLElement, binding: DirectiveBinding): void {
    const src = binding.value
    const parent = scrollParent(el)

    const manager = new ImageManager({
      el,
      parent,
      src,
      error: this.error,
      loading: this.loading,
      cache: this.cache
    })

    this.managerQueue.push(manager)

    if (hasIntersectionObserver) {
      this.observer!.observe(el)
    } else {
      this.addListenerTarget(parent)
      this.addListenerTarget(window)
      this.throttleLazyHandler()
    }
  }

update (el: HTMLElement, binding: DirectiveBinding): void {
    const src = binding.value
    const manager = this.managerQueue.find((manager) => {
      return manager.el === el
    })
    if (manager) {
      manager.update(src)
    }
  }

mounted = (el: Element, binding: DirectiveBinding<any>) => {
  isAuth(el, binding);
}

mounted = (el: Element, binding: DirectiveBinding<any>) => {
  isAuth(el, binding);
}

/**
 * A directive to translate content according to the current language.
 *
 * Use this directive instead of the component if you need to translate HTML content.
 * It's too tricky to support HTML content within the component because we cannot get the raw HTML to use as `msgid`.
 *
 * This directive has a similar interface to the <translate> component, supporting
 * `translate-comment`, `translate-context`, `translate-plural`, `translate-n`.
 *
 * `<p v-translate translate-comment='Good stuff'>This is <strong class='txt-primary'>Sparta</strong>!</p>`
 *
 * If you need interpolation, you must add an expression that outputs binding value that changes with each of the
 * context variable:
 * `<p v-translate="fullName + location">I am %{ fullName } and from %{ location }</p>`
 * @deprecated
 */
export default function directive(language: Language): ObjectDirective<HTMLElement, any> {
  const update = (el: HTMLElement, binding: DirectiveBinding, vnode: VNode) => {
    // Store the current language in the element's dataset.
    el.dataset.currentLanguage = language.current;
    updateTranslation(language, el, binding, vnode);
  };
  return {
    beforeMount(el: HTMLElement, binding: DirectiveBinding, vnode: VNode) {
      // Get the raw HTML and store it in the element's dataset (as advised in Vue's official guide).
      if (!el.dataset.msgid) {
        el.dataset.msgid = el.innerHTML;
      }

      watch(language, () => {
        update(el, binding, vnode);
      });

      update(el, binding, vnode);
    },
    updated(el: HTMLElement, binding: DirectiveBinding, vnode: VNode) {
      update(el, binding, vnode);
    },
  };
}

createDirective = (
  globalUserOptions: Partial<IVWaveDirectiveOptions> = {},
  app: App | 'vue2' | 'vue3' = 'vue3'
): DirectiveList => {
  const globalOptions = { ...DEFAULT_PLUGIN_OPTIONS, ...globalUserOptions }

  const hooks = getHooks(app)

  const handleTrigger = (event: PointerEvent) => {
    const trigger = (event.currentTarget as HTMLElement).dataset.vWaveTrigger

    const associatedElements = document.querySelectorAll(
      `[data-v-wave-boundary="${trigger}"]`
    ) as NodeListOf<HTMLElement>

    associatedElements.forEach((el) => wave(event, el, { ...globalOptions, ...optionMap.get(el) }))
  }

  const waveDirective: Directive = {
    [hooks.mounted](el: HTMLElement, { value = {} }: DirectiveBinding<Partial<IVWaveDirectiveOptions> | false>) {
      optionMap.set(el, value)

      markWaveBoundary(el, (value && value.trigger) ?? globalOptions.trigger)

      el.addEventListener('pointerdown', (event) => {
        if (optionMap.get(el) === false) return

        const options = { ...globalOptions, ...optionMap.get(el)! }

        if (options.trigger === false) return wave(event, el, options)

        if (triggerIsID(options.trigger)) return
        const trigger = el.querySelector('[data-v-wave-trigger="true"]')
        if (!trigger && options.trigger === true) return
        if (trigger && !event.composedPath().includes(trigger)) return

        wave(event, el, options)
      })
    },
    [hooks.updated](el: HTMLElement, { value = {} }: DirectiveBinding<Partial<IVWaveDirectiveOptions> | false>) {
      optionMap.set(el, value)
      markWaveBoundary(el, (value && value.trigger) ?? globalOptions.trigger)
    }
  }

  const triggerDirective: Directive = {
    [hooks.mounted](el: HTMLElement, { arg: trigger = 'true' }: DirectiveBinding) {
      el.dataset.vWaveTrigger = trigger

      if (trigger !== 'true') el.addEventListener('pointerdown', handleTrigger)
    },

    [hooks.updated](el: HTMLElement, { arg: trigger = 'true' }: DirectiveBinding) {
      el.dataset.vWaveTrigger = trigger

      if (trigger === 'true') el.removeEventListener('pointerdown', handleTrigger)
      else el.addEventListener('pointerdown', handleTrigger)
    }
  }

  return {
    wave: waveDirective,
    vWave: waveDirective,
    waveTrigger: triggerDirective,
    vWaveTrigger: triggerDirective
  }
}

process = (
  el: HTMLElement,
  binding: DirectiveBinding<string> | DirectiveBinding2
) => {
  const cachedClasses = cache.get(el.className);
  const cachedBindClasses = cache.get(binding);
  const cachedBindOldClasses = cache.get(binding.oldValue);

  const modifiers = Object.keys(binding.modifiers);
  const processClasses = (val: string) =>
    variantwind(
      modifiers.length ? modifiers.join(":") + ":{" + val + "}" : val
    );

  if (cachedClasses) {
    el.className = cachedClasses;
  } else {
    const classes = variantwind(el.className);
    cache.set(el.className, classes);
    el.className = classes;
  }

  if (binding.value !== binding.oldValue) {
    if (cachedBindOldClasses) {
      el.classList.remove(...cachedBindOldClasses);
    } else {
      const bindOldClasses = processClasses(binding.oldValue || "")
        .split(" ")
        .filter((i: string) => !!i);
      cache.set(binding.oldValue, bindOldClasses);
      el.classList.remove(...bindOldClasses);
    }
  }

  if (cachedBindClasses) {
    el.classList.add(...cachedBindClasses);
  } else {
    const bindClasses = processClasses(binding.value || "")
      .split(" ")
      .filter((i: string) => !!i);
    cache.set(binding.value, bindClasses);
    el.classList.add(...bindClasses);
  }
}