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

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

import { defineComponent, computed, openBlock, createElementBlock, mergeProps, toHandlers, normalizeStyle, normalizeClass, Fragment, renderList } from "vue";
import { getPrefixCls } from "../_utils/global-config.js";
import { INDICATORS, INDICATORS_POSITION, TRIGGERS } from "./constants.js";
import _export_sfc from "../_virtual/plugin-vue_export-helper";
const _sfc_main = defineComponent({
  name: "Indicator",
  props: {
    count: {
      type: Number,
      default: 2
    },
    activeIndex: {
      type: Number,
      default: 0
    },
    type: {
      type: String,
      validator: (value) => {
        return INDICATORS.includes(value);
      },
      default: "line"
    },
    position: {
      type: String,
      validator: (value) => {
        return INDICATORS_POSITION.includes(value);
      },
      default: "bottom"
    },
    trigger: {
      type: String,
      validator: (value) => {
        return TRIGGERS.includes(value);
      },
      default: "click"
    },
    onSelectIndex: {
      type: Function
    }
  },
  setup(props) {
    const prefixCls = getPrefixCls("carousel-indicator");
    const listeners = 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 = 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 openBlock(), createElementBlock("div", mergeProps({
    class: `${_ctx.prefixCls} ${_ctx.prefixCls}-${_ctx.type} ${_ctx.prefixCls}-${_ctx.position}`
  }, toHandlers(_ctx.listeners)), [
    _ctx.type === "slider" ? (openBlock(), createElementBlock("span", {
      key: 0,
      style: normalizeStyle({ width: `${_ctx.step}%`, left: `${_ctx.activeIndex * _ctx.step}%` }),
      class: normalizeClass(`${_ctx.prefixCls}-item ${_ctx.prefixCls}-item-active`)
    }, null, 6)) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(Array(_ctx.count), (_, index) => {
      return openBlock(), createElementBlock("span", {
        key: index,
        "data-index": index,
        class: normalizeClass([
          `${_ctx.prefixCls}-item`,
          { [`${_ctx.prefixCls}-item-active`]: index === _ctx.activeIndex }
        ])
      }, null, 10, _hoisted_1);
    }), 128))
  ], 16);
}
var CarouselIndicator = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export { CarouselIndicator as default };