hy-app 0.2.0 → 0.2.2

package/components/hy-form/index.scss

@@ -1,17 +1,10 @@
 @use "../../theme.scss" as *;
 @use "../../libs/css/mixin.scss" as *;
 
-/* 暗色主题 */
-@include b(theme){
-  @include m(dark) {
-    @include b(form) {
-      color: $hy-dark-color;
-    }
-  }
-}
 
 @include b(form) {
   @include m(item) {
+    color: $hy-text-color;
     display: flex;
     //align-items: center;
     margin-bottom: $hy-border-margin-padding-lg;

package/components/hy-grid/hy-grid.vue

@@ -13,7 +13,7 @@
             :name="item?.icon"
             label-pos="bottom"
             :label="item?.name"
-            :space="item?.iconConfig?.space || iconConfig?.space || 12"
+            :space="item?.iconConfig?.space || iconConfig?.space || 8"
             :color="item?.iconConfig?.color || iconConfig?.color"
             :size="item?.iconConfig?.size || iconConfig?.size || 30"
             :bold="item?.iconConfig?.bold || iconConfig?.bold"
@@ -37,13 +37,13 @@
 
 <script lang="ts">
 export default {
-  name: 'hy-grid',
+  name: "hy-grid",
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared'
-  }
-}
+    styleIsolation: "shared",
+  },
+};
 </script>
 
 <script setup lang="ts">

package/components/hy-grid/index.scss

@@ -32,7 +32,7 @@
     }
 
     &__title {
-      color: #000;
+      color: $hy-text-color;
       line-height: 60rpx;
       font-size: $hy-font-size-sm;
     }

package/components/hy-icon/index.scss

@@ -2,21 +2,13 @@
 @use "../../public/font/iconfont.css" as *;
 @use "../../theme.scss" as *;
 
-/* 暗色主题 */
-@include b(theme){
-  @include m(dark) {
-    @include b(icon) {
-      color: $hy-dark-color;
-    }
-  }
-}
 
 @include b(icon) {
   /* #ifndef APP-NVUE */
   display: flex;
   /* #endif */
   align-items: center;
-  color: $hy-text-color-grey;
+  color: $hy-icon-color;
 
   @include m(left) {
     flex-direction: row-reverse;
@@ -42,6 +34,7 @@
     position: relative;
     @include flex;
     align-items: center;
+    vertical-align: -100%;
 
     &--primary {
       color: $hy-primary;
@@ -77,6 +70,8 @@
     /* #ifndef APP-NVUE */
     line-height: 1;
     /* #endif */
+    color: $hy-text-color--grey;
+    font-size: 12px;
   }
 }
 @include b(rotate) {

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

@@ -56,13 +56,13 @@
 
 <script lang="ts">
 export default {
-  name: 'hy-image',
+  name: "hy-image",
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared'
-  }
-}
+    styleIsolation: "shared",
+  },
+};
 </script>
 
 <script setup lang="ts">
@@ -217,7 +217,7 @@ const onLoadHandler = (e: Event) => {
 const removeBgColor = () => {
   // 淡入动画过渡完成后，将背景设置为透明色，否则png图片会看到灰色的背景
   backgroundStyle.value = {
-    backgroundColor: bgColor.value || "#ffffff",
+    backgroundColor: bgColor.value || "",
   };
 };
 </script>

package/components/hy-image/index.scss

@@ -20,8 +20,8 @@
     @include flex;
     align-items: center;
     justify-content: center;
-    background-color: $hy-light-background-image;
-    color: $hy-text-color-grey;
+    background-color: $hy-background--empty;
+    color: $hy-text-color--grey;
     font-size: 46px;
   }
 }

package/components/hy-image/props.ts

@@ -17,7 +17,7 @@ const defaultProps: IProps = {
   fade: true,
   webp: false,
   duration: 500,
-  bgColor: "#f3f4f6",
+  bgColor: "",
   previewImage: false,
 };
 

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

@@ -101,13 +101,13 @@
 
 <script lang="ts">
 export default {
-  name: 'hy-input',
+  name: "hy-input",
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared'
-  }
-}
+    styleIsolation: "shared",
+  },
+};
 </script>
 
 <script setup lang="ts">
@@ -204,6 +204,7 @@ const inputClass = computed((): string => {
   classes.push(`hy-input--${shape}`);
   border === "bottom" &&
     (classes = classes.concat(["hy-border__bottom", "hy-input--no-radius"]));
+  disabled.value && classes.push("hy-input--disabled");
   return classes.join(" ");
 });
 
@@ -212,17 +213,11 @@ const inputClass = computed((): string => {
  * */
 const wrapperStyle = computed((): CSSProperties => {
   const style: CSSProperties = {};
+  style.paddingTop = "6px";
+  style.paddingBottom = "6px";
+  style.paddingLeft = "9px";
+  style.paddingRight = "9px";
   // 禁用状态下，被背景色加上对应的样式
-  // 无边框时，去除内边距
-  if (border.value === "none") {
-    style.padding = "0";
-  } else {
-    // 由于uni-app的iOS开发者能力有限，导致需要分开写才有效
-    style.paddingTop = "6px";
-    style.paddingBottom = "6px";
-    style.paddingLeft = "9px";
-    style.paddingRight = "9px";
-  }
   if (disabled.value) {
     style.backgroundColor = disabledColor.value;
   }

package/components/hy-input/index.scss

@@ -1,28 +1,26 @@
 @use "../../libs/css/mixin.scss" as *;
 @use "../../theme.scss" as *;
 
-/* 暗色主题 */
-@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;
+  color: $hy-text-color;
 
   &--radius,
   &--square {
     border-radius: 4px;
   }
 
+  @include m(disabled) {
+    background-color: $hy-background--disabled;
+    color: $hy-text-color--disabled;
+    :deep(.hy-icon) {
+      color: $hy-text-color--disabled;
+    }
+  }
+
   &--no-radius {
     border-radius: 0;
   }
@@ -56,7 +54,7 @@ $hy-light-color;
       width: 20px;
       height: 20px;
       border-radius: 100px;
-      background-color: #c6c7cb;
+      background-color: $hy-background--track;
       @include flex(row);
       align-items: center;
       justify-content: center;

package/components/hy-input/props.ts

@@ -5,7 +5,7 @@ const defaultProps: IProps = {
   type: "text",
   fixed: false,
   disabled: false,
-  disabledColor: "#F5F5F5",
+  disabledColor: "",
   clearable: false,
   password: false,
   maxlength: 140,

package/components/hy-line/index.scss

@@ -5,4 +5,5 @@
   /* #ifndef APP-NVUE */
   vertical-align: middle;
   /* #endif */
+  border-color: $hy-border-color;
 }

package/components/hy-line/props.ts

@@ -1,7 +1,7 @@
 import type IProps from "./typing";
 
 const defaultProps: IProps = {
-  color: "#dcdfe6",
+  color: "",
   length: "100%",
   direction: "row",
   hairline: true,

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

@@ -1,17 +1,6 @@
 @use "../../libs/css/mixin.scss" as *;
 @use "../../theme.scss" as *;
 
-/* 暗色主题 */
-@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;
@@ -21,7 +10,7 @@
   border-radius: $hy-border-radius-semicircle;
 
   &__background {
-    background-color: $hy-info-light;
+    background-color: $hy-background--empty;
     border-radius: $hy-border-radius-semicircle;
     flex: 1;
   }

package/components/hy-loading/index.scss

@@ -10,7 +10,7 @@
 
   &__text {
     margin-left: 4px;
-    color: $hy-text-color-grey;
+    color: $hy-text-color--grey;
     font-size: 14px;
     line-height: 20px;
   }
@@ -59,7 +59,7 @@
 
   &--vertical &__text {
     margin: 6px 0 0;
-    color: $hy-text-color-grey;
+    color: $hy-text-color--grey;
   }
 
   &__dot {

package/components/hy-modal/hy-modal.vue

@@ -65,10 +65,11 @@
               >{{ cancelText }}</text
             >
           </view>
-          <view
-            class="hy-modal__button-group__wrapper--line"
+          <hy-line
             v-if="showConfirmButton && showCancelButton"
-          ></view>
+            length="48px"
+            direction="column"
+          ></hy-line>
           <view
             class="hy-modal__button-group__wrapper hy-modal__button-group__wrapper--confirm"
             :hover-stay-time="150"
@@ -113,10 +114,9 @@ import { ref, toRefs, watch } from "vue";
 import defaultProps from "./props";
 import type IProps from "./typing";
 import { addUnit } from "../../utils";
-import { IconConfig } from "../../config";
 
 // 组件
-import HyIcon from "../hy-icon/hy-icon.vue";
+import HyLine from "../hy-line/hy-line.vue";
 import HyPopup from "../hy-popup/hy-popup.vue";
 import HyLoading from "../hy-loading/hy-loading.vue";
 
@@ -167,4 +167,7 @@ const clickHandler = () => {
 
 <style lang="scss" scoped>
 @import "./index.scss";
+.modal__content__text {
+  text-align: v-bind(contentTextAlign);
+}
 </style>

package/components/hy-modal/index.scss

@@ -1,20 +1,8 @@
 @use "../../theme.scss" as *;
 @use "../../libs/css/mixin.scss" as *;
 
-/* 暗色主题 */
-@include b(theme){
-  @include m(dark) {
-    @include b(modal) {
-      color: $hy-dark-color;
-      &__button-group__wrapper--hover {
-        background-color: $hy-dark-background--hover;
-      }
-    }
-  }
-}
-
 @include b(modal) {
-  width: 650rpx;
+  max-width: 650rpx;
   border-radius: $hy-border-radius-base;
   overflow: hidden;
 
@@ -25,21 +13,21 @@
     align-items: center;
     font-size: 16px;
     font-weight: bold;
-    color: $hy-color-title;
+    color: $hy-text-color;
     text-align: center;
     padding-top: 25px;
   }
 
   &__content {
-    padding: 30px 40px;
+    padding: 20px;
     @include flex;
     justify-content: center;
 
     &__text {
-      text-align: v-bind(contentTextAlign);
       font-size: 15px;
-      color: $hy-text-color-grey;
+      color: $hy-text-color--grey;
       flex: 1;
+      text-align: center;
     }
   }
 
@@ -59,12 +47,6 @@
       align-items: center;
       height: 48px;
 
-      &--line {
-        background: $hy-border-color-light;
-        width: 1px;
-        height: 48px;
-      }
-
       &--confirm,
       &--only-cancel {
         border-bottom-right-radius: $hy-border-radius-base;
@@ -76,11 +58,11 @@
       }
 
       &--hover {
-        background-color: $hy-light-background-hover;
+        background-color: $hy-background--hover;
       }
 
       &__text {
-        color: $hy-color-subtitle;
+        color: $hy-text-color--2;
         font-size: 16px;
         text-align: center;
       }

package/components/hy-modal/props.ts

@@ -9,14 +9,14 @@ const defaultProps: IProps = {
   cancelText: "取消",
   showConfirmButton: true,
   showCancelButton: false,
-  confirmColor: ColorConfig.primary,
-  cancelColor: "#606266",
+  confirmColor: "",
+  cancelColor: "",
   buttonReverse: false,
   zoom: true,
   asyncClose: false,
   closeOnClickOverlay: false,
   negativeTop: 0,
-  width: "650rpx",
+  width: "550rpx",
   confirmButtonShape: "",
   contentTextAlign: "left",
 };

package/components/hy-navbar/index.scss

@@ -1,20 +1,9 @@
 @use "../../theme.scss" as *;
 @use "../../libs/css/mixin.scss" as *;
 
-/* 暗色主题 */
-@include b(theme){
-  @include m(dark) {
-    @include b(navbar) {
-      &__content {
-        color: $hy-dark-color;
-        background-color: $hy-dark-background;
-      }
-    }
-  }
-}
 
 @include b(navbar) {
-  &--fixed {
+  @include m(fixed) {
     position: fixed;
     left: 0;
     right: 0;
@@ -26,7 +15,7 @@
     @include flex(row);
     align-items: center;
     height: 44px;
-    background-color: #F8F8F8;
+    background-color: $hy-background;
     position: relative;
     justify-content: center;
 
@@ -62,7 +51,7 @@
       }
       &--sub {
         font-size: $hy-font-size-hint;
-        color: $hy-color-hint;
+        color: $hy-text-color--grey;
       }
     }
 

package/components/hy-notice-bar/index.scss

@@ -7,9 +7,21 @@
   align-items: center;
   justify-content: space-between;
 
+  &-bar {
+    overflow: hidden;
+    padding: 9px 12px;
+    flex: 1;
+    background-color: $hy-warning-light;
+    color: $hy-warning;
+    border-radius: $hy-border-radius-sm;
+  }
+
   &__left-icon {
     align-items: center;
     margin-right: 5px;
+    :deep(.hy-icon) {
+      color: $hy-warning;
+    }
   }
 
   &__right-icon {
@@ -38,6 +50,24 @@
       line-height: 100%;
     }
   }
+
+  &__swiper {
+    height: 16px;
+    @include flex;
+    align-items: center;
+    flex: 1;
+
+    &__item {
+      @include flex;
+      align-items: center;
+      overflow: hidden;
+
+      &__text {
+        font-size: 14px;
+        color: $u-warning;
+      }
+    }
+  }
 }
 
 /* #ifndef APP-NVUE */
@@ -50,44 +80,4 @@
     transform: translate3d(-100%, 0, 0);
   }
 }
-/* #endif */
-
-@include b(notice-bar) {
-  overflow: hidden;
-  padding: 9px 12px;
-  flex: 1;
-}
-
-//.hy-notice {
-//  @include flex;
-//  align-items: center;
-//  justify-content: space-between;
-//
-//  &__left-icon {
-//    align-items: center;
-//    margin-right: 5px;
-//  }
-//
-//  &__right-icon {
-//    margin-left: 5px;
-//    align-items: center;
-//  }
-//
-//  &__swiper {
-//    height: 16px;
-//    @include flex;
-//    align-items: center;
-//    flex: 1;
-//
-//    &__item {
-//      @include flex;
-//      align-items: center;
-//      overflow: hidden;
-//
-//      &__text {
-//        font-size: 14px;
-//        color: $hy-warning;
-//      }
-//    }
-//  }
-//}
+/* #endif */

package/components/hy-notice-bar/props.ts

@@ -7,8 +7,8 @@ const defaultProps: IProps = {
   step: false,
   icon: IconConfig.NOTIFICATION_FILL,
   mode: "",
-  color: "#f9ae3d",
-  bgColor: "#fdf6ec",
+  color: "",
+  bgColor: "",
   speed: 80,
   fontSize: 14,
   duration: 2000,