hy-app 0.1.5 → 0.2.0

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

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

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

@@ -1,5 +1,5 @@
 @use "../../libs/css/mixin.scss" as *;
-.hy-datetime-picker {
+@include b(datetime-picker) {
   flex: 1;
   &__has-input {
     position: relative;

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

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

package/components/hy-avatar/index.scss

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

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

@@ -22,15 +22,26 @@
   </HyTransition>
 </template>
 
+<script lang="ts">
+export default {
+  name: 'hy-back-top',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
 <script setup lang="ts">
 import { computed, type CSSProperties, toRefs } from "vue";
 import defaultProps from "./props";
+import { addUnit, getPx } from "../../utils";
+import { IconConfig } from "@/package";
 import type IProps from "./typing";
 // 组件
 import HyTransition from "../hy-transition/hy-transition.vue";
 import HyIcon from "../hy-icon/hy-icon.vue";
-import { addUnit, getPx } from "../../utils";
-import { IconConfig } from "@/package";
 
 const props = withDefaults(defineProps<IProps>(), defaultProps);
 const { customStyle, duration, mode, bottom, right, top, scrollTop } =

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

@@ -1,6 +1,16 @@
 @use "../../libs/css/mixin.scss" as *;
+@use "../../theme.scss" as *;
 
-.hy-back-top {
+/* 暗色主题 */
+@include b(theme){
+  @include m(dark) {
+    @include b(back-top) {
+      background-color: $hy-dark-background--track;
+    }
+  }
+}
+
+@include b(back-top) {
   @include flex;
   flex-direction: column;
   align-items: center;

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

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

package/components/hy-badge/index.scss

@@ -4,69 +4,47 @@
 $hy-badge-dot-size: 8px !default;
 $hy-badge-text-font-size: 11px !default;
 
-.hy-badge {
+
+
+@include b(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;
   z-index: 999;
 
-  &--dot {
+  @include m(dot) {
     height: $hy-badge-dot-size;
     width: $hy-badge-dot-size;
   }
 
-  &--inverted {
+  @include m(inverted) {
     font-size: 13px;
   }
 
-  &--not-dot {
+  @include m(not-dot) {
     padding: 2px 5px;
   }
 
-  &--horn {
+  @include m(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;
-  }
+  /* 主题色 */
+  @include themeColor(primary, $hy-primary);
+  @include themeColor(primary--inverted, "", "", $hy-primary);
 
-  &--success--inverted {
-    color: $hy-success;
-  }
+  @include themeColor(error, $hy-error);
+  @include themeColor(error--inverted, "", "", $hy-error);
 
-  &--info {
-    background-color: $hy-info;
-  }
+  @include themeColor(success, $hy-success);
+  @include themeColor(success--inverted, "", "", $hy-success);
 
-  &--info--inverted {
-    color: $hy-info;
-  }
+  @include themeColor(warning, $hy-warning);
+  @include themeColor(warning--inverted, "", "", $hy-warning);
 
-  &--warning {
-    background-color: $hy-warning;
-  }
+  @include themeColor(info, $hy-info);
+  @include themeColor(info--inverted, "", "", $hy-info);
 
-  &--warning--inverted {
-    color: $hy-warning;
-  }
 }

package/components/hy-button/hy-button.vue

@@ -21,10 +21,9 @@
     @launchapp="launchapp"
     @agreeprivacyauthorization="agreeprivacyauthorization"
     :hover-class="!disabled && !loading ? 'hy-button--active' : ''"
-    class="hy-button hy-reset-button"
     :style="[baseColor, customStyle]"
     @tap="clickHandler"
-    :class="bemClass"
+    :class="['hy-button', 'hy-reset-button', bemClass]"
   >
     <template v-if="loading">
       <HyLoading
@@ -126,6 +125,17 @@
   <!-- #endif -->
 </template>
 
+<script lang="ts">
+export default {
+  name: 'hy-button',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
 <script setup lang="ts">
 import { computed, type CSSProperties, toRefs } from "vue";
 import { bem, throttle } from "../../utils";
@@ -202,7 +212,7 @@ const iconColorCom = computed((): string => {
   if (plain.value) {
     return color.value ? color.value : textColor;
   } else {
-    return type.value === "info" ? "#000000" : "#ffffff";
+    return (type.value = "#ffffff");
   }
 });
 const baseColor = computed((): CSSProperties => {
@@ -212,7 +222,7 @@ const baseColor = computed((): CSSProperties => {
     style.color = plain.value ? color.value : "white";
     if (!plain.value) {
       // 非镂空，背景色使用自定义的颜色
-      style["background-color"] = color.value;
+      style["background"] = color.value;
     }
     if (color.value.indexOf("gradient") !== -1) {
       // 如果自定义的颜色为渐变色，不显示边框，以及通过backgroundImage设置渐变色
@@ -233,7 +243,7 @@ const baseColor = computed((): CSSProperties => {
     }
   } else {
     // 针对自定义了color颜色的情况，镂空状态下，就是用自定义的颜色
-    style.color = plain.value ? textColor : "";
+    // style.color = plain.value ? textColor : "";
   }
   return style;
 });

package/components/hy-button/index.scss

@@ -1,7 +1,7 @@
 @use "../../libs/css/mixin.scss" as *;
 @use "../../theme.scss" as *;
 
-.hy-button {
+@include b(button){
   height: 40px;
   position: relative;
   align-items: center;
@@ -21,7 +21,7 @@
     margin-left: 4px;
   }
 
-  &--large {
+  @include m(large) {
     /* #ifndef APP-NVUE */
     width: 100%;
     /* #endif */
@@ -29,12 +29,12 @@
     padding: 0 15px;
   }
 
-  &--medium {
+  @include m(medium) {
     padding: 0 12px;
     font-size: 14px;
   }
 
-  &--small {
+  @include m(small) {
     /* #ifndef APP-NVUE */
     min-width: 60px;
     /* #endif */
@@ -43,7 +43,7 @@
     font-size: 12px;
   }
 
-  &--mini {
+  @include m(mini) {
     height: 22px;
     font-size: 10px;
     /* #ifndef APP-NVUE */
@@ -52,52 +52,31 @@
     padding: 0 8px;
   }
 
-  &--disabled {
+  @include m(disabled) {
     opacity: 0.5;
   }
 
-  &--info {
-    color: #323233;
-    background-color: #fff;
-    border: 1px solid #909399;
-  }
+  @include themeColor(info,  $hy-info, $hy-info);
+  @include themeColor(success,  $hy-success, $hy-success);
+  @include themeColor(primary,  $hy-primary, $hy-primary);
+  @include themeColor(error, $hy-error, $hy-error);
+  @include themeColor(warning, $hy-warning, $hy-warning);
 
-  &--success {
-    color: #fff;
-    background-color: $hy-success;
-    border: 1px solid $hy-success;
-  }
+  @include themeColor(info__plain, transparent, $hy-info, $hy-info);
+  @include themeColor(success__plain, transparent, $hy-success, $hy-success);
+  @include themeColor(primary__plain, transparent, $hy-primary, $hy-primary);
+  @include themeColor(error__plain, transparent, $hy-error, $hy-error);
+  @include themeColor(warning__plain, transparent, $hy-warning, $hy-warning);
 
-  &--primary {
-    color: #fff;
-    background-color: $hy-primary;
-    border: 1px solid $hy-primary;
-  }
-
-  &--error {
-    color: #fff;
-    background-color: $hy-error;
-    border: 1px solid $hy-error;
-  }
 
-  &--warning {
-    color: #fff;
-    background-color: $hy-warning;
-    border: 1px solid $hy-warning;
-  }
 
-  &--block {
+  @include m(block) {
     @include flex;
     width: 100%;
   }
 
-  &--circle {
-    border-radius: 100px;
-  }
-
-  &--square {
-    border-radius: 3px;
-  }
+  @include borderRadio(circle);
+  @include borderRadio(square);
 
   &__icon {
     min-width: 1em;
@@ -105,12 +84,13 @@
     vertical-align: top;
   }
 
-  &--plain {
-    color: v-bind(textColor);
-    background-color: #fff;
-  }
+  //&--plain {
+  //  //color: v-bind(textColor);
+  //  color: $hy-primary;
+  //  background-color: #fff;
+  //}
 
-  &--hairline {
+  @include m(hairline) {
     border-width: 0.5px;
   }
 }

package/components/hy-calendar/header.vue

@@ -1,29 +1,29 @@
 <template>
-  <view class="u-calendar-header u-border-bottom">
-    <text class="u-calendar-header__title" v-if="showTitle">{{ title }}</text>
-    <text class="u-calendar-header__subtitle" v-if="showSubtitle">{{
+  <view class="hy-calendar-header hy-border-bottom">
+    <text class="hy-calendar-header__title" v-if="showTitle">{{ title }}</text>
+    <text class="hy-calendar-header__subtitle" v-if="showSubtitle">{{
       subtitle
     }}</text>
-    <view class="u-calendar-header__weekdays">
-      <text class="u-calendar-header__weekdays__weekday">{{
+    <view class="hy-calendar-header__weekdays">
+      <text class="hy-calendar-header__weekdays__weekday">{{
         weekText[0]
       }}</text>
-      <text class="u-calendar-header__weekdays__weekday">{{
+      <text class="hy-calendar-header__weekdays__weekday">{{
         weekText[1]
       }}</text>
-      <text class="u-calendar-header__weekdays__weekday">{{
+      <text class="hy-calendar-header__weekdays__weekday">{{
         weekText[2]
       }}</text>
-      <text class="u-calendar-header__weekdays__weekday">{{
+      <text class="hy-calendar-header__weekdays__weekday">{{
         weekText[3]
       }}</text>
-      <text class="u-calendar-header__weekdays__weekday">{{
+      <text class="hy-calendar-header__weekdays__weekday">{{
         weekText[4]
       }}</text>
-      <text class="u-calendar-header__weekdays__weekday">{{
+      <text class="hy-calendar-header__weekdays__weekday">{{
         weekText[5]
       }}</text>
-      <text class="u-calendar-header__weekdays__weekday">{{
+      <text class="hy-calendar-header__weekdays__weekday">{{
         weekText[6]
       }}</text>
     </view>
@@ -32,7 +32,7 @@
 
 <script>
 export default {
-  name: "u-calendar-header",
+  name: "hy-calendar-header",
   props: {
     // 标题
     title: {

package/components/hy-calendar/hy-calendar.vue

@@ -7,7 +7,7 @@
     :round="round"
     :closeOnClickOverlay="closeOnClickOverlay"
   >
-    <view class="u-calendar">
+    <view class="hy-calendar">
       <HyHeader
         :title="title"
         :subtitle="subtitle"
@@ -50,7 +50,7 @@
         ></HyMount>
       </scroll-view>
       <slot name="footer" v-if="showConfirm">
-        <view class="u-calendar__confirm">
+        <view class="hy-calendar__confirm">
           <HyButton
             shape="circle"
             :text="buttonDisabled ? confirmDisabledText : confirmText"
@@ -64,6 +64,15 @@
   </HyPopup>
 </template>
 
+<script lang="ts">
+export default {
+  name: "hy-calendar",
+  options: {
+    virtualHost: true,
+    styleIsolation: "shared",
+  },
+};
+</script>
 <script setup lang="ts">
 import type IProps from "./typing";
 import defaultProps from "./props";