choo-taro-ui-vue3/lib/segmented-control/index.js

Taro UI Rewritten in Vue 3.0

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

const AtSegmentedControl = defineComponent({
  name: "AtSegmentedControl",
  emits: {
    "click"(index) {
      return !!(typeof index === "number");
    }
  },
  props: {
    current: {
      type: Number,
      default: 0
    },
    color: {
      type: String,
      default: "#fff"
    },
    selectedColor: {
      type: String,
      default: "#6190E8"
    },
    fontSize: {
      type: Number,
      default: 28
    },
    disabled: Boolean,
    values: {
      type: Array,
      default: []
    }
  },
  setup(props, { emit }) {
    const rootClasses = computed(() => ({
      "at-segmented-control": true,
      "at-segmented-control--disabled": props.disabled
    }));
    const rootStyle = computed(() => ({
      borderColor: props.selectedColor
    }));
    const genItemClasses = computed(() => (i) => ({
      "at-segmented-control__item": true,
      "at-segmented-control__item--active": props.current === i
    }));
    const itemStyle = computed(() => ({
      color: props.selectedColor,
      fontSize: pxTransform(parseInt(`${props.fontSize}`)),
      borderColor: props.selectedColor,
      backgroundColor: props.color
    }));
    const selectedItemStyle = computed(() => ({
      color: props.color,
      fontSize: pxTransform(parseInt(`${props.fontSize}`)),
      borderColor: props.selectedColor,
      backgroundColor: props.selectedColor
    }));
    function handleClick(index) {
      if (props.disabled)
        return;
      emit("click", index);
    }
    return {
      values: toRef(props, "values"),
      rootStyle,
      rootClasses,
      genItemClasses,
      itemStyle,
      selectedItemStyle,
      handleClick
    };
  }
});

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

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

  return (_openBlock(), _createBlock(_component_taro_view, _mergeProps(_ctx.$attrs, {
    class: _ctx.rootClasses,
    style: _ctx.rootStyle
  }), {
    default: _withCtx(() => [
      (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.values, (value, i) => {
        return (_openBlock(), _createBlock(_component_taro_view, {
          key: i,
          class: _normalizeClass(_ctx.genItemClasses(i)),
          style: _normalizeStyle(_ctx.current === i ? _ctx.selectedItemStyle : _ctx.itemStyle),
          onTap: $event => (_ctx.handleClick(i))
        }, {
          default: _withCtx(() => [
            _createTextVNode(_toDisplayString(value), 1 /* TEXT */)
          ]),
          _: 2 /* DYNAMIC */
        }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["class", "style", "onTap"]))
      }), 128 /* KEYED_FRAGMENT */))
    ]),
    _: 1 /* STABLE */
  }, 16 /* FULL_PROPS */, ["class", "style"]))
}


AtSegmentedControl.render = _sfc_render;

export default AtSegmentedControl;