hy-app 0.1.1 → 0.1.3

package/README.md

@@ -1,5 +1,5 @@
 ## 使用文档地址
-[华玥组件库](https://gxh-component.vercel.app/)
+[华玥组件库](https://hy-component-docs.vercel.app/)
 
 ## 安装教程
 

package/api/http.ts

@@ -1,7 +1,7 @@
-import {
+import type {
   HttpRequestConfig,
   HttpInterceptorManager,
-  HttpResponse
+  HttpResponse,
 } from "../typing";
 import { objectToUrlParams } from "../utils";
 
@@ -17,7 +17,7 @@ export default class Http {
     header: {},
     method: "POST",
     responseType: "text",
-    timeout: 10000
+    timeout: 10000,
   };
 
   /**
@@ -40,7 +40,7 @@ export default class Http {
      */
     response: (
       success: (response: HttpResponse) => any,
-      fail: (error: HttpResponse) => any
+      fail: (error: HttpResponse) => any,
     ) => {
       if (success) {
         this.responseSuccess = success;
@@ -48,7 +48,7 @@ export default class Http {
       if (fail) {
         this.responseFail = fail;
       }
-    }
+    },
   };
 
   /**
@@ -99,7 +99,7 @@ export default class Http {
         },
         fail: (error: UniNamespace.GeneralCallbackResult) => {
           reject(this.responseFail(error));
-        }
+        },
       });
     });
   }
@@ -115,7 +115,7 @@ export default class Http {
       url: url,
       method: "POST",
       data: params,
-      ...options
+      ...options,
     });
   }
 
@@ -132,7 +132,7 @@ export default class Http {
     return this.request({
       url: url,
       method: "GET",
-      ...options
+      ...options,
     });
   }
 }

package/components/dialog/index.ts

@@ -1,6 +1,6 @@
 import { createApp } from "vue";
-import AlertDialogCom, { DialogParam } from "./TheDialog.vue";
-import { ResultParam } from "../../typing";
+import AlertDialogCom, { type DialogParam } from "./TheDialog.vue";
+import type { ResultParam } from "../../typing";
 
 export default class Dialog {
   private static mountNode: HTMLElement | null = null;

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

@@ -8,7 +8,7 @@
       <slot name="trigger" :value="inputValue">
         <HyInput
           :placeholder="placeholder"
-          :readonly="!!showByClickInput"
+          :readonly="true"
           v-model="inputValue"
           :disabled="disabled"
           :shape="shape"
@@ -50,15 +50,13 @@
         <slot name="toolbar-bottom"> </slot>
       </template>
     </HyPicker>
-
-    <HyList container-height="" list=""></HyList>
   </view>
 </template>
 
 <script setup lang="ts">
 import { onMounted, ref, toRefs } from "vue";
 import defaultProps from "./props";
-import IProps from "./typing";
+import type IProps from "./typing";
 import address from "../../utils/address.json";
 
 // 组件
@@ -73,12 +71,12 @@ const emit = defineEmits([
   "cancel",
   "confirm",
   "change",
-  "update:modelValue"
+  "update:modelValue",
 ]);
 
 // 原来的日期选择器不方便，这里增加一个hasInput选项支持类似element的自带输入框的功能。
 const inputValue = ref<string>(""); // 表单显示值
-const showByClickInput = ref<boolean>(false); // 是否在hasInput模式下显示日期选择弹唱
+const showByClickInput = ref<boolean>(false); // 是否在hasInput模式下显示日期选择
 const columns = ref<any[]>([]);
 const uPickerRef = ref<InstanceType<typeof HyPicker> | null>();
 const defaultIndex = ref<number[]>([]);
@@ -111,16 +109,16 @@ const updateColumnValue = (value: string) => {
     const addressArr = value.split(separator.value);
     // 查出省索引
     provinceIndex = address.findIndex((item) =>
-      areCitiesEqual(item.name, addressArr[0])
+      areCitiesEqual(item.name, addressArr[0]),
     );
     // 查出市索引
     cityIndex = address[provinceIndex].areas.findIndex((item) =>
-      areCitiesEqual(item.name, addressArr[1])
+      areCitiesEqual(item.name, addressArr[1]),
     );
 
     // 查出县/区索引
     countyIndex = address[provinceIndex].areas[cityIndex].areas.findIndex(
-      (item) => areCitiesEqual(item.name, addressArr[2])
+      (item) => areCitiesEqual(item.name, addressArr[2]),
     );
   } else {
     provinceIndex = 0;
@@ -130,12 +128,12 @@ const updateColumnValue = (value: string) => {
   // 省级数组
   const provinceData = address.map((item) => ({
     name: item.name,
-    code: item.code
+    code: item.code,
   }));
   // 市级数组
   const cityData = address[provinceIndex].areas.map((item) => ({
     name: item.name,
-    code: item.code
+    code: item.code,
   }));
   // 县/区级数组
   const areaData = address[provinceIndex].areas[cityIndex].areas;
@@ -188,7 +186,7 @@ const confirm = ({ value }: { value: Record<string, any>[] }) => {
   showByClickInput.value = false;
   emit("update:modelValue", inputValue.value);
   emit("confirm", {
-    value: inputValue.value
+    value: inputValue.value,
   });
 };
 
@@ -205,7 +203,7 @@ const change = (e: any) => {
     uPickerRef.value?.setColumnValues(1, children1);
     //更换 第二列数据
     const children2 = address[index].areas[indexs[1]].areas.map((item) => ({
-      ...item
+      ...item,
     }));
     uPickerRef.value?.setColumnValues(2, children2);
     //更换 第三列数据
@@ -213,14 +211,14 @@ const change = (e: any) => {
   if (columnIndex === 1) {
     //如果改变的是第二列
     const children3 = address[indexs[0]].areas[indexs[1]].areas.map((item) => ({
-      ...item
+      ...item,
     }));
     uPickerRef.value?.setColumnValues(2, children3);
   }
 
   // 发出change时间，value为当前选中的时间戳
   emit("change", {
-    ...e
+    ...e,
   });
 };
 
@@ -232,31 +230,5 @@ const onShowByClickInput = () => {
 </script>
 
 <style lang="scss" scoped>
-@import "../../libs/css/mixin.scss";
-.hy-datetime-picker {
-  flex: 1;
-  &__has-input {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    /* #ifndef APP-NVUE */
-    width: 100%;
-    /* #endif */
-    .input-cover {
-      opacity: 0;
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      border-radius: 4px;
-      border: 1px solid #eee;
-      padding: 0 10px;
-    }
-  }
-}
+@import "./index.scss";
 </style>

package/components/hy-address-picker/index.scss

@@ -0,0 +1,27 @@
+@use "../../libs/css/mixin.scss" as *;
+.hy-datetime-picker {
+  flex: 1;
+  &__has-input {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    /* #ifndef APP-NVUE */
+    width: 100%;
+    /* #endif */
+    .input-cover {
+      opacity: 0;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      border-radius: 4px;
+      border: 1px solid #eee;
+      padding: 0 10px;
+    }
+  }
+}

package/components/hy-address-picker/props.ts

@@ -1,5 +1,4 @@
-import IProps from "./typing";
-import { DateModeEnum } from "../../typing";
+import type IProps from "./typing";
 
 const defaultProps: IProps = {
   show: false,
@@ -21,7 +20,7 @@ const defaultProps: IProps = {
   hasInput: false,
   placeholder: "请选择地址",
   disabledColor: "#F5F5F5",
-  toolbarRightSlot: false
+  toolbarRightSlot: false,
 };
 
 export default defaultProps;

package/components/hy-address-picker/typing.d.ts

@@ -1,5 +1,4 @@
-import { DateModeEnum } from "../../typing";
-import { CSSProperties } from "vue";
+import type { CSSProperties } from "vue";
 
 export default interface IProps {
   /**

package/components/hy-avatar/hy-avatar.vue

@@ -13,8 +13,8 @@
         :style="[
           {
             width: addUnit(size),
-            height: addUnit(size)
-          }
+            height: addUnit(size),
+          },
         ]"
       />
       <!-- #endif -->
@@ -33,7 +33,7 @@
           justifyContent: 'center',
           textAlign: 'center',
           color: color,
-          fontSize: fontSize
+          fontSize: fontSize,
         }"
         >{{ text }}</text
       >
@@ -50,9 +50,9 @@
 </template>
 
 <script setup lang="ts">
-import { computed, CSSProperties, toRefs, ref, watch } from "vue";
+import { computed, type CSSProperties, toRefs, ref, watch } from "vue";
 import defaultProps from "./props";
-import IProps from "./typing";
+import type IProps from "./typing";
 import { addUnit, random } from "../../utils";
 
 // 组件
@@ -70,7 +70,7 @@ const {
   size,
   shape,
   name,
-  customStyle
+  customStyle,
 } = toRefs(props);
 const emit = defineEmits(["click"]);
 
@@ -97,7 +97,7 @@ const colors = ref<string[]>([
   "#86cefa",
   "#98d1ee",
   "#73d1f1",
-  "#80a7dc"
+  "#80a7dc",
 ]);
 const avatarUrl = ref(src.value);
 const allowMp = ref<boolean>(false);
@@ -111,7 +111,7 @@ watch(
       errorHandler();
     }
   },
-  { immediate: true }
+  { immediate: true },
 );
 
 const avatarStyle = computed<CSSProperties>(() => {
@@ -121,7 +121,7 @@ const avatarStyle = computed<CSSProperties>(() => {
         ? randomBgColor.value
           ? colors.value[colorIndex.value ? colorIndex.value : random(0, 19)]
           : bgColor.value
-        : "transparent"
+        : "transparent",
   };
   if (typeof size.value === "number") {
     style.width = addUnit(size.value);
@@ -169,49 +169,5 @@ const clickHandler = (e: Event) => {
 </script>
 
 <style lang="scss" scoped>
-@import "../../libs/css/mixin.scss";
-@import "../../theme.scss";
-
-.hy-avatar {
-  @include flex;
-  align-items: center;
-  justify-content: center;
-
-  &--circle {
-    border-radius: $hy-border-radius-circle;
-  }
-
-  &--square {
-    border-radius: $hy-border-margin-padding-sm;
-  }
-
-  &--small {
-    width: $hy-avatar-size-sm;
-    height: $hy-avatar-size-sm;
-  }
-
-  &--medium {
-    width: $hy-avatar-size-base;
-    height: $hy-avatar-size-base;
-  }
-
-  &--large {
-    width: $hy-avatar-size-lg;
-    height: $hy-avatar-size-lg;
-  }
-
-  &__image {
-    width: 100%;
-    height: 100%;
-
-    &--circle {
-      border-radius: $hy-border-radius-circle;
-      overflow: hidden;
-    }
-
-    &--square {
-      border-radius: $hy-border-margin-padding-sm;
-    }
-  }
-}
+@import "./index.scss";
 </style>

package/components/hy-avatar/index.scss

@@ -0,0 +1,45 @@
+@use "../../libs/css/mixin.scss" as *;
+@use "../../theme.scss" as *;
+
+.hy-avatar {
+  @include flex;
+  align-items: center;
+  justify-content: center;
+
+  &--circle {
+    border-radius: $hy-border-radius-circle;
+  }
+
+  &--square {
+    border-radius: $hy-border-margin-padding-sm;
+  }
+
+  &--small {
+    width: $hy-avatar-size-sm;
+    height: $hy-avatar-size-sm;
+  }
+
+  &--medium {
+    width: $hy-avatar-size-base;
+    height: $hy-avatar-size-base;
+  }
+
+  &--large {
+    width: $hy-avatar-size-lg;
+    height: $hy-avatar-size-lg;
+  }
+
+  &__image {
+    width: 100%;
+    height: 100%;
+
+    &--circle {
+      border-radius: $hy-border-radius-circle;
+      overflow: hidden;
+    }
+
+    &--square {
+      border-radius: $hy-border-margin-padding-sm;
+    }
+  }
+}

package/components/hy-avatar/props.ts

@@ -1,4 +1,4 @@
-import IProps from "./typing";
+import type IProps from "./typing";
 
 const defaultProps: IProps = {
   src: "",
@@ -14,7 +14,7 @@ const defaultProps: IProps = {
   randomBgColor: false,
   defaultUrl: "",
   colorIndex: 0,
-  name: ""
+  name: "",
 };
 
 export default defaultProps;

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

@@ -1,10 +1,10 @@
-import { CSSProperties } from "vue";
+import type { CSSProperties } from "vue";
 
 export default interface IProps {
   /**
    * @description 头像路径，如加载失败，将会显示默认头像(不能为相对路径)
    * */
-  src: string;
+  src?: string;
   /**
    * @description 头像形状  （ circle (默认) | square）
    * */

package/components/hy-back-top/hy-back-top.vue

@@ -10,9 +10,9 @@
 </template>
 
 <script setup lang="ts">
-import { computed, CSSProperties, toRefs } from "vue";
-import defaultProps from "../hy-list/props";
-import IProps from "../hy-list/typing";
+import { computed, type CSSProperties, toRefs } from "vue";
+import defaultProps from "./props";
+import type IProps from "./typing";
 // 组件
 import HyTransition from "../hy-transition/hy-transition.vue";
 import HyIcon from "../hy-icon/hy-icon.vue";
@@ -30,12 +30,12 @@ const backTopStyle = computed<CSSProperties>(() => {
     width: "40px",
     height: "40px",
     position: "fixed",
-    zIndex: 10
+    zIndex: 10,
   };
 });
 const contentStyle = computed<CSSProperties>(() => {
   const style: CSSProperties = {
-    borderRadius: mode.value === "circle" ? "50%" : "4px"
+    borderRadius: mode.value === "circle" ? "50%" : "4px",
   };
   return Object.assign(style, customStyle.value);
 });
@@ -45,27 +45,12 @@ const show = computed<boolean>(() => {
 const backToTop = () => {
   uni.pageScrollTo({
     scrollTop: 0,
-    duration: duration.value
+    duration: duration.value,
   });
   emit("click");
 };
 </script>
 
 <style lang="scss" scoped>
-@import "../../libs/css/mixin.scss";
-
-.hy-back-top {
-  @include flex;
-  flex-direction: column;
-  align-items: center;
-  flex: 1;
-  height: 100%;
-  justify-content: center;
-  background-color: #e1e1e1;
-
-  &__tips {
-    font-size: 12px;
-    transform: scale(0.8);
-  }
-}
+@import "./index.scss";
 </style>

package/components/hy-back-top/index.scss

@@ -0,0 +1,16 @@
+@use "../../libs/css/mixin.scss" as *;
+
+.hy-back-top {
+  @include flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+  height: 100%;
+  justify-content: center;
+  background-color: #e1e1e1;
+
+  &__tips {
+    font-size: 12px;
+    transform: scale(0.8);
+  }
+}

package/components/hy-back-top/props.ts

@@ -1,4 +1,4 @@
-import IProps from "./typing";
+import type IProps from "./typing";
 import { IconConfig } from "../../config";
 
 const defaultProps: IProps = {
@@ -13,11 +13,11 @@ const defaultProps: IProps = {
   zIndex: 888,
   iconStyle: {
     color: "#909399",
-    fontSize: "19px"
+    fontSize: "19px",
   },
   customStyle: {
-    transform: "rotate(180deg)"
-  }
+    transform: "rotate(180deg)",
+  },
 };
 
 export default defaultProps;

package/components/hy-back-top/typing.d.ts

@@ -1,5 +1,4 @@
-import { CSSProperties } from "vue";
-import { IconConfig } from "../../config";
+import type { CSSProperties } from "vue";
 
 export default interface IProps {
   /**
@@ -21,7 +20,7 @@ export default interface IProps {
   /**
    * @description 滚动距离 （默认 0 ）
    * */
-  scrollTop?: number;
+  scrollTop: number;
   /**
    * @description 距离顶部多少距离显示，单位px （默认 400 ）
    * */

package/components/hy-badge/hy-badge.vue

@@ -6,7 +6,7 @@
       isDot ? 'hy-badge--dot' : 'hy-badge--not-dot',
       inverted && 'hy-badge--inverted',
       shape === 'horn' && 'hy-badge--horn',
-      `hy-badge--${type}${inverted ? '--inverted' : ''}`
+      `hy-badge--${type}${inverted ? '--inverted' : ''}`,
     ]"
     :style="[customStyle, badgeStyle]"
     >{{ isDot ? "" : showValue }}</text
@@ -14,9 +14,9 @@
 </template>
 
 <script setup lang="ts">
-import IProps from "./typing";
+import type IProps from "./typing";
 import defaultProps from "./props";
-import { computed, CSSProperties, toRefs } from "vue";
+import { computed, type CSSProperties, toRefs } from "vue";
 import { addUnit } from "../../utils";
 
 const props = withDefaults(defineProps<IProps>(), defaultProps);
@@ -29,7 +29,7 @@ const {
   offset,
   inverted,
   max,
-  customStyle
+  customStyle,
 } = toRefs(props);
 const emit = defineEmits(["click"]);
 
@@ -81,75 +81,5 @@ const showValue = computed(() => {
 </script>
 
 <style lang="scss" scoped>
-@import "../../libs/css/mixin.scss";
-@import "../../theme.scss";
-
-$hy-badge-dot-size: 8px !default;
-$hy-badge-text-font-size: 11px !default;
-
-.hy-badge {
-  border-radius: 100px;
-  @include flex;
-  line-height: $hy-badge-text-font-size;
-  text-align: center;
-  font-size: $hy-badge-text-font-size;
-  color: $hy-text-color-inverse;
-
-  &--dot {
-    height: $hy-badge-dot-size;
-    width: $hy-badge-dot-size;
-  }
-
-  &--inverted {
-    font-size: 13px;
-  }
-
-  &--not-dot {
-    padding: 2px 5px;
-  }
-
-  &--horn {
-    border-bottom-left-radius: 0;
-  }
-
-  &--primary {
-    background-color: $hy-primary;
-  }
-
-  &--primary--inverted {
-    color: $hy-primary;
-  }
-
-  &--error {
-    background-color: $hy-error;
-  }
-
-  &--error--inverted {
-    color: $hy-error;
-  }
-
-  &--success {
-    background-color: $hy-success;
-  }
-
-  &--success--inverted {
-    color: $hy-success;
-  }
-
-  &--info {
-    background-color: $hy-info;
-  }
-
-  &--info--inverted {
-    color: $hy-info;
-  }
-
-  &--warning {
-    background-color: $hy-warning;
-  }
-
-  &--warning--inverted {
-    color: $hy-warning;
-  }
-}
+@import "./index.scss";
 </style>