choo-taro-ui-vue3/lib/activity-indicator/index.js

Taro UI Rewritten in Vue 3.0

import { defineComponent, computed, renderList, Fragment, openBlock, createElementBlock, resolveComponent, normalizeStyle, createVNode, mergeProps, withCtx, createBlock, toRefs, createCommentVNode, toDisplayString, createTextVNode } from 'vue';
import { pxTransform } from '../utils';

const AtLoading = defineComponent({
  name: "AtLoading",
  props: {
    size: { type: [String, Number], default: 0 },
    color: [String, Number]
  },
  setup(props) {
    const loadingSize = computed(() => {
      return pxTransform(parseInt(`${props.size}`));
    });
    const sizeStyle = computed(() => ({
      width: loadingSize.value,
      height: loadingSize.value
    }));
    const ringStyle = computed(() => ({
      ...sizeStyle.value,
      border: props.color ? `1px solid ${props.color}` : "",
      "border-color": props.color ? `${props.color} transparent transparent transparent` : ""
    }));
    return {
      sizeStyle,
      ringStyle
    };
  }
});

// Binding optimization for webpack code-split
const _renderList = renderList, _Fragment = Fragment, _openBlock$1 = openBlock, _createElementBlock = createElementBlock, _resolveComponent$1 = resolveComponent, _normalizeStyle = normalizeStyle, _createVNode$1 = createVNode, _mergeProps$1 = mergeProps, _withCtx$1 = withCtx, _createBlock$1 = createBlock;

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

  return (_openBlock$1(), _createBlock$1(_component_taro_view, _mergeProps$1(_ctx.$attrs, {
    class: "at-loading",
    style: _ctx.sizeStyle
  }), {
    default: _withCtx$1(() => [
      (_openBlock$1(), _createElementBlock(_Fragment, null, _renderList(3, (n) => {
        return _createVNode$1(_component_taro_view, {
          key: n,
          style: _normalizeStyle(_ctx.ringStyle),
          class: "at-loading__ring"
        }, null, 8 /* PROPS */, ["style"])
      }), 64 /* STABLE_FRAGMENT */))
    ]),
    _: 1 /* STABLE */
  }, 16 /* FULL_PROPS */, ["style"]))
}


AtLoading.render = _sfc_render$1;

const AtActivityIndicator = defineComponent({
  name: "AtActivityIndicator",
  components: {
    AtLoading
  },
  props: {
    size: {
      type: Number,
      default: 48
    },
    mode: {
      type: String,
      default: "normal"
    },
    color: {
      type: String,
      default: "#6190E8"
    },
    content: {
      type: String,
      default: ""
    },
    isOpened: {
      type: Boolean,
      default: true
    }
  },
  setup(props) {
    return { ...toRefs(props) };
  }
});

// Binding optimization for webpack code-split
const _createCommentVNode = createCommentVNode, _resolveComponent = resolveComponent, _createVNode = createVNode, _withCtx = withCtx, _toDisplayString = toDisplayString, _createTextVNode = createTextVNode, _openBlock = openBlock, _createBlock = createBlock, _mergeProps = mergeProps;

function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_at_loading = _resolveComponent("at-loading");
  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-activity-indicator', {
      'at-activity-indicator--center': _ctx.mode === 'center',
      'at-activity-indicator--isopened': _ctx.isOpened
    }]
  }), {
    default: _withCtx(() => [
      _createCommentVNode(" loading "),
      _createVNode(_component_taro_view, { class: "at-activity-indicator__body" }, {
        default: _withCtx(() => [
          _createVNode(_component_at_loading, {
            size: _ctx.size,
            color: _ctx.color
          }, null, 8 /* PROPS */, ["size", "color"])
        ]),
        _: 1 /* STABLE */
      }),
      _createCommentVNode(" text content "),
      (_ctx.content)
        ? (_openBlock(), _createBlock(_component_taro_text, {
            key: 0,
            class: "at-activity-indicator__content"
          }, {
            default: _withCtx(() => [
              _createTextVNode(_toDisplayString(_ctx.content), 1 /* TEXT */)
            ]),
            _: 1 /* STABLE */
          }))
        : _createCommentVNode("v-if", true)
    ]),
    _: 1 /* STABLE */
  }, 16 /* FULL_PROPS */, ["class"]))
}


AtActivityIndicator.render = _sfc_render;

export default AtActivityIndicator;