hy-app 0.2.13 → 0.2.15

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

@@ -1,149 +1,170 @@
-import type { CSSProperties } from "vue";
-import type HyIconProps from "../hy-icon/typing";
+import type { CSSProperties } from 'vue'
+import type HyIconProps from '../hy-icon/typing'
 
 export default interface HyInputProps {
   /**
    * @description 输入的值
    * */
-  modelValue: string | number;
+  modelValue: string | number
   /**
    * @description 输入框类型，见上方说明 （ 默认 'text' ）
    * */
-  type?: HyApp.InputType;
+  type?: HyApp.InputType
   /**
    * @description 如果 textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true，兼容性：微信小程序、百度小程序、字节跳动小程序、QQ小程序 （ 默认 false ）
    * */
-  fixed?: boolean;
+  fixed?: boolean
   /**
    * @description 是否禁用输入框 （ 默认 false ）
    * */
-  disabled?: boolean;
+  disabled?: boolean
   /**
    * @description 禁用状态时的背景色（ 默认 '#f5f7fa' ）
    * */
-  disabledColor?: string;
+  disabledColor?: string
   /**
    * @description 是否显示清除控件 （ 默认 false ）
    * */
-  clearable?: boolean;
+  clearable?: boolean
   /**
    * @description 是否密码类型 （ 默认 false ）
    * */
-  password?: boolean;
+  password?: boolean
   /**
    * @description 最大输入长度，设置为 -1 的时候不限制最大长度 （ 默认 -1 ）
    * */
-  maxlength?: number;
+  maxlength?: number
   /**
    * @description 输入框为空时的占位符
    * */
-  placeholder?: string | null;
+  placeholder?: string | null
   /**
    * @description 指定placeholder的样式类，注意页面或组件的style中写了scoped时，需要在类名前写/deep/ （ 默认 'input-placeholder' ）
    * */
-  placeholderClass?: string;
+  placeholderClass?: string
   /**
    * @description 指定placeholder的样式，字符串/对象形式，如"color: red;"
    * */
-  placeholderStyle?: CSSProperties;
+  placeholderStyle?: CSSProperties
   /**
    * @description 是否显示输入字数统计，只在 type ="text"或type ="textarea"时有效 （ 默认 false ）
    * */
-  showWordLimit?: boolean;
+  showWordLimit?: boolean
   /**
    * @description 设置右下角按钮的文字，兼容性详见uni-app文档 （ 默认 'done' ）
    * */
-  confirmType?: string;
+  confirmType?: string
   /**
    * @description 点击键盘右下角按钮时是否保持键盘不收起，H5无效 （ 默认 false ）
    * */
-  confirmHold?: boolean;
+  confirmHold?: boolean
   /**
    * @description focus时，点击页面的时候不收起键盘，微信小程序有效 （ 默认 false ）
    * */
-  holdKeyboard?: boolean;
+  holdKeyboard?: boolean
   /**
    * @description 自动获取焦点，在 H5 平台能否聚焦以及软键盘是否跟随弹出，取决于当前浏览器本身的实现。nvue 页面不支持，需使用组件的 focus()、blur() 方法控制焦点 （ 默认 false ）
    * */
-  focus?: boolean;
+  focus?: boolean
   /**
    * @description 键盘收起时，是否自动失去焦点，目前仅App3.0.0+有效 （ 默认 false ）
    * */
-  autoBlur?: boolean;
+  autoBlur?: boolean
   /**
    * @description 是否去掉 iOS 下的默认内边距，仅微信小程序，且type=textarea时有效 （ 默认 false ）
    * */
-  disableDefaultPadding?: boolean;
+  disableDefaultPadding?: boolean
   /**
    * @description 指定focus时光标的位置（ 默认 140 ）
    * */
-  cursor?: number;
+  cursor?: number
   /**
    * @description 输入框聚焦时底部与键盘的距离 （ 默认 30 ）
    * */
-  cursorSpacing?: number;
+  cursorSpacing?: number
   /**
    * @description 光标起始位置，自动聚集时有效，需与selection-end搭配使用 （ 默认 -1 ）
    * */
-  selectionStart?: number;
+  selectionStart?: number
   /**
    * @description 光标结束位置，自动聚集时有效，需与selection-start搭配使用 （ 默认 -1 ）
    * */
-  selectionEnd?: number;
+  selectionEnd?: number
   /**
    * @description 键盘弹起时，是否自动上推页面 （ 默认 true ）
    * */
-  adjustPosition?: boolean;
+  adjustPosition?: boolean
   /**
    * @description 输入框内容对齐方式（ 默认 'left' ）
    * */
-  inputAlign?: HyApp.RowCenterType;
+  inputAlign?: HyApp.RowCenterType
   /**
    * @description 输入框字体的大小 （ 默认 '15px' ）
    * */
-  fontSize?: string | number;
+  fontSize?: string | number
   /**
    * @description 输入框字体颜色	（ 默认 '#303133' ）
    * */
-  color?: string;
+  color?: string
   /**
    * @description 输入框前置图标
    * */
-  prefixIcon?: Partial<HyIconProps>;
+  prefixIcon?: Partial<HyIconProps>
   /**
    * @description 输入框后置图标
    * */
-  suffixIcon?: Partial<HyIconProps>;
+  suffixIcon?: Partial<HyIconProps>
   /**
    * @description 边框类型，surround-四周边框，bottom-底部边框，none-无边框 （ 默认 'surround' ）
    * */
-  border?: HyApp.BorderType;
+  border?: HyApp.BorderType
   /**
    * @description 是否只读，与disabled不同之处在于disabled会置灰组件，而readonly则不会 （ 默认 false ）
    * */
-  readonly?: boolean;
+  readonly?: boolean
   /**
    * @description 输入框形状，circle-圆形，square-方形 （ 默认 'square' ）
    * */
-  shape?: HyApp.ShapeType;
+  shape?: HyApp.ShapeType
   /**
    * @description 内容式化函数
    * */
-  formatter?: Function | null;
+  formatter?: Function | null
   /**
    * @description 定义需要用到的外部样式
    * */
-  customStyle?: CSSProperties;
+  customStyle?: CSSProperties
   /**
    * @description 值变化事件
    * */
-  onChange?: Function;
+  onChange?: Function
   /**
    * @description 失去焦点事件
    * */
-  onBlur?: Function;
+  onBlur?: Function
   /**
    * @description 是否忽略组件内对文本合成系统事件的处理。
    * */
-  ignoreCompositionEvent?: boolean;
+  ignoreCompositionEvent?: boolean
+}
+
+export interface IInputEmits {
+  /** 输入框失去焦点时触发 */
+  (e: 'blur', value: string | number): void
+  /** 输入框聚焦时触发 */
+  (e: 'focus'): void
+  /** 点击完成按钮时触发 */
+  (e: 'confirm', value: string | number): void
+  /** 键盘高度发生变化的时候触发此事件 */
+  (e: 'keyboardheightchange', event: Event): void
+  /** 内容发生变化触发此事件 */
+  (e: 'change', value: string | number): void
+  /** 内容发生变化触发此事件 */
+  (e: 'update:modelValue', value: string | number): void
+  /** 点击清空内容 */
+  (e: 'clear'): void
+  /** 点击前缀触发 */
+  (e: 'onPrefix'): void
+  /** 点击后缀触发 */
+  (e: 'onSuffix'): void
 }

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

@@ -1,51 +1,91 @@
 <template>
-  <view class="hy-line" :style="lineStyle"> </view>
+  <view :class="['hy-line', customClass]" :style="lineStyle"></view>
 </template>
 
 <script lang="ts">
+/**
+ * 一般用于显示一根线条，用于分隔内容块，有横向和竖向两种模式，且能设置0.5px线条，使用也很简单。
+ * @displayName hy-line
+ */
+defineOptions({})
 export default {
   name: 'hy-line',
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared'
-  }
+    styleIsolation: 'shared',
+  },
 }
 </script>
 
 <script setup lang="ts">
-import { computed, type CSSProperties, toRefs } from "vue";
-import defaultProps from "./props";
-import type IProps from "./typing";
-import { addUnit } from "../../utils";
+import { computed, type CSSProperties, type PropType, toRefs } from 'vue'
+import { addUnit } from '../../utils'
 
-const props = withDefaults(defineProps<IProps>(), defaultProps);
-const { margin, length, dashed, direction, hairline, color, customStyle } =
-  toRefs(props);
+// 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>,
+  },
+  /** 自定义外部类名 */
+  customClass: String,
+})
+const { margin, length, dashed, direction, hairline, color, customStyle } = toRefs(props)
 
 const lineStyle = computed<CSSProperties>(() => {
-  const style: CSSProperties = {};
-  style.margin = margin.value;
+  const style: CSSProperties = {}
+  style.margin = margin.value
   // 如果是水平线条，边框高度为1px，再通过transform缩小一半，就是0.5px了
-  if (direction.value === "row") {
+  if (direction.value === 'row') {
     // 此处采用兼容分开写，兼容nvue的写法
-    style.borderBottomWidth = "1px";
-    style.borderBottomStyle = dashed.value ? "dashed" : "solid";
-    style.width = addUnit(length.value);
-    if (!hairline.value) style.borderBottomWidth = "1.5px";
+    style.borderBottomWidth = '1px'
+    style.borderBottomStyle = dashed.value ? 'dashed' : 'solid'
+    style.width = addUnit(length.value)
+    if (!hairline.value) style.borderBottomWidth = '1.5px'
   } else {
     // 如果是竖向线条，边框宽度为1px，再通过transform缩小一半，就是0.5px了
-    style.borderLeftWidth = "1px";
-    style.borderLeftStyle = dashed.value ? "dashed" : "solid";
-    style.height = addUnit(length.value);
-    if (hairline.value) style.transform = "scaleX(0.5)";
+    style.borderLeftWidth = '1px'
+    style.borderLeftStyle = dashed.value ? 'dashed' : 'solid'
+    style.height = addUnit(length.value)
+    if (hairline.value) style.transform = 'scaleX(0.5)'
   }
 
-  style.borderColor = color.value;
-  return Object.assign(style, customStyle.value);
-});
+  style.borderColor = color.value
+  return Object.assign(style, customStyle.value)
+})
 </script>
 
 <style lang="scss" scoped>
-@import "./index.scss";
+@import './index.scss';
 </style>

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

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