hy-app 0.6.9 → 0.7.1

package/components/hy-keyboard/props.ts

@@ -0,0 +1,108 @@
+import type { PropType, ExtractPropTypes } from 'vue'
+import type { KeyboardMode, CarKeyboardLang } from './typing'
+
+export const keyboardProps = {
+    /** 是否可见 */
+    show: {
+        type: Boolean,
+        default: false
+    },
+    /** 绑定的值 */
+    modelValue: {
+        type: String,
+        default: ''
+    },
+    /** 标题 */
+    title: String,
+    /**
+     * 键盘模式
+     * @values default,custom,car,idcard
+     * */
+    mode: {
+        type: String as PropType<KeyboardMode>,
+        default: 'default'
+    },
+    /** 层级 */
+    zIndex: {
+        type: Number,
+        default: 10086
+    },
+    /** 最大长度 */
+    maxlength: {
+        type: Number,
+        default: Infinity
+    },
+    /** 是否显示删除键 */
+    showDeleteKey: {
+        type: Boolean,
+        default: true
+    },
+    /** 是否显示小数点键 */
+    showDotKey: {
+        type: Boolean,
+        default: true
+    },
+    /** 是否随机键盘按键顺序 */
+    randomKeyOrder: {
+        type: Boolean,
+        default: false
+    },
+    /** 确认按钮文本 */
+    closeText: String,
+    /** 删除按钮文本 */
+    deleteText: String,
+    /** 关闭按钮是否显示加载状态 */
+    closeButtonLoading: {
+        type: Boolean,
+        default: false
+    },
+    /** 是否显示蒙层 */
+    overlay: {
+        type: Boolean,
+        default: true
+    },
+    /** 蒙层透明度 */
+    overlayOpacity: {
+        type: Number,
+        default: 0
+    },
+    /** 是否在点击外部时收起键盘 */
+    hideOnClickOutside: {
+        type: Boolean,
+        default: true
+    },
+    /** 是否锁定滚动 */
+    lockScroll: {
+        type: Boolean,
+        default: true
+    },
+    /** 是否在底部安全区域内 */
+    safeAreaInsetBottom: {
+        type: Boolean,
+        default: true
+    },
+    /** 额外按键 */
+    extraKey: {
+        type: [String, Array] as PropType<string | string[]>,
+        default: ''
+    },
+    /** 车牌键盘语言模式 当mode=car时生效 */
+    carLang: {
+        type: String as PropType<CarKeyboardLang>,
+        default: ''
+    },
+    /** 是否自动切换车牌键盘语言 当mode=car且carLang是非受控状态时生效 */
+    autoSwitchLang: {
+        type: Boolean,
+        default: false
+    },
+    /** 定义需要用到的外部样式 */
+    customStyle: {
+        type: Object as PropType<Record<string, string | number>>,
+        default: () => ({})
+    },
+    /** 自定义外部类名 */
+    customClass: String
+}
+
+export type KeyboardProps = ExtractPropTypes<typeof keyboardProps>

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

@@ -0,0 +1,18 @@
+export type KeyboardMode = 'default' | 'custom' | 'car' | 'idcard'
+export type KeyType = '' | 'delete' | 'extra' | 'close'
+export type CarKeyboardLang = 'zh' | 'en'
+
+export interface Key {
+  text?: number | string
+  type?: KeyType
+  wider?: boolean
+}
+
+export interface IKeyboardEmits {
+  (e: 'update:show', value: boolean): void
+  (e: 'input', value: string): void
+  (e: 'close'): void
+  (e: 'delete'): void
+  (e: 'update:modelValue', value: string): void
+  (e: 'update:carLang', value: CarKeyboardLang): void
+}

package/components/hy-list/hy-list.vue

@@ -114,7 +114,6 @@ const waterfall: {
 })
 // 排列方式
 const arrange = computed(() => (props.line === 1 ? 'column' : 'row'))
-const boxHeight = getPx(props.itemHeight) + getPx(props.marginBottom)
 const listHeight = addUnit(props.containerHeight)
 const instance = getCurrentInstance()
 
@@ -125,6 +124,9 @@ onMounted(() => {
     })
 })
 
+const boxHeight = computed(() => {
+    return getPx(props.itemHeight) + getPx(props.marginBottom)
+})
 const itemStyle = computed((): CSSProperties => {
     return {
         height: addUnit(props.itemHeight),
@@ -137,32 +139,32 @@ const itemStyle = computed((): CSSProperties => {
 })
 
 /**
- * @description 虚拟列表真实展示数据：起始下标
+ * 虚拟列表真实展示数据：起始下标
  */
 const start = computed(() => {
-    const s = Math.floor(scrollTop.value / boxHeight)
+    const s = Math.floor(scrollTop.value / boxHeight.value)
     return Math.max(0, s * props.line)
 })
 
 /**
- * @description 虚拟列表真实展示数据：结束下标
+ * 虚拟列表真实展示数据：结束下标
  */
 const over = computed(() => {
-    const o = Math.floor((scrollTop.value + viewHeight.value + 1) / boxHeight + 5)
+    const o = Math.floor((scrollTop.value + viewHeight.value + 1) / boxHeight.value + 5)
     return Math.min(props.list.length, o * props.line)
 })
 
 /**
- * @description 计算虚拟列表的padding(保持列表高度完整且滚动条能正常滚动)
+ * 计算虚拟列表的padding(保持列表高度完整且滚动条能正常滚动)
  */
 const paddingAttr = computed(() => {
-    const paddingTop = start.value * boxHeight
-    const paddingBottom = (props.list.length - over.value) * boxHeight
+    const paddingTop = start.value * boxHeight.value
+    const paddingBottom = (props.list.length - over.value) * boxHeight.value
     return `${paddingTop / props.line}px 0 ${paddingBottom / props.line}px`
 })
 
 /**
- * @description 虚拟列表真实展示数据
+ * 虚拟列表真实展示数据
  */
 const virtualData = computed<(string | Record<string, any>)[]>(() => {
     return props.list.slice(start.value, over.value)
@@ -187,28 +189,28 @@ watch(
 )
 
 /**
- * @description 监听滚动条距离顶部距离，实时更新
+ * 监听滚动条距离顶部距离，实时更新
  */
 const onScroll = async (e: any) => {
     scrollTop.value = e.detail.scrollTop || 0
 }
 
 /**
- * @description 滚动底部函数
+ * 滚动底部函数
  * */
 const scrollToLower = () => {
     emit('scrollToLower')
 }
 
 /**
- * @description 点击行触发函数
+ * 点击行触发函数
  * */
 const handleClick = (temp: string | AnyObject) => {
     emit('click', temp)
 }
 
 /**
- * @description 获取默认插槽
+ * 获取默认插槽
  */
 const slotDefault = useSlots().default
 </script>

package/components/hy-list/props.ts

@@ -19,7 +19,7 @@ const listProps = {
     /** 子容器的底部，会计算到容器内 */
     marginBottom: {
         type: [String, Number],
-        default: 10
+        default: 0
     },
     /** 子容器的内边距 */
     padding: {

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

@@ -1,7 +1,7 @@
 import type { ExtractPropTypes } from 'vue'
-import modalProps from '@/package/components/hy-modal/props'
+// import modalProps from './props'
 
-export interface HyModalProps extends ExtractPropTypes<typeof modalProps> {}
+// export interface HyModalProps extends ExtractPropTypes<typeof modalProps> {}
 
 export interface IModalEmits {
     /** 点击确认按钮时触发 */

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

@@ -1,94 +1,54 @@
-<template>
-    <view class="hy-notice" @tap="clickHandler">
-        <slot name="icon">
-            <view class="hy-notice__left-icon" v-if="icon">
-                <hy-icon :name="icon" :color="color" size="19"></hy-icon>
-            </view>
-        </slot>
-        <swiper
-            :disable-touch="disableTouch"
-            :vertical="!step"
-            :circular="true"
-            :interval="duration"
-            :autoplay="true"
-            class="hy-notice__swiper"
-            @change="noticeChange"
-        >
-            <swiper-item
-                v-for="(item, index) in text"
-                :key="index"
-                class="hy-notice__swiper--item"
-                :style="{ justifyContent: justifyContent }"
-            >
-                <text class="hy-notice__swiper--item__text" :style="[textStyle]">{{ item }}</text>
-            </swiper-item>
-        </swiper>
-        <view class="hy-notice__right-icon" v-if="['link', 'closable'].includes(mode)">
-            <hy-icon
-                v-if="mode === 'link'"
-                :name="IconConfig.RIGHT"
-                :size="17"
-                :color="color"
-            ></hy-icon>
-            <hy-icon
-                v-if="mode === 'closable'"
-                :name="IconConfig.CLOSE"
-                :size="16"
-                :color="color"
-                @click="close"
-            ></hy-icon>
-        </view>
-    </view>
-</template>
-
-<script setup lang="ts">
-import { type CSSProperties, toRefs, computed, ref, watch } from 'vue'
-import noticeBarProps from './props'
-import { addUnit, error, IconConfig } from '../../libs'
-
-// 组件
-import HyIcon from '../hy-icon/hy-icon.vue'
-
-const props = defineProps(noticeBarProps)
-const { text, fontSize, color } = toRefs(props)
-const emit = defineEmits(['click', 'close'])
-
-const index = ref(0)
-
-watch(
-    () => text.value,
-    (newVal) => !Array.isArray(newVal) && error('传入值必须是数组'),
-    { immediate: true }
-)
-
-/**
- * @description 文字内容的样式
- * */
-const textStyle = computed<CSSProperties>(() => {
-    let style: CSSProperties = {}
-    style.color = color.value
-    style.fontSize = addUnit(fontSize.value)
-    return style
-})
-
-const noticeChange = (e: any) => {
-    index.value = e.detail.current
-}
-
-/**
- * @description 点击通告栏
- * */
-const clickHandler = (index: number) => {
-    emit('click', index)
-}
-/**
- * @description 点击关闭按钮
- * */
-const close = () => {
-    emit('close')
-}
-</script>
-
-<style lang="scss" scoped>
-@import './index.scss';
-</style>
+<template>
+    <swiper
+        :disable-touch="disableTouch"
+        :vertical="!step"
+        :circular="true"
+        :interval="duration"
+        :autoplay="true"
+        class="hy-notice__swiper"
+        @change="noticeChange"
+    >
+        <swiper-item
+            v-for="(item, index) in text"
+            :key="index"
+            class="hy-notice__swiper--item"
+            :style="{ justifyContent: justifyContent }"
+        >
+            <text class="hy-notice__swiper--item__text" :style="[textStyle]">{{ item }}</text>
+        </swiper-item>
+    </swiper>
+</template>
+
+<script setup lang="ts">
+import { type CSSProperties, toRefs, computed, watch } from 'vue'
+import noticeBarProps from './props'
+import { addUnit, error } from '../../libs'
+
+const props = defineProps(noticeBarProps)
+const { text, fontSize, color } = toRefs(props)
+const emit = defineEmits(['change'])
+
+watch(
+    () => text.value,
+    (newVal) => !Array.isArray(newVal) && error('传入值必须是数组'),
+    { immediate: true }
+)
+
+/**
+ * @description 文字内容的样式
+ * */
+const textStyle = computed<CSSProperties>(() => {
+    let style: CSSProperties = {}
+    style.color = color.value
+    style.fontSize = addUnit(fontSize.value)
+    return style
+})
+
+const noticeChange = (e: any) => {
+    emit('change', e.detail.current)
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

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

@@ -1,96 +1,128 @@
-<template>
-    <view
-        class="hy-notice-bar"
-        v-if="show"
-        :style="[
-            {
-                backgroundColor: bgColor
-            },
-            customStyle
-        ]"
-    >
-        <template v-if="direction === 'column' || (direction === 'row' && step)">
-            <HyColumnNotice
-                :color="color"
-                :bgColor="bgColor"
-                :text="text"
-                :mode="mode"
-                :step="step"
-                :icon="icon"
-                :disable-touch="disableTouch"
-                :fontSize="fontSize"
-                :duration="duration"
-                :justifyContent="justifyContent"
-                @close="close"
-                @click="click"
-            ></HyColumnNotice>
-        </template>
-        <template v-else>
-            <HyRowNotice
-                :color="color"
-                :bgColor="bgColor"
-                :text="text"
-                :mode="mode"
-                :fontSize="fontSize"
-                :speed="speed"
-                :url="url"
-                :linkType="linkType"
-                :icon="icon"
-                @close="close"
-                @click="click"
-            ></HyRowNotice>
-        </template>
-    </view>
-</template>
-
-<script lang="ts">
-export default {
-    name: 'hy-notice-bar',
-    options: {
-        addGlobalClass: true,
-        virtualHost: true,
-        styleIsolation: 'shared'
-    }
-}
-</script>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-import type { INoticeBarEmits } from './typing'
-import noticeBarProps from './props'
-// 组件
-import HyRowNotice from './hy-row-notice.vue'
-import HyColumnNotice from './hy-column-notice.vue'
-
-/**
- * 该组件用于滚动通告场景，有多种模式可供选择
- * @displayName hy-notice-bar
- */
-defineOptions({})
-
-const show = ref(true)
-
-const props = defineProps(noticeBarProps)
-const emit = defineEmits<INoticeBarEmits>()
-
-/**
- * @description 点击通告栏
- * */
-const click = (index: number) => {
-    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')
-}
-</script>
-
-<style lang="scss" scoped>
-@import './index.scss';
-</style>
+<template>
+    <view
+        :class="`hy-notice-bar ${customClass}`"
+        v-if="show"
+        :style="[
+            {
+                backgroundColor: bgColor
+            },
+            customStyle
+        ]"
+    >
+        <view class="hy-notice" @tap="clickHandler">
+            <!-- 左侧图标 -->
+            <slot name="icon">
+                <view class="hy-notice__left-icon" v-if="icon">
+                    <hy-icon
+                        :name="icon?.name || icon"
+                        :color="icon?.color || color"
+                        :size="icon?.size || 19"
+                    ></hy-icon>
+                </view>
+            </slot>
+            
+            <!-- 中间内容区域 -->
+            <template v-if="direction === 'column' || (direction === 'row' && step)">
+                <hy-column-notice
+                    :color="color"
+                    :text="text"
+                    :fontSize="fontSize"
+                    :duration="duration"
+                    :justifyContent="justifyContent"
+                    :disable-touch="disableTouch"
+                    :step="step"
+                    @change="noticeChange"
+                ></hy-column-notice>
+            </template>
+            <template v-else>
+                <hy-row-notice
+                    :color="color"
+                    :text="text"
+                    :fontSize="fontSize"
+                    :speed="speed"
+                    @change="noticeChange"
+                ></hy-row-notice>
+            </template>
+            
+            <!-- 右侧图标 -->
+            <view class="hy-notice__right-icon" v-if="['link', 'closable'].includes(mode)">
+                <hy-icon
+                    v-if="mode === 'link'"
+                    :name="IconConfig.RIGHT"
+                    :size="17"
+                    :color="color"
+                ></hy-icon>
+                <hy-icon
+                    v-if="mode === 'closable'"
+                    @click.stop="close"
+                    :name="IconConfig.CLOSE"
+                    :size="16"
+                    :color="color"
+                ></hy-icon>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script lang="ts">
+export default {
+    name: 'hy-notice-bar',
+    options: {
+        addGlobalClass: true,
+        virtualHost: true,
+        styleIsolation: 'shared'
+    }
+}
+</script>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { INoticeBarEmits } from './typing'
+import noticeBarProps from './props'
+import { IconConfig } from '../../libs'
+// 组件
+import HyRowNotice from './hy-row-notice.vue'
+import HyColumnNotice from './hy-column-notice.vue'
+import HyIcon from '../hy-icon/hy-icon.vue'
+
+/**
+ * 该组件用于滚动通告场景，有多种模式可供选择
+ * @displayName hy-notice-bar
+ */
+defineOptions({})
+
+const show = ref(true)
+const currentIndex = ref(0)
+
+const props = defineProps(noticeBarProps)
+const emit = defineEmits<INoticeBarEmits>()
+
+/**
+ * @description 通告内容变化
+ * */
+const noticeChange = (index: number) => {
+    currentIndex.value = index
+}
+
+/**
+ * @description 点击通告栏
+ * */
+const clickHandler = () => {
+    emit('click', currentIndex.value)
+    if (props.url && props.linkType && props.mode === 'link') {
+        ;(uni as any)[props.linkType]({ url: props.url })
+    }
+}
+
+/**
+ * @description 点击关闭按钮
+ * */
+const close = () => {
+    show.value = false
+    emit('close')
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>