visual-design/lib/components/weather/src/weather2.js

A Component Library for Vue 3

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
require('../../../hooks/index.js');
var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
var index = require('../../../hooks/use-namespace/index.js');

const __default__ = vue.defineComponent({
  name: "VWeather"
});
const _sfc_main = vue.defineComponent({
  ...__default__,
  setup(__props) {
    const ns = index.useNamespace("weather");
    const _cloud = vue.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);
    }
    vue.onMounted(() => {
      timerTwo = setInterval(rain, 20);
    });
    vue.onUnmounted(() => {
      timer && clearTimeout(timer);
      timerTwo && clearInterval(timerTwo);
    });
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createElementBlock("div", {
        class: vue.normalizeClass(vue.unref(ns).b())
      }, [
        vue.createElementVNode("div", {
          ref_key: "_cloud",
          ref: _cloud,
          class: "cloud"
        }, null, 512)
      ], 2);
    };
  }
});
var Weather = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "G:\\My_Projects\\visual-design\\packages\\components\\weather\\src\\weather.vue"]]);

exports["default"] = Weather;
//# sourceMappingURL=weather2.js.map