yk-element-components-v2/animation/index.mjs

const p = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAATCAYAAAB2pebxAAABVUlEQVQ4jZ3UP0jXURQF8I+/BBOCIqxFt8ClgjAcAwNpcdDRRfg16GqL4eLe6l5NakGDfyYFERddRBRRjMCgLSGHoNBFkgtX/cHX359+Z3lw3zmHc9+777X8K7ergdsIwinOqtFKhQpdeIdD/MFRrodZ76xnMo5dtKGcKe7nWs76XvKuUNnONF5iCN8L+a7xCPNYw5vKJGPox4s6BrK94L3CqExyF1/T5KAgqY4nWEV3KVOs/KdBYB/LoQ+TAcwVKI0hdAOljLXdpMlO6MMkzuSksN0YfuFemBzjQZMmD/EzTL7heWG7MfSEPkwWMdKkSeiWwuRDTuqzAqU2In0f3pfycb3FF3TUlF0jzvAzJvD3cuxnsriZV14LT7GBT5iNQmsFewo/sI6FNN3C7xyDXgznA52MNi6FN31KEfU1BvEYd7LlGPMlfMz5uEK9ny1wC+dVd3EBOLlE8fs9dWcAAAAASUVORK5CYII=", _ = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAATCAYAAAB2pebxAAABpUlEQVQ4jZXUT4hOYRQG8J9LIYpkbJjZqFHjTyJhoahpNrMYsWEhnwVbLMjGXtmYPRbyrxBmNUrTLPyLRKJPRIkFxUIRG41OnRlv351vvjyb9+15z3nuc9773DtrojHfDJiHKPiF3+3KqhrDCpxCEz/wLtdm8ss7iRzGc8xFI10sybWR/Iusm0I5zjB2YCfe1/z9w0rcxBiOlE4OoR/bOgjI8aJuAAelk0V4nSKvai3tsQZ30Vulizv/IbALj/ASo9EfIoO4XCudHltxA5vzNPoGq7T1tGhpF5xNeIAJ9CX3LPpDJO7kW5L38AkLWgS24HHuV2VmAl+xOES+oCvJ25mLZiEUAg9z34u3hfgyfA6RN9iY5GnsR3da310I9LUIBDZEf5VP31ccXMBerMP1wkFTHdE3EiLnMqnri5KrOIqPeQetDqT77Thb5cd1HNewtCg6g54ctxVd+aBj+DkZ+4tJxj3EK58Ja3EfV3ApiDlF9Ul8wDhupegTfM8YRE725Ad6IsaYbJzupxRWD2AIq7EwR46Yj+B85mMKnf5sgdn40/YUfwFW0VvxFT8TTAAAAABJRU5ErkJggg==";
function v(n, e, a, l, i, d, r, u) {
  var t = typeof n == "function" ? n.options : n;
  e && (t.render = e, t.staticRenderFns = a, t._compiled = !0), l && (t.functional = !0), d && (t._scopeId = "data-v-" + d);
  var o;
  if (r ? (o = function(s) {
    s = s || this.$vnode && this.$vnode.ssrContext || this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext, !s && typeof __VUE_SSR_CONTEXT__ < "u" && (s = __VUE_SSR_CONTEXT__), i && i.call(this, s), s && s._registeredComponents && s._registeredComponents.add(r);
  }, t._ssrRegister = o) : i && (o = u ? function() {
    i.call(
      this,
      (t.functional ? this.parent : this).$root.$options.shadowRoot
    );
  } : i), o)
    if (t.functional) {
      t._injectStyles = o;
      var m = t.render;
      t.render = function(h, A) {
        return o.call(A), m(h, A);
      };
    } else {
      var c = t.beforeCreate;
      t.beforeCreate = c ? [].concat(c, o) : [o];
    }
  return {
    exports: n,
    options: t
  };
}
const g = {
  name: "yk-animation",
  props: {
    wrapWidth: {
      type: Number,
      default: 250
    },
    itemWidth: {
      type: Number,
      default: 120
    },
    itemHeight: {
      type: Number,
      default: 120
    },
    boxWidth: {
      type: Number,
      default: 50
    },
    boxHeight: {
      type: Number,
      default: 50
    },
    preSize: {
      type: Number,
      default: 12
    },
    selectedIdx: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      activeIndex: null,
      selectImg: p,
      selectedImg: _,
      selectVal: 1,
      animationList: [
        "scale-in-center",
        "fade-in-fwd",
        "jello-horizontal",
        "jello-vertical",
        "wobble-hor-top",
        "wobble-hor-bottom"
      ]
    };
  },
  methods: {
    handleClick(n, e) {
      console.log("item", n), console.log("idx", e), this.activeIndex = e;
    },
    handleSelect(n, e) {
      this.selectedIndex = e, this.$emit("select-item", n), this.$emit("select-index", e);
    },
    removeAnimation() {
      this.activeIndex = null;
    }
  }
};
var b = function() {
  var e = this, a = e._self._c;
  return a("div", { staticClass: "ani-wrapper", style: { width: e.wrapWidth + "px" } }, e._l(e.animationList, function(l, i) {
    return a("div", { key: `ani_${i}`, staticClass: "ani-item", style: { width: e.itemWidth + "px", height: e.itemHeight + "px" }, on: { click: function(d) {
      return e.handleSelect(l, i);
    } } }, [a("div", { staticClass: "ani-item-title" }, [e._v(e._s(l))]), a("div", { class: [
      "ani-item-box",
      e.activeIndex === i ? `${e.animationList[i]}` : ""
    ], style: { width: e.boxWidth + "px", height: e.boxHeight + "px" }, on: { animationend: e.removeAnimation } }), a("div", { staticClass: "ani-item-select" }, [a("img", { attrs: { src: e.selectedIdx === i ? e.selectedImg : e.selectImg } })]), a("div", { staticClass: "ani-item-pre", style: { fontSize: e.preSize + "px" }, on: { click: function(d) {
      return d.stopPropagation(), e.handleClick(l, i);
    } } }, [e._v(" \u9884\u89C8 ")])]);
  }), 0);
}, I = [], C = /* @__PURE__ */ v(
  g,
  b,
  I,
  !1,
  null,
  "14fb5edb",
  null,
  null
);
const f = C.exports, R = {
  install(n) {
    n.component(f.name, f);
  }
};
export {
  R as default
};