@varlet/ui/es/hover/index.mjs

A Vue3 component library based on Material Design 2 and 3, supporting mobile and desktop.

import { camelize, inMobile, isFunction } from "@varlet/shared";
function shouldDisabled(arg) {
  if (!arg) {
    return false;
  }
  if (arg === "desktop" && inMobile()) {
    return true;
  }
  if (arg === "mobile" && !inMobile()) {
    return true;
  }
  return false;
}
function getStyle(element) {
  const style = element.getAttribute("style");
  if (!style) {
    return {};
  }
  return style.split(";").filter(Boolean).reduce(
    (style2, item) => {
      const [key, value] = item.split(":").map((item2) => item2.trim());
      style2[camelize(key)] = value;
      return style2;
    },
    {}
  );
}
function updateRawStyle(element) {
  const { value } = element._hover;
  const style = getStyle(element);
  Object.keys(value).forEach((key) => {
    const camelizedKey = camelize(key);
    const styleValue = value[camelizedKey];
    if (styleValue != null && style[camelizedKey]) {
      element._hover.rawStyle[camelizedKey] = style[camelizedKey];
    }
  });
}
function updateStyle(element, styleValue) {
  Object.keys(styleValue).forEach((key) => {
    const value = styleValue[key];
    if (value != null) {
      element.style[key] = value;
    }
  });
}
function clearStyle(element) {
  Object.keys(element._hover.value).forEach((key) => {
    const value = element._hover.value[key];
    if (value != null) {
      element.style[key] = "";
    }
  });
}
function restoreStyle(element) {
  if ((element == null ? void 0 : element._hover) == null) {
    return;
  }
  clearStyle(element);
  updateStyle(element, element._hover.rawStyle);
}
function createHover() {
  const { value } = this._hover;
  this._hover.hovering = true;
  if (isFunction(value)) {
    value(this._hover.hovering);
    return;
  }
  updateStyle(this, value);
}
function removeHover() {
  this._hover.hovering = false;
  if (isFunction(this._hover.value)) {
    this._hover.value(this._hover.hovering);
    return;
  }
  restoreStyle(this);
}
function mounted(element, binding) {
  var _a, _b;
  const { arg, value } = binding;
  if (shouldDisabled(arg)) {
    return;
  }
  element._hover = {
    value,
    hovering: (_b = (_a = element._hover) == null ? void 0 : _a.hovering) != null ? _b : false,
    rawStyle: {}
  };
  updateRawStyle(element);
  element.addEventListener("mouseenter", createHover);
  element.addEventListener("mouseleave", removeHover);
}
function unmounted(element, binding) {
  if (shouldDisabled(binding.arg)) {
    return;
  }
  restoreStyle(element);
  element.removeEventListener("mouseenter", createHover);
  element.removeEventListener("mouseleave", removeHover);
}
function beforeUpdate(element, binding) {
  if (!element._hover) {
    return;
  }
  unmounted(element, binding);
}
function shouldUpdateStyle(element, binding) {
  return !isFunction(binding.value) && element._hover.hovering;
}
function updated(element, binding) {
  mounted(element, binding);
  if (shouldUpdateStyle(element, binding)) {
    updateStyle(element, binding.value);
  }
}
const Hover = {
  mounted,
  unmounted,
  beforeUpdate,
  updated,
  install(app) {
    app.directive("hover", this);
  }
};
const _HoverComponent = Hover;
var stdin_default = Hover;
export {
  _HoverComponent,
  stdin_default as default
};