hy-app 0.4.13 → 0.5.0

package/components/hy-line/hy-line.vue

@@ -1,93 +1,55 @@
 <template>
-  <view :class="['hy-line', customClass]" :style="lineStyle"></view>
+    <view :class="['hy-line', customClass]" :style="lineStyle"></view>
 </template>
 
 <script lang="ts">
 export default {
-  name: "hy-line",
-  options: {
-    addGlobalClass: true,
-    virtualHost: true,
-    styleIsolation: "shared",
-  },
-};
+    name: 'hy-line',
+    options: {
+        addGlobalClass: true,
+        virtualHost: true,
+        styleIsolation: 'shared'
+    }
+}
 </script>
 
 <script setup lang="ts">
-import { computed } from "vue";
-import type { CSSProperties, PropType } from "vue";
-import { addUnit } from "../../libs";
+import { computed } from 'vue'
+import type { CSSProperties } from 'vue'
+import { addUnit } from '../../libs'
+import lineProps from './props'
 
 /**
  * 一般用于显示一根线条，用于分隔内容块，有横向和竖向两种模式，且能设置0.5px线条，使用也很简单。
  * @displayName hy-line
  */
-defineOptions({});
+defineOptions({})
 
-// const props = withDefaults(defineProps<IProps>(), defaultProps);
-const props = defineProps({
-  /** 线条的颜色 */
-  color: String,
-  /** 长度，竖向时表现为高度，横向时表现为长度，可以为百分比，带px单位的值等 */
-  length: {
-    type: String,
-    default: "100%",
-  },
-  /**
-   * 线条的方向
-   * @values row,column
-   * */
-  direction: {
-    type: String,
-    default: "row",
-  },
-  /** 是否显示细线条 */
-  hairline: {
-    type: Boolean,
-    default: true,
-  },
-  /** 线条与上下左右 元素的间距，字符串形式，如"30px" */
-  margin: {
-    type: [String, Number],
-    default: 0,
-  },
-  /** 是否虚线 */
-  dashed: {
-    type: Boolean,
-    default: false,
-  },
-  /** 定义需要用到的外部样式 */
-  customStyle: {
-    type: Object as PropType<CSSProperties>,
-    default: () => {},
-  },
-  /** 自定义外部类名 */
-  customClass: String,
-});
+const props = defineProps(lineProps)
 
 const lineStyle = computed<CSSProperties>(() => {
-  const style: CSSProperties = {};
-  style.margin = props.margin;
-  // 如果是水平线条，边框高度为1px，再通过transform缩小一半，就是0.5px了
-  if (props.direction === "row") {
-    // 此处采用兼容分开写，兼容nvue的写法
-    style.borderBottomWidth = "1px";
-    style.borderBottomStyle = props.dashed ? "dashed" : "solid";
-    style.width = addUnit(props.length);
-    if (!props.hairline) style.borderBottomWidth = "1.5px";
-  } else {
-    // 如果是竖向线条，边框宽度为1px，再通过transform缩小一半，就是0.5px了
-    style.borderLeftWidth = "1px";
-    style.borderLeftStyle = props.dashed ? "dashed" : "solid";
-    style.height = addUnit(props.length);
-    if (props.hairline) style.transform = "scaleX(0.5)";
-  }
+    const style: CSSProperties = {}
+    style.margin = props.margin
+    // 如果是水平线条，边框高度为1px，再通过transform缩小一半，就是0.5px了
+    if (props.direction === 'row') {
+        // 此处采用兼容分开写，兼容nvue的写法
+        style.borderBottomWidth = '1px'
+        style.borderBottomStyle = props.dashed ? 'dashed' : 'solid'
+        style.width = addUnit(props.length)
+        if (!props.hairline) style.borderBottomWidth = '1.5px'
+    } else {
+        // 如果是竖向线条，边框宽度为1px，再通过transform缩小一半，就是0.5px了
+        style.borderLeftWidth = '1px'
+        style.borderLeftStyle = props.dashed ? 'dashed' : 'solid'
+        style.height = addUnit(props.length)
+        if (props.hairline) style.transform = 'scaleX(0.5)'
+    }
 
-  style.borderColor = props.color;
-  return Object.assign(style, props.customStyle);
-});
+    style.borderColor = props.color
+    return Object.assign(style, props.customStyle)
+})
 </script>
 
 <style lang="scss" scoped>
-@import "./index.scss";
+@import './index.scss';
 </style>

package/components/hy-line/props.ts

@@ -1,12 +1,43 @@
-import type IProps from "./typing";
+import type { CSSProperties, PropType } from 'vue'
 
-const defaultProps: IProps = {
-  color: "",
-  length: "100%",
-  direction: "row",
-  hairline: true,
-  margin: "0",
-  dashed: false,
-};
+const lineProps = {
+    /** 线条的颜色 */
+    color: String,
+    /** 长度，竖向时表现为高度，横向时表现为长度，可以为百分比，带px单位的值等 */
+    length: {
+        type: String,
+        default: '100%'
+    },
+    /**
+     * 线条的方向
+     * @values row,column
+     * */
+    direction: {
+        type: String,
+        default: 'row'
+    },
+    /** 是否显示细线条 */
+    hairline: {
+        type: Boolean,
+        default: true
+    },
+    /** 线条与上下左右 元素的间距，字符串形式，如"30px" */
+    margin: {
+        type: [String, Number],
+        default: 0
+    },
+    /** 是否虚线 */
+    dashed: {
+        type: Boolean,
+        default: false
+    },
+    /** 定义需要用到的外部样式 */
+    customStyle: {
+        type: Object as PropType<CSSProperties>,
+        default: () => {}
+    },
+    /** 自定义外部类名 */
+    customClass: String
+}
 
-export default defaultProps;
+export default lineProps

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

@@ -1,32 +1,32 @@
-import type { CSSProperties } from "vue";
+import type { CSSProperties } from 'vue'
 
 export default interface HyLineProps {
-  /**
-   * @description 线条的颜色 ( 默认 '#d6d7d9' )
-   * */
-  color?: string;
-  /**
-   * @description 长度，竖向时表现为高度，横向时表现为长度，可以为百分比，带px单位的值等 ( 默认 '100%' )
-   * */
-  length?: string | number;
-  /**
-   * @description 线条的方向，row-横向，column-竖向 (默认 'row' )
-   * */
-  direction?: HyApp.DirectionType;
-  /**
-   * @description 是否显示细线条 (默认 true )
-   * */
-  hairline?: boolean;
-  /**
-   * @description 线条与上下左右 元素的间距，字符串形式，如"30px"  (默认 0 )
-   * */
-  margin?: string;
-  /**
-   * @description 是否虚线，true-虚线，false-实线 (默认 false )
-   * */
-  dashed?: boolean;
-  /**
-   * @description 定义需要用到的外部样式
-   * */
-  customStyle?: CSSProperties;
+    /**
+     * @description 线条的颜色 ( 默认 '#d6d7d9' )
+     * */
+    color?: string
+    /**
+     * @description 长度，竖向时表现为高度，横向时表现为长度，可以为百分比，带px单位的值等 ( 默认 '100%' )
+     * */
+    length?: string | number
+    /**
+     * @description 线条的方向，row-横向，column-竖向 (默认 'row' )
+     * */
+    direction?: HyApp.DirectionType
+    /**
+     * @description 是否显示细线条 (默认 true )
+     * */
+    hairline?: boolean
+    /**
+     * @description 线条与上下左右 元素的间距，字符串形式，如"30px"  (默认 0 )
+     * */
+    margin?: string
+    /**
+     * @description 是否虚线，true-虚线，false-实线 (默认 false )
+     * */
+    dashed?: boolean
+    /**
+     * @description 定义需要用到的外部样式
+     * */
+    customStyle?: CSSProperties
 }

package/components/hy-line-progress/hy-line-progress.vue

@@ -1,137 +1,102 @@
 <template>
-  <view :class="['hy-line-progress', customClass]" :style="customStyle">
-    <view
-      class="hy-line-progress__background"
-      ref="hy-line-progress__background"
-      :style="{
-        backgroundColor: inactiveColor,
-        height: addUnit(height),
-      }"
-    ></view>
-    <view class="hy-line-progress__line" :style="[progressStyle]">
-      <slot>
-        <text
-          v-if="showText && percentage >= 10"
-          class="hy-line-progress__text"
-          :style="{
-            fontSize: fontSize ? addUnit(fontSize) : addUnit(getPx(height)),
-          }"
-        >
-          {{ innserPercentage + "%" }}
-        </text>
-      </slot>
+    <view :class="['hy-line-progress', customClass]" :style="customStyle">
+        <view
+            class="hy-line-progress__background"
+            ref="hy-line-progress__background"
+            :style="{
+                backgroundColor: inactiveColor,
+                height: addUnit(height)
+            }"
+        ></view>
+        <view class="hy-line-progress__line" :style="[progressStyle]">
+            <slot>
+                <text
+                    v-if="showText && percentage >= 10"
+                    class="hy-line-progress__text"
+                    :style="{
+                        fontSize: fontSize ? addUnit(fontSize) : addUnit(getPx(height))
+                    }"
+                >
+                    {{ innserPercentage + '%' }}
+                </text>
+            </slot>
+        </view>
     </view>
-  </view>
 </template>
 
 <script lang="ts">
 export default {
-  name: "hy-line-progress",
-  options: {
-    addGlobalClass: true,
-    virtualHost: true,
-    styleIsolation: "shared",
-  },
-};
+    name: 'hy-line-progress',
+    options: {
+        addGlobalClass: true,
+        virtualHost: true,
+        styleIsolation: 'shared'
+    }
+}
 </script>
 
 <script setup lang="ts">
-import { computed, getCurrentInstance, onMounted, ref, watch } from "vue";
-import type { CSSProperties, PropType } from "vue";
-import {
-  addUnit,
-  getRect,
-  range,
-  type RectResultType,
-  sleep,
-  getPx,
-} from "../../libs";
+import { computed, getCurrentInstance, onMounted, ref, watch } from 'vue'
+import type { CSSProperties } from 'vue'
+import { addUnit, getRect, range, type RectResultType, sleep, getPx } from '../../libs'
+import lineProgressProps from './props'
 
 /**
  * 展示操作或任务的当前进度，比如上传文件，是一个线形的进度条。
  * @displayName hy-line-progress
  */
-defineOptions({});
+defineOptions({})
 
-// const props = withDefaults(defineProps<IProps>(), defaultProps);
-const props = defineProps({
-  /** 激活部分的颜色 */
-  activeColor: String,
-  /** 背景色 */
-  inactiveColor: String,
-  /** 进度百分比，数值 */
-  percentage: {
-    type: Number,
-    default: 0,
-  },
-  /** 是否在进度条内部显示百分比的值 */
-  showText: {
-    type: Boolean,
-    default: true,
-  },
-  /** 进度条的高度，单位px */
-  height: {
-    type: [String, Number],
-    default: 8,
-  },
-  /** 字体大小，单位px */
-  fontSize: [String, Number],
-  /** 定义需要用到的外部样式 */
-  customStyle: {
-    type: Object as PropType<CSSProperties>,
-  },
-  /** 自定义外部类名 */
-  customClass: String,
-});
+const props = defineProps(lineProgressProps)
 
-const instance = getCurrentInstance();
-const lineWidth = ref<string | number>(0);
+const instance = getCurrentInstance()
+const lineWidth = ref<string | number>(0)
 
 watch(
-  () => props.percentage,
-  () => resizeProgressWidth(),
-);
+    () => props.percentage,
+    () => resizeProgressWidth()
+)
 
 const progressStyle = computed<CSSProperties>(() => {
-  const style: CSSProperties = {};
-  style.width = lineWidth.value;
-  style.backgroundColor = props.activeColor;
-  style.height = addUnit(props.height);
-  return style;
-});
+    const style: CSSProperties = {}
+    style.width = lineWidth.value
+    style.backgroundColor = props.activeColor
+    style.height = addUnit(props.height)
+    return style
+})
 
 const innserPercentage = computed(() => {
-  // 控制范围在0-100之间
-  return range(0, 100, props.percentage);
-});
+    // 控制范围在0-100之间
+    return range(0, 100, props.percentage)
+})
 
 onMounted(() => {
-  init();
-});
+    init()
+})
 
 const init = async () => {
-  await sleep(20);
-  await resizeProgressWidth();
-};
+    await sleep(20)
+    await resizeProgressWidth()
+}
 const getProgressWidth = (): Promise<RectResultType<false>> => {
-  return new Promise((resolve) => {
-    // #ifndef APP-NVUE
-    resolve(getRect(".hy-line-progress__background", false, instance));
-    // #endif
-  });
-};
+    return new Promise((resolve) => {
+        // #ifndef APP-NVUE
+        resolve(getRect('.hy-line-progress__background', false, instance))
+        // #endif
+    })
+}
 
 /**
  * @description 计算轨道长度
  * */
 const resizeProgressWidth = async () => {
-  const { width } = await getProgressWidth();
-  // 通过设置的percentage值，计算其所占总长度的百分比
-  if (!width) return;
-  lineWidth.value = addUnit((width * innserPercentage.value) / 100);
-};
+    const { width } = await getProgressWidth()
+    // 通过设置的percentage值，计算其所占总长度的百分比
+    if (!width) return
+    lineWidth.value = addUnit((width * innserPercentage.value) / 100)
+}
 </script>
 
 <style lang="scss" scoped>
-@import "./index.scss";
+@import './index.scss';
 </style>

package/components/hy-line-progress/props.ts

@@ -1,12 +1,33 @@
-import type IProps from "./typing";
+import type { CSSProperties, PropType } from 'vue'
 
-const defaultProps: IProps = {
-  activeColor: "",
-  inactiveColor: "",
-  percentage: 0,
-  showText: true,
-  height: 8,
-  fontSize: "",
-};
+const lineProgressProps = {
+    /** 激活部分的颜色 */
+    activeColor: String,
+    /** 背景色 */
+    inactiveColor: String,
+    /** 进度百分比，数值 */
+    percentage: {
+        type: Number,
+        default: 0
+    },
+    /** 是否在进度条内部显示百分比的值 */
+    showText: {
+        type: Boolean,
+        default: true
+    },
+    /** 进度条的高度，单位px */
+    height: {
+        type: [String, Number],
+        default: 8
+    },
+    /** 字体大小，单位px */
+    fontSize: [String, Number],
+    /** 定义需要用到的外部样式 */
+    customStyle: {
+        type: Object as PropType<CSSProperties>
+    },
+    /** 自定义外部类名 */
+    customClass: String
+}
 
-export default defaultProps;
+export default lineProgressProps

package/components/hy-line-progress/typing.d.ts

@@ -1,32 +1,32 @@
-import type { CSSProperties } from "vue";
+import type { CSSProperties } from 'vue'
 
 export default interface HyLineProgressProps {
-  /**
-   * @description 激活部分的颜色 ( 默认 '#19be6b' )
-   * */
-  activeColor?: string;
-  /**
-   * @description 背景色 ( 默认 '#ececec' )
-   * */
-  inactiveColor?: string;
-  /**
-   * @description 进度百分比，数值 ( 默认 0 )
-   * */
-  percentage: number;
-  /**
-   * @description 是否在进度条内部显示百分比的值 ( 默认 true )
-   * */
-  showText?: boolean;
-  /**
-   * @description 进度条的高度，单位px ( 默认 12 )
-   * */
-  height?: string | number;
-  /**
-   * @description 字体大小，单位px ( 默认 10 )
-   * */
-  fontSize?: string | number;
-  /**
-   * @description 自定义样式
-   * */
-  customStyle?: CSSProperties;
+    /**
+     * @description 激活部分的颜色 ( 默认 '#19be6b' )
+     * */
+    activeColor?: string
+    /**
+     * @description 背景色 ( 默认 '#ececec' )
+     * */
+    inactiveColor?: string
+    /**
+     * @description 进度百分比，数值 ( 默认 0 )
+     * */
+    percentage: number
+    /**
+     * @description 是否在进度条内部显示百分比的值 ( 默认 true )
+     * */
+    showText?: boolean
+    /**
+     * @description 进度条的高度，单位px ( 默认 12 )
+     * */
+    height?: string | number
+    /**
+     * @description 字体大小，单位px ( 默认 10 )
+     * */
+    fontSize?: string | number
+    /**
+     * @description 自定义样式
+     * */
+    customStyle?: CSSProperties
 }