hy-app 0.5.10 → 0.5.12

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

@@ -218,11 +218,13 @@ const inputLabelValue = computed((): string => {
         innerColumns.value.map((ite, i) => {
             res.push(
                 ...innerColumns.value[i]?.filter((item) => {
-                    return isArray(props.modelValue) && props.modelValue.includes(item['id'])
+                    return (
+                        isArray(props.modelValue) && props.modelValue.includes(item[props.valueKey])
+                    )
                 })
             )
         })
-        res = res.map((item) => item[props.keyName])
+        res = res.map((item) => item[props.labelKey])
         return res.join(props.separator)
     } else {
         //用户确定的值，才显示到输入框
@@ -243,7 +245,7 @@ const inputValue = computed(() => {
     if (items[0] && Object.prototype.toString.call(items[0]) === '[object Object]') {
         //对象数组返回id集合
         items.forEach((element) => {
-            res.push(element && element['id'])
+            res.push(element && element[props.valueKey])
         })
     } else {
         //非对象数组返回元素集合
@@ -267,8 +269,8 @@ const onShowByClickInput = () => {
  * 获取item需要显示的文字，判别为对象还是文本
  * */
 const getItemText = (item: any) => {
-    if (Object.prototype.toString.call(item) === '[object Object]' && props.keyName) {
-        return item[props.keyName]
+    if (Object.prototype.toString.call(item) === '[object Object]' && props.labelKey) {
+        return item[props.labelKey]
     } else {
         return item
     }

package/components/hy-picker/props.ts

@@ -68,9 +68,14 @@ const pickerProps = {
         default: 5
     },
     /** 显示到选项对象中，需要展示的属性键名 */
-    keyName: {
+    labelKey: {
         type: String,
-        default: 'text'
+        default: 'label'
+    },
+    /** 显示到选项对象中，需要展示的属性键名 */
+    valueKey: {
+        type: String,
+        default: 'value'
     },
     /** 是否允许点击遮罩关闭选择器 */
     closeOnClickOverlay: {

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

@@ -1,12 +1,16 @@
-export interface PickerColumnVo extends AnyObject {
+export interface PickerColumnVo {
     /**
-     * @description id必填
+     * value必填,回填根据这个值判断
      * */
-    id: string
+    value: string | number
     /**
-     * @description 显示文本
+     * 显示文本
      * */
-    text?: string
+    label?: string
+    /**
+     * 任意数据
+     * */
+    [key: string]: any
 }
 
 export type SelectValueVo = {

package/components/hy-popover/hy-popover.vue

@@ -1,251 +1,251 @@
-<template>
-    <view
-        :class="['hy-popover', customClass]"
-        :style="customStyle"
-        id="popover"
-        @click.stop="popover.noop"
-    >
-        <!-- 使用插槽时无法获取正确宽高 -->
-        <view class="hy-popover__pos hy-popover__hidden" id="pos">
-            <view class="hy-popover__container">
-                <view v-if="!slots.content && mode === 'normal'" class="hy-popover__inner">
-                    {{ content }}
-                </view>
-                <view
-                    v-if="!slots.content && mode === 'menu' && isArray(content)"
-                    class="hy-popover__menu"
-                >
-                    <view
-                        v-for="(item, index) in content"
-                        :key="index"
-                        class="hy-popover__menu-inner"
-                        @click="menuClick(index)"
-                    >
-                        <hy-icon
-                            v-if="item.iconClass"
-                            :name="item.iconClass"
-                            custom-class="hy-popover__icon"
-                        />
-                        <text>{{ item.content }}</text>
-                    </view>
-                </view>
-            </view>
-        </view>
-
-        <hy-transition
-            custom-class="hy-popover__pos"
-            :custom-style="popover.popStyle.value"
-            :show="showPopover"
-            :duration="200"
-        >
-            <view class="hy-popover__container">
-                <!-- 三角形 -->
-                <view
-                    :class="`hy-popover__arrow ${popover.arrowClass.value}`"
-                    :style="popover.arrowStyle.value"
-                ></view>
-                <!-- 三角形 -->
-
-                <!-- 普通模式 -->
-                <view v-if="!slots.content && mode === 'normal'" class="hy-popover__inner">
-                    {{ content }}
-                </view>
-                <!-- 普通模式 -->
-
-                <!-- 列表模式 -->
-                <view
-                    v-if="!slots.content && mode === 'menu' && isArray(content)"
-                    class="hy-popover__menu"
-                >
-                    <view
-                        v-for="(item, index) in content"
-                        :key="index"
-                        class="hy-popover__menu-inner"
-                        @click="menuClick(index)"
-                        :style="index === 0 ? 'border-top: none' : ''"
-                    >
-                        <hy-icon
-                            v-if="typeof item === 'object' && item.icon"
-                            :name="item.icon"
-                            custom-class="hy-popover__icon"
-                        />
-                        <view style="display: inline-block">
-                            {{ typeof item === 'object' && item.content ? item.content : item }}
-                        </view>
-                    </view>
-                </view>
-                <!-- 列表模式 -->
-
-                <!-- 用户自定义样式 -->
-                <slot name="content" v-else />
-                <!-- 用户自定义样式 -->
-            </view>
-            <hy-icon
-                v-if="showClose"
-                name="close"
-                custom-class="hy-popover__close-icon"
-                @click="toggle"
-            ></hy-icon>
-        </hy-transition>
-        <view @click="toggle" class="hy-popover__target" id="target">
-            <slot />
-        </view>
-    </view>
-</template>
-
-<script lang="ts">
-export default {
-    name: 'hy-popover',
-    options: {
-        virtualHost: true,
-        addGlobalClass: true,
-        styleIsolation: 'shared'
-    }
-}
-</script>
-
-<script lang="ts" setup>
-import {
-    getCurrentInstance,
-    onBeforeMount,
-    onBeforeUnmount,
-    ref,
-    useSlots,
-    watch,
-    inject,
-    nextTick
-} from 'vue'
-import type { IPopoverEmits, PopoverExpose } from './typing'
-import {
-    type Queue,
-    queueKey,
-    usePopover,
-    closeOther,
-    pushToQueue,
-    removeFromQueue,
-    isArray
-} from '../../libs'
-import popoverProps from './props'
-// 组件
-import HyIcon from '../hy-icon/hy-icon.vue'
-import HyTransition from '../hy-transition/hy-transition.vue'
-
-/**
- * 常用于展示提示信息。
- * @displayName hy-popover
- */
-defineOptions({})
-
-const props = defineProps(popoverProps)
-const emit = defineEmits<IPopoverEmits>()
-
-const slots = useSlots()
-const queue = inject<Queue | null>(queueKey, null)
-const selector: string = 'popover'
-const visibleArrow = ref<boolean>(true)
-const { proxy } = getCurrentInstance() as any
-const popover = usePopover()
-const showPopover = ref<boolean>(false) // 控制popover显隐
-
-watch(
-    () => props.content,
-    (newVal) => {
-        if (props.mode === 'normal' && typeof newVal !== 'string') {
-            console.error('在“normal”模式下，值类型必须为字符串类型。')
-        } else if (props.mode === 'menu' && !isArray(newVal)) {
-            console.error('在“menu”模式下，值类型必须是数组类型。')
-        }
-    }
-)
-
-watch(
-    () => props.placement,
-    (newVal) => {
-        nextTick(() => {
-            popover.init(newVal, visibleArrow.value, selector)
-        })
-    },
-    { immediate: true }
-)
-
-watch(
-    () => props.modelValue,
-    (newValue: boolean) => {
-        showPopover.value = newValue
-    }
-)
-
-watch(
-    () => showPopover.value,
-    (newValue) => {
-        if (newValue) {
-            popover.control(props.placement, props.offset)
-            if (queue && queue.closeOther) {
-                queue.closeOther(proxy)
-            } else {
-                closeOther(proxy)
-            }
-        }
-        popover.showStyle.value = newValue ? 'display: inline-block;' : 'display: none;'
-        emit('change', { show: newValue })
-        emit(`${newValue ? 'open' : 'close'}`)
-    }
-)
-
-// onMounted(() => {
-//   setTimeout(() => {
-//     popover.init(props.placement, visibleArrow.value, selector);
-//   }, 2000);
-// });
-
-onBeforeMount(() => {
-    if (queue && queue.pushToQueue) {
-        queue.pushToQueue(proxy)
-    } else {
-        pushToQueue(proxy)
-    }
-    popover.showStyle.value = showPopover.value ? 'opacity: 1;' : 'opacity: 0;'
-})
-
-onBeforeUnmount(() => {
-    if (queue && queue.removeFromQueue) {
-        queue.removeFromQueue(proxy)
-    } else {
-        removeFromQueue(proxy)
-    }
-})
-
-const menuClick = (index: number) => {
-    updateModelValue(false)
-    emit('menuClick', {
-        item: isArray(props.content) ? props.content[index] : props.content,
-        index
-    })
-}
-
-const toggle = () => {
-    if (props.disabled) return
-    updateModelValue(!showPopover.value)
-}
-
-const open = () => {
-    updateModelValue(true)
-}
-
-const close = () => {
-    updateModelValue(false)
-}
-
-function updateModelValue(value: boolean) {
-    showPopover.value = value
-    emit('update:modelValue', value)
-}
-
-defineExpose<PopoverExpose>({
-    open,
-    close
-})
-</script>
-<style lang="scss" scoped>
-@import './index.scss';
-</style>
+<template>
+    <view
+        :class="['hy-popover', customClass]"
+        :style="customStyle"
+        id="popover"
+        @click.stop="popover.noop"
+    >
+        <!-- 使用插槽时无法获取正确宽高 -->
+        <view class="hy-popover__pos hy-popover__hidden" id="pos">
+            <view class="hy-popover__container">
+                <view v-if="!slots.content && mode === 'normal'" class="hy-popover__inner">
+                    {{ content }}
+                </view>
+                <view
+                    v-if="!slots.content && mode === 'menu' && isArray(content)"
+                    class="hy-popover__menu"
+                >
+                    <view
+                        v-for="(item, index) in content"
+                        :key="index"
+                        class="hy-popover__menu-inner"
+                        @click="menuClick(index)"
+                    >
+                        <hy-icon
+                            v-if="item.iconClass"
+                            :name="item.iconClass"
+                            custom-class="hy-popover__icon"
+                        />
+                        <text>{{ item.content }}</text>
+                    </view>
+                </view>
+            </view>
+        </view>
+
+        <hy-transition
+            custom-class="hy-popover__pos"
+            :custom-style="popover.popStyle.value"
+            :show="showPopover"
+            :duration="200"
+        >
+            <view class="hy-popover__container">
+                <!-- 三角形 -->
+                <view
+                    :class="`hy-popover__arrow ${popover.arrowClass.value}`"
+                    :style="popover.arrowStyle.value"
+                ></view>
+                <!-- 三角形 -->
+
+                <!-- 普通模式 -->
+                <view v-if="!slots.content && mode === 'normal'" class="hy-popover__inner">
+                    {{ content }}
+                </view>
+                <!-- 普通模式 -->
+
+                <!-- 列表模式 -->
+                <view
+                    v-if="!slots.content && mode === 'menu' && isArray(content)"
+                    class="hy-popover__menu"
+                >
+                    <view
+                        v-for="(item, index) in content"
+                        :key="index"
+                        class="hy-popover__menu-inner"
+                        @click="menuClick(index)"
+                        :style="index === 0 ? 'border-top: none' : ''"
+                    >
+                        <hy-icon
+                            v-if="typeof item === 'object' && item.icon"
+                            :name="item.icon"
+                            custom-class="hy-popover__icon"
+                        />
+                        <view style="display: inline-block">
+                            {{ typeof item === 'object' && item.content ? item.content : item }}
+                        </view>
+                    </view>
+                </view>
+                <!-- 列表模式 -->
+
+                <!-- 用户自定义样式 -->
+                <slot name="content" v-else />
+                <!-- 用户自定义样式 -->
+            </view>
+            <hy-icon
+                v-if="showClose"
+                name="close"
+                custom-class="hy-popover__close-icon"
+                @click="toggle"
+            ></hy-icon>
+        </hy-transition>
+        <view @click="toggle" class="hy-popover__target" id="target">
+            <slot />
+        </view>
+    </view>
+</template>
+
+<script lang="ts">
+export default {
+    name: 'hy-popover',
+    options: {
+        virtualHost: true,
+        addGlobalClass: true,
+        styleIsolation: 'shared'
+    }
+}
+</script>
+
+<script lang="ts" setup>
+import {
+    getCurrentInstance,
+    onBeforeMount,
+    onBeforeUnmount,
+    ref,
+    useSlots,
+    watch,
+    inject,
+    nextTick
+} from 'vue'
+import type { IPopoverEmits, PopoverExpose } from './typing'
+import {
+    type Queue,
+    queueKey,
+    usePopover,
+    closeOther,
+    pushToQueue,
+    removeFromQueue,
+    isArray
+} from '../../libs'
+import popoverProps from './props'
+// 组件
+import HyIcon from '../hy-icon/hy-icon.vue'
+import HyTransition from '../hy-transition/hy-transition.vue'
+
+/**
+ * 常用于展示提示信息。
+ * @displayName hy-popover
+ */
+defineOptions({})
+
+const props = defineProps(popoverProps)
+const emit = defineEmits<IPopoverEmits>()
+
+const slots = useSlots()
+const queue = inject<Queue | null>(queueKey, null)
+const selector: string = 'popover'
+const visibleArrow = ref<boolean>(true)
+const { proxy } = getCurrentInstance() as any
+const popover = usePopover()
+const showPopover = ref<boolean>(false) // 控制popover显隐
+
+watch(
+    () => props.content,
+    (newVal) => {
+        if (props.mode === 'normal' && typeof newVal !== 'string') {
+            console.error('在“normal”模式下，值类型必须为字符串类型。')
+        } else if (props.mode === 'menu' && !isArray(newVal)) {
+            console.error('在“menu”模式下，值类型必须是数组类型。')
+        }
+    }
+)
+
+watch(
+    () => props.placement,
+    (newVal) => {
+        nextTick(() => {
+            popover.init(newVal, visibleArrow.value, selector)
+        })
+    },
+    { immediate: true }
+)
+
+watch(
+    () => props.modelValue,
+    (newValue: boolean) => {
+        showPopover.value = newValue
+    }
+)
+
+watch(
+    () => showPopover.value,
+    (newValue) => {
+        if (newValue) {
+            popover.control(props.placement, props.offset)
+            if (queue && queue.closeOther) {
+                queue.closeOther(proxy)
+            } else {
+                closeOther(proxy)
+            }
+        }
+        popover.showStyle.value = newValue ? 'display: inline-block;' : 'display: none;'
+        emit('change', { show: newValue })
+        emit(`${newValue ? 'open' : 'close'}`)
+    }
+)
+
+// onMounted(() => {
+//   setTimeout(() => {
+//     popover.init(props.placement, visibleArrow.value, selector);
+//   }, 2000);
+// });
+
+onBeforeMount(() => {
+    if (queue && queue.pushToQueue) {
+        queue.pushToQueue(proxy)
+    } else {
+        pushToQueue(proxy)
+    }
+    popover.showStyle.value = showPopover.value ? 'opacity: 1;' : 'opacity: 0;'
+})
+
+onBeforeUnmount(() => {
+    if (queue && queue.removeFromQueue) {
+        queue.removeFromQueue(proxy)
+    } else {
+        removeFromQueue(proxy)
+    }
+})
+
+const menuClick = (index: number) => {
+    updateModelValue(false)
+    emit('menuClick', {
+        item: isArray(props.content) ? props.content[index] : props.content,
+        index
+    })
+}
+
+const toggle = () => {
+    if (props.disabled) return
+    updateModelValue(!showPopover.value)
+}
+
+const open = () => {
+    updateModelValue(true)
+}
+
+const close = () => {
+    updateModelValue(false)
+}
+
+function updateModelValue(value: boolean) {
+    showPopover.value = value
+    emit('update:modelValue', value)
+}
+
+defineExpose<PopoverExpose>({
+    open,
+    close
+})
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>