hy-app 0.6.4 → 0.6.6

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

@@ -1,61 +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,
-        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>
+<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,38 +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
-    },
-    /** 是否锁住底部滚动 */
-    LockScroll: {
-        type: Boolean,
-        default: true
-    },
-    /** 定义需要用到的外部样式 */
-    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

package/components/hy-pagination/hy-pagination.vue

@@ -1,136 +1,136 @@
-<template>
-    <view class="hy-pagination" :style="customStyle" v-if="!(hideIfOnePage && totalPageNum === 1)">
-        <view class="hy-pagination__content">
-            <hy-button
-                :plain="modelValue > 1"
-                type="info"
-                size="small"
-                :disabled="modelValue <= 1"
-                shape="circle"
-                class="hy-pagination__nav"
-                @click="sub"
-            >
-                <text v-if="!showIcon">{{ prevText }}</text>
-                <hy-icon
-                    v-else
-                    :class="`hy-pagination__left hy-pagination__icon ${
-                        modelValue <= 1
-                            ? 'hy-pagination__nav--disabled'
-                            : 'hy-pagination__nav--active'
-                    }`"
-                    :name="IconConfig.LEFT"
-                ></hy-icon>
-            </hy-button>
-            <view class="hy-pagination__size">
-                <text class="hy-pagination__current">{{ modelValue }}</text>
-                <text class="hy-pagination__separator">/</text>
-                <text>{{ totalPageNum }}</text>
-            </view>
-            <hy-button
-                :plain="modelValue < totalPageNum"
-                type="info"
-                size="small"
-                :disabled="modelValue >= totalPageNum"
-                shape="circle"
-                @click="add"
-            >
-                <text v-if="!showIcon">{{ nextText }}</text>
-                <hy-icon
-                    v-else
-                    :custom-class="`hy-pagination__icon ${
-                        modelValue >= totalPageNum
-                            ? 'hy-pagination__nav--disabled'
-                            : 'hy-pagination__nav--active'
-                    }`"
-                    :name="IconConfig.RIGHT"
-                ></hy-icon>
-            </hy-button>
-        </view>
-        <view class="hy-pagination__message" v-if="showMessage">
-            <text>{{ t('page', modelValue) }}，</text>
-            <text v-if="total">{{ t('total', total) }}，</text>
-            <text>{{ t('size', pageSize) }}</text>
-        </view>
-    </view>
-</template>
-
-<script lang="ts">
-export default {
-    name: 'hy-pagination',
-    options: {
-        virtualHost: true,
-        addGlobalClass: true,
-        styleIsolation: 'shared'
-    }
-}
-</script>
-
-<script lang="ts" setup>
-import { ref, watch } from 'vue'
-import type { IPaginationEmits } from './typing'
-import { IconConfig, useTranslate } from '../../libs'
-import paginationProps from './props'
-// 组件
-import HyIcon from '../hy-icon/hy-icon.vue'
-import HyButton from '../hy-button/hy-button.vue'
-
-/**
- * 当数据量过多时，使用分页分解数据。
- * @displayName hy-pagination
- */
-defineOptions({})
-
-const props = defineProps(paginationProps)
-const emit = defineEmits<IPaginationEmits>()
-
-const { t } = useTranslate('pagination')
-const totalPageNum = ref<number>(0) // 总页数
-
-watch(
-    () => props.totalPage,
-    (newValue) => {
-        if (!totalPageNum.value && newValue) {
-            totalPageNum.value = totalPageNum.value
-        }
-    },
-    { immediate: true, deep: true }
-)
-
-watch(
-    () => props.total,
-    () => {
-        updateTotalPage()
-    },
-    { immediate: true, deep: true }
-)
-
-/**
- * @description 加数
- * */
-const add = () => {
-    const { modelValue } = props
-    if (modelValue > totalPageNum.value - 1) {
-        return
-    }
-    emit('change', { value: modelValue + 1 })
-    emit('update:modelValue', modelValue + 1)
-}
-
-const sub = () => {
-    const { modelValue } = props
-    if (modelValue < 2) {
-        return
-    }
-    emit('change', { value: modelValue - 1 })
-    emit('update:modelValue', modelValue - 1)
-}
-
-function updateTotalPage() {
-    const { total, pageSize } = props
-    totalPageNum.value = Math.ceil(total / pageSize)
-}
-</script>
-
-<style lang="scss" scoped>
-@import './index.scss';
-</style>
+<template>
+    <view class="hy-pagination" :style="customStyle" v-if="!(hideIfOnePage && totalPageNum === 1)">
+        <view class="hy-pagination__content">
+            <hy-button
+                :plain="modelValue > 1"
+                type="info"
+                size="small"
+                :disabled="modelValue <= 1"
+                shape="circle"
+                class="hy-pagination__nav"
+                @click="sub"
+            >
+                <text v-if="!showIcon">{{ prevText }}</text>
+                <hy-icon
+                    v-else
+                    :class="`hy-pagination__left hy-pagination__icon ${
+                        modelValue <= 1
+                            ? 'hy-pagination__nav--disabled'
+                            : 'hy-pagination__nav--active'
+                    }`"
+                    :name="IconConfig.LEFT"
+                ></hy-icon>
+            </hy-button>
+            <view class="hy-pagination__size">
+                <text class="hy-pagination__current">{{ modelValue }}</text>
+                <text class="hy-pagination__separator">/</text>
+                <text>{{ totalPageNum }}</text>
+            </view>
+            <hy-button
+                :plain="modelValue < totalPageNum"
+                type="info"
+                size="small"
+                :disabled="modelValue >= totalPageNum"
+                shape="circle"
+                @click="add"
+            >
+                <text v-if="!showIcon">{{ nextText }}</text>
+                <hy-icon
+                    v-else
+                    :custom-class="`hy-pagination__icon ${
+                        modelValue >= totalPageNum
+                            ? 'hy-pagination__nav--disabled'
+                            : 'hy-pagination__nav--active'
+                    }`"
+                    :name="IconConfig.RIGHT"
+                ></hy-icon>
+            </hy-button>
+        </view>
+        <view class="hy-pagination__message" v-if="showMessage">
+            <text>{{ t('page', modelValue) }}，</text>
+            <text v-if="total">{{ t('total', total) }}，</text>
+            <text>{{ t('size', pageSize) }}</text>
+        </view>
+    </view>
+</template>
+
+<script lang="ts">
+export default {
+    name: 'hy-pagination',
+    options: {
+        virtualHost: true,
+        addGlobalClass: true,
+        styleIsolation: 'shared'
+    }
+}
+</script>
+
+<script lang="ts" setup>
+import { ref, watch } from 'vue'
+import type { IPaginationEmits } from './typing'
+import { IconConfig, useTranslate } from '../../libs'
+import paginationProps from './props'
+// 组件
+import HyIcon from '../hy-icon/hy-icon.vue'
+import HyButton from '../hy-button/hy-button.vue'
+
+/**
+ * 当数据量过多时，使用分页分解数据。
+ * @displayName hy-pagination
+ */
+defineOptions({})
+
+const props = defineProps(paginationProps)
+const emit = defineEmits<IPaginationEmits>()
+
+const { t } = useTranslate('pagination')
+const totalPageNum = ref<number>(0) // 总页数
+
+watch(
+    () => props.totalPage,
+    (newValue) => {
+        if (!totalPageNum.value && newValue) {
+            totalPageNum.value = totalPageNum.value
+        }
+    },
+    { immediate: true, deep: true }
+)
+
+watch(
+    () => props.total,
+    () => {
+        updateTotalPage()
+    },
+    { immediate: true, deep: true }
+)
+
+/**
+ * @description 加数
+ * */
+const add = () => {
+    const { modelValue } = props
+    if (modelValue > totalPageNum.value - 1) {
+        return
+    }
+    emit('change', { value: modelValue + 1 })
+    emit('update:modelValue', modelValue + 1)
+}
+
+const sub = () => {
+    const { modelValue } = props
+    if (modelValue < 2) {
+        return
+    }
+    emit('change', { value: modelValue - 1 })
+    emit('update:modelValue', modelValue - 1)
+}
+
+function updateTotalPage() {
+    const { total, pageSize } = props
+    totalPageNum.value = Math.ceil(total / pageSize)
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/hy-pagination/props.ts

@@ -1,58 +1,58 @@
-import type { CSSProperties, PropType } from 'vue'
-import { useTranslate } from '../../libs'
-
-const { t } = useTranslate('pagination')
-
-const paginationProps = {
-    /** 当前页 */
-    modelValue: {
-        type: Number,
-        default: 1
-    },
-    /** 总页数，如果有total，则优先使用total计算页数 */
-    totalPage: {
-        type: Number,
-        default: 1
-    },
-    /** 是否展示分页为Icon图标 */
-    showIcon: {
-        type: Boolean,
-        default: false
-    },
-    /** 是否展示总条数 */
-    showMessage: {
-        type: Boolean,
-        default: false
-    },
-    /** 总条数 */
-    total: {
-        type: Number,
-        default: 0
-    },
-    /** 每页条数 */
-    pageSize: {
-        type: Number,
-        default: 10
-    },
-    /** 上一页文本 */
-    prevText: {
-        type: String,
-        default: () => t('prev')
-    },
-    /** 下一页文本 */
-    nextText: {
-        type: String,
-        default: () => t('next')
-    },
-    /** 总页数只有一页时是否隐藏 */
-    hideIfOnePage: {
-        type: Boolean,
-        default: true
-    },
-    /** 定义需要用到的外部样式 */
-    customStyle: {
-        type: Object as PropType<CSSProperties>
-    }
-}
-
-export default paginationProps
+import type { CSSProperties, PropType } from 'vue'
+import { useTranslate } from '../../libs'
+
+const { t } = useTranslate('pagination')
+
+const paginationProps = {
+    /** 当前页 */
+    modelValue: {
+        type: Number,
+        default: 1
+    },
+    /** 总页数，如果有total，则优先使用total计算页数 */
+    totalPage: {
+        type: Number,
+        default: 1
+    },
+    /** 是否展示分页为Icon图标 */
+    showIcon: {
+        type: Boolean,
+        default: false
+    },
+    /** 是否展示总条数 */
+    showMessage: {
+        type: Boolean,
+        default: false
+    },
+    /** 总条数 */
+    total: {
+        type: Number,
+        default: 0
+    },
+    /** 每页条数 */
+    pageSize: {
+        type: Number,
+        default: 10
+    },
+    /** 上一页文本 */
+    prevText: {
+        type: String,
+        default: () => t('prev')
+    },
+    /** 下一页文本 */
+    nextText: {
+        type: String,
+        default: () => t('next')
+    },
+    /** 总页数只有一页时是否隐藏 */
+    hideIfOnePage: {
+        type: Boolean,
+        default: true
+    },
+    /** 定义需要用到的外部样式 */
+    customStyle: {
+        type: Object as PropType<CSSProperties>
+    }
+}
+
+export default paginationProps