choo-taro-ui-vue3/lib/nav-bar/index.js

Taro UI Rewritten in Vue 3.0

import { defineComponent, computed, toRefs, createCommentVNode, resolveComponent, normalizeClass, normalizeStyle, openBlock, createBlock, toDisplayString, createTextVNode, withCtx, createVNode, renderSlot, mergeProps } from 'vue';
import { useIconClasses, useIconStyle } from '../composables';
import { pxTransform } from '../utils';

const AtNavBar = defineComponent({
  name: "AtNavBar",
  emits: [
    "click-left-icon",
    "click-right-first-icon",
    "click-right-second-icon"
  ],
  props: {
    title: {
      type: String,
      default: ""
    },
    fixed: Boolean,
    border: {
      type: Boolean,
      default: true
    },
    color: {
      type: String,
      default: "#6190E8"
    },
    leftText: {
      type: String,
      default: ""
    },
    leftIconType: {
      type: [String, Object],
      default: "chevron-left"
    },
    rightFirstIconType: [String, Object],
    rightSecondIconType: [String, Object]
  },
  setup(props, { emit }) {
    const linkStyle = computed(() => ({ color: props.color }));
    const rootClasses = computed(() => ({
      "at-nav-bar": true,
      "at-nav-bar--fixed": props.fixed,
      "at-nav-bar--no-border": !props.border
    }));
    const genContainerClasses = computed(() => (iconType) => ({
      "at-nav-bar__container": true,
      "at-nav-bar__container--hide": !Boolean(iconType)
    }));
    const defaultIconInfo = {
      prefixClass: "at-icon",
      value: "",
      color: "",
      size: 24
    };
    const genIconInfo = (iconType) => {
      const iconInfo = computed(() => iconType instanceof Object ? { ...defaultIconInfo, ...iconType } : { ...defaultIconInfo, value: iconType || "" });
      if (iconInfo.value.size) {
        iconInfo.value.size = parseInt(iconInfo.value.size.toString()) * 2;
      }
      return iconInfo;
    };
    const leftIconInfo = genIconInfo(props.leftIconType);
    const rightFirstIconInfo = genIconInfo(props.rightFirstIconType);
    const rightSecondIconInfo = genIconInfo(props.rightSecondIconType);
    const {
      iconClasses: leftIconClasses
    } = useIconClasses(leftIconInfo.value, true);
    const {
      iconStyle: leftIconStyle
    } = useIconStyle(leftIconInfo.value, void 0, void 0, pxTransform);
    const {
      iconClasses: rightFirstIconClasses
    } = useIconClasses(rightFirstIconInfo.value, true);
    const {
      iconStyle: rightFirstIconStyle
    } = useIconStyle(rightFirstIconInfo.value, void 0, void 0, pxTransform);
    const {
      iconClasses: rightSecondIconClasses
    } = useIconClasses(rightSecondIconInfo.value, true);
    const {
      iconStyle: rightSecondIconStyle
    } = useIconStyle(rightSecondIconInfo.value, void 0, void 0, pxTransform);
    function handleClickLeftIcon(event) {
      emit("click-left-icon", event);
    }
    function handleClickRightFirstIcon(event) {
      emit("click-right-first-icon", event);
    }
    function handleClickRightSecondIcon(event) {
      emit("click-right-second-icon", event);
    }
    return {
      ...toRefs(props),
      linkStyle,
      rootClasses,
      genContainerClasses,
      leftIconStyle,
      leftIconClasses,
      rightFirstIconStyle,
      rightFirstIconClasses,
      rightSecondIconStyle,
      rightSecondIconClasses,
      handleClickLeftIcon,
      handleClickRightFirstIcon,
      handleClickRightSecondIcon
    };
  }
});

// Binding optimization for webpack code-split
const _createCommentVNode = createCommentVNode, _resolveComponent = resolveComponent, _normalizeClass = normalizeClass, _normalizeStyle = normalizeStyle, _openBlock = openBlock, _createBlock = createBlock, _toDisplayString = toDisplayString, _createTextVNode = createTextVNode, _withCtx = withCtx, _createVNode = createVNode, _renderSlot = renderSlot, _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: _ctx.rootClasses }), {
    default: _withCtx(() => [
      _createCommentVNode(" left-view "),
      _createVNode(_component_taro_view, {
        class: "at-nav-bar__left-view",
        style: _normalizeStyle(_ctx.linkStyle),
        onTap: _ctx.handleClickLeftIcon
      }, {
        default: _withCtx(() => [
          (_ctx.leftIconType)
            ? (_openBlock(), _createBlock(_component_taro_text, {
                key: 0,
                class: _normalizeClass(_ctx.leftIconClasses),
                style: _normalizeStyle(_ctx.leftIconStyle)
              }, null, 8 /* PROPS */, ["class", "style"]))
            : _createCommentVNode("v-if", true),
          (_ctx.leftText)
            ? (_openBlock(), _createBlock(_component_taro_text, {
                key: 1,
                class: "at-nav-bar__text"
              }, {
                default: _withCtx(() => [
                  _createTextVNode(_toDisplayString(_ctx.leftText), 1 /* TEXT */)
                ]),
                _: 1 /* STABLE */
              }))
            : _createCommentVNode("v-if", true)
        ]),
        _: 1 /* STABLE */
      }, 8 /* PROPS */, ["style", "onTap"]),
      _createCommentVNode(" title "),
      _createVNode(_component_taro_view, { class: "at-nav-bar__title" }, {
        default: _withCtx(() => [
          (_ctx.title)
            ? (_openBlock(), _createBlock(_component_taro_text, { key: 0 }, {
                default: _withCtx(() => [
                  _createTextVNode(_toDisplayString(_ctx.title), 1 /* TEXT */)
                ]),
                _: 1 /* STABLE */
              }))
            : _renderSlot(_ctx.$slots, "default", { key: 1 })
        ]),
        _: 3 /* FORWARDED */
      }),
      _createCommentVNode(" right-view "),
      _createVNode(_component_taro_view, { class: "at-nav-bar__right-view" }, {
        default: _withCtx(() => [
          _createCommentVNode(" 2nd icon "),
          _createVNode(_component_taro_view, {
            class: _normalizeClass(_ctx.genContainerClasses(_ctx.rightSecondIconType)),
            style: _normalizeStyle(_ctx.linkStyle),
            onTap: _ctx.handleClickRightSecondIcon
          }, {
            default: _withCtx(() => [
              (_ctx.rightSecondIconType)
                ? (_openBlock(), _createBlock(_component_taro_text, {
                    key: 0,
                    class: _normalizeClass(_ctx.rightSecondIconClasses),
                    style: _normalizeStyle(_ctx.rightSecondIconStyle)
                  }, null, 8 /* PROPS */, ["class", "style"]))
                : _createCommentVNode("v-if", true)
            ]),
            _: 1 /* STABLE */
          }, 8 /* PROPS */, ["class", "style", "onTap"]),
          _createCommentVNode(" 1st icon "),
          _createVNode(_component_taro_view, {
            class: _normalizeClass(_ctx.genContainerClasses(_ctx.rightFirstIconType)),
            style: _normalizeStyle(_ctx.linkStyle),
            onTap: _ctx.handleClickRightFirstIcon
          }, {
            default: _withCtx(() => [
              (_ctx.rightFirstIconType)
                ? (_openBlock(), _createBlock(_component_taro_text, {
                    key: 0,
                    class: _normalizeClass(_ctx.rightFirstIconClasses),
                    style: _normalizeStyle(_ctx.rightFirstIconStyle)
                  }, null, 8 /* PROPS */, ["class", "style"]))
                : _createCommentVNode("v-if", true)
            ]),
            _: 1 /* STABLE */
          }, 8 /* PROPS */, ["class", "style", "onTap"])
        ]),
        _: 1 /* STABLE */
      })
    ]),
    _: 3 /* FORWARDED */
  }, 16 /* FULL_PROPS */, ["class"]))
}


AtNavBar.render = _sfc_render;

export default AtNavBar;