hy-app 0.6.2 → 0.6.4

package/components/hy-button/hy-button.vue

@@ -25,13 +25,7 @@
         :hover-class="!disabled && !loading ? 'hy-button--active' : ''"
         :style="[baseColor, customStyle]"
         @click="clickHandler"
-        :class="[
-            'hy-button',
-            !border && 'hy-button__no-border',
-            !disabled && 'hy-button__no-disabled',
-            bemClass,
-            customClass
-        ]"
+        :class="['hy-button', !border && 'hy-button__no-border', bemClass, customClass]"
     >
         <template v-if="loading">
             <HyLoading :mode="loadingMode" :size="loadingSize" :color="loadingColor"></HyLoading>

package/components/hy-button/index.scss

@@ -17,7 +17,7 @@
   /* 防止文字内容被压缩换行 */
   flex-shrink: 0;
 
-  @include e(no-disabled) {
+  @include m(active) {
     /* 亮光效果 */
     &::before {
       content: '';

package/components/hy-check-button/hy-check-button.vue

@@ -12,7 +12,8 @@
                 @click="onCheckbox"
             >
                 <template #default>
-                    <slot :record="item"></slot>
+                    <slot v-if="$slots.default" :record="item"></slot>
+                    <text v-else>{{ item?.[fieldNames.label] }}</text>
                 </template>
             </hy-tag>
         </template>
@@ -33,9 +34,8 @@ export default {
 <script setup lang="ts">
 import { watch, ref, computed } from 'vue'
 import type { ICheckButtonEmits } from './typing'
-import type { CheckboxColumnsVo } from './typing'
 import HyTag from '../hy-tag/hy-tag.vue'
-import { isArray, isNumber } from '../../libs'
+import { isArray } from '../../libs'
 import type { TagParamsVo } from '../hy-tag/typing'
 import checkButtonProps from './props'
 

package/components/hy-datetime-picker/hy-datetime-picker.vue

@@ -2,7 +2,7 @@
     <view :class="['hy-datetime-picker', customClass]" :style="customStyle">
         <view v-if="hasInput" class="hy-datetime-picker__has-input" @click="onShowByClickInput">
             <slot name="trigger" :value="inputValue">
-                <HyInput
+                <hy-input
                     v-model="inputValue"
                     :disabled="input?.disabled"
                     :disabledColor="input?.disabledColor"
@@ -17,11 +17,11 @@
                     :placeholderStyle="input?.placeholderStyle"
                     :placeholderClass="input?.placeholderClass"
                     :customStyle="Object.assign({ 'pointer-events': 'none' }, input?.customStyle)"
-                ></HyInput>
+                ></hy-input>
                 <view class="input-cover"></view>
             </slot>
         </view>
-        <HyPicker
+        <hy-picker
             :show="show || (hasInput && showByClickInput)"
             :popupMode="popupMode"
             :closeOnClickOverlay="closeOnClickOverlay"
@@ -49,7 +49,7 @@
             <template #toolbar-bottom>
                 <slot name="toolbar-bottom"></slot>
             </template>
-        </HyPicker>
+        </hy-picker>
     </view>
 </template>
 
@@ -99,7 +99,7 @@ const validModes = new Set([
 ])
 
 /**
- * @description 更新各列的值
+ * 更新各列的值
  * */
 const updateColumns = () => {
     const formatterFn = props.formatter || innerFormatter
@@ -110,7 +110,7 @@ const updateColumns = () => {
 }
 
 /**
- * @description 更新各列的值，进行补0、格式化等操作
+ * 更新各列的值，进行补0、格式化等操作
  * */
 const updateColumnValue = (value: string | number) => {
     innerValue.value = value
@@ -215,7 +215,7 @@ const times = (n: number, iteratee: Function) => {
 }
 
 /**
- * @description 关闭选择器
+ * 关闭选择器
  * */
 const close = () => {
     if (props.closeOnClickOverlay) {
@@ -227,7 +227,7 @@ const close = () => {
 }
 
 /**
- * @description 点击工具栏的取消按钮
+ * 点击工具栏的取消按钮
  * */
 const cancel = () => {
     if (props.hasInput) {
@@ -237,9 +237,25 @@ const cancel = () => {
 }
 
 /**
- * @description 点击工具栏的确定按钮
+ * 点击工具栏的确定按钮
  * */
 const confirm = () => {
+    //如果用户还没有触发过change
+    if (!innerValue.value) {
+        let arr = [0]
+        //如果有默认值&&默认值的数组长度是正确的，就用默认值
+        if (
+            Array.isArray(props.defaultIndex) &&
+            props.defaultIndex.length === columns.value.length
+        ) {
+            arr = [...props.defaultIndex]
+        } else {
+            //否则默认都选中第一个
+            arr = Array(columns.value.length).fill(0)
+        }
+        console.log(arr)
+        getInputValue(arr)
+    }
     emit('update:modelValue', innerValue.value)
     if (props.hasInput) {
         getInputValue(innerValue.value)
@@ -252,7 +268,7 @@ const confirm = () => {
 }
 
 /**
- * @description 用正则截取输出值,当出现多组数字时,抛出错误
+ * 用正则截取输出值,当出现多组数字时,抛出错误
  * */
 const intercept = (e: any, type?: string) => {
     let judge = e.match(/\d+/g)
@@ -272,7 +288,7 @@ const intercept = (e: any, type?: string) => {
 }
 
 /**
- * @description 列发生变化时触发
+ * 列发生变化时触发
  * */
 const change = (e: any) => {
     const { indexs, values } = e
@@ -315,7 +331,7 @@ const change = (e: any) => {
 }
 
 /**
- * @description 更新索引
+ * 更新索引
  * */
 const updateIndexes = (value: number | string) => {
     let values: string[] = []
@@ -375,7 +391,7 @@ const updateIndexes = (value: number | string) => {
 }
 
 /**
- * @description 获取每列数据
+ * 获取每列数据
  * */
 const getOriginColumns = () => {
     // 生成各列的值
@@ -397,7 +413,7 @@ const getOriginColumns = () => {
 }
 
 /**
- * @description 得出合法的时间
+ * 得出合法的时间
  * */
 const correctValue = (value: number | string | Date): string | number => {
     const isDateMode = props.mode !== DateModeEnum.TIME
@@ -417,7 +433,7 @@ const correctValue = (value: number | string | Date): string | number => {
     }
 }
 /**
- * @description 获取每列的最大和最小值
+ * 获取每列的最大和最小值
  * */
 const getRanges = () => {
     if (props.mode === DateModeEnum.TIME) {
@@ -470,7 +486,7 @@ const getRanges = () => {
     return arr
 }
 /**
- * @description 根据minDate、maxDate、minHour、maxHour等边界值，判断各列的开始和结束边界值
+ * 根据minDate、maxDate、minHour、maxHour等边界值，判断各列的开始和结束边界值
  * */
 const getBoundary = (type: string, innerVal: string | number) => {
     const value = new Date(innerVal)

package/components/hy-icon/hy-icon.vue

@@ -7,7 +7,7 @@
             :mode="imgMode"
             :style="[imgStyle, customStyle]"
         ></image>
-        <text v-else :class="uClasses" :style="[iconStyle, customStyle]"></text>
+        <text v-else :class="iconClass" :style="[iconStyle, customStyle]"></text>
         <!-- 这里进行空字符串判断，如果仅仅是v-if="label"，可能会出现传递0的时候，结果也无法显示 -->
         <text
             v-if="label"
@@ -41,7 +41,6 @@ import type { CSSProperties } from 'vue'
 import { addUnit } from '../../libs'
 import type { IIconEmits } from './typing'
 import iconProps from './props'
-import { onPageScroll } from '@dcloudio/uni-app'
 
 /**
  * 基于字体的图标集，包含了大多数常见场景的图标，使用简单，开箱即用，无需自己再写每个图标的样式，直接简单配置即可。支持自定义图标。
@@ -52,10 +51,10 @@ defineOptions({})
 const props = defineProps(iconProps)
 const emit = defineEmits<IIconEmits>()
 
-const uClasses = computed(() => {
+const iconClass = computed(() => {
     let classes: string | string[] = [
         'hy-icon__icon',
-        'iconfont',
+        props.customPrefix,
         `${props.customPrefix}-${props.name}`
     ]
     if (props.isRotate) classes.push('hy-rotate')
@@ -84,7 +83,7 @@ const iconStyle = computed<CSSProperties>(() => {
 })
 
 /**
- * @description 判断传入的name属性，是否图片路径，只要带有"/"均认为是图片形式
+ * 判断传入的name属性，是否图片路径，只要带有"/"均认为是图片形式
  * */
 const isImg = computed(() => {
     return props.name?.indexOf('/') !== -1
@@ -99,7 +98,7 @@ const imgStyle = computed((): CSSProperties => {
 })
 
 /**
- * @description 点击
+ * 点击icon图标执行
  * */
 const clickHandler = (e: Event) => {
     emit('click', props.index, e)

package/components/hy-overlay/hy-overlay.vue

@@ -1,60 +1,61 @@
-<template>
-    <hy-transition
-        :show="show"
-        :custom-class="`hy-overlay ${customClass}`"
-        :duration="duration"
-        :custom-style="overlayStyle"
-        @click="clickHandler"
-    >
-        <slot />
-    </hy-transition>
-</template>
-
-<script lang="ts">
-export default {
-    name: 'hy-overlay',
-    options: {
-        addGlobalClass: true,
-        virtualHost: true,
-        styleIsolation: 'shared'
-    }
-}
-</script>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import type { CSSProperties } from 'vue'
-import type { IOverlayEmits } from './typing'
-import overlayProps from './props'
-// 组件
-import HyTransition from '../hy-transition/hy-transition.vue'
-
-/**
- * 创建一个遮罩层，用于强调特定的页面元素，并阻止用户对遮罩下层的内容进行操作，一般用于弹窗场景
- * @displayName hy-overlay
- */
-defineOptions({})
-
-const props = defineProps(overlayProps)
-const emit = defineEmits<IOverlayEmits>()
-
-const overlayStyle = computed<CSSProperties>(() => {
-    const style: CSSProperties = {
-        position: 'fixed',
-        top: 0,
-        left: 0,
-        right: 0,
-        zIndex: props.zIndex,
-        bottom: 0,
-        'background-color': `rgba(0, 0, 0, ${props.opacity})`
-    }
-    return Object.assign(style, props.customStyle)
-})
-const clickHandler = () => {
-    emit('click')
-}
-</script>
-
-<style lang="scss" scoped>
-@import './index.scss';
-</style>
+<template>
+    <hy-transition
+        :show="show"
+        :custom-class="`hy-overlay ${customClass}`"
+        :duration="duration"
+        :custom-style="overlayStyle"
+        @click="clickHandler"
+    >
+        <slot />
+    </hy-transition>
+</template>
+
+<script lang="ts">
+export default {
+    name: 'hy-overlay',
+    options: {
+        addGlobalClass: true,
+        virtualHost: true,
+        styleIsolation: 'shared'
+    }
+}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { CSSProperties } from 'vue'
+import type { IOverlayEmits } from './typing'
+import overlayProps from './props'
+// 组件
+import HyTransition from '../hy-transition/hy-transition.vue'
+
+/**
+ * 创建一个遮罩层，用于强调特定的页面元素，并阻止用户对遮罩下层的内容进行操作，一般用于弹窗场景
+ * @displayName hy-overlay
+ */
+defineOptions({})
+
+const props = defineProps(overlayProps)
+const emit = defineEmits<IOverlayEmits>()
+
+const overlayStyle = computed<CSSProperties>(() => {
+    const style: CSSProperties = {
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        right: 0,
+        zIndex: props.zIndex,
+        bottom: 0,
+        pointerEvents: !props.LockScroll ? 'none' : 'auto',
+        'background-color': `rgba(0, 0, 0, ${props.opacity})`
+    }
+    return Object.assign(style, props.customStyle)
+})
+const clickHandler = () => {
+    emit('click')
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/hy-overlay/props.ts

@@ -1,33 +1,38 @@
-import type { CSSProperties, PropType } from 'vue'
-
-const overlayProps = {
-    /** 是否显示遮罩 */
-    show: {
-        type: Boolean,
-        default: false
-    },
-    /** zIndex 层级 */
-    zIndex: {
-        type: Number,
-        default: 10070
-    },
-    /** 动画时长，单位毫秒 */
-    duration: {
-        type: Number,
-        default: 300
-    },
-    /** 不透明度值，当做rgba的第四个参数 */
-    opacity: {
-        type: Number,
-        default: 0.5
-    },
-    /** 定义需要用到的外部样式 */
-    customStyle: {
-        type: Object as PropType<CSSProperties>,
-        default: () => {}
-    },
-    /** 自定义外部类名 */
-    customClass: String
-}
-
-export default overlayProps
+import type { CSSProperties, PropType } from 'vue'
+
+const overlayProps = {
+    /** 是否显示遮罩 */
+    show: {
+        type: Boolean,
+        default: false
+    },
+    /** zIndex 层级 */
+    zIndex: {
+        type: Number,
+        default: 10070
+    },
+    /** 动画时长，单位毫秒 */
+    duration: {
+        type: Number,
+        default: 300
+    },
+    /** 不透明度值，当做rgba的第四个参数 */
+    opacity: {
+        type: Number,
+        default: 0.5
+    },
+    /** 是否锁住底部滚动 */
+    LockScroll: {
+        type: Boolean,
+        default: true
+    },
+    /** 定义需要用到的外部样式 */
+    customStyle: {
+        type: Object as PropType<CSSProperties>,
+        default: () => {}
+    },
+    /** 自定义外部类名 */
+    customClass: String
+}
+
+export default overlayProps