winbox-ui-next/lib/carousel/carousel-indicator.js

We Design Vue 2.0: A Vue.js 3 UI Library

"use strict";
var vue = require("vue");
var globalConfig = require("../_utils/global-config.js");
var constants = require("./constants.js");
var pluginVue_exportHelper = require("../_virtual/plugin-vue_export-helper");
const _sfc_main = vue.defineComponent({
  name: "Indicator",
  props: {
    count: {
      type: Number,
      default: 2
    },
    activeIndex: {
      type: Number,
      default: 0
    },
    type: {
      type: String,
      validator: (value) => {
        return constants.INDICATORS.includes(value);
      },
      default: "line"
    },
    position: {
      type: String,
      validator: (value) => {
        return constants.INDICATORS_POSITION.includes(value);
      },
      default: "bottom"
    },
    trigger: {
      type: String,
      validator: (value) => {
        return constants.TRIGGERS.includes(value);
      },
      default: "click"
    },
    onSelectIndex: {
      type: Function
    }
  },
  setup(props) {
    const prefixCls = globalConfig.getPrefixCls("carousel-indicator");
    const listeners = vue.computed(() => {
      const { trigger, type, count, onSelectIndex, activeIndex } = props;
      return {
        [trigger === "click" ? "click" : "mouseEnter"]: (event) => {
          event.preventDefault();
          if (type === "slider") {
            const x = event.offsetX;
            const width = event.currentTarget.clientWidth;
            if (event.target === event.currentTarget) {
              const index = ~~(x / width * count);
              index !== activeIndex && onSelectIndex(index);
            }
          } else {
            const index = +event.target.getAttribute("data-index");
            !Number.isNaN(index) && index !== activeIndex && onSelectIndex(index);
          }
        }
      };
    });
    const step = vue.computed(() => {
      if (props.type === "slider") {
        return 100 / props.count;
      }
      return null;
    });
    return {
      prefixCls,
      listeners,
      step
    };
  }
});
const _hoisted_1 = ["data-index"];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  return vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
    class: `${_ctx.prefixCls} ${_ctx.prefixCls}-${_ctx.type} ${_ctx.prefixCls}-${_ctx.position}`
  }, vue.toHandlers(_ctx.listeners)), [
    _ctx.type === "slider" ? (vue.openBlock(), vue.createElementBlock("span", {
      key: 0,
      style: vue.normalizeStyle({ width: `${_ctx.step}%`, left: `${_ctx.activeIndex * _ctx.step}%` }),
      class: vue.normalizeClass(`${_ctx.prefixCls}-item ${_ctx.prefixCls}-item-active`)
    }, null, 6)) : (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 1 }, vue.renderList(Array(_ctx.count), (_, index) => {
      return vue.openBlock(), vue.createElementBlock("span", {
        key: index,
        "data-index": index,
        class: vue.normalizeClass([
          `${_ctx.prefixCls}-item`,
          { [`${_ctx.prefixCls}-item-active`]: index === _ctx.activeIndex }
        ])
      }, null, 10, _hoisted_1);
    }), 128))
  ], 16);
}
var CarouselIndicator = /* @__PURE__ */ pluginVue_exportHelper(_sfc_main, [["render", _sfc_render]]);
module.exports = CarouselIndicator;