choo-taro-ui-vue3/lib/steps/index.js

Taro UI Rewritten in Vue 3.0

import { defineComponent, computed, toRef, renderList, Fragment, openBlock, createElementBlock, createCommentVNode, resolveComponent, createBlock, normalizeClass, normalizeStyle, toDisplayString, createTextVNode, withCtx, createVNode, mergeProps } from 'vue';
import { useIconStyle } from '../composables';

const AtSteps = defineComponent({
  name: "AtSteps",
  emits: {
    "change": (current) => !!(typeof current === "number")
  },
  props: {
    current: {
      type: Number,
      default: 0
    },
    items: {
      type: Array,
      default: []
    }
  },
  setup(props, { emit }) {
    const genStepItemClasses = computed(() => (i) => ({
      "at-steps__item": true,
      "at-steps__item--active": i === props.current,
      "at-steps__item--inactive": i !== props.current
    }));
    const genItemStatusClasses = computed(() => (item) => ({
      "at-icon": true,
      "at-steps__single-icon": true,
      "at-icon-check-circle": item.status === "success",
      "at-icon-close-circle": item.status === "error",
      "at-steps__single-icon--success": item.status === "success",
      "at-steps__single-icon--error": item.status === "error"
    }));
    const genItemIconClasses = computed(() => (item) => ({
      "at-icon": true,
      "at-steps__circle-icon": true,
      [`at-icon-${item.icon?.value}`]: Boolean(item.icon && item.icon.value)
    }));
    const genItemIconStyle = (item, i) => {
      const iconInfo = props.current === i ? {
        value: item.icon.value,
        size: item.icon.size,
        color: item.icon.activeColor
      } : {
        value: item.icon.value,
        size: item.icon.size,
        color: item.icon.inactiveColor
      };
      const { iconStyle } = useIconStyle(iconInfo);
      return iconStyle.value;
    };
    function handleClick(current) {
      emit("change", current);
    }
    return {
      items: toRef(props, "items"),
      genItemIconClasses,
      genStepItemClasses,
      genItemStatusClasses,
      genItemIconStyle,
      handleClick
    };
  }
});

// Binding optimization for webpack code-split
const _renderList = renderList, _Fragment = Fragment, _openBlock = openBlock, _createElementBlock = createElementBlock, _createCommentVNode = createCommentVNode, _resolveComponent = resolveComponent, _createBlock = createBlock, _normalizeClass = normalizeClass, _normalizeStyle = normalizeStyle, _toDisplayString = toDisplayString, _createTextVNode = createTextVNode, _withCtx = withCtx, _createVNode = createVNode, _mergeProps = mergeProps;

function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_taro_view = process.env.TARO_ENV === "h5" ? _resolveComponent("taro-view") : "view";
  const _component_taro_text = process.env.TARO_ENV === "h5" ? _resolveComponent("taro-text") : "text";

  return (_openBlock(), _createBlock(_component_taro_view, _mergeProps(_ctx.$attrs, { class: "at-steps" }), {
    default: _withCtx(() => [
      (!!_ctx.items)
        ? (_openBlock(true), _createElementBlock(_Fragment, { key: 0 }, _renderList(_ctx.items, (item, i) => {
            return (_openBlock(), _createBlock(_component_taro_view, {
              key: `${item.title}-${i}`,
              class: _normalizeClass(_ctx.genStepItemClasses(i)),
              onTap: $event => (_ctx.handleClick(i))
            }, {
              default: _withCtx(() => [
                _createCommentVNode(" circular wrap "),
                _createVNode(_component_taro_view, { class: "at-steps__circular-wrap" }, {
                  default: _withCtx(() => [
                    _createCommentVNode(" left line "),
                    (i !== 0)
                      ? (_openBlock(), _createBlock(_component_taro_view, {
                          key: 0,
                          class: "at-steps__left-line"
                        }))
                      : _createCommentVNode("v-if", true),
                    _createCommentVNode(" status "),
                    (item.status)
                      ? (_openBlock(), _createBlock(_component_taro_view, {
                          key: 1,
                          class: _normalizeClass(_ctx.genItemStatusClasses(item))
                        }, null, 8 /* PROPS */, ["class"]))
                      : (_openBlock(), _createBlock(_component_taro_view, {
                          key: 2,
                          class: "at-steps__circular"
                        }, {
                          default: _withCtx(() => [
                            (item.icon)
                              ? (_openBlock(), _createBlock(_component_taro_text, {
                                  key: 0,
                                  class: _normalizeClass(_ctx.genItemIconClasses(item)),
                                  style: _normalizeStyle(_ctx.genItemIconStyle(item, i))
                                }, null, 8 /* PROPS */, ["class", "style"]))
                              : (_openBlock(), _createBlock(_component_taro_text, {
                                  key: 1,
                                  class: "at-steps__num"
                                }, {
                                  default: _withCtx(() => [
                                    _createTextVNode(_toDisplayString(i+1), 1 /* TEXT */)
                                  ]),
                                  _: 2 /* DYNAMIC */
                                }, 1024 /* DYNAMIC_SLOTS */))
                          ]),
                          _: 2 /* DYNAMIC */
                        }, 1024 /* DYNAMIC_SLOTS */)),
                    _createCommentVNode(" right line "),
                    (i !== _ctx.items.length - 1)
                      ? (_openBlock(), _createBlock(_component_taro_view, {
                          key: 3,
                          class: "at-steps__right-line"
                        }))
                      : _createCommentVNode("v-if", true)
                  ]),
                  _: 2 /* DYNAMIC */
                }, 1024 /* DYNAMIC_SLOTS */),
                _createCommentVNode(" title "),
                _createVNode(_component_taro_view, { class: "at-steps__title" }, {
                  default: _withCtx(() => [
                    _createTextVNode(_toDisplayString(item.title), 1 /* TEXT */)
                  ]),
                  _: 2 /* DYNAMIC */
                }, 1024 /* DYNAMIC_SLOTS */),
                _createCommentVNode(" desc "),
                _createVNode(_component_taro_view, { class: "at-steps__desc" }, {
                  default: _withCtx(() => [
                    _createTextVNode(_toDisplayString(item.desc), 1 /* TEXT */)
                  ]),
                  _: 2 /* DYNAMIC */
                }, 1024 /* DYNAMIC_SLOTS */)
              ]),
              _: 2 /* DYNAMIC */
            }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["class", "onTap"]))
          }), 128 /* KEYED_FRAGMENT */))
        : _createCommentVNode("v-if", true)
    ]),
    _: 1 /* STABLE */
  }, 16 /* FULL_PROPS */))
}


AtSteps.render = _sfc_render;

export default AtSteps;