hy-app 0.4.13 → 0.5.0

package/components/hy-navbar/hy-navbar.vue

@@ -1,214 +1,141 @@
 <template>
-  <view :class="['hy-navbar', customClass]" :style="customStyle">
-    <view
-      class="hy-navbar__placeholder"
-      v-if="fixed && placeholder"
-      :style="{
-        height: addUnit(getPx(height) + statusBarHeight),
-      }"
-    ></view>
-    <view :class="[fixed && 'hy-navbar__fixed']">
-      <HyStatusBar v-if="safeAreaInsetTop" :bgColor="bgColor"></HyStatusBar>
-      <view
-        :class="[border && 'hy-border__bottom', 'hy-navbar__content']"
-        :style="{
-          height: addUnit(height),
-          backgroundColor: bgColor,
-        }"
-      >
-        <!-- 左边 -->
-        <slot v-if="$slots.left" name="left"></slot>
+    <view :class="['hy-navbar', customClass]" :style="customStyle">
         <view
-          v-else
-          class="hy-navbar__content__left"
-          hover-class="hy-navbar__content__left--hover"
-          hover-start-time="150"
-          @tap="leftClick"
-        >
-          <HyIcon
-            v-if="leftIcon"
-            :name="leftIcon"
-            :size="leftIconSize"
-            :color="leftIconColor"
-          ></HyIcon>
-          <text
-            v-if="leftText"
+            class="hy-navbar__placeholder"
+            v-if="fixed && placeholder"
             :style="{
-              color: leftIconColor,
+                height: addUnit(getPx(height) + statusBarHeight)
             }"
-            class="hy-navbar__content__left--text"
-          >
-            {{ leftText }}
-          </text>
-        </view>
-        <!-- 左边 -->
+        ></view>
+        <view :class="[fixed && 'hy-navbar__fixed']">
+            <hy-status-bar v-if="safeAreaInsetTop" :bgColor="bgColor"></hy-status-bar>
+            <view
+                :class="[border && 'hy-border__bottom', 'hy-navbar__content']"
+                :style="{
+                    height: addUnit(height),
+                    backgroundColor: bgColor
+                }"
+            >
+                <!-- 左边 -->
+                <slot v-if="$slots.left" name="left"></slot>
+                <view
+                    v-else
+                    class="hy-navbar__content__left"
+                    hover-class="hy-navbar__content__left--hover"
+                    hover-start-time="150"
+                    @tap="leftClick"
+                >
+                    <hy-icon
+                        v-if="leftIcon"
+                        :name="leftIcon"
+                        :size="leftIconSize"
+                        :color="leftIconColor"
+                    ></hy-icon>
+                    <text
+                        v-if="leftText"
+                        :style="{
+                            color: leftIconColor
+                        }"
+                        class="hy-navbar__content__left--text"
+                    >
+                        {{ leftText }}
+                    </text>
+                </view>
+                <!-- 左边 -->
 
-        <!-- 中间 -->
-        <slot v-if="$slots.center" name="center"></slot>
-        <view v-else class="hy-navbar__content__center">
-          <text
-            class="hy-navbar__content__center--title"
-            :style="[
-              {
-                width: addUnit(titleWidth),
-                color: titleColor,
-              },
-              titleStyle,
-            ]"
-          >
-            {{ title }}
-          </text>
-          <text
-            class="hy-navbar__content__center--sub"
-            :style="[
-              {
-                width: addUnit(titleWidth),
-                color: titleColor,
-              },
-              titleStyle,
-            ]"
-          >
-            {{ sub }}
-          </text>
-        </view>
-        <!-- 中间 -->
+                <!-- 中间 -->
+                <slot v-if="$slots.center" name="center"></slot>
+                <view v-else class="hy-navbar__content__center">
+                    <text
+                        class="hy-navbar__content__center--title"
+                        :style="[
+                            {
+                                width: addUnit(titleWidth),
+                                color: titleColor
+                            },
+                            titleStyle
+                        ]"
+                    >
+                        {{ title }}
+                    </text>
+                    <text
+                        class="hy-navbar__content__center--sub"
+                        :style="[
+                            {
+                                width: addUnit(titleWidth),
+                                color: titleColor
+                            },
+                            titleStyle
+                        ]"
+                    >
+                        {{ sub }}
+                    </text>
+                </view>
+                <!-- 中间 -->
 
-        <!-- 右边 -->
-        <slot v-if="$slots.right" name="right"></slot>
-        <view class="hy-navbar__content__right" v-else @tap="rightClick">
-          <HyIcon v-if="rightIcon" :name="rightIcon" size="20"></HyIcon>
-          <text v-if="rightText" class="hy-navbar__content__right--text">{{
-            rightText
-          }}</text>
+                <!-- 右边 -->
+                <slot v-if="$slots.right" name="right"></slot>
+                <view class="hy-navbar__content__right" v-else @tap="rightClick">
+                    <hy-icon v-if="rightIcon" :name="rightIcon" size="20"></hy-icon>
+                    <text v-if="rightText" class="hy-navbar__content__right--text">{{
+                        rightText
+                    }}</text>
+                </view>
+                <!-- 右边 -->
+            </view>
         </view>
-        <!-- 右边 -->
-      </view>
     </view>
-  </view>
 </template>
 
 <script lang="ts">
 export default {
-  name: "hy-navbar",
-  options: {
-    addGlobalClass: true,
-    virtualHost: true,
-    styleIsolation: "shared",
-  },
-};
+    name: 'hy-navbar',
+    options: {
+        addGlobalClass: true,
+        virtualHost: true,
+        styleIsolation: 'shared'
+    }
+}
 </script>
 
 <script setup lang="ts">
-import type { CSSProperties, PropType } from "vue";
-import type { INavbarEmits } from "./typing";
-import { addUnit, getPx, getWindowInfo, IconConfig } from "../../libs";
+import type { INavbarEmits } from './typing'
+import { addUnit, getPx, getWindowInfo } from '../../libs'
+import navbarProps from './props'
 // 组件
-import HyIcon from "../hy-icon/hy-icon.vue";
-import HyStatusBar from "../hy-status-bar/hy-status-bar.vue";
+import HyIcon from '../hy-icon/hy-icon.vue'
+import HyStatusBar from '../hy-status-bar/hy-status-bar.vue'
 
 /**
  * 一般用于在特殊情况下，需要自定义导航栏的时候用到，一般建议使用uni-app带的导航栏。
  * @displayName hy-navbar
  */
-defineOptions({});
+defineOptions({})
 
-// const props = withDefaults(defineProps<IProps>(), defaultProps)
-const props = defineProps({
-  /** 是否开启顶部安全区适配 */
-  safeAreaInsetTop: {
-    type: Boolean,
-    default: true,
-  },
-  /** 固定在顶部时，是否生成一个等高元素，以防止塌陷 */
-  placeholder: {
-    type: Boolean,
-    default: false,
-  },
-  /** 导航栏是否固定在顶部 */
-  fixed: {
-    type: Boolean,
-    default: true,
-  },
-  /** 导航栏底部是否显示下边框 */
-  border: {
-    type: Boolean,
-    default: false,
-  },
-  /** 左边返回图标的名称，只能为uview-pls自带的图标 */
-  leftIcon: {
-    type: String,
-    default: IconConfig.LEFT,
-  },
-  /** 左边的提示文字 */
-  leftText: String,
-  /** 右边的提示文字 */
-  rightText: String,
-  /** 右边返回图标的名称，只能为uview-plus自带的图标 */
-  rightIcon: String,
-  /** 导航栏标题，如设置为空字符，将会隐藏标题占位区域 */
-  title: String,
-  /** 导航栏副标题 */
-  sub: String,
-  /** 文字颜色 */
-  titleColor: String,
-  /** 导航栏背景设置 */
-  bgColor: String,
-  /** 导航栏标题的最大宽度，内容超出会以省略号隐藏 */
-  titleWidth: {
-    type: [String, Number],
-    default: "400rpx",
-  },
-  /** 导航栏高度(不包括状态栏高度在内，内部自动加上) */
-  height: {
-    type: [String, Number],
-    default: "44px",
-  },
-  /** 左侧返回图标的大小 */
-  leftIconSize: {
-    type: [String, Number],
-    default: 20,
-  },
-  /** 左侧返回图标的颜色 */
-  leftIconColor: String,
-  /** 点击左侧区域(返回图标)，是否自动返回上一页（默认 false ） */
-  autoBack: {
-    type: Boolean,
-    default: false,
-  },
-  /** 标题的样式，对象或字符串 */
-  titleStyle: {
-    type: Object as PropType<CSSProperties>,
-  },
-  /** 定义需要用到的外部样式 */
-  customStyle: {
-    type: Object as PropType<CSSProperties>,
-  },
-  /** 自定义外部类名 */
-  customClass: String,
-});
-const emit = defineEmits<INavbarEmits>();
+const props = defineProps(navbarProps)
+const emit = defineEmits<INavbarEmits>()
 
 // 获取状态栏高度
-const { statusBarHeight } = getWindowInfo();
+const { statusBarHeight } = getWindowInfo()
 
 /**
  * @description 点击左侧区域
  * */
 const leftClick = () => {
-  // 如果配置了autoBack，自动返回上一页
-  emit("leftClick");
-  if (props.autoBack) {
-    uni.navigateBack();
-  }
-};
+    // 如果配置了autoBack，自动返回上一页
+    emit('leftClick')
+    if (props.autoBack) {
+        uni.navigateBack()
+    }
+}
 /**
  * @description 点击右侧区域
  * */
 const rightClick = () => {
-  emit("rightClick");
-};
+    emit('rightClick')
+}
 </script>
 
 <style lang="scss" scoped>
-@import "./index.scss";
+@import './index.scss';
 </style>

package/components/hy-navbar/props.ts

@@ -1,24 +1,78 @@
-import type IProps from "./typing";
-import { IconConfig } from "../../libs/config";
+import { IconConfig } from '../../libs/config'
+import type { CSSProperties, PropType } from 'vue'
 
-const defaultProps: IProps = {
-  safeAreaInsetTop: true,
-  placeholder: false,
-  fixed: true,
-  border: false,
-  leftIcon: IconConfig.LEFT,
-  leftText: "",
-  rightText: "",
-  rightIcon: "",
-  title: "",
-  sub: "",
-  titleColor: "",
-  bgColor: "",
-  titleWidth: "400rpx",
-  height: "44px",
-  leftIconSize: 20,
-  leftIconColor: "",
-  autoBack: false,
-};
+const navbarProps = {
+    /** 是否开启顶部安全区适配 */
+    safeAreaInsetTop: {
+        type: Boolean,
+        default: true
+    },
+    /** 固定在顶部时，是否生成一个等高元素，以防止塌陷 */
+    placeholder: {
+        type: Boolean,
+        default: false
+    },
+    /** 导航栏是否固定在顶部 */
+    fixed: {
+        type: Boolean,
+        default: true
+    },
+    /** 导航栏底部是否显示下边框 */
+    border: {
+        type: Boolean,
+        default: false
+    },
+    /** 左边返回图标的名称，只能组件自带的图标 */
+    leftIcon: {
+        type: String,
+        default: IconConfig.LEFT
+    },
+    /** 左边的提示文字 */
+    leftText: String,
+    /** 右边的提示文字 */
+    rightText: String,
+    /** 右边返回图标的名称，只能组件自带的图标 */
+    rightIcon: String,
+    /** 导航栏标题，如设置为空字符，将会隐藏标题占位区域 */
+    title: String,
+    /** 导航栏副标题 */
+    sub: String,
+    /** 文字颜色 */
+    titleColor: String,
+    /** 导航栏背景设置 */
+    bgColor: String,
+    /** 导航栏标题的最大宽度，内容超出会以省略号隐藏 */
+    titleWidth: {
+        type: [String, Number],
+        default: '400rpx'
+    },
+    /** 导航栏高度(不包括状态栏高度在内，内部自动加上) */
+    height: {
+        type: [String, Number],
+        default: '44px'
+    },
+    /** 左侧返回图标的大小 */
+    leftIconSize: {
+        type: [String, Number],
+        default: 20
+    },
+    /** 左侧返回图标的颜色 */
+    leftIconColor: String,
+    /** 点击左侧区域(返回图标)，是否自动返回上一页（默认 false ） */
+    autoBack: {
+        type: Boolean,
+        default: false
+    },
+    /** 标题的样式，对象或字符串 */
+    titleStyle: {
+        type: Object as PropType<CSSProperties>
+    },
+    /** 定义需要用到的外部样式 */
+    customStyle: {
+        type: Object as PropType<CSSProperties>
+    },
+    /** 自定义外部类名 */
+    customClass: String
+}
 
-export default defaultProps;
+export default navbarProps

package/components/hy-navbar/typing.d.ts

@@ -1,87 +1,87 @@
-import type { CSSProperties } from "vue";
+import type { CSSProperties } from 'vue'
 
 export default interface HyNavbarProps {
-  /**
-   * @description 是否开启顶部安全区适配  （默认 true ）
-   * */
-  safeAreaInsetTop?: boolean;
-  /**
-   * @description 固定在顶部时，是否生成一个等高元素，以防止塌陷 （默认 false ）
-   * */
-  placeholder?: boolean;
-  /**
-   * @description 导航栏是否固定在顶部 （默认 true ）
-   * */
-  fixed?: boolean;
-  /**
-   * @description 导航栏底部是否显示下边框 （默认 false ）
-   * */
-  border?: boolean;
-  /**
-   * @description 左边返回图标的名称，只能为uview-pls自带的图标 （默认 'left' ）
-   * */
-  leftIcon?: string;
-  /**
-   * @description 左边的提示文字
-   * */
-  leftText?: string;
-  /**
-   * @description 右边的提示文字
-   * */
-  rightText?: string;
-  /**
-   * @description 右边返回图标的名称，只能为uview-plus自带的图标
-   * */
-  rightIcon?: string;
-  /**
-   * @description 导航栏标题，如设置为空字符，将会隐藏标题占位区域
-   * */
-  title?: string;
-  /**
-   * @description 导航栏副标题
-   * */
-  sub?: string;
-  /**
-   * @description 文字颜色 （默认 '' ）
-   * */
-  titleColor?: string;
-  /**
-   * @description 导航栏背景设置 （默认 '#ffffff' ）
-   * */
-  bgColor?: string;
-  /**
-   * @description 导航栏标题的最大宽度，内容超出会以省略号隐藏 （默认 '400rpx' ）
-   * */
-  titleWidth?: string | number;
-  /**
-   * @description 导航栏高度(不包括状态栏高度在内，内部自动加上)（默认 '44px' ）
-   * */
-  height?: string | number;
-  /**
-   * @description 左侧返回图标的大小（默认 20px ）
-   * */
-  leftIconSize?: string | number;
-  /**
-   * @description 左侧返回图标的颜色（默认 #303133 ）
-   * */
-  leftIconColor?: string;
-  /**
-   * @description 点击左侧区域(返回图标)，是否自动返回上一页（默认 false ）
-   * */
-  autoBack?: boolean;
-  /**
-   * @description 标题的样式，对象或字符串
-   * */
-  titleStyle?: CSSProperties;
-  /**
-   * @description 定义需要用到的外部样式
-   * */
-  customStyle?: CSSProperties;
+    /**
+     * @description 是否开启顶部安全区适配  （默认 true ）
+     * */
+    safeAreaInsetTop?: boolean
+    /**
+     * @description 固定在顶部时，是否生成一个等高元素，以防止塌陷 （默认 false ）
+     * */
+    placeholder?: boolean
+    /**
+     * @description 导航栏是否固定在顶部 （默认 true ）
+     * */
+    fixed?: boolean
+    /**
+     * @description 导航栏底部是否显示下边框 （默认 false ）
+     * */
+    border?: boolean
+    /**
+     * @description 左边返回图标的名称，只能为uview-pls自带的图标 （默认 'left' ）
+     * */
+    leftIcon?: string
+    /**
+     * @description 左边的提示文字
+     * */
+    leftText?: string
+    /**
+     * @description 右边的提示文字
+     * */
+    rightText?: string
+    /**
+     * @description 右边返回图标的名称，只能为uview-plus自带的图标
+     * */
+    rightIcon?: string
+    /**
+     * @description 导航栏标题，如设置为空字符，将会隐藏标题占位区域
+     * */
+    title?: string
+    /**
+     * @description 导航栏副标题
+     * */
+    sub?: string
+    /**
+     * @description 文字颜色 （默认 '' ）
+     * */
+    titleColor?: string
+    /**
+     * @description 导航栏背景设置 （默认 '#ffffff' ）
+     * */
+    bgColor?: string
+    /**
+     * @description 导航栏标题的最大宽度，内容超出会以省略号隐藏 （默认 '400rpx' ）
+     * */
+    titleWidth?: string | number
+    /**
+     * @description 导航栏高度(不包括状态栏高度在内，内部自动加上)（默认 '44px' ）
+     * */
+    height?: string | number
+    /**
+     * @description 左侧返回图标的大小（默认 20px ）
+     * */
+    leftIconSize?: string | number
+    /**
+     * @description 左侧返回图标的颜色（默认 #303133 ）
+     * */
+    leftIconColor?: string
+    /**
+     * @description 点击左侧区域(返回图标)，是否自动返回上一页（默认 false ）
+     * */
+    autoBack?: boolean
+    /**
+     * @description 标题的样式，对象或字符串
+     * */
+    titleStyle?: CSSProperties
+    /**
+     * @description 定义需要用到的外部样式
+     * */
+    customStyle?: CSSProperties
 }
 
 export interface INavbarEmits {
-  /** 点击导航栏左边 */
-  (e: "leftClick"): void;
-  /** 点击导航栏右边 */
-  (e: "rightClick"): void;
+    /** 点击导航栏左边 */
+    (e: 'leftClick'): void
+    /** 点击导航栏右边 */
+    (e: 'rightClick'): void
 }