hy-app 0.6.9 → 0.7.0

package/components/hy-cascader/index.scss

@@ -0,0 +1,84 @@
+@use "../../libs/css/theme" as *;
+@use "../../libs/css/mixin" as *;
+
+@include b(cascader) {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  &-input {
+    position: relative;
+    .input-cover {
+      opacity: 0;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      z-index: 1;
+    }
+  }
+
+  @include e(header) {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: $hy-border-margin-padding-base;
+    border-bottom: $hy-border-line;
+  }
+
+  @include e(header-title) {
+    font-size: $hy-font-size-base;
+    font-weight: $hy-font-weight-bold;
+    color: $hy-text-color;
+  }
+
+  @include e(header-close) {
+    width: 60rpx;
+    height: 60rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  @include e(content) {
+    flex: 1;
+    overflow-y: auto;
+    padding: 0;
+    height: 100%;
+  }
+
+  @include e(item) {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: $hy-border-margin-padding-lg $hy-border-margin-padding-base;
+    font-size: $hy-font-size-base;
+    color: $hy-text-color;
+    position: relative;
+
+    @include m(active) {
+      color: $hy-primary;
+      font-weight: $hy-font-weight-bold;
+      background: $hy-background--hover;
+      border-left: $hy-border-width-lg solid $hy-primary;
+    }
+  }
+
+  @include e(panel) {
+    width: 100%;
+    height: 100%;
+  }
+
+  @include edeep(loading) {
+      position: absolute;
+      top: 0;
+      right: 0;
+      left: 0;
+      bottom: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 10;
+  }
+}

package/components/hy-cascader/props.ts

@@ -0,0 +1,88 @@
+import type { CascaderOption, CascaderValue, CascaderLazyLoad } from './typing'
+import type { PropType } from 'vue'
+import type { HyInputProps } from '../hy-input/typing'
+import { useTranslate } from '../../libs'
+
+const { t } = useTranslate('cascader')
+
+const cascaderProps = {
+    /** 当前选中的值 */
+    modelValue: {
+        type: Object as PropType<CascaderValue>,
+        default: () => ({ value: [], label: [] })
+    },
+    /** 是否显示级联选择器弹窗 */
+    show: {
+        type: Boolean,
+        default: false
+    },
+    /** 级联选择器数据源 */
+    options: {
+        type: Array as PropType<CascaderOption[]>,
+        default: () => []
+    },
+    /** 是否显示顶部工具栏 */
+    showToolbar: {
+        type: Boolean,
+        default: true
+    },
+    /** 顶部标题 */
+    title: String,
+    /** 输入框占位提示文字 */
+    placeholder: {
+        type: String,
+        default: () => t('placeholder')
+    },
+    /** 点击遮罩层是否关闭 */
+    closeOnClickOverlay: {
+        type: Boolean,
+        default: false
+    },
+    /** 弹出层的 z-index 值 */
+    zIndex: {
+        type: Number,
+        default: 10076
+    },
+    /** 是否显示输入框 */
+    hasInput: {
+        type: Boolean,
+        default: false
+    },
+    /** 输入框配置 */
+    input: {
+        type: Object as PropType<HyInputProps>,
+        default: () => {}
+    },
+    /** 多选时的分隔符 */
+    separator: {
+        type: String,
+        default: ' / '
+    },
+    /** 选项值对应的 key */
+    valueKey: {
+        type: String,
+        default: 'value'
+    },
+    /** 选项标签对应的 key */
+    labelKey: {
+        type: String,
+        default: 'label'
+    },
+    /** 选项子级对应的 key */
+    childrenKey: {
+        type: String,
+        default: 'children'
+    },
+    /** 异步加载子节点的回调函数，提供后将启用异步加载模式 */
+    lazyLoad: {
+        type: Function as PropType<CascaderLazyLoad>,
+        default: undefined
+    },
+    /** 选项对象中，标识叶子节点的 key */
+    isLeafKey: {
+        type: String,
+        default: 'isLeaf'
+    }
+}
+
+export default cascaderProps

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

@@ -0,0 +1,34 @@
+export interface CascaderOption {
+    value: string | number
+    label: string
+    children?: CascaderOption[]
+    disabled?: boolean
+    isLeaf?: boolean
+    [key: string]: any
+}
+
+export interface CascaderValue {
+    value: (string | number)[]
+    label: string[]
+}
+
+export interface CascaderEmitValue {
+    value: (string | number)[]
+    label: string[]
+    selectedOptions: CascaderOption[]
+}
+
+export type CascaderLazyLoad = (
+    option: CascaderOption | null,
+    tabIndex: number,
+    resolve: (children: CascaderOption[]) => void
+) => void
+
+export interface ICascaderEmits {
+    (e: 'close'): void
+    (e: 'cancel'): void
+    (e: 'confirm', params: CascaderEmitValue): void
+    (e: 'change', params: CascaderEmitValue): void
+    (e: 'update:show', show: boolean): void
+    (e: 'update:modelValue', value: CascaderValue): void
+}

package/components/hy-check-button/typing.d.ts

@@ -1,33 +1,38 @@
+import type { ExtractPropTypes } from 'vue'
+import type checkButtonProps from './props'
+
+export interface HyCheckButtonProps extends ExtractPropTypes<typeof checkButtonProps> {}
+
 export interface CheckboxColumnsVo extends FieldNamesType {
     /**
-     * @description 显示文本内容
+     * 显示文本内容
      * */
     label?: string
     /**
-     * @description 值
+     * 值
      * */
     value?: string | number
     /**
-     * @description 是否选中
+     * 是否选中
      * */
     checked?: boolean
 
     /**
-     * @description 是否禁用
+     * 是否禁用
      * */
     disabled?: boolean
 }
 export interface IFieldNames {
     /**
-     * @description 自定义columns的文本键
+     * 自定义columns的文本键
      * */
     label: string
     /**
-     * @description 自定义columns的值键
+     * 自定义columns的值键
      * */
     value: string
     /**
-     * @description 自定义columns的选中键
+     * 自定义columns的选中键
      * */
     checked: string
 }

package/components/hy-code-input/hy-code-input.vue

@@ -35,8 +35,8 @@
             :style="{
                 height: boxSize
             }"
-            @focus="isFocus = true"
-            @blur="isFocus = false"
+            @focus="handleFocus"
+            @blur="handleBlur"
         />
     </view>
 </template>
@@ -80,9 +80,19 @@ const boxSize = addUnit(props.size)
 
 watch(
     () => props.modelValue,
-    (newValue: string | number) => {
-        inputValue.value = String(newValue).substring(0, props.maxlength)
-        current.value = newValue.toString().length
+    (newValue: string | number | undefined, oldValue: string | number | undefined) => {
+        const newValueStr = String(newValue).substring(0, props.maxlength)
+        inputValue.value = newValueStr
+        current.value = newValueStr.length
+
+        // 当值从外部更新时（如键盘组件），也触发change事件
+        if (newValue !== oldValue) {
+            emit('change', newValueStr)
+        }
+
+        if (String(inputValue.value).length >= Number(props.maxlength)) {
+            emit('finish', inputValue.value)
+        }
     },
 
     { immediate: true }
@@ -178,14 +188,30 @@ const itemClass = computed(() => {
 })
 
 /**
- * @description 将输入的值，转为数组，给item历遍时，根据当前的索引显示数组的元素
+ * 将输入的值，转为数组，给item历遍时，根据当前的索引显示数组的元素
  */
 const codeArray = computed(() => {
     return String(inputValue.value).split('')
 })
 
 /**
- * @description 监听输入框的值发生变化
+ * 输入框获取焦点时触发
+ * */
+const handleFocus = () => {
+    isFocus.value = true
+    emit('focus')
+}
+
+/**
+ * 输入框失去焦点时触发
+ * */
+const handleBlur = () => {
+    isFocus.value = false
+    emit('blur')
+}
+
+/**
+ * 监听输入框的值发生变化
  * */
 const inputHandler = (e: InputOnInputEvent) => {
     const value = e.detail.value
@@ -200,10 +226,6 @@ const inputHandler = (e: InputOnInputEvent) => {
     emit('change', value)
     // 修改通过v-model双向绑定的值
     emit('update:modelValue', value)
-    // 达到用户指定输入长度时，发出完成事件
-    if (String(value).length >= Number(props.maxlength)) {
-        emit('finish', value)
-    }
 }
 </script>
 

package/components/hy-code-input/typing.d.ts

@@ -5,4 +5,8 @@ export interface ICodeInputEmits {
     (e: 'finish', value: string | number): void
     /** 更新值 */
     (e: 'update:modelValue', value: string | number): void
+    /** 输入框获取焦点时触发 */
+    (e: 'focus'): void
+    /** 输入框失去焦点时触发 */
+    (e: 'blur'): void
 }

package/components/hy-config-provider/hy-config-provider.vue

@@ -1,53 +1,58 @@
-<template>
-    <view :class="themeClass" :style="[themeStyle, { height: height ? addUnit(height) : '' }]">
-        <!-- @slot 默认插槽 -->
-        <slot />
-    </view>
-</template>
-
-<script lang="ts">
-export default {
-    name: 'hy-config-provider',
-    options: {
-        addGlobalClass: true,
-        virtualHost: true,
-        styleIsolation: 'shared'
-    }
-}
-</script>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import { addUnit, colorGradient } from '../../libs'
-import configProviderProps from './props'
-
-/**
- * 将 ConfigProvider 组件的 theme 属性设置为 dark，可以开启深色模式。 深色模式会全局生效，使页面上的所有 Wot 组件变为深色风格。
- * @displayName hy-config-provider
- */
-defineOptions({})
-
-const props = defineProps(configProviderProps)
-
-const themeClass = computed(() => {
-    return [props.customClass, 'hy-config-provider', `hy-theme--${props.theme}`]
-})
-
-const themeStyle = computed(() => {
-    return [
-        {
-            '--hy-theme-color': props.themeColor,
-            '--hy-theme--light':
-                props.theme === 'dark'
-                    ? colorGradient(props.themeColor, '#000')[60]
-                    : colorGradient(props.themeColor)[80],
-            padding: addUnit(props.padding)
-        },
-        props.customStyle
-    ]
-})
-</script>
-
-<style scoped lang="scss">
-@import './index.scss';
-</style>
+<template>
+    <view :class="themeClass" :style="[themeStyle, { height: height ? addUnit(height) : '' }]">
+        <!-- @slot 默认插槽 -->
+        <slot />
+    </view>
+</template>
+
+<script lang="ts">
+export default {
+    name: 'hy-config-provider',
+    options: {
+        addGlobalClass: true,
+        virtualHost: true,
+        styleIsolation: 'shared'
+    }
+}
+</script>
+
+<script setup lang="ts">
+import { computed, provide, toRefs } from 'vue'
+import { addUnit, colorGradient } from '../../libs'
+import configProviderProps from './props'
+
+/**
+ * 将 ConfigProvider 组件的 theme 属性设置为 dark，可以开启深色模式。 深色模式会全局生效，使页面上的所有 Wot 组件变为深色风格。
+ * @displayName hy-config-provider
+ */
+defineOptions({})
+
+const props = defineProps(configProviderProps)
+
+const themeClass = computed(() => {
+    return [props.customClass, 'hy-config-provider', `hy-theme--${props.theme}`]
+})
+
+const themeStyle = computed(() => {
+    return [
+        {
+            '--hy-theme-color': props.themeColor,
+            '--hy-theme--light':
+                props.theme === 'dark'
+                    ? colorGradient(props.themeColor, '#000')[60]
+                    : colorGradient(props.themeColor)[80],
+            padding: addUnit(props.padding)
+        },
+        props.customStyle
+    ]
+})
+
+// 提供给所有后代组件
+provide('hy-config-provider', {
+    ...toRefs(props)
+})
+</script>
+
+<style scoped lang="scss">
+@import './index.scss';
+</style>

package/components/hy-datetime-picker/props.ts

@@ -1,6 +1,6 @@
 import { DateModeEnum, useTranslate } from '../../libs'
 import type { CSSProperties, PropType } from 'vue'
-import type { HyInputProps } from '../hy-input/typing'
+import type { HyInputProps } from '../../index'
 
 const { t } = useTranslate('datetimePicker')
 

package/components/hy-datetime-picker/typing.d.ts

@@ -1,4 +1,4 @@
-import { DateModeEnum } from '../../typing'
+import type { DateModeEnum } from '../../index'
 
 type IParam = {
     /** 值 */

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

@@ -0,0 +1,5 @@
+import type { ExtractPropTypes } from 'vue'
+import type dropdownProps from './props'
+
+export interface HyDropdownProps extends ExtractPropTypes<typeof dropdownProps> {}
+export type FatherIProps = HyDropdownProps

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

@@ -1,3 +1,9 @@
+import type { ExtractPropTypes } from 'vue'
+import type formProps from './props'
+
+export interface HyFormProps extends ExtractPropTypes<typeof formProps> {}
+export type HyFormSimpleProps = HyFormProps
+
 export interface FormRule {
     /**
      * 是否必填

package/components/hy-form-item/typing.d.ts

@@ -1,4 +1,4 @@
-import HyFormSimpleProps, { type FormRule } from '../hy-form/typing'
+import type { HyFormSimpleProps, FormRule } from '../../index'
 import type { ToRefs } from 'vue'
 
 export interface IFormContext extends ToRefs<HyFormSimpleProps> {

package/components/hy-grid/hy-grid.vue

@@ -14,18 +14,18 @@
                     :name="item[customKeys?.icon]"
                     label-pos="bottom"
                     :label="item[customKeys?.name]"
-                    :space="item?.iconConfig?.space || iconConfig?.space || 8"
-                    :color="item?.iconConfig?.color || iconConfig?.color"
-                    :size="item?.iconConfig?.size || iconConfig?.size || 30"
-                    :bold="item?.iconConfig?.bold || iconConfig?.bold"
-                    :customPrefix="item?.iconConfig?.customPrefix"
-                    :imgMode="item?.iconConfig?.imgMode || iconConfig?.imgMode"
-                    :width="item?.iconConfig?.width || iconConfig?.width"
-                    :height="item?.iconConfig?.height || iconConfig?.height"
-                    :top="item?.iconConfig?.top || iconConfig?.top"
-                    :stop="item?.iconConfig?.stop || iconConfig?.stop"
-                    :round="item?.iconConfig?.round || iconConfig?.round || 6"
-                    :customStyle="item?.iconConfig?.customStyle || iconConfig?.customStyle"
+                    :space="item?.iconProps?.space || iconProps?.space || 8"
+                    :color="item?.iconProps?.color || iconProps?.color"
+                    :size="item?.iconProps?.size || iconProps?.size || size"
+                    :bold="item?.iconProps?.bold || iconProps?.bold"
+                    :customPrefix="item?.iconProps?.customPrefix"
+                    :imgMode="item?.iconProps?.imgMode || iconProps?.imgMode"
+                    :width="item?.iconProps?.width || iconProps?.width"
+                    :height="item?.iconProps?.height || iconProps?.height"
+                    :top="item?.iconProps?.top || iconProps?.top"
+                    :stop="item?.iconProps?.stop || iconProps?.stop"
+                    :round="item?.iconProps?.round || iconProps?.round || 6"
+                    :customStyle="item?.iconProps?.customStyle || iconProps?.customStyle"
                 ></hy-icon>
             </view>
         </template>

package/components/hy-grid/index.scss

@@ -13,7 +13,6 @@
   /* #endif */
 
   @include e(item) {
-    align-items: center;
     justify-content: center;
     position: relative;
     flex-direction: column;
@@ -24,9 +23,9 @@
     /* #endif */
 
     /* #ifdef MP */
-    position: relative;
     float: left;
     /* #endif */
+    padding: $hy-border-margin-padding-base 0;
 
     // 只有当有 border 类时才显示边框
     @include m(border) {

package/components/hy-grid/props.ts

@@ -21,6 +21,11 @@ const gridProps = {
         type: Number,
         default: 5
     },
+    /** 图标大小 */
+    size: {
+        type: [Number, String],
+        default: 44
+    },
     /** 是否显示宫格的边框 */
     border: {
         type: Boolean,
@@ -29,7 +34,7 @@ const gridProps = {
     /** 单个宫格高度 */
     itemHeight: {
         type: [Number, String],
-        default: '80px'
+        default: '100%'
     },
     /**
      * 宫格对齐方式，表现为数量少的时候，靠左，居中，还是靠右
@@ -50,7 +55,7 @@ const gridProps = {
         default: 'transparent'
     },
     /** 图标属性api配置集合 */
-    iconConfig: Object as PropType<HyIconProps>,
+    iconProps: Object as PropType<HyIconProps>,
     /** 定义需要用到的外部样式 */
     customStyle: Object as PropType<CSSProperties>,
     /** 自定义外部类名 */

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

@@ -12,7 +12,7 @@ export interface GridItemVo {
     /**
      * 图标属性api配置
      * */
-    iconConfig?: Partial<HyIconProps>
+    iconProps?: Partial<HyIconProps>
     /**
      * 自定义内容键值对
      * */

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

@@ -1,9 +1,52 @@
-import type { ExtractPropTypes } from 'vue'
-import iconProps from './props'
-
-export interface HyIconProps extends ExtractPropTypes<typeof iconProps> {}
-
-export interface IIconEmits {
-    /** 点击图标触发 */
-    (e: 'click', index: string, e: Event): void
-}
+import type { CSSProperties } from 'vue'
+
+export interface HyIconProps {
+    /** 图标名称 */
+    name?: string
+    /** 图标颜色 */
+    color?: string
+    /** 图标字体大小，单位px */
+    size?: number | string
+    /** 是否显示粗体 */
+    bold?: boolean
+    /** 点击图标的时候传递事件出去的index（用于区分点击了哪一个） */
+    index?: string
+    /** 自定义扩展前缀，方便用户扩展自己的图标库 */
+    customPrefix?: string
+    /** 图标右侧的label文字 */
+    label?: string
+    /**
+     * label相对于图标的位置，只能right或bottom
+     * @values right,bottom
+     * */
+    labelPos?: string
+    /** label字体大小，单位px */
+    labelSize?: string
+    /** 图标右侧的label文字颜色 */
+    labelColor?: string
+    /** label与图标的距离，单位px */
+    space?: number | string
+    /** 图片的mode */
+    imgMode?: string
+    /** 显示图片小图标时的宽度 */
+    width?: string | number
+    /** 显示图片小图标时的高度 */
+    height?: string | number
+    /** 图标在垂直方向上的定位 用于解决某些情况下，让图标垂直居中的用途 */
+    top?: string | number
+    /** 是否阻止事件传播 */
+    stop?: boolean
+    /** 是否旋转 */
+    isRotate?: boolean
+    /** 图标圆角 */
+    round?: string | number
+    /** 定义需要用到的外部样式 */
+    customStyle?: CSSProperties
+    /** 自定义外部类名 */
+    customClass?: string
+}
+
+export interface IIconEmits {
+    /** 点击图标触发 */
+    (e: 'click', index: string, e: Event): void
+}