import { defineComponent, useCssVars, ref, computed, resolveComponent, unref, openBlock, createElementBlock, createVNode, withCtx, createTextVNode, Fragment, renderList, createBlock, normalizeClass, toDisplayString, createCommentVNode } from "vue";
import { y as useDesignStore, b6 as _sfc_main$1, _ as _export_sfc } from "./index-e2623483.js";
import { u as useTargetData } from "./useTargetData.hook-2b5299d6.js";
const animations = [
  {
    label: "强调动画",
    children: [
      { label: "弹跳", value: "bounce" },
      { label: "闪烁", value: "flash" },
      { label: "放大缩小", value: "pulse" },
      { label: "放大缩小弹簧", value: "rubberBand" },
      { label: "左右晃动", value: "headShake" },
      { label: "左右扇形摇摆", value: "swing" },
      { label: "放大晃动缩小", value: "tada" },
      { label: "扇形摇摆", value: "wobble" },
      { label: "左右上下晃动", value: "jello" }
    ]
  },
  {
    label: "移入动画",
    children: [
      { label: "渐显", value: "fadeIn" },
      { label: "向右进入", value: "fadeInLeft" },
      { label: "向左进入", value: "fadeInRight" },
      { label: "向上进入", value: "fadeInUp" },
      { label: "向下进入", value: "fadeInDown" },
      { label: "向右长距进入", value: "fadeInLeftBig" },
      { label: "向左长距进入", value: "fadeInRightBig" },
      { label: "向上长距进入", value: "fadeInUpBig" },
      { label: "向下长距进入", value: "fadeInDownBig" },
      { label: "旋转进入", value: "rotateIn" },
      { label: "左顺时针旋转", value: "rotateInDownLeft" },
      { label: "右逆时针旋转", value: "rotateInDownRight" },
      { label: "左逆时针旋转", value: "rotateInUpLeft" },
      { label: "右逆时针旋转", value: "rotateInUpRight" },
      { label: "弹入", value: "bounceIn" },
      { label: "向右弹入", value: "bounceInLeft" },
      { label: "向左弹入", value: "bounceInRight" },
      { label: "向上弹入", value: "bounceInUp" },
      { label: "向下弹入", value: "bounceInDown" },
      { label: "光速从右进入", value: "lightSpeedInRight" },
      { label: "光速从左进入", value: "lightSpeedInLeft" },
      { label: "光速从右退出", value: "lightSpeedOutRight" },
      { label: "光速从左退出", value: "lightSpeedOutLeft" },
      { label: "Y轴旋转", value: "flip" },
      { label: "中心X轴旋转", value: "flipInX" },
      { label: "中心Y轴旋转", value: "flipInY" },
      { label: "左长半径旋转", value: "rollIn" },
      { label: "由小变大进入", value: "zoomIn" },
      { label: "左变大进入", value: "zoomInLeft" },
      { label: "右变大进入", value: "zoomInRight" },
      { label: "向上变大进入", value: "zoomInUp" },
      { label: "向下变大进入", value: "zoomInDown" },
      { label: "向右滑动展开", value: "slideInLeft" },
      { label: "向左滑动展开", value: "slideInRight" },
      { label: "向上滑动展开", value: "slideInUp" },
      { label: "向下滑动展开", value: "slideInDown" }
    ]
  }
];
const _hoisted_1 = {
  key: 0,
  class: "go-chart-configurations-animations"
};
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "index",
  setup(__props) {
    useCssVars((_ctx) => ({
      "d4c88a06": themeColor.value
    }));
    const designStore = useDesignStore();
    const hoverPreviewAnimate = ref("");
    const { targetData } = useTargetData();
    const themeColor = computed(() => {
      return designStore.getAppTheme;
    });
    const activeIndex = (value) => {
      const selectValue = targetData.value.styles.animations;
      if (!selectValue.length)
        return false;
      return selectValue[0] === value;
    };
    const clearAnimation = () => {
      targetData.value.styles.animations = [];
    };
    const addAnimation = (item) => {
      targetData.value.styles.animations = [item.value];
    };
    return (_ctx, _cache) => {
      const _component_n_button = resolveComponent("n-button");
      const _component_n_grid_item = resolveComponent("n-grid-item");
      const _component_n_grid = resolveComponent("n-grid");
      return unref(targetData) ? (openBlock(), createElementBlock("div", _hoisted_1, [
        createVNode(_component_n_button, {
          class: "clear-btn go-my-2",
          disabled: !unref(targetData).styles.animations.length,
          onClick: clearAnimation
        }, {
          default: withCtx(() => [
            createTextVNode(" 清除动画 ")
          ]),
          _: 1
        }, 8, ["disabled"]),
        (openBlock(true), createElementBlock(Fragment, null, renderList(unref(animations), (item, index2) => {
          return openBlock(), createBlock(unref(_sfc_main$1), {
            key: index2,
            name: item.label,
            expanded: true
          }, {
            default: withCtx(() => [
              createVNode(_component_n_grid, {
                "x-gap": 6,
                "y-gap": 10,
                cols: 3
              }, {
                default: withCtx(() => [
                  (openBlock(true), createElementBlock(Fragment, null, renderList(item.children, (childrenItem, index22) => {
                    return openBlock(), createBlock(_component_n_grid_item, {
                      class: normalizeClass(["animation-item go-transition-quick", [
                        activeIndex(childrenItem.value) && "active",
                        hoverPreviewAnimate.value === childrenItem.value && `animate__animated  animate__${childrenItem.value}`
                      ]]),
                      key: index22,
                      onMouseover: ($event) => hoverPreviewAnimate.value = childrenItem.value,
                      onClick: ($event) => addAnimation(childrenItem)
                    }, {
                      default: withCtx(() => [
                        createTextVNode(toDisplayString(childrenItem.label), 1)
                      ]),
                      _: 2
                    }, 1032, ["class", "onMouseover", "onClick"]);
                  }), 128))
                ]),
                _: 2
              }, 1024)
            ]),
            _: 2
          }, 1032, ["name"]);
        }), 128))
      ])) : createCommentVNode("", true);
    };
  }
});
const index_vue_vue_type_style_index_0_scoped_6ba9ba9c_lang = "";
const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-6ba9ba9c"]]);
export {
  index as default
};
