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

Taro UI Rewritten in Vue 3.0

import { defineComponent, computed, toRef, resolveComponent, normalizeStyle, createVNode, withCtx, toDisplayString, createTextVNode, openBlock, createBlock, createCommentVNode, normalizeClass, mergeProps } from 'vue';

const AtProgress = defineComponent({
  name: "AtProgress",
  props: {
    color: {
      type: String,
      default: ""
    },
    status: {
      type: String,
      validator: (val) => ["progress", "error", "success"].includes(val)
    },
    percent: {
      type: Number,
      default: 0
    },
    strokeWidth: {
      type: Number,
      default: 10
    },
    hidePercent: Boolean
  },
  setup(props) {
    const percent = computed(() => {
      let p = props.percent;
      if (props.percent < 0) {
        p = 0;
      }
      if (props.percent > 100) {
        p = 100;
      }
      return p;
    });
    const rootClasses = computed(() => ["at-progress", {
      [`at-progress--${props.status}`]: !!props.status
    }]);
    const iconClasses = computed(() => ["at-icon", {
      "at-icon-close-circle": props.status === "error",
      "at-icon-check-circle": props.status === "success"
    }]);
    const progressStyle = computed(() => ({
      width: `${percent.value}%`,
      height: props.strokeWidth && `${props.strokeWidth}px`,
      backgroundColor: props.color
    }));
    return {
      status: toRef(props, "status"),
      hidePercent: toRef(props, "hidePercent"),
      percent,
      rootClasses,
      iconClasses,
      progressStyle
    };
  }
});

// Binding optimization for webpack code-split
const _resolveComponent = resolveComponent, _normalizeStyle = normalizeStyle, _createVNode = createVNode, _withCtx = withCtx, _toDisplayString = toDisplayString, _createTextVNode = createTextVNode, _openBlock = openBlock, _createBlock = createBlock, _createCommentVNode = createCommentVNode, _normalizeClass = normalizeClass, _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: _ctx.rootClasses }), {
    default: _withCtx(() => [
      _createVNode(_component_taro_view, { class: "at-progress__outer" }, {
        default: _withCtx(() => [
          _createVNode(_component_taro_view, { class: "at-progress__outer-inner" }, {
            default: _withCtx(() => [
              _createVNode(_component_taro_view, {
                class: "at-progress__outer-inner-background",
                style: _normalizeStyle(_ctx.progressStyle)
              }, null, 8 /* PROPS */, ["style"])
            ]),
            _: 1 /* STABLE */
          })
        ]),
        _: 1 /* STABLE */
      }),
      (!_ctx.hidePercent)
        ? (_openBlock(), _createBlock(_component_taro_view, {
            key: 0,
            class: "at-progress__content"
          }, {
            default: _withCtx(() => [
              (!_ctx.status || _ctx.status === 'progress')
                ? (_openBlock(), _createBlock(_component_taro_text, { key: 0 }, {
                    default: _withCtx(() => [
                      _createTextVNode(_toDisplayString(`${_ctx.percent}%`), 1 /* TEXT */)
                    ]),
                    _: 1 /* STABLE */
                  }))
                : (_openBlock(), _createBlock(_component_taro_text, {
                    key: 1,
                    class: _normalizeClass(_ctx.iconClasses)
                  }, null, 8 /* PROPS */, ["class"]))
            ]),
            _: 1 /* STABLE */
          }))
        : _createCommentVNode("v-if", true)
    ]),
    _: 1 /* STABLE */
  }, 16 /* FULL_PROPS */, ["class"]))
}


AtProgress.render = _sfc_render;

export default AtProgress;