hy-app 0.1.5 → 0.2.0

package/components/hy-modal/index.scss

@@ -1,7 +1,19 @@
 @use "../../theme.scss" as *;
 @use "../../libs/css/mixin.scss" as *;
 
-.hy-modal {
+/* 暗色主题 */
+@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;
   border-radius: $hy-border-radius-base;
   overflow: hidden;
@@ -48,7 +60,7 @@
       height: 48px;
 
       &--line {
-        background: $hy-text-color-light;
+        background: $hy-border-color-light;
         width: 1px;
         height: 48px;
       }
@@ -64,7 +76,7 @@
       }
 
       &--hover {
-        background-color: $hy-bg-color-grey;
+        background-color: $hy-light-background-hover;
       }
 
       &__text {
@@ -72,6 +84,10 @@
         font-size: 16px;
         text-align: center;
       }
+
+      &--confirm-text {
+        color: $hy-primary;
+      }
     }
   }
 }

package/components/hy-navbar/hy-navbar.vue

@@ -82,6 +82,17 @@
   </view>
 </template>
 
+<script lang="ts">
+export default {
+  name: 'hy-navbar',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
 <script setup lang="ts">
 import defaultProps from "./props";
 import type IProps from "./typing";

package/components/hy-navbar/index.scss

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

package/components/hy-navbar/props.ts

@@ -13,7 +13,7 @@ const defaultProps: IProps = {
   title: "",
   sub: "",
   titleColor: "",
-  bgColor: "#ffffff",
+  bgColor: "",
   titleWidth: "400rpx",
   height: "44px",
   leftIconSize: 20,

package/components/hy-notice-bar/hy-notice-bar.vue

@@ -43,6 +43,17 @@
   </view>
 </template>
 
+<script lang="ts">
+export default {
+  name: 'hy-notice-bar',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
 <script setup lang="ts">
 import { ref, toRefs } from "vue";
 import defaultProps from "./props";

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

@@ -2,7 +2,7 @@
 @use "../../libs/css/mixin.scss" as *;
 
 
-.hy-notice {
+@include b(notice) {
   @include flex;
   align-items: center;
   justify-content: space-between;
@@ -52,42 +52,42 @@
 }
 /* #endif */
 
-.hy-notice-bar {
+@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;
-      }
-    }
-  }
-}
+//.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;
+//      }
+//    }
+//  }
+//}

package/components/hy-number-step/hy-number-step.vue

@@ -24,7 +24,7 @@
       ]"
       :style="buttonStyle('minus')"
     >
-      <HyICon
+      <HyIcon
         :name="minusIcon?.name || IconConfig.MINUS"
         :color="isDisabled('minus') ? '#c8c9cc' : minusIcon?.color"
         :size="minusIcon?.size"
@@ -37,7 +37,7 @@
         :stop="minusIcon?.stop"
         :round="minusIcon?.round"
         :customStyle="minusIcon?.customStyle"
-      ></HyICon>
+      ></HyIcon>
     </view>
     <!-- 减号 -->
 
@@ -106,7 +106,7 @@
       ]"
       :style="[buttonStyle('plus')]"
     >
-      <HyICon
+      <HyIcon
         :name="plusIcon?.name || IconConfig.PLUS"
         :color="isDisabled('plus') ? '#c8c9cc' : plusIcon?.color"
         :size="plusIcon?.size"
@@ -119,12 +119,23 @@
         :stop="plusIcon?.stop"
         :round="plusIcon?.round"
         :customStyle="plusIcon?.customStyle"
-      ></HyICon>
+      ></HyIcon>
     </view>
     <!-- 加号 -->
   </view>
 </template>
 
+<script lang="ts">
+export default {
+  name: 'hy-number-step',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
 <script setup lang="ts">
 import {
   computed,
@@ -139,7 +150,6 @@ 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 HyIcon from "../hy-icon/hy-icon.vue";
 
 const props = withDefaults(defineProps<IProps>(), defaultProps);
@@ -236,9 +246,6 @@ const buttonStyle = computed(() => {
       color: color.value,
       borderRadius: buttonRadius.value,
     };
-    if (isDisabled.value(type)) {
-      style.backgroundColor = "#f7f8fa";
-    }
     return style;
   };
 });

package/components/hy-number-step/index.scss

@@ -1,19 +1,26 @@
 @use "../../theme.scss" as *;
 @use "../../libs/css/mixin.scss" as *;
 
-$u-numberBox-hover-bgColor: #e6e6e6 !default;
-$u-numberBox-disabled-color: #c8c9cc !default;
-$u-numberBox-disabled-bgColor: #f7f8fa !default;
-$u-numberBox-plus-radius: 4px !default;
-$u-numberBox-minus-radius: 4px !default;
-$u-numberBox-input-text-align: center !default;
-$u-numberBox-input-font-size: 15px !default;
-$u-numberBox-input-padding: 0 !default;
-$u-numberBox-input-margin: 0 2px !default;
-$u-numberBox-input-disabled-color: #c8c9cc !default;
-$u-numberBox-input-disabled-bgColor: #f2f3f5 !default;
+/* 暗色主题 */
+@include b(theme){
+  @include m(dark) {
+    @include b(number-box) {
+      color: $hy-dark-color;
+      &__input,
+      &__plus,
+      &__minus {
+        background-color: $hy-dark-background--empty;
+        &--disabled {
+          color: $hy-dark-text-disabled;
+          background-color: $hy-dark-bg-disabled;
+        }
+      }
+    }
+  }
+}
+
 
-.hy-number-box {
+@include b(number-box) {
   @include flex(row);
   align-items: center;
 
@@ -23,8 +30,10 @@ $u-numberBox-input-disabled-bgColor: #f2f3f5 !default;
     /* #endif */
   }
 
+  &__input,
   &__plus,
   &__minus {
+    background-color: #EBECEE;
     width: 35px;
     @include flex;
     justify-content: center;
@@ -34,38 +43,38 @@ $u-numberBox-input-disabled-bgColor: #f2f3f5 !default;
     /* #endif */
 
     &--hover {
-      background-color: $u-numberBox-hover-bgColor !important;
+      background-color: $hy-light-background-hover;
     }
 
     &--disabled {
-      color: $u-numberBox-disabled-color;
-      background-color: $u-numberBox-disabled-bgColor;
+      color: $hy-text-color-disable;
+      background-color: $hy-light-background-disabled;
     }
   }
 
   &__plus {
-    border-top-right-radius: $u-numberBox-plus-radius;
-    border-bottom-right-radius: $u-numberBox-plus-radius;
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
   }
 
   &__minus {
-    border-top-left-radius: $u-numberBox-minus-radius;
-    border-bottom-left-radius: $u-numberBox-minus-radius;
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
   }
 
   &__input {
     position: relative;
-    text-align: $u-numberBox-input-text-align;
-    font-size: $u-numberBox-input-font-size;
-    padding: $u-numberBox-input-padding;
-    margin: $u-numberBox-input-margin;
+    text-align: center;
+    font-size: 15px;
+    padding: 0;
+    margin: 0 2px;
     @include flex;
     align-items: center;
     justify-content: center;
 
     &--disabled {
-      color: $u-numberBox-input-disabled-color;
-      background-color: $u-numberBox-input-disabled-bgColor;
+      color: #c8c9cc;
+      background-color: #f2f3f5;
     }
   }
 }

package/components/hy-number-step/props.ts

@@ -14,12 +14,12 @@ const defaultProps: IProps = {
   showPlus: true,
   decimalLength: null,
   longPress: true,
-  color: "#323233",
+  color: "",
   buttonWidth: 30,
   buttonSize: 30,
-  buttonRadius: "0px",
-  bgColor: "#EBECEE",
-  inputBgColor: "#EBECEE",
+  buttonRadius: "",
+  bgColor: "",
+  inputBgColor: "",
   cursorSpacing: 100,
   disableMinus: false,
   disablePlus: false,

package/components/hy-overlay/index.scss

@@ -1,5 +1,7 @@
+@use "../../theme.scss" as *;
+@use "../../libs/css/mixin.scss" as *;
 
-.hy-overlay {
+@include b(overlay) {
   position: fixed;
   top: 0;
   left: 0;

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

@@ -70,6 +70,7 @@
           :style="{
             height: `${addUnit(visibleItemCount * itemHeight)}`,
           }"
+          maskStyle="backgroundImage: none;"
           @change="changeHandler"
         >
           <picker-view-column
@@ -108,6 +109,17 @@
   </view>
 </template>
 
+<script lang="ts">
+export default {
+  name: 'hy-picker',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
 <script setup lang="ts">
 import { computed, ref, toRefs, watch } from "vue";
 import { deepClone, sleep, addUnit } from "../../utils";

package/components/hy-picker/index.scss

@@ -1,7 +1,8 @@
 @use "../../theme.scss" as *;
 @use "../../libs/css/mixin.scss" as *;
 
-.hy-picker {
+
+@include b(picker) {
   position: relative;
   &-input {
     position: relative;
@@ -24,6 +25,10 @@
       font-size: $hy-font-size-subtitle;
       color: $hy-color-subtitle;
     }
+
+    &--right {
+      color: $hy-primary;
+    }
   }
 
   &__view {
@@ -41,7 +46,6 @@
         /* #ifndef APP-NVUE */
         display: block;
         /* #endif */
-        color: #303133ff;
 
         &--disabled {
           /* #ifndef APP-NVUE */
@@ -53,7 +57,7 @@
     }
   }
 
-  &--loading {
+  @include m(loading) {
     position: absolute;
     top: 0;
     right: 0;

package/components/hy-picker/props.ts

@@ -13,7 +13,7 @@ const defaultProps: IProps = {
   cancelText: "取消",
   confirmText: "确定",
   cancelColor: "#909193",
-  confirmColor: "#3c9cff",
+  confirmColor: "",
   visibleItemCount: 5,
   keyName: "text",
   closeOnClickOverlay: false,

package/components/hy-popup/hy-popup.vue

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

package/components/hy-popup/index.scss

@@ -1,8 +1,17 @@
 @use "../../theme.scss" as *;
 @use "../../libs/css/mixin.scss" as *;
 
+/* 暗色主题 */
+@include b(theme) {
+  @include m(dark) {
+    @include b(popup__content) {
+      background-color: $hy-dark-background--2;
+      color: $hy-dark-color;
+    }
+  }
+}
 
-.hy-popup {
+@include b(popup) {
   flex: 1;
 
   &__content {

package/components/hy-price/hy-price.vue

@@ -16,6 +16,17 @@
   </text>
 </template>
 
+<script lang="ts">
+export default {
+  name: 'hy-price',
+  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-price/index.scss

@@ -1,4 +1,7 @@
-.hy-price {
+@use "../../theme.scss" as *;
+@use "../../libs/css/mixin.scss" as *;
+
+@include b(price) {
   font-size: 32rpx;
   font-weight: 500;
   margin-top: 5px;

package/components/hy-qrcode/hy-qrcode.vue

@@ -20,6 +20,17 @@
   </view>
 </template>
 
+<script lang="ts">
+export default {
+  name: 'hy-qrcode',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
 <script setup lang="ts">
 import { getCurrentInstance, toRefs, ref, onMounted } from "vue";
 import defaultProps from "./props";

package/components/hy-qrcode/index.scss

@@ -1,4 +1,7 @@
-.hy-qrcode {
+@use "../../theme.scss" as *;
+@use "../../libs/css/mixin.scss" as *;
+
+@include b(qrcode) {
   &__loading {
     display: flex;
     justify-content: center;

package/components/hy-radio/hy-radio.vue

@@ -49,6 +49,17 @@
   </view>
 </template>
 
+<script lang="ts">
+export default {
+  name: 'hy-radio',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
 <script setup lang="ts">
 import type IProps from "./typing";
 import type { CheckboxColumnsVo } from "../hy-check-button/typing";
@@ -154,8 +165,11 @@ const iconClasses = computed(() => {
     if (isDisabled(temp?.disabled)) {
       classes.push("hy-radio__icon-wrap--disabled");
     }
-    if (temp[fieldNames.value.checked] && isDisabled(temp?.disabled)) {
-      classes.push("hy-radio__icon-wrap--disabled--checked");
+    if (temp[fieldNames.value.checked]) {
+      classes.push("hy-radio__icon-wrap--checked");
+      if (isDisabled(temp?.disabled)) {
+        classes.push("hy-radio__icon-wrap--disabled--checked");
+      }
     }
     return classes;
   };
@@ -171,7 +185,9 @@ const iconWrapStyle = computed(() => {
     style.backgroundColor =
       temp[fieldNames.value.checked] && !isDisabled(temp?.disabled)
         ? activeColor.value
-        : "#ffffff";
+        : !isDisabled(temp?.disabled)
+          ? "#ffffff"
+          : "";
     style.borderColor =
       temp[fieldNames.value.checked] && !isDisabled(temp?.disabled)
         ? activeColor.value

package/components/hy-radio/index.scss

@@ -1,7 +1,16 @@
 @use "../../theme.scss" as *;
 @use "../../libs/css/mixin.scss" as *;
 
-.hy-radio {
+/* 暗色主题 */
+@include b(theme){
+  @include m(dark) {
+    @include b(radio__label-wrap) {
+      color: $hy-dark-color;
+    }
+  }
+}
+
+@include b(radio) {
   @include flex(row);
   overflow: hidden;
   flex-direction: row;
@@ -64,17 +73,19 @@
     }
 
     &--checked {
-      color: $hy-text-color-inverse;
+      color: #FFFFFF;
       background-color: $hy-primary;
       border-color: $hy-primary;
     }
 
     &--disabled {
-      background-color: $hy-color-disable-bg !important;
+      background-color: $hy-light-background-disabled;
     }
 
     &--disabled--checked {
-      color: $hy-color-disable-icon !important;
+      background-color: $hy-primary;
+      border-color: $hy-primary;
+      opacity: 0.5;
     }
   }
 
@@ -82,7 +93,8 @@
     /* #ifndef APP-NVUE */
     word-wrap: break-word;
     /* #endif */
-    color: $hy-text-color;
+    color:
+$hy-light-color;
     font-size: $hy-font-size-base;
     margin-right: $hy-border-margin-padding-sm;