hy-app 0.3.0 → 0.3.2

package/components/hy-modal/hy-modal.vue

@@ -32,7 +32,10 @@
           </text>
         </slot>
       </view>
-      <view class="hy-modal__button-group--confirm-button" v-if="$slots.confirmButton">
+      <view
+        class="hy-modal__button-group--confirm-button"
+        v-if="$slots.confirmButton"
+      >
         <slot name="confirmButton"></slot>
       </view>
       <template v-else>
@@ -41,7 +44,9 @@
             'hy-modal__button-group',
             showCancelButton &&
               showConfirmButton &&
-              (!buttonReverse ? 'hy-modal__button-exact' : 'hy-modal__button-exact--reverse'),
+              (!buttonReverse
+                ? 'hy-modal__button-exact'
+                : 'hy-modal__button-exact--reverse'),
           ]"
           :style="{
             flexDirection: buttonReverse ? 'row-reverse' : 'row',
@@ -89,28 +94,28 @@
 
 <script lang="ts">
 export default {
-  name: 'hy-modal',
+  name: "hy-modal",
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared',
+    styleIsolation: "shared",
   },
-}
+};
 </script>
 
 <script setup lang="ts">
-import { ref, toRefs, watch } from 'vue'
-import type { IModalEmits } from './typing'
-import { addUnit } from '../../utils'
+import { ref, watch } from "vue";
+import type { IModalEmits } from "./typing";
+import { addUnit } from "../../utils";
 // 组件
-import HyPopup from '../hy-popup/hy-popup.vue'
-import HyLoading from '../hy-loading/hy-loading.vue'
+import HyPopup from "../hy-popup/hy-popup.vue";
+import HyLoading from "../hy-loading/hy-loading.vue";
 
 /**
  * 弹出模态框，常用于消息提示、消息确认、在当前页面内完成特定的交互操作。
  * @displayName hy-modal
  */
-defineOptions({})
+defineOptions({});
 
 // const props = withDefaults(defineProps<IProps>(), defaultProps)
 const props = defineProps({
@@ -126,12 +131,12 @@ const props = defineProps({
   /** 确认按钮的文字 */
   confirmText: {
     type: String,
-    default: '确认',
+    default: "确认",
   },
   /** 取消按钮的文字 */
   cancelText: {
     type: String,
-    default: '取消',
+    default: "取消",
   },
   /** 是否显示确认按钮 */
   showConfirmButton: {
@@ -180,7 +185,7 @@ const props = defineProps({
   /** modal宽度，不支持百分比，可以数值，px，rpx单位 */
   width: {
     type: [String, Number],
-    default: '550rpx',
+    default: "550rpx",
   },
   /**
    * 确认按钮的样式,如设置，将不会显示取消按钮
@@ -193,55 +198,54 @@ const props = defineProps({
    * */
   contentTextAlign: {
     type: String,
-    default: 'left',
+    default: "left",
   },
-})
-const { modelValue, asyncClose, closeOnClickOverlay } = toRefs(props)
-const emit = defineEmits<IModalEmits>()
+});
+const emit = defineEmits<IModalEmits>();
 
-const loading = ref<boolean>(false)
+const loading = ref<boolean>(false);
 
 watch(
-  () => modelValue.value,
+  () => props.modelValue,
   (newValue) => {
-    if (newValue && loading.value) loading.value = false
+    if (newValue && loading.value) loading.value = false;
   },
-)
+);
 
 /**
  * @description 点击确定按钮
  * */
 const confirmHandler = () => {
   // 如果配置了异步关闭，将按钮值为loading状态
-  if (asyncClose.value) {
-    loading.value = true
+  if (props.asyncClose) {
+    loading.value = true;
   } else {
-    emit('update:modelValue', false)
+    emit("update:modelValue", false);
   }
-  emit('confirm')
-}
+  emit("confirm");
+};
 
 /**
  * @description 点击取消按钮
  * */
 const cancelHandler = () => {
-  emit('update:modelValue', false)
-  emit('cancel')
-}
+  emit("update:modelValue", false);
+  emit("cancel");
+};
 
 /**
  * @description 点击遮罩
  * */
 const clickHandler = () => {
-  if (closeOnClickOverlay.value) {
-    emit('update:modelValue', false)
-    emit('close')
+  if (props.closeOnClickOverlay) {
+    emit("update:modelValue", false);
+    emit("close");
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>
-@import './index.scss';
+@import "./index.scss";
 .modal__content__text {
   text-align: v-bind(contentTextAlign);
 }

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

@@ -75,7 +75,9 @@
         >
           <slot name="right">
             <HyIcon v-if="rightIcon" :name="rightIcon" size="20"></HyIcon>
-            <text v-if="rightText" class="hy-navbar__content__right__text">{{ rightText }}</text>
+            <text v-if="rightText" class="hy-navbar__content__right__text">{{
+              rightText
+            }}</text>
           </slot>
         </view>
       </view>
@@ -85,30 +87,29 @@
 
 <script lang="ts">
 export default {
-  name: 'hy-navbar',
+  name: "hy-navbar",
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared',
+    styleIsolation: "shared",
   },
-}
+};
 </script>
 
 <script setup lang="ts">
-import { toRefs } from 'vue'
-import type { CSSProperties, PropType } from 'vue'
-import type { INavbarEmits } from './typing'
-import { addUnit, getPx, getWindowInfo } from '../../utils'
-import { IconConfig } from '../../config'
+import type { CSSProperties, PropType } from "vue";
+import type { INavbarEmits } from "./typing";
+import { addUnit, getPx, getWindowInfo } from "../../utils";
+import { IconConfig } from "../../config";
 // 组件
-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({
@@ -154,12 +155,12 @@ const props = defineProps({
   /** 导航栏标题的最大宽度，内容超出会以省略号隐藏 */
   titleWidth: {
     type: [String, Number],
-    default: '400rpx',
+    default: "400rpx",
   },
   /** 导航栏高度(不包括状态栏高度在内，内部自动加上) */
   height: {
     type: [String, Number],
-    default: '44px',
+    default: "44px",
   },
   /** 左侧返回图标的大小 */
   leftIconSize: {
@@ -183,31 +184,30 @@ const props = defineProps({
   },
   /** 自定义外部类名 */
   customClass: String,
-})
-const { autoBack, fixed } = toRefs(props)
-const emit = defineEmits<INavbarEmits>()
+});
+const emit = defineEmits<INavbarEmits>();
 
 // 获取状态栏高度
-const { statusBarHeight } = getWindowInfo()
+const { statusBarHeight } = getWindowInfo();
 
 /**
  * @description 点击左侧区域
  * */
 const leftClick = () => {
   // 如果配置了autoBack，自动返回上一页
-  emit('leftClick')
-  if (autoBack.value) {
-    uni.navigateBack()
+  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/typing.d.ts

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

package/components/hy-notice-bar/hy-notice-bar.vue

@@ -45,31 +45,31 @@
 
 <script lang="ts">
 export default {
-  name: 'hy-notice-bar',
+  name: "hy-notice-bar",
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared',
+    styleIsolation: "shared",
   },
-}
+};
 </script>
 
 <script setup lang="ts">
-import { ref, toRefs } from 'vue'
-import type { PropType, CSSProperties } from 'vue'
-import { INoticeBarEmits, NoticeBarModeVo } from './typing'
-import { IconConfig } from '../../config'
+import { ref } from "vue";
+import type { PropType, CSSProperties } from "vue";
+import type { INoticeBarEmits, NoticeBarModeVo } from "./typing";
+import { IconConfig } from "../../config";
 // 组件
-import HyRowNotice from './hy-row-notice.vue'
-import HyColumnNotice from './hy-column-notice.vue'
+import HyRowNotice from "./hy-row-notice.vue";
+import HyColumnNotice from "./hy-column-notice.vue";
 
 /**
  * 该组件用于滚动通告场景，有多种模式可供选择
  * @displayName hy-notice-bar
  */
-defineOptions({})
+defineOptions({});
 
-const show = ref(true)
+const show = ref(true);
 
 // const props = withDefaults(defineProps<IProps>(), defaultProps);
 const props = defineProps({
@@ -84,7 +84,7 @@ const props = defineProps({
    * */
   direction: {
     type: String,
-    default: 'row',
+    default: "row",
   },
   /** direction = row时，是否使用步进形式滚动  */
   step: {
@@ -130,16 +130,16 @@ const props = defineProps({
    * @values flex-start,flex-start,center
    * */
   justifyContent: {
-    type: String,
-    default: 'flex-start',
+    type: String as PropType<HyApp.JustifyContentType>,
+    default: "flex-start",
   },
   /**
    * 跳转类型
    * @values navigateTo,redirectTo,switchTab,reLaunch
    * */
   linkType: {
-    type: String,
-    default: 'navigateTo',
+    type: String as PropType<HyApp.NavigationType>,
+    default: "navigateTo",
   },
   /** 跳转地址 */
   url: String,
@@ -147,28 +147,27 @@ const props = defineProps({
   customStyle: Object as PropType<CSSProperties>,
   /** 自定义外部类名 */
   customClass: String,
-})
-const { mode, linkType, url } = toRefs(props)
-const emit = defineEmits<INoticeBarEmits>()
+});
+const emit = defineEmits<INoticeBarEmits>();
 
 /**
  * @description 点击通告栏
  * */
 const click = (index: number) => {
-  emit('click', index)
-  if (url.value && linkType.value && mode.value === 'link') {
-    ;(uni as any)[linkType.value]({ url: url.value })
+  emit("click", index);
+  if (props.url && props.linkType && props.mode === "link") {
+    (uni as any)[props.linkType]({ url: props.url });
   }
-}
+};
 /**
  * @description 点击关闭按钮
  * */
 const close = () => {
-  show.value = false
-  emit('close')
-}
+  show.value = false;
+  emit("close");
+};
 </script>
 
 <style lang="scss" scoped>
-@import './index.scss';
+@import "./index.scss";
 </style>