hy-app 0.1.4 → 0.2.0

package/components/hy-grid/props.ts

@@ -8,9 +8,7 @@ const defaultProps: IProps = {
   align: "left",
   gap: "0px",
   bgColor: "transparent",
-  iconSize: "30px",
-  round: "6px",
-  space: "12px",
+  iconConfig: {},
 };
 
 export default defaultProps;

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

@@ -1,24 +1,29 @@
 import { CSSProperties } from "vue";
+import type HyIconProps from "../hy-icon/typing";
 
-interface GridItem {
+interface GridItemVo {
   /**
-   * @description 图片或者icon
+   * @description 图标名称或图片地址
    * */
-  icon: string;
+  icon?: string;
   /**
    * @description 名称
    * */
-  name: string;
+  name?: string;
+  /**
+   * @description 图标属性api配置
+   * */
+  iconConfig?: Partial<HyIconProps>;
   /**
    * @description 自定义内容键值对
    * */
   [key: string]: any;
 }
-export default interface IProps {
+export default interface HyGridProps {
   /**
    * @description 数据集
    * */
-  list: GridItem[];
+  list: GridItemVo[];
   /**
    * @description 宫格的列数（默认 3 ）
    * */
@@ -44,17 +49,9 @@ export default interface IProps {
    * */
   bgColor?: string;
   /**
-   * @description icon图片大小
-   * */
-  iconSize?: number | string;
-  /**
-   * @description icon图片圆角
-   * */
-  round?: number | string;
-  /**
-   * @description icon图片和文字间距
+   * @description 图标属性api配置集合
    * */
-  space?: number | string;
+  iconConfig?: Partial<HyIconProps>;
   /**
    * @description 定义需要用到的外部样式
    * */

package/components/hy-icon/hy-icon.vue

@@ -28,9 +28,19 @@
   </view>
 </template>
 
+<script lang="ts">
+export default {
+  name: 'hy-icon',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
 <script setup lang="ts">
 import { computed, type CSSProperties, toRefs } from "vue";
-import { ColorConfig, IconConfig } from "../../config";
 import { addUnit } from "../../utils";
 import defaultProps from "./props";
 import type IProps from "./typing";
@@ -53,10 +63,11 @@ const {
 const emit = defineEmits(["click"]);
 
 const uClasses = computed(() => {
-  let classes = [];
-  classes.push(`${customPrefix.value}-${name.value}`);
-  classes.push("iconfont");
-  classes.push(customPrefix.value);
+  let classes: string | string[] = [
+    "iconfont",
+    `${customPrefix.value}-${name.value}`,
+    customPrefix.value,
+  ];
   if (isRotate.value) classes.push("hy-rotate");
   if (color.value)
     // 主题色，通过类配置
@@ -77,11 +88,7 @@ const iconStyle = computed<CSSProperties>(() => {
     // 某些特殊情况需要设置一个到顶部的距离，才能更好的垂直居中
     top: addUnit(top.value),
     borderRadius: addUnit(round.value),
-    color: color.value
-      ? color.value
-      : name.value === IconConfig.LOADING
-        ? ColorConfig.primary
-        : "#606266",
+    color: color.value,
   };
 
   return style;

package/components/hy-icon/index.scss

@@ -2,29 +2,38 @@
 @use "../../public/font/iconfont.css" as *;
 @use "../../theme.scss" as *;
 
+/* 暗色主题 */
+@include b(theme){
+  @include m(dark) {
+    @include b(icon) {
+      color: $hy-dark-color;
+    }
+  }
+}
 
-.hy-icon {
+@include b(icon) {
   /* #ifndef APP-NVUE */
   display: flex;
   /* #endif */
   align-items: center;
+  color: $hy-text-color-grey;
 
-  &--left {
+  @include m(left) {
     flex-direction: row-reverse;
     align-items: center;
   }
 
-  &--right {
+  @include m(right) {
     flex-direction: row;
     align-items: center;
   }
 
-  &--top {
+  @include m(top) {
     flex-direction: column-reverse;
     justify-content: center;
   }
 
-  &--bottom {
+  @include m(bottom) {
     flex-direction: column;
     justify-content: center;
   }
@@ -63,14 +72,14 @@
   }
 
   &__label {
-    @include line-feed();
+    @include lineEllipsis;
     overflow: hidden;
     /* #ifndef APP-NVUE */
     line-height: 1;
     /* #endif */
   }
 }
-.hy-rotate {
+@include b(rotate) {
   animation: hy-rotate 1s infinite linear;
   @keyframes hy-rotate {
     0% {

package/components/hy-icon/props.ts

@@ -9,8 +9,8 @@ const defaultProps: IProps = {
   customPrefix: "hy-icon",
   label: "",
   labelPos: "right",
-  labelSize: "11px",
-  labelColor: "#606266",
+  labelSize: "",
+  labelColor: "",
   space: "2px",
   imgMode: "",
   width: "",

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

@@ -1,6 +1,6 @@
 import { CSSProperties } from "vue";
 
-export default interface IProps {
+export default interface HyIconProps {
   /**
    * @description 图标名称，见示例图标集
    * */

package/components/hy-image/hy-image.vue

@@ -54,6 +54,17 @@
   </HyTransition>
 </template>
 
+<script lang="ts">
+export default {
+  name: 'hy-image',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
 <script setup lang="ts">
 import {
   computed,

package/components/hy-image/index.scss

@@ -1,6 +1,7 @@
 @use "../../libs/css/mixin.scss" as *;
+@use "../../theme.scss" as *;
 
-.hy-image {
+@include b(image) {
   position: relative;
   transition: opacity 0.5s ease-in-out;
 
@@ -19,8 +20,8 @@
     @include flex;
     align-items: center;
     justify-content: center;
-    background-color: #f8f8f8ff;
-    color: #909193ff;
+    background-color: $hy-light-background-image;
+    color: $hy-text-color-grey;
     font-size: 46px;
   }
 }

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

@@ -1,6 +1,6 @@
 import type { CSSProperties } from "vue";
 
-export default interface IProps {
+export default interface HyImageProps {
   /**
    * @description 图片地址
    * */

package/components/hy-input/hy-input.vue

@@ -6,13 +6,23 @@
     <view class="hy-input__content">
       <view
         class="hy-input__content__prefix-icon"
-        v-if="prefixIcon || $slots.prefix"
+        v-if="prefixIcon?.name || $slots.prefix"
+        @tap="onPrefix"
       >
         <slot name="prefix">
           <HyIcon
-            :name="prefixIcon"
-            size="18"
-            :customStyle="prefixIconStyle"
+            :name="prefixIcon?.name"
+            :size="prefixIcon?.size"
+            :color="prefixIcon?.color"
+            :bold="prefixIcon?.bold"
+            :customPrefix="prefixIcon?.customPrefix"
+            :imgMode="prefixIcon?.imgMode"
+            :width="prefixIcon?.width"
+            :height="prefixIcon?.height"
+            :top="prefixIcon?.top"
+            :stop="prefixIcon?.stop"
+            :round="prefixIcon?.round"
+            :customStyle="prefixIcon?.customStyle"
           ></HyIcon>
         </slot>
       </view>
@@ -65,13 +75,23 @@
       </view>
       <view
         class="hy-input__content__subfix-icon"
-        v-if="suffixIcon || $slots.suffix"
+        v-if="suffixIcon?.name || $slots.suffix"
+        @tap="onSuffix"
       >
         <slot name="suffix">
           <HyIcon
-            :name="suffixIcon"
-            size="18"
-            :customStyle="suffixIconStyle"
+            :name="suffixIcon?.name"
+            :size="suffixIcon?.size"
+            :color="suffixIcon?.color"
+            :bold="suffixIcon?.bold"
+            :customPrefix="suffixIcon?.customPrefix"
+            :imgMode="suffixIcon?.imgMode"
+            :width="suffixIcon?.width"
+            :height="suffixIcon?.height"
+            :top="suffixIcon?.top"
+            :stop="suffixIcon?.stop"
+            :round="suffixIcon?.round"
+            :customStyle="suffixIcon?.customStyle"
           ></HyIcon>
         </slot>
       </view>
@@ -79,6 +99,17 @@
   </view>
 </template>
 
+<script lang="ts">
+export default {
+  name: 'hy-input',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
 <script setup lang="ts">
 import {
   computed,
@@ -92,7 +123,7 @@ import type { CSSProperties } from "vue";
 import HyIcon from "../hy-icon/hy-icon.vue";
 import { addUnit, formatObject } from "../../utils";
 import defaultProps from "./props";
-import { ColorConfig, IconConfig } from "../../config";
+import { IconConfig } from "../../config";
 import type IProps from "./typing";
 
 const props = withDefaults(defineProps<IProps>(), defaultProps);
@@ -116,6 +147,8 @@ const emit = defineEmits([
   "change",
   "update:modelValue",
   "clear",
+  "onPrefix",
+  "onSuffix",
 ]);
 
 const instance = getCurrentInstance();
@@ -215,10 +248,10 @@ const borderStyle = computed(() => {
     if (isFocus) {
       switch (border.value) {
         case "surround":
-          style = { border: `1px solid ${ColorConfig.primary}` };
+          style = { border: `1px solid var(--hy-theme-color, #3c9cff)` };
           break;
         case "bottom":
-          style = { borderBottom: `1px solid ${ColorConfig.primary}` };
+          style = { borderBottom: `1px solid var(--hy-theme-color, #3c9cff)` };
           break;
         default:
           break;
@@ -312,17 +345,23 @@ const onClear = () => {
  * 无法触发u-form-item的点击事件，这里通过手动调用u-form-item的方法进行触发
  */
 const clickHandler = () => {
+  // 隐藏键盘
   if (disabled.value || readonly.value) {
     uni.hideKeyboard();
   }
-  // #ifdef APP-NVUE
-  if (os() === "android") {
-    const formItem = $parent.call(this, "u-form-item");
-    if (formItem) {
-      formItem.clickHandler();
-    }
-  }
-  // #endif
+};
+
+/**
+ * @description 点击前缀
+ * */
+const onPrefix = () => {
+  emit("onPrefix");
+};
+/**
+ * @description 点击后缀
+ * */
+const onSuffix = () => {
+  emit("onSuffix");
 };
 </script>
 

package/components/hy-input/index.scss

@@ -1,11 +1,22 @@
 @use "../../libs/css/mixin.scss" as *;
 @use "../../theme.scss" as *;
 
-.hy-input {
+/* 暗色主题 */
+@include b(theme){
+  @include m(dark) {
+    @include b(input) {
+      color: $hy-dark-color;
+    }
+  }
+}
+
+@include b(input) {
   @include flex(row);
   align-items: center;
   justify-content: space-between;
   flex: 1;
+  color:
+$hy-light-color;
 
   &--radius,
   &--square {
@@ -35,7 +46,6 @@
       &__field {
         line-height: 26px;
         text-align: left;
-        color: $hy-text-color;
         height: 24px;
         font-size: 15px;
         flex: 1;

package/components/hy-input/props.ts

@@ -26,11 +26,9 @@ const defaultProps: IProps = {
   adjustPosition: true,
   inputAlign: "left",
   fontSize: "15px",
-  color: "#303133",
-  prefixIcon: "",
-  prefixIconStyle: {},
-  suffixIcon: "",
-  suffixIconStyle: {},
+  color: "",
+  prefixIcon: {},
+  suffixIcon: {},
   border: "surround",
   readonly: false,
   shape: "square",

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

@@ -1,6 +1,7 @@
 import type { CSSProperties } from "vue";
+import type HyIconProps from "../hy-icon/typing";
 
-export default interface IProps {
+export default interface HyInputProps {
   /**
    * @description 输入的值
    * */
@@ -96,7 +97,7 @@ export default interface IProps {
   /**
    * @description 输入框内容对齐方式（ 默认 'left' ）
    * */
-  inputAlign?: "center" | HyApp.LeftRightType;
+  inputAlign?: HyApp.RowCenterType;
   /**
    * @description 输入框字体的大小 （ 默认 '15px' ）
    * */
@@ -108,19 +109,11 @@ export default interface IProps {
   /**
    * @description 输入框前置图标
    * */
-  prefixIcon?: string;
-  /**
-   * @description 前置图标样式，对象或字符串
-   * */
-  prefixIconStyle?: CSSProperties;
+  prefixIcon?: Partial<HyIconProps>;
   /**
    * @description 输入框后置图标
    * */
-  suffixIcon?: string;
-  /**
-   * @description 后置图标样式，对象或字符串
-   * */
-  suffixIconStyle?: CSSProperties;
+  suffixIcon?: Partial<HyIconProps>;
   /**
    * @description 边框类型，surround-四周边框，bottom-底部边框，none-无边框 （ 默认 'surround' ）
    * */
@@ -141,6 +134,14 @@ export default interface IProps {
    * @description 定义需要用到的外部样式
    * */
   customStyle?: CSSProperties;
+  /**
+   * @description 值变化事件
+   * */
+  onChange?: Function;
+  /**
+   * @description 失去焦点事件
+   * */
+  onBlur?: Function;
   /**
    * @description 是否忽略组件内对文本合成系统事件的处理。
    * */

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

@@ -2,6 +2,17 @@
   <view class="hy-line" :style="lineStyle"> </view>
 </template>
 
+<script lang="ts">
+export default {
+  name: 'hy-line',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
 <script setup lang="ts">
 import { computed, type CSSProperties, toRefs } from "vue";
 import defaultProps from "./props";

package/components/hy-line/index.scss

@@ -1,4 +1,7 @@
-.hy-line {
+@use "../../libs/css/mixin.scss" as *;
+@use "../../theme.scss" as *;
+
+@include b(line) {
   /* #ifndef APP-NVUE */
   vertical-align: middle;
   /* #endif */

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

@@ -1,6 +1,6 @@
 import type { CSSProperties } from "vue";
 
-export default interface IProps {
+export default interface HyLineProps {
   /**
    * @description 线条的颜色 ( 默认 '#d6d7d9' )
    * */

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

@@ -14,6 +14,9 @@
         <text
           v-if="showText && percentage >= 10"
           class="hy-line-progress__text"
+          :style="{
+            fontSize: fontSize ? addUnit(fontSize) : addUnit(getPx(height)),
+          }"
           >{{ innserPercentage + "%" }}</text
         >
       </slot>
@@ -21,10 +24,22 @@
   </view>
 </template>
 
+<script lang="ts">
+export default {
+  name: 'hy-line-progress',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
 <script setup lang="ts">
 import {
   computed,
-  type CSSProperties, getCurrentInstance,
+  type CSSProperties,
+  getCurrentInstance,
   onMounted,
   ref,
   toRefs,
@@ -32,7 +47,7 @@ import {
 } from "vue";
 import defaultProps from "./props";
 import type IProps from "./typing";
-import { addUnit, getRect, range, sleep } from "../../utils";
+import { addUnit, getPx, getRect, range, sleep } from "../../utils";
 
 const props = withDefaults(defineProps<IProps>(), defaultProps);
 const { percentage, activeColor, height } = toRefs(props);

package/components/hy-line-progress/index.scss

@@ -1,16 +1,28 @@
 @use "../../libs/css/mixin.scss" as *;
+@use "../../theme.scss" as *;
 
-.hy-line-progress {
+/* 暗色主题 */
+@include b(theme){
+  @include m(dark) {
+    @include b(line-progress) {
+      &__background {
+        background-color: $hy-dark-background--track;
+      }
+    }
+  }
+}
+
+@include b(line-progress) {
   align-items: stretch;
   position: relative;
   @include flex(row);
   flex: 1;
   overflow: hidden;
-  border-radius: 100px;
+  border-radius: $hy-border-radius-semicircle;
 
   &__background {
-    background-color: #ececec;
-    border-radius: 100px;
+    background-color: $hy-info-light;
+    border-radius: $hy-border-radius-semicircle;
     flex: 1;
   }
 
@@ -22,17 +34,17 @@
     align-items: center;
     @include flex(row);
     color: #ffffff;
-    border-radius: 100px;
+    border-radius: $hy-border-radius-semicircle;
     transition: width 0.5s ease;
     justify-content: flex-end;
+    background-color: $hy-primary;
   }
 
   &__text {
     font-size: 10px;
-    align-items: center;
-    text-align: right;
     color: #ffffff;
+    margin-bottom: 1px;
     margin-right: 5px;
-    transform: scale(0.9);
+    transform: scale(0.8);
   }
 }

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

@@ -1,12 +1,12 @@
 import type IProps from "./typing";
-import { ColorConfig } from "../../config";
 
 const defaultProps: IProps = {
-  activeColor: ColorConfig.primary,
-  inactiveColor: "#ececec",
+  activeColor: "",
+  inactiveColor: "",
   percentage: 0,
   showText: true,
-  height: 12,
+  height: 8,
+  fontSize: "",
 };
 
 export default defaultProps;

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

@@ -1,6 +1,6 @@
 import type { CSSProperties } from "vue";
 
-export default interface IProps {
+export default interface HyLineProgressProps {
   /**
    * @description 激活部分的颜色 ( 默认 '#19be6b' )
    * */
@@ -21,6 +21,10 @@ export default interface IProps {
    * @description 进度条的高度，单位px ( 默认 12 )
    * */
   height?: string | number;
+  /**
+   * @description 字体大小，单位px ( 默认 10 )
+   * */
+  fontSize?: string | number;
   /**
    * @description 自定义样式
    * */