hy-app 0.6.8 → 0.7.0

package/components/hy-keyboard/key/index.vue

@@ -0,0 +1,91 @@
+<template>
+    <!-- 键盘按键组件 -->
+    <view
+        :class="[
+            'hy-keyboard__key',
+            {
+                'hy-keyboard__key--wider': wider, // 加宽样式
+                'hy-keyboard__key--large': large, // 大号样式（用于侧边栏）
+                'hy-keyboard__key--car': isCar, // 车牌号键盘样式
+                'hy-keyboard__key--delete': type === 'delete', // 删除键样式
+                'hy-keyboard__key--extra': type === 'extra', // 额外按键样式
+                'hy-keyboard__key--close': type === 'close' // 关闭键样式
+            }
+        ]"
+        @click="handlePress"
+    >
+        <!-- 按键文本 -->
+        <text class="hy-keyboard__key-text">{{ text }}</text>
+        <!-- 删除键图标 -->
+        <view v-if="type === 'delete'" class="hy-keyboard__delete-icon">
+            <view class="hy-keyboard__delete-line hy-keyboard__delete-line--left">
+                <hy-icon
+                    v-if="type === 'delete'"
+                    :name="IconConfig.CLEAR"
+                    class="hy-keyboard__key-icon"
+                    color="#fff"
+                    size="28"
+                />
+            </view>
+            <view class="hy-keyboard__delete-line hy-keyboard__delete-line--right"></view>
+        </view>
+    </view>
+</template>
+
+<script lang="ts">
+export default {
+    name: 'hy-keyboard-key',
+    options: {
+        virtualHost: true,
+        addGlobalClass: true,
+        styleIsolation: 'shared'
+    }
+}
+</script>
+
+<script lang="ts" setup>
+import { IconConfig } from '@/package/libs'
+import type { NumberKeyType } from './types'
+
+const props = defineProps({
+    /** 按键显示文本 */
+    text: {
+        type: [String, Number],
+        default: ''
+    },
+    /** 按键类型: delete(删除), extra(额外), close(关闭), ''(普通) */
+    type: {
+        type: String as () => NumberKeyType,
+        default: ''
+    },
+    /** 是否加宽（用于车牌号键盘的特殊按键） */
+    wider: {
+        type: Boolean,
+        default: false
+    },
+    /** 是否大号（用于侧边栏按键） */
+    large: {
+        type: Boolean,
+        default: false
+    },
+    /** 是否车牌号键盘的按键 */
+    isCar: {
+        type: Boolean,
+        default: false
+    }
+})
+
+const emit = defineEmits(['press'])
+
+/**
+ * 处理按键点击
+ * 触发 press 事件，传递按键文本和类型
+ */
+const handlePress = () => {
+    emit('press', props.text, props.type)
+}
+</script>
+
+<style lang="scss">
+@import './index.scss';
+</style>

package/components/hy-keyboard/key/types.ts

@@ -0,0 +1 @@
+export type NumberKeyType = '' | 'delete' | 'extra' | 'close'

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-line-progress/index.scss

@@ -8,11 +8,11 @@
   flex: 1;
   width: 100%;
   overflow: hidden;
-  border-radius: $hy-border-radius-semicircle;
+  border-radius: $hy-radius-semicircle;
 
   @include e(background) {
     background-color: $hy-background--empty;
-    border-radius: $hy-border-radius-semicircle;
+    border-radius: $hy-radius-semicircle;
     flex: 1;
   }
 
@@ -24,7 +24,7 @@
     align-items: center;
     @include flex(row);
     color: #ffffff;
-    border-radius: $hy-border-radius-semicircle;
+    border-radius: $hy-radius-semicircle;
     transition: width 0.5s ease;
     justify-content: flex-end;
     background-color: $hy-primary;

package/components/hy-menu/index.scss

@@ -33,7 +33,7 @@
         height: 15px;
         background: $hy-primary;
         transform: translateY(-50%);
-        border-radius: $hy-border-radius-semicircle;
+        border-radius: $hy-radius-semicircle;
       }
 
       &:active {

package/components/hy-modal/index.scss

@@ -3,7 +3,7 @@
 
 @include b(modal) {
   max-width: 650rpx;
-  border-radius: $hy-border-radius-base;
+  border-radius: $hy-radius-base;
   overflow: hidden;
 
   /* 标题 */
@@ -65,7 +65,7 @@
         justify-content: center;
         align-items: center;
         height: 43px;
-        border-radius: $hy-border-radius-semicircle;
+        border-radius: $hy-radius-semicircle;
 
         /* 确认 */
         @include m(confirm) {

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>