visual-design/es/components/weather/src/weather2.mjs

A Component Library for Vue 3

import { defineComponent, ref, onMounted, onUnmounted, openBlock, createElementBlock, normalizeClass, unref, createElementVNode } from 'vue';
import '../../../hooks/index.mjs';
import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
import { useNamespace } from '../../../hooks/use-namespace/index.mjs';

const __default__ = defineComponent({
  name: "VWeather"
});
const _sfc_main = defineComponent({
  ...__default__,
  setup(__props) {
    const ns = useNamespace("weather");
    const _cloud = ref();
    let timer = 0;
    let timerTwo = 0;
    function rain() {
      var _a;
      const el = document.createElement("div");
      el.classList.add("raindrop");
      (_a = _cloud.value) == null ? void 0 : _a.appendChild(el);
      const offsetX = Math.floor(Math.random() * 230);
      const duration = Math.random() * 0.5;
      const w = Math.random() * 5;
      const h = Math.random() * 50;
      el.style.left = `${offsetX}px`;
      el.style.width = `${0.5 * w}px`;
      el.style.height = `${0.5 * h}px`;
      el.style.animationDuration = `${1 + duration}s`;
      timer = setTimeout(() => {
        var _a2;
        (_a2 = _cloud.value) == null ? void 0 : _a2.removeChild(el);
      }, 2e3);
    }
    onMounted(() => {
      timerTwo = setInterval(rain, 20);
    });
    onUnmounted(() => {
      timer && clearTimeout(timer);
      timerTwo && clearInterval(timerTwo);
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", {
        class: normalizeClass(unref(ns).b())
      }, [
        createElementVNode("div", {
          ref_key: "_cloud",
          ref: _cloud,
          class: "cloud"
        }, null, 512)
      ], 2);
    };
  }
});
var Weather = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "G:\\My_Projects\\visual-design\\packages\\components\\weather\\src\\weather.vue"]]);

export { Weather as default };
//# sourceMappingURL=weather2.mjs.map