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

Taro UI Rewritten in Vue 3.0

var __defProp = Object.defineProperty;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, {enumerable: true, configurable: true, writable: true, value}) : obj[key] = value;
var __objSpread = (a, b) => {
  for (var prop in b || (b = {}))
    if (__hasOwnProp.call(b, prop))
      __defNormalProp(a, prop, b[prop]);
  if (__getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(b)) {
      if (__propIsEnum.call(b, prop))
        __defNormalProp(a, prop, b[prop]);
    }
  return a;
};
import {h, defineComponent, computed, mergeProps} from "vue";
import {Text, View} from "@tarojs/components";
import {mergeStyle, pxTransform} from "../utils/common";
const AtNavBar = defineComponent({
  name: "AtNavBar",
  props: {
    title: {
      type: String,
      default: ""
    },
    fixed: Boolean,
    border: {
      type: Boolean,
      default: true
    },
    color: {
      type: String,
      default: "#6190E8"
    },
    leftIconType: {
      type: [String, Object],
      default: ""
    },
    leftText: {
      type: String,
      default: ""
    },
    rightFirstIconType: {
      type: [String, Object],
      default: ""
    },
    rightSecondIconType: {
      type: [String, Object],
      default: ""
    },
    onClickLeftIcon: Function,
    onClickRightFirstIcon: Function,
    onClickRightSecondIcon: Function
  },
  setup(props, {attrs, slots}) {
    const linkStyle = computed(() => ({color: props.color}));
    const defaultIconInfo = {
      customStyle: "",
      className: "",
      prefixClass: "at-icon",
      value: "",
      color: "",
      size: 24
    };
    const leftIconInfo = computed(() => props.leftIconType instanceof Object ? __objSpread(__objSpread({}, defaultIconInfo), props.leftIconType) : __objSpread(__objSpread({}, defaultIconInfo), {value: props.leftIconType}));
    const leftIconClasses = computed(() => ({
      [`${leftIconInfo.value.prefixClass}`]: Boolean(leftIconInfo.value.prefixClass),
      [`${leftIconInfo.value.prefixClass}-${leftIconInfo.value.value}`]: Boolean(leftIconInfo.value.value),
      [`${leftIconInfo.value.className}`]: Boolean(leftIconInfo.value.className)
    }));
    const rightFirstIconInfo = computed(() => props.rightFirstIconType instanceof Object ? __objSpread(__objSpread({}, defaultIconInfo), props.rightFirstIconType) : __objSpread(__objSpread({}, defaultIconInfo), {value: props.rightFirstIconType}));
    const rightFirstIconClasses = computed(() => ({
      [`${rightFirstIconInfo.value.prefixClass}`]: Boolean(rightFirstIconInfo.value.prefixClass),
      [`${rightFirstIconInfo.value.prefixClass}-${rightFirstIconInfo.value.value}`]: Boolean(rightFirstIconInfo.value.value),
      [`${rightFirstIconInfo.value.className}`]: Boolean(rightFirstIconInfo.value.className)
    }));
    const rightSecondIconInfo = computed(() => props.rightSecondIconType instanceof Object ? __objSpread(__objSpread({}, defaultIconInfo), props.rightSecondIconType) : __objSpread(__objSpread({}, defaultIconInfo), {value: props.rightSecondIconType}));
    const rightSecondIconClasses = computed(() => ({
      [`${rightSecondIconInfo.value.prefixClass}`]: Boolean(rightSecondIconInfo.value.prefixClass),
      [`${rightSecondIconInfo.value.prefixClass}-${rightSecondIconInfo.value.value}`]: Boolean(rightSecondIconInfo.value.value),
      [`${rightSecondIconInfo.value.className}`]: Boolean(rightSecondIconInfo.value.className)
    }));
    const rootClass = computed(() => ({
      "at-nav-bar": true,
      "at-nav-bar--fixed": props.fixed,
      "at-nav-bar--no-border": !props.border
    }));
    const leftIconStyle = computed(() => mergeStyle({
      color: leftIconInfo.value.color,
      fontSize: `${pxTransform(parseInt(leftIconInfo.value.size.toString()) * 2)}`
    }, leftIconInfo.value.customStyle));
    const rightSecondIconStyle = computed(() => mergeStyle({
      color: rightSecondIconInfo.value.color,
      fontSize: `${pxTransform(parseInt(rightSecondIconInfo.value.size.toString()) * 2)}`
    }, rightSecondIconInfo.value.customStyle));
    const genContainerClasses = computed(() => (iconType) => ({
      "at-nav-bar__container": true,
      "at-nav-bar__container--hide": !iconType
    }));
    const rightFirstIconStyle = computed(() => mergeStyle({
      color: rightFirstIconInfo.value.color,
      fontSize: `${pxTransform(parseInt(rightFirstIconInfo.value.size.toString()) * 2)}`
    }, rightFirstIconInfo.value.customStyle));
    function handleLeftIconClick(event) {
      var _a;
      (_a = props.onClickLeftIcon) == null ? void 0 : _a.call(props, event);
    }
    function handleFirstIconClick(event) {
      var _a;
      (_a = props.onClickRightFirstIcon) == null ? void 0 : _a.call(props, event);
    }
    function handleSecondIconClick(event) {
      var _a;
      (_a = props.onClickRightSecondIcon) == null ? void 0 : _a.call(props, event);
    }
    return () => h(View, mergeProps(attrs, {
      class: rootClass.value
    }), {
      default: () => [
        h(View, {
          class: "at-nav-bar__left-view",
          style: linkStyle.value,
          onTap: handleLeftIconClick
        }, {
          default: () => [
            props.leftIconType && h(Text, {
              class: leftIconClasses.value,
              style: leftIconStyle.value
            }),
            h(Text, {
              class: "at-nav-bar__text"
            }, {default: () => props.leftText})
          ]
        }),
        h(View, {
          class: "at-nav-bar__title"
        }, {default: () => props.title || slots.default && slots.default()}),
        h(View, {
          class: "at-nav-bar__right-view"
        }, {
          default: () => [
            h(View, {
              class: genContainerClasses.value(props.rightSecondIconType),
              style: linkStyle.value,
              onTap: handleSecondIconClick
            }, {
              default: () => [
                props.rightSecondIconType && h(Text, {
                  class: rightSecondIconClasses.value,
                  style: rightSecondIconStyle.value
                })
              ]
            }),
            h(View, {
              class: genContainerClasses.value(props.rightFirstIconType),
              style: linkStyle.value,
              onTap: handleFirstIconClick
            }, {
              default: () => [
                props.rightFirstIconType && h(Text, {
                  class: rightFirstIconClasses.value,
                  style: rightFirstIconStyle.value
                })
              ]
            })
          ]
        })
      ]
    });
  }
});
var nav_bar_default = AtNavBar;
export {
  nav_bar_default as default
};