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

Taro UI Rewritten in Vue 3.0

import { defineComponent, computed, renderList, Fragment, openBlock, createElementBlock, resolveComponent, normalizeClass, normalizeStyle, createVNode, withCtx, createBlock, mergeProps } from 'vue';
import { useModelValue } from '../composables';
import { pxTransform, convertToUnit } from '../utils';

const AtRate = defineComponent({
  name: "AtRate",
  emits: ["update:modelValue"],
  props: {
    size: {
      type: [Number, String],
      default: 20,
      validator: (prop) => {
        return typeof parseInt(`${prop}`) === "number";
      }
    },
    modelValue: { type: Number, default: 0 },
    max: {
      type: [Number, String],
      default: 5,
      validator: (prop) => {
        return typeof parseInt(`${prop}`) === "number";
      }
    },
    margin: {
      type: [Number, String],
      default: 5,
      validator: (prop) => {
        return typeof parseInt(`${prop}`) === "number";
      }
    },
    icon: {
      type: String,
      default: "star",
      validator: (prop) => ["star", "heart"].includes(prop)
    },
    color: { type: String, default: "#FFCA3E" }
  },
  setup(props, { emit }) {
    const modelValue = useModelValue(props, emit);
    const iconMarginStyle = computed(() => ({
      marginRight: pxTransform(parseInt(`${props.margin}`))
    }));
    const genIconStyle = computed(() => (cls) => ({
      fontSize: convertToUnit(props.size),
      color: cls.includes("at-rate__icon--on") ? props.color : ""
    }));
    const iconColorClasses = computed(() => {
      const classNames = [];
      const floorValue = Math.floor(props.modelValue);
      const ceilValue = Math.ceil(props.modelValue);
      for (let i = 0; i < parseInt(`${props.max}`); i++) {
        if (floorValue > i) {
          classNames.push("at-rate__icon at-rate__icon--on");
        } else if (ceilValue - 1 === i) {
          classNames.push("at-rate__icon at-rate__icon--half");
        } else {
          classNames.push("at-rate__icon at-rate__icon--off");
        }
      }
      return classNames;
    });
    function handleClick(index) {
      modelValue.value = index;
    }
    return {
      genIconStyle,
      iconMarginStyle,
      iconColorClasses,
      handleClick
    };
  }
});

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

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

  return (_openBlock(), _createBlock(_component_taro_view, _mergeProps(_ctx.$attrs, { class: "at-rate" }), {
    default: _withCtx(() => [
      (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.iconColorClasses, (className, i) => {
        return (_openBlock(), _createBlock(_component_taro_view, {
          key: `at-rate-star-${i}`,
          class: _normalizeClass(className),
          style: _normalizeStyle(_ctx.iconMarginStyle),
          onTap: $event => (_ctx.handleClick(i + 1))
        }, {
          default: _withCtx(() => [
            _createVNode(_component_taro_text, {
              class: _normalizeClass(['at-icon', `at-icon-${_ctx.icon}-2`]),
              style: _normalizeStyle(_ctx.genIconStyle(className))
            }, null, 8 /* PROPS */, ["class", "style"]),
            _createVNode(_component_taro_view, { class: "at-rate__left" }, {
              default: _withCtx(() => [
                _createVNode(_component_taro_text, {
                  class: _normalizeClass(['at-icon', `at-icon-${_ctx.icon}-2`]),
                  style: _normalizeStyle(_ctx.genIconStyle(className))
                }, null, 8 /* PROPS */, ["class", "style"])
              ]),
              _: 2 /* DYNAMIC */
            }, 1024 /* DYNAMIC_SLOTS */)
          ]),
          _: 2 /* DYNAMIC */
        }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["class", "style", "onTap"]))
      }), 128 /* KEYED_FRAGMENT */))
    ]),
    _: 1 /* STABLE */
  }, 16 /* FULL_PROPS */))
}


AtRate.render = _sfc_render;

export default AtRate;