hy-app 0.5.9 → 0.5.11

package/components/hy-cell-item/hy-cell-item.vue

@@ -1,161 +1,161 @@
-<template>
-    <view
-        :class="cellClass"
-        :hover-class="hoverClass"
-        :style="customStyle"
-        :hover-stay-time="250"
-        @tap="clickHandler"
-    >
-        <view class="hy-cell-item__left">
-            <view v-if="icon || $slots.icon" class="hy-cell-item__left--icon">
-                <!-- @slot 图标插槽 -->
-                <slot v-if="$slots.icon" name="icon" :icon="item?.icon"></slot>
-                <hy-icon
-                    v-else
-                    :size="iconSize"
-                    :name="icon?.name"
-                    :color="!!(disabled || cellConfig?.disabled.value) ? '#FFFFFF3F' : icon?.color"
-                    :bold="icon?.bold"
-                    :customPrefix="icon?.customPrefix"
-                    :imgMode="icon?.imgMode"
-                    :width="icon?.width"
-                    :height="icon?.height"
-                    :top="icon?.top"
-                    :stop="icon?.stop"
-                    :round="icon?.round"
-                    :customStyle="icon?.customStyle"
-                    :customClass="icon?.customClass"
-                ></hy-icon>
-            </view>
-            <view class="hy-cell-item__left--title">
-                <!-- @slot 列表标题插槽 -->
-                <slot v-if="$slots.title" name="title" :title="title"></slot>
-                <text v-else class="hy-cell-item__left--title__text">
-                    {{ title }}
-                </text>
-                <!-- @slot 列表小标题插槽 -->
-                <slot v-if="$slots.sub" name="sub" :sub="sub"></slot>
-                <text v-else-if="sub" class="hy-cell-item__left--title__sub">
-                    {{ sub }}
-                </text>
-            </view>
-        </view>
-        <view
-            class="hy-cell-item__center"
-            :style="{
-                justifyContent:
-                    cellConfig?.arrange.value === 'left'
-                        ? 'flex-start'
-                        : cellConfig?.arrange.value === 'right'
-                          ? 'flex-end'
-                          : 'center'
-            }"
-        >
-            <!-- @slot 值内容插槽 -->
-            <slot v-if="$slots.value" name="value" :record="item"></slot>
-            <text v-else-if="value" class="hy-cell-item__center--value">
-                {{ value }}
-            </text>
-        </view>
-        <view
-            :class="[
-                'hy-cell-item__right',
-                `hy-cell-item__right--${cellConfig?.arrowDirection.value}`
-            ]"
-            v-if="cellConfig?.isRightIcon.value"
-        >
-            <!-- @slot 右边按钮插槽 -->
-            <slot v-if="$slots['right-icon']" name="right-icon" :icon="rightIcon"></slot>
-            <hy-icon
-                v-else
-                :name="rightIcon?.name || IconConfig.RIGHT"
-                :color="!!(disabled || cellConfig?.disabled.value) ? '#FFFFFF3F' : rightIcon?.color"
-                :bold="rightIcon?.bold"
-                :customPrefix="rightIcon?.customPrefix"
-                :imgMode="rightIcon?.imgMode"
-                :width="rightIcon?.width"
-                :height="rightIcon?.height"
-                :stop="rightIcon?.stop"
-                :round="rightIcon?.round"
-                :customStyle="rightIcon?.customStyle"
-                :customClass="rightIcon?.customClass"
-            ></hy-icon>
-        </view>
-    </view>
-</template>
-
-<script lang="ts">
-export default {
-    name: 'hy-cell-item',
-    options: {
-        virtualHost: true,
-        styleIsolation: 'shared'
-    }
-}
-</script>
-
-<script setup lang="ts">
-import { computed, inject } from 'vue'
-import cellItemProps from './props'
-import type { ICellContext } from './typing'
-import { IconConfig } from '../../libs'
-import type { ICellEmits } from '../hy-cell/typing'
-// 组件
-import HyIcon from '../hy-icon/hy-icon.vue'
-
-const props = defineProps(cellItemProps)
-const emit = defineEmits<ICellEmits>()
-const cellConfig = inject<ICellContext>('hy-cell')
-
-// 单元格类名
-const cellClass = computed(() => {
-    return [
-        'hy-cell-item',
-        `hy-cell-item--${cellConfig?.size.value}`,
-        cellConfig?.border.value && 'hy-border__bottom',
-        (props.disabled || cellConfig?.disabled.value) && 'hy-cell-item__disabled',
-        props.customClass
-    ]
-})
-
-// 计算什么时候出现点击状态
-const hoverClass = computed(() => {
-    if (!(props.disabled || cellConfig?.disabled.value) && cellConfig?.clickable.value) {
-        return 'hy-cell-item__clickable'
-    } else {
-        return ''
-    }
-})
-
-// 图标大小
-const iconSize = computed(() => {
-    switch (cellConfig?.size.value) {
-        case 'large':
-            return 25
-        case 'medium':
-            return 20
-        case 'small':
-            return 15
-    }
-})
-
-/**
- * 点击cell
- * */
-const clickHandler = (e: Event) => {
-    if (cellConfig?.disabled.value || props.disabled) return
-    if (props.stop) e.stopPropagation()
-
-    emit('click', props.name)
-    cellConfig?.onClick(props.name)
-    if (props.url) {
-        ;(uni as any)[props.linkType]({
-            url: props.url
-        })
-    }
-}
-</script>
-
-<style lang="scss" scoped>
-@import './index.scss';
-</style>
+<template>
+    <view
+        :class="cellClass"
+        :hover-class="hoverClass"
+        :style="customStyle"
+        :hover-stay-time="250"
+        @tap="clickHandler"
+    >
+        <view class="hy-cell-item__left">
+            <view v-if="icon || $slots.icon" class="hy-cell-item__left--icon">
+                <!-- @slot 图标插槽 -->
+                <slot v-if="$slots.icon" name="icon" :icon="item?.icon"></slot>
+                <hy-icon
+                    v-else
+                    :size="iconSize"
+                    :name="icon?.name"
+                    :color="!!(disabled || cellConfig?.disabled.value) ? '#FFFFFF3F' : icon?.color"
+                    :bold="icon?.bold"
+                    :customPrefix="icon?.customPrefix"
+                    :imgMode="icon?.imgMode"
+                    :width="icon?.width"
+                    :height="icon?.height"
+                    :top="icon?.top"
+                    :stop="icon?.stop"
+                    :round="icon?.round"
+                    :customStyle="icon?.customStyle"
+                    :customClass="icon?.customClass"
+                ></hy-icon>
+            </view>
+            <view class="hy-cell-item__left--title">
+                <!-- @slot 列表标题插槽 -->
+                <slot v-if="$slots.title" name="title" :title="title"></slot>
+                <text v-else class="hy-cell-item__left--title__text">
+                    {{ title }}
+                </text>
+                <!-- @slot 列表小标题插槽 -->
+                <slot v-if="$slots.sub" name="sub" :sub="sub"></slot>
+                <text v-else-if="sub" class="hy-cell-item__left--title__sub">
+                    {{ sub }}
+                </text>
+            </view>
+        </view>
+        <view
+            class="hy-cell-item__center"
+            :style="{
+                justifyContent:
+                    cellConfig?.arrange.value === 'left'
+                        ? 'flex-start'
+                        : cellConfig?.arrange.value === 'right'
+                          ? 'flex-end'
+                          : 'center'
+            }"
+        >
+            <!-- @slot 值内容插槽 -->
+            <slot v-if="$slots.value" name="value" :record="item"></slot>
+            <text v-else-if="value" class="hy-cell-item__center--value">
+                {{ value }}
+            </text>
+        </view>
+        <view
+            :class="[
+                'hy-cell-item__right',
+                `hy-cell-item__right--${cellConfig?.arrowDirection.value}`
+            ]"
+            v-if="cellConfig?.isRightIcon.value"
+        >
+            <!-- @slot 右边按钮插槽 -->
+            <slot v-if="$slots['right-icon']" name="right-icon" :icon="rightIcon"></slot>
+            <hy-icon
+                v-else
+                :name="rightIcon?.name || IconConfig.RIGHT"
+                :color="!!(disabled || cellConfig?.disabled.value) ? '#FFFFFF3F' : rightIcon?.color"
+                :bold="rightIcon?.bold"
+                :customPrefix="rightIcon?.customPrefix"
+                :imgMode="rightIcon?.imgMode"
+                :width="rightIcon?.width"
+                :height="rightIcon?.height"
+                :stop="rightIcon?.stop"
+                :round="rightIcon?.round"
+                :customStyle="rightIcon?.customStyle"
+                :customClass="rightIcon?.customClass"
+            ></hy-icon>
+        </view>
+    </view>
+</template>
+
+<script lang="ts">
+export default {
+    name: 'hy-cell-item',
+    options: {
+        virtualHost: true,
+        styleIsolation: 'shared'
+    }
+}
+</script>
+
+<script setup lang="ts">
+import { computed, inject } from 'vue'
+import cellItemProps from './props'
+import type { ICellContext } from './typing'
+import { IconConfig } from '../../libs'
+import type { ICellEmits } from '../hy-cell/typing'
+// 组件
+import HyIcon from '../hy-icon/hy-icon.vue'
+
+const props = defineProps(cellItemProps)
+const emit = defineEmits<ICellEmits>()
+const cellConfig = inject<ICellContext>('hy-cell')
+
+// 单元格类名
+const cellClass = computed(() => {
+    return [
+        'hy-cell-item',
+        `hy-cell-item--${cellConfig?.size.value}`,
+        cellConfig?.border.value && 'hy-border__bottom',
+        (props.disabled || cellConfig?.disabled.value) && 'hy-cell-item__disabled',
+        props.customClass
+    ]
+})
+
+// 计算什么时候出现点击状态
+const hoverClass = computed(() => {
+    if (!(props.disabled || cellConfig?.disabled.value) && cellConfig?.clickable.value) {
+        return 'hy-cell-item__clickable'
+    } else {
+        return ''
+    }
+})
+
+// 图标大小
+const iconSize = computed(() => {
+    switch (cellConfig?.size.value) {
+        case 'large':
+            return 25
+        case 'medium':
+            return 20
+        case 'small':
+            return 15
+    }
+})
+
+/**
+ * 点击cell
+ * */
+const clickHandler = (e: Event) => {
+    if (cellConfig?.disabled.value || props.disabled) return
+    if (props.stop) e.stopPropagation()
+
+    emit('click', props.name)
+    cellConfig?.onClick(props.name)
+    if (props.url) {
+        ;(uni as any)[props.linkType]({
+            url: props.url
+        })
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/hy-cell-item/props.ts

@@ -1,66 +1,66 @@
-import type { CSSProperties, PropType } from 'vue'
-import type { HyIconProps } from '../hy-icon/typing'
-
-const cellItemProps = {
-    /** 头部标题 */
-    title: String,
-    /** 标题下面小提示 */
-    sub: String,
-    /** 是否禁用cell */
-    disabled: {
-        type: Boolean,
-        default: false
-    },
-    /** 右侧的内容 */
-    value: String,
-    /** 图标，接收icon对象 */
-    icon: {
-        type: Object as PropType<HyIconProps>
-    },
-    /** 右边图标，默认是向左图标 */
-    rightIcon: {
-        type: Object as PropType<HyIconProps>
-    },
-    /**
-     * 右侧箭头的方向
-     * @values left,up,down
-     * */
-    arrowDirection: {
-        type: String,
-        default: 'right'
-    },
-    /**
-     * 点击后跳转的URL地址
-     * */
-    url: {
-        type: String,
-        default: ''
-    },
-    /**
-     * 链接跳转的方式，内部使用的是uview-plus封装的route方法，可能会进行拦截操作
-     * */
-    linkType: {
-        type: String,
-        default: 'navigateTo'
-    },
-    /**
-     * 点击cell是否阻止事件传播
-     * */
-    stop: {
-        type: Boolean,
-        default: true
-    },
-    /**
-     * 标识符，用于在click事件中进行返回
-     * */
-    name: {
-        type: [String, Number],
-        default: ''
-    },
-    /** 定义需要用到的外部样式 */
-    customStyle: Object as PropType<CSSProperties>,
-    /** 自定义外部类名 */
-    customClass: String
-}
-
-export default cellItemProps
+import type { CSSProperties, PropType } from 'vue'
+import type { HyIconProps } from '../hy-icon/typing'
+
+const cellItemProps = {
+    /** 头部标题 */
+    title: String,
+    /** 标题下面小提示 */
+    sub: String,
+    /** 是否禁用cell */
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    /** 右侧的内容 */
+    value: String,
+    /** 图标，接收icon对象 */
+    icon: {
+        type: Object as PropType<HyIconProps>
+    },
+    /** 右边图标，默认是向左图标 */
+    rightIcon: {
+        type: Object as PropType<HyIconProps>
+    },
+    /**
+     * 右侧箭头的方向
+     * @values left,up,down
+     * */
+    arrowDirection: {
+        type: String,
+        default: 'right'
+    },
+    /**
+     * 点击后跳转的URL地址
+     * */
+    url: {
+        type: String,
+        default: ''
+    },
+    /**
+     * 链接跳转的方式，内部使用的是uview-plus封装的route方法，可能会进行拦截操作
+     * */
+    linkType: {
+        type: String,
+        default: 'navigateTo'
+    },
+    /**
+     * 点击cell是否阻止事件传播
+     * */
+    stop: {
+        type: Boolean,
+        default: true
+    },
+    /**
+     * 标识符，用于在click事件中进行返回
+     * */
+    name: {
+        type: [String, Number],
+        default: ''
+    },
+    /** 定义需要用到的外部样式 */
+    customStyle: Object as PropType<CSSProperties>,
+    /** 自定义外部类名 */
+    customClass: String
+}
+
+export default cellItemProps

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

@@ -1,7 +1,7 @@
-import type { ExtractPropTypes, ToRefs } from 'vue'
-import type cellProps from '../hy-cell/props'
-
-export interface ICellContext extends ToRefs<ExtractPropTypes<typeof cellProps>> {
-    /** 点击事件 */
-    onClick: (name: string | number) => void
-}
+import type { ExtractPropTypes, ToRefs } from 'vue'
+import type cellProps from '../hy-cell/props'
+
+export interface ICellContext extends ToRefs<ExtractPropTypes<typeof cellProps>> {
+    /** 点击事件 */
+    onClick: (name: string | number) => void
+}

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

@@ -1,96 +1,96 @@
-<template>
-    <view class="hy-check-button">
-        <template v-for="(item, i) in columns_1" :key="i">
-            <HyTag
-                :text="item?.[fieldNames.label] as string"
-                :name="i"
-                :type="type"
-                :size="size"
-                :shape="shape"
-                :disabled="isDisabled(item.disabled)"
-                :plain="!item?.[fieldNames.checked]"
-                @click="onCheckbox"
-            ></HyTag>
-        </template>
-    </view>
-</template>
-
-<script lang="ts">
-export default {
-    name: 'hy-check-button',
-    options: {
-        addGlobalClass: true,
-        virtualHost: true,
-        styleIsolation: 'shared'
-    }
-}
-</script>
-
-<script setup lang="ts">
-import { watch, ref } 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 type { TagParamsVo } from '../hy-tag/typing'
-import checkButtonProps from './props'
-
-/**
- * 该组件内部实现以tag二次封装按钮复选框和单选框
- * @displayName hy-check-button
- */
-defineOptions({})
-
-const props = defineProps(checkButtonProps)
-const emit = defineEmits<ICheckButtonEmits>()
-
-const isDisabled = (disabledVal?: boolean): boolean => props.disabled || !!disabledVal
-
-const columns_1 = ref<CheckboxColumnsVo[]>()
-
-watch(
-    () => props.modelValue,
-    (newValue: string | number | (string | number)[]) => {
-        if (!isArray(props.columns) || !props.columns.length) return
-        columns_1.value = props.columns.map((item) => {
-            if (isArray(newValue)) {
-                item[props.fieldNames.checked] = newValue.includes(
-                    item[props.fieldNames.value] as string
-                )
-            } else {
-                item[props.fieldNames.checked] = newValue === item[props.fieldNames.value]
-            }
-            return item
-        })
-    },
-    { immediate: true }
-)
-
-const onCheckbox = ({ name }: TagParamsVo) => {
-    if (name !== undefined && isNumber(name)) {
-        const index = Number(name)
-        if (props.selectType === 'checkbox') {
-            props.columns[index][props.fieldNames.checked] =
-                !props.columns[index][props.fieldNames.checked]
-            emit(
-                'update:modelValue',
-                props.columns
-                    .filter((item) => item[props.fieldNames.checked])
-                    .map((item) => item[props.fieldNames.value])
-            )
-        } else {
-            emit('update:modelValue', props.columns[index][props.fieldNames.value])
-        }
-        emit('change', props.columns[index])
-    }
-}
-</script>
-
-<style lang="scss" scoped>
-@import '../../libs/css/mixin';
-@include b(check-button) {
-    display: grid;
-    grid-template-columns: v-bind(col);
-    gap: v-bind(gap);
-}
-</style>
+<template>
+    <view class="hy-check-button">
+        <template v-for="(item, i) in columns_1" :key="i">
+            <hy-tag
+                :text="item?.[fieldNames.label]"
+                :name="i"
+                :type="type"
+                :size="size"
+                :shape="shape"
+                :disabled="isDisabled(item.disabled)"
+                :plain="!item?.[fieldNames.checked]"
+                @click="onCheckbox"
+            ></hy-tag>
+        </template>
+    </view>
+</template>
+
+<script lang="ts">
+export default {
+    name: 'hy-check-button',
+    options: {
+        addGlobalClass: true,
+        virtualHost: true,
+        styleIsolation: 'shared'
+    }
+}
+</script>
+
+<script setup lang="ts">
+import { watch, ref } 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 type { TagParamsVo } from '../hy-tag/typing'
+import checkButtonProps from './props'
+
+/**
+ * 该组件内部实现以tag二次封装按钮复选框和单选框
+ * @displayName hy-check-button
+ */
+defineOptions({})
+
+const props = defineProps(checkButtonProps)
+const emit = defineEmits<ICheckButtonEmits>()
+
+const isDisabled = (disabledVal?: boolean): boolean => props.disabled || !!disabledVal
+
+const columns_1 = ref<CheckboxColumnsVo[]>()
+
+watch(
+    () => props.modelValue,
+    (newValue: string | number | (string | number)[]) => {
+        if (!isArray(props.columns) || !props.columns.length) return
+        columns_1.value = props.columns.map((item) => {
+            if (isArray(newValue)) {
+                item[props.fieldNames.checked] = newValue.includes(
+                    item[props.fieldNames.value] as string
+                )
+            } else {
+                item[props.fieldNames.checked] = newValue === item[props.fieldNames.value]
+            }
+            return item
+        })
+    },
+    { immediate: true }
+)
+
+const onCheckbox = ({ name }: TagParamsVo) => {
+    if (name !== undefined && isNumber(name)) {
+        const index = Number(name)
+        if (props.selectType === 'checkbox') {
+            props.columns[index][props.fieldNames.checked] =
+                !props.columns[index][props.fieldNames.checked]
+            emit(
+                'update:modelValue',
+                props.columns
+                    .filter((item) => item[props.fieldNames.checked])
+                    .map((item) => item[props.fieldNames.value])
+            )
+        } else {
+            emit('update:modelValue', props.columns[index][props.fieldNames.value])
+        }
+        emit('change', props.columns[index])
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../libs/css/mixin';
+@include b(check-button) {
+    display: grid;
+    grid-template-columns: v-bind(col);
+    gap: v-bind(gap);
+}
+</style>