hy-app 0.3.0 → 0.3.2

package/README.md

@@ -1,6 +1,9 @@
-## 使用文档地址
-[华玥组件库(需要翻墙)](https://hy-component-docs.vercel.app/)
-[华玥组件库(国内地址)](https://www.gxh151.top)
+## 在线使用文档地址
+[华玥组件库文档(需要翻墙)](https://hy-component-docs.vercel.app/)
+[华玥组件库文档(国内地址)](https://www.gxh151.top)
+
+## H5测试页面地址
+[华玥组件库dome(需要翻墙)](https://hy-design-uni.vercel.app/#/)
 
 ## 安装教程
 

package/common/shakeService.ts

@@ -1,60 +1,62 @@
 // src/composables/useShakeService.ts
-import { ref, Ref } from 'vue'
-import { debounce } from '../utils'
+import { ref } from "vue";
+import type { Ref } from "vue";
+import { debounce } from "../utils";
 
 interface Acceleration {
-  x: number
-  y: number
-  z: number
+  x: number;
+  y: number;
+  z: number;
 }
 
 export function useShakeService(shakeThreshold: number = 30) {
-  const lastAcceleration: Ref<Acceleration> = ref({ x: 0, y: 0, z: 0 })
-  const lastTime: Ref<number> = ref(Date.now())
-  const shakeCallback: Ref<null | (() => void)> = ref(null)
+  const lastAcceleration: Ref<Acceleration> = ref({ x: 0, y: 0, z: 0 });
+  const lastTime: Ref<number> = ref(Date.now());
+  const shakeCallback: Ref<null | (() => void)> = ref(null);
 
   const startShakeListener = (callback: () => void): void => {
-    shakeCallback.value = callback
+    shakeCallback.value = callback;
     uni.startAccelerometer({
       success: () => {
-        uni.onAccelerometerChange(handleShake)
+        uni.onAccelerometerChange(handleShake);
       },
       fail: (err: any) => {
-        console.error('加速度传感器启动失败', err.errMsg)
+        console.error("加速度传感器启动失败", err.errMsg);
       },
-    })
-  }
+    });
+  };
 
   const stopShakeListener = (): void => {
     uni.stopAccelerometer().then(
       (res) => {
-        uni.offAccelerometerChange(handleShake)
+        uni.offAccelerometerChange(handleShake);
       },
-      (err) => console.error('加速度传感器关闭失败', err.errMsg),
-    )
-  }
+      (err) => console.error("加速度传感器关闭失败", err.errMsg),
+    );
+  };
 
   const handleShake = (res: Acceleration): void => {
-    const acceleration = res
-    const currentTime = Date.now()
-    const timeDiff = (currentTime - lastTime.value) / 1000 // 转换为秒
+    const acceleration = res;
+    const currentTime = Date.now();
+    const timeDiff = (currentTime - lastTime.value) / 1000; // 转换为秒
 
     // 计算加速度的欧几里得距离
-    const deltaX = acceleration.x - lastAcceleration.value.x
-    const deltaY = acceleration.y - lastAcceleration.value.y
-    const deltaZ = acceleration.z - lastAcceleration.value.z
-    const speed = Math.sqrt(deltaX * deltaX + deltaY * deltaY + deltaZ * deltaZ) / timeDiff
+    const deltaX = acceleration.x - lastAcceleration.value.x;
+    const deltaY = acceleration.y - lastAcceleration.value.y;
+    const deltaZ = acceleration.z - lastAcceleration.value.z;
+    const speed =
+      Math.sqrt(deltaX * deltaX + deltaY * deltaY + deltaZ * deltaZ) / timeDiff;
 
     if (speed > shakeThreshold && shakeCallback.value) {
-      debounce(shakeCallback.value, 500)
+      debounce(shakeCallback.value, 500);
     }
 
-    lastAcceleration.value = acceleration
-    lastTime.value = currentTime
-  }
+    lastAcceleration.value = acceleration;
+    lastTime.value = currentTime;
+  };
 
   return {
     startShakeListener,
     stopShakeListener,
-  }
+  };
 }

package/components/hy-action-sheet/hy-action-sheet.vue

@@ -20,7 +20,10 @@
         } ${customStyle}`"
       >
         <!-- 标题 -->
-        <view v-if="title" :class="`hy-action-sheet__header ${customHeaderClass}`">
+        <view
+          v-if="title"
+          :class="`hy-action-sheet__header ${customHeaderClass}`"
+        >
           {{ title }}
           <HyIcon
             customClass="hy-action-sheet__close"
@@ -43,8 +46,13 @@
             @click="onSelect(rowIndex, 'action')"
           >
             <HyLoading :show="!!action?.loading" mode="circle" />
-            <view v-if="!action?.loading" class="hy-action-sheet__name">{{ action?.name }}</view>
-            <view v-if="!action?.loading && action?.sub" class="hy-action-sheet__subname">
+            <view v-if="!action?.loading" class="hy-action-sheet__name">{{
+              action?.name
+            }}</view>
+            <view
+              v-if="!action?.loading && action?.sub"
+              class="hy-action-sheet__subname"
+            >
               {{ action?.sub }}
             </view>
           </button>
@@ -65,8 +73,13 @@
                 class="hy-action-sheet__panel"
                 @click="onSelect(rowIndex, 'panels', colIndex)"
               >
-                <image class="hy-action-sheet__panel-img" :src="(col as any).iconUrl" />
-                <view class="hy-action-sheet__panel-title">{{ (col as any).name }}</view>
+                <image
+                  class="hy-action-sheet__panel-img"
+                  :src="(col as any).iconUrl"
+                />
+                <view class="hy-action-sheet__panel-title">{{
+                  (col as any).name
+                }}</view>
               </view>
             </view>
           </view>
@@ -90,32 +103,38 @@
     </HyPopup>
   </view>
 </template>
+
 <script lang="ts">
 export default {
-  name: 'hy-action-sheet',
+  name: "hy-action-sheet",
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared',
+    styleIsolation: "shared",
   },
-}
+};
 </script>
 
 <script lang="ts" setup>
+import { watch, ref } from "vue";
+import type { PropType, CSSProperties } from "vue";
+import { isArray } from "../../utils";
+import type {
+  IActionSheetPanel,
+  IActionSheetEmits,
+  IActionSheetAction,
+} from "./typing";
+// 组件
+import HyIcon from "../hy-icon/hy-icon.vue";
+import HyPopup from "../hy-popup/hy-popup.vue";
+import HyLoading from "../hy-loading/hy-loading.vue";
+import HyButton from "../hy-button/hy-button.vue";
+
 /**
  * 本组件用于从底部弹出一个操作菜单，供用户选择并返回结果。本组件功能类似于uni的uni.showActionSheetAPI，配置更加灵活，所有平台都表现一致。
  * @displayName hy-action-sheet
  */
-defineOptions({})
-import { watch, ref, PropType, type CSSProperties } from 'vue'
-import { isArray } from '../../utils'
-import { IActionSheetPanel, IActionSheetEmits, IActionSheetAction } from './typing.d.ts'
-
-// 组件
-import HyIcon from '../hy-icon/hy-icon.vue'
-import HyPopup from '../hy-popup/hy-popup.vue'
-import HyLoading from '../hy-loading/hy-loading.vue'
-import HyButton from '../hy-button/hy-button.vue'
+defineOptions({});
 
 // const props = withDefaults(defineProps<HyActionSheetProps>(), defaultProps)
 const props = defineProps({
@@ -129,14 +148,14 @@ const props = defineProps({
   actions: {
     type: Array as PropType<IActionSheetAction[]>,
     default() {
-      return []
+      return [];
     },
   },
   /** 自定义面板项,可以为字符串数组，也可以为对象数组，如果为二维数组，则为多行展示 */
   panels: {
     type: Array as PropType<Array<IActionSheetPanel | IActionSheetPanel[]>>,
     default() {
-      return []
+      return [];
     },
   },
   /** 操作菜单是否展示 */
@@ -152,7 +171,7 @@ const props = defineProps({
    * */
   titleAlign: {
     type: String,
-    default: 'center',
+    default: "center",
   },
   /** 取消按钮的提示文字,不为空时显示按钮 */
   cancelText: String,
@@ -187,71 +206,77 @@ const props = defineProps({
   customClass: String,
   /** 自定义标题类名 */
   customHeaderClass: String,
-})
-const emit = defineEmits<IActionSheetEmits>()
+});
+const emit = defineEmits<IActionSheetEmits>();
 
-const formatPanels = ref<Array<IActionSheetPanel> | Array<IActionSheetPanel[]>>([])
-const showPopup = ref<boolean>(false)
+const formatPanels = ref<Array<IActionSheetPanel> | Array<IActionSheetPanel[]>>(
+  [],
+);
+const showPopup = ref<boolean>(false);
 
-watch(() => props.panels, computedValue, { deep: true, immediate: true })
+watch(() => props.panels, computedValue, { deep: true, immediate: true });
 
 watch(
   () => props.modelValue,
   (newValue) => {
-    showPopup.value = newValue
+    showPopup.value = newValue;
   },
   { deep: true, immediate: true },
-)
+);
 
 function isPanelArray() {
-  return props.panels.length && !isArray(props.panels[0])
+  return props.panels.length && !isArray(props.panels[0]);
 }
 function computedValue() {
   formatPanels.value = isPanelArray()
     ? [props.panels as IActionSheetPanel[]]
-    : (props.panels as IActionSheetPanel[][])
+    : (props.panels as IActionSheetPanel[][]);
 }
 
-function onSelect(rowIndex: number, type: 'action' | 'panels', colIndex?: number) {
-  if (type === 'action') {
+function onSelect(
+  rowIndex: number,
+  type: "action" | "panels",
+  colIndex?: number,
+) {
+  if (type === "action") {
     if (props.actions[rowIndex].disabled || props.actions[rowIndex].loading) {
-      return
+      return;
     }
-    emit('select', {
+    emit("select", {
       item: props.actions[rowIndex],
       index: rowIndex,
-    })
+    });
   } else if (isPanelArray()) {
-    emit('select', {
+    emit("select", {
       item: props.panels[Number(colIndex)],
       index: colIndex,
-    })
+    });
   } else {
-    emit('select', {
+    emit("select", {
       item: (props.panels as IActionSheetPanel[][])[rowIndex][Number(colIndex)],
       rowIndex,
       colIndex,
-    })
+    });
   }
   if (props.closeOnClickAction) {
-    onClose()
+    onClose();
   }
 }
 function handleCancel() {
-  emit('cancel')
-  onClose()
+  emit("cancel");
+  onClose();
 }
 function onClose() {
-  emit('update:modelValue', false)
-  emit('close')
+  emit("update:modelValue", false);
+  emit("close");
 }
 function onOpen() {
-  emit('open')
+  emit("open");
 }
 </script>
 
 <style lang="scss" scoped>
-@import './index.scss';
+@import "./index.scss";
 .hy-action-sheet__header {
   text-align: v-bind(titleAlign);
 }

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

@@ -1,6 +1,10 @@
 <template>
   <view class="hy-address-picker">
-    <view v-if="hasInput" class="hy-address-picker__has-input" @tap="onShowByClickInput">
+    <view
+      v-if="hasInput"
+      class="hy-address-picker__has-input"
+      @tap="onShowByClickInput"
+    >
       <!-- @slot 自定义输入框 -->
       <slot name="trigger" :value="inputValue">
         <HyInput
@@ -18,7 +22,9 @@
           :placeholder="input?.placeholder || '请选择地址'"
           :placeholderStyle="input?.placeholderStyle"
           :placeholderClass="input?.placeholderClass"
-          :customStyle="Object.assign({ 'pointer-events': 'none' }, input?.customStyle)"
+          :customStyle="
+            Object.assign({ 'pointer-events': 'none' }, input?.customStyle)
+          "
         ></HyInput>
         <view class="input-cover"></view>
       </slot>
@@ -61,28 +67,30 @@
 
 <script lang="ts">
 export default {
-  name: 'hy-address-picker',
+  name: "hy-address-picker",
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared',
+    styleIsolation: "shared",
   },
-}
+};
 </script>
 
 <script setup lang="ts">
+import { onMounted, ref, toRefs } from "vue";
+import type { PropType, CSSProperties } from "vue";
+import type { IAddressPickerEmits } from "./typing";
+import address from "../../utils/address.json";
+import type HyInputProps from "../hy-input/typing";
+// 组件
+import HyInput from "../hy-input/hy-input.vue";
+import HyPicker from "../hy-picker/hy-picker.vue";
+
 /**
  * 此选择器用于选择地址
  * @displayName hy-address-picker
  */
-defineOptions({})
-import { type CSSProperties, onMounted, PropType, ref, toRefs } from 'vue'
-import type { IAddressPickerEmits } from './typing'
-import address from '../../utils/address.json'
-import type HyInputProps from '../hy-input/typing'
-// 组件
-import HyInput from '../hy-input/hy-input.vue'
-import HyPicker from '../hy-picker/hy-picker.vue'
+defineOptions({});
 
 // const props = withDefaults(defineProps<IProps>(), defaultProps)
 const props = defineProps({
@@ -97,7 +105,7 @@ const props = defineProps({
    * */
   popupMode: {
     type: String,
-    default: 'bottom',
+    default: "bottom",
   },
   /** 是否显示顶部的操作栏 */
   showToolbar: {
@@ -114,7 +122,7 @@ const props = defineProps({
   /** 字符串截取数组条件 */
   separator: {
     type: String,
-    default: ' ',
+    default: " ",
   },
   /** 是否显示加载中状态 */
   loading: {
@@ -129,22 +137,22 @@ const props = defineProps({
   /** 取消按钮的文字 */
   cancelText: {
     type: String,
-    default: '取消',
+    default: "取消",
   },
   /** 确认按钮的文字 */
   confirmText: {
     type: String,
-    default: '确认',
+    default: "确认",
   },
   /** 取消按钮的颜色 */
   cancelColor: {
     type: String,
-    default: '#909193',
+    default: "#909193",
   },
   /** 确认按钮的颜色 */
   confirmColor: {
     type: String,
-    default: '#3c9cff',
+    default: "#3c9cff",
   },
   /** 每列中可见选项的数量 */
   visibleItemCount: {
@@ -178,88 +186,91 @@ const props = defineProps({
   customStyle: {
     type: Object as PropType<CSSProperties>,
   },
-})
-const { show, modelValue, hasInput, input, separator, closeOnClickOverlay } = toRefs(props)
-const emit = defineEmits<IAddressPickerEmits>()
+});
+const { show, modelValue, hasInput, input, separator, closeOnClickOverlay } =
+  toRefs(props);
+const emit = defineEmits<IAddressPickerEmits>();
 
 // 原来的日期选择器不方便，这里增加一个hasInput选项支持类似element的自带输入框的功能。
-const inputValue = ref<string>('') // 表单显示值
-const showByClickInput = ref<boolean>(false) // 是否在hasInput模式下显示日期选择
-const columns = ref<any[]>([])
-const uPickerRef = ref<InstanceType<typeof HyPicker> | null>()
-const defaultIndex = ref<number[]>([])
+const inputValue = ref<string>(""); // 表单显示值
+const showByClickInput = ref<boolean>(false); // 是否在hasInput模式下显示日期选择
+const columns = ref<any[]>([]);
+const uPickerRef = ref<InstanceType<typeof HyPicker> | null>();
+const defaultIndex = ref<number[]>([]);
 
 function normalizeCityName(city: string) {
   // 定义常见的后缀
-  const suffixes = ['市', '省', '自治区', '特别行政区', '县', '区']
+  const suffixes = ["市", "省", "自治区", "特别行政区", "县", "区"];
   suffixes.forEach((suffix) => {
     if (city.endsWith(suffix)) {
-      city = city.slice(0, -suffix.length)
+      city = city.slice(0, -suffix.length);
     }
-  })
-  return city
+  });
+  return city;
 }
 /**
  * @description 判断城市是否相等
  * */
 const areCitiesEqual = (city1: string, city2: string) => {
-  const normalizedCity1 = normalizeCityName(city1)
-  const normalizedCity2 = normalizeCityName(city2)
-  return normalizedCity1 === normalizedCity2
-}
+  const normalizedCity1 = normalizeCityName(city1);
+  const normalizedCity2 = normalizeCityName(city2);
+  return normalizedCity1 === normalizedCity2;
+};
 /**
  * @description 更新各列的值
  * */
 const updateColumnValue = (value: string) => {
-  let provinceIndex, cityIndex, countyIndex
+  let provinceIndex, cityIndex, countyIndex;
   // 判断是初始化有数据就找到对应索引，无数据默认索引为0
   if (value) {
-    const addressArr = value.split(separator.value)
+    const addressArr = value.split(separator.value);
     // 查出省索引
-    provinceIndex = address.findIndex((item) => areCitiesEqual(item.name, addressArr[0]))
+    provinceIndex = address.findIndex((item) =>
+      areCitiesEqual(item.name, addressArr[0]),
+    );
     // 查出市索引
     cityIndex = address[provinceIndex].areas.findIndex((item) =>
       areCitiesEqual(item.name, addressArr[1]),
-    )
+    );
 
     // 查出县/区索引
-    countyIndex = address[provinceIndex].areas[cityIndex].areas.findIndex((item) =>
-      areCitiesEqual(item.name, addressArr[2]),
-    )
+    countyIndex = address[provinceIndex].areas[cityIndex].areas.findIndex(
+      (item) => areCitiesEqual(item.name, addressArr[2]),
+    );
   } else {
-    provinceIndex = 0
-    cityIndex = 0
-    countyIndex = 0
+    provinceIndex = 0;
+    cityIndex = 0;
+    countyIndex = 0;
   }
   // 省级数组
   const provinceData = address.map((item) => ({
     name: item.name,
     code: item.code,
-  }))
+  }));
   // 市级数组
   const cityData = address[provinceIndex].areas.map((item) => ({
     name: item.name,
     code: item.code,
-  }))
+  }));
   // 县/区级数组
-  const areaData = address[provinceIndex].areas[cityIndex].areas
+  const areaData = address[provinceIndex].areas[cityIndex].areas;
 
   // 默认索引
-  defaultIndex.value = [provinceIndex, cityIndex, countyIndex]
+  defaultIndex.value = [provinceIndex, cityIndex, countyIndex];
   // 列表
-  columns.value = [provinceData, cityData, areaData]
-}
+  columns.value = [provinceData, cityData, areaData];
+};
 
 const init = () => {
   // 获取当前值
-  inputValue.value = modelValue.value
+  inputValue.value = modelValue.value;
   // 更新列表
-  updateColumnValue(modelValue.value)
-}
+  updateColumnValue(modelValue.value);
+};
 
 onMounted(() => {
-  init()
-})
+  init();
+});
 
 /**
  * @description 关闭选择器
@@ -267,74 +278,74 @@ onMounted(() => {
 const close = () => {
   if (closeOnClickOverlay.value) {
     if (hasInput.value) {
-      showByClickInput.value = false
+      showByClickInput.value = false;
     }
-    emit('close')
+    emit("close");
   }
-}
+};
 
 /**
  * @description 点击工具栏的取消按钮
  * */
 const cancel = () => {
   if (hasInput.value) {
-    showByClickInput.value = false
+    showByClickInput.value = false;
   }
-  emit('cancel')
-}
+  emit("cancel");
+};
 
 /**
  * @description 点击工具栏的确定按钮
  * */
 const confirm = ({ value }: { value: Record<string, any>[] }) => {
-  inputValue.value = value.map((item) => item.name).join(separator.value)
+  inputValue.value = value.map((item) => item.name).join(separator.value);
 
-  showByClickInput.value = false
-  emit('update:modelValue', inputValue.value)
-  emit('confirm', {
+  showByClickInput.value = false;
+  emit("update:modelValue", inputValue.value);
+  emit("confirm", {
     value: inputValue.value,
-  })
-}
+  });
+};
 
 /**
  * @description 列发生变化时触发
  * */
 const change = (e: any) => {
-  const { columnIndex, index, indexs } = e
+  const { columnIndex, index, indexs } = e;
   //如果改变的是第一列
   if (columnIndex === 0) {
     const children1 = address[index].areas.map((item) => {
-      return { name: item.name, code: item.code }
-    })
-    uPickerRef.value?.setColumnValues(1, children1)
+      return { name: item.name, code: item.code };
+    });
+    uPickerRef.value?.setColumnValues(1, children1);
     //更换 第二列数据
     const children2 = address[index].areas[indexs[1]].areas.map((item) => ({
       ...item,
-    }))
-    uPickerRef.value?.setColumnValues(2, children2)
+    }));
+    uPickerRef.value?.setColumnValues(2, children2);
     //更换 第三列数据
   }
   if (columnIndex === 1) {
     //如果改变的是第二列
     const children3 = address[indexs[0]].areas[indexs[1]].areas.map((item) => ({
       ...item,
-    }))
-    uPickerRef.value?.setColumnValues(2, children3)
+    }));
+    uPickerRef.value?.setColumnValues(2, children3);
   }
 
   // 发出change时间，value为当前选中的时间戳
-  emit('change', {
+  emit("change", {
     ...e,
-  })
-}
+  });
+};
 
 const onShowByClickInput = () => {
-  if (!input.value?.disabled) {
-    showByClickInput.value = !showByClickInput.value
+  if (!props.input?.disabled) {
+    showByClickInput.value = !showByClickInput.value;
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>
-@import './index.scss';
+@import "./index.scss";
 </style>