hy-app 0.1.5 → 0.2.1

package/README.md

@@ -1,5 +1,6 @@
 ## 使用文档地址
-[华玥组件库](https://hy-component-docs.vercel.app/)
+[华玥组件库(需要翻墙)](https://hy-component-docs.vercel.app/)
+[华玥组件库(国内地址)](https://www.gxh151.top)
 
 ## 安装教程
 

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,13 +1,14 @@
 @use "../../libs/css/mixin.scss" as *;
+@use "../../theme.scss" as *;
 
-.hy-back-top {
+@include b(back-top) {
   @include flex;
   flex-direction: column;
   align-items: center;
   flex: 1;
   height: 100%;
   justify-content: center;
-  background-color: #e1e1e1;
+  background-color: $hy-background--3;
 
   &__tips {
     font-size: 12px;

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, "", transparent, $hy-primary);
 
-  &--success--inverted {
-    color: $hy-success;
-  }
+  @include themeColor(error, $hy-error);
+  @include themeColor(error--inverted, "", transparent, $hy-error);
 
-  &--info {
-    background-color: $hy-info;
-  }
+  @include themeColor(success, $hy-success);
+  @include themeColor(success--inverted, "", transparent, $hy-success);
 
-  &--info--inverted {
-    color: $hy-info;
-  }
+  @include themeColor(warning, $hy-warning);
+  @include themeColor(warning--inverted, "", transparent, $hy-warning);
 
-  &--warning {
-    background-color: $hy-warning;
-  }
+  @include themeColor(info, $hy-info);
+  @include themeColor(info--inverted, "", transparent, $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";
@@ -187,7 +197,7 @@ const bemClass = computed(() => {
 const loadingColor = computed(() => {
   if (plain.value) {
     // 如果有设置color值，则用color值，否则使用type主题颜色
-    return color.value ? color.value : textColor;
+    return color.value ? color.value : "";
   }
   if (type.value === "info") {
     return "#c9c9c9";
@@ -197,12 +207,11 @@ const loadingColor = computed(() => {
 
 const iconColorCom = computed((): string => {
   // 如果是镂空状态，设置了color就用color值，否则使用主题颜色，
-  // u-icon的color能接受一个主题颜色的值
   if (icon.value?.color) return icon.value?.color;
   if (plain.value) {
-    return color.value ? color.value : textColor;
+    return color.value ? color.value : "";
   } else {
-    return type.value === "info" ? "#000000" : "#ffffff";
+    return (type.value = "#ffffff");
   }
 });
 const baseColor = computed((): CSSProperties => {
@@ -212,7 +221,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 +242,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,65 +52,34 @@
     padding: 0 8px;
   }
 
-  &--disabled {
+  @include m(disabled) {
     opacity: 0.5;
   }
 
-  &--info {
-    color: #323233;
-    background-color: #fff;
-    border: 1px solid #909399;
-  }
-
-  &--success {
-    color: #fff;
-    background-color: $hy-success;
-    border: 1px solid $hy-success;
-  }
+  @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);
 
-  &--primary {
-    color: #fff;
-    background-color: $hy-primary;
-    border: 1px solid $hy-primary;
-  }
+  @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);
 
-  &--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;
-    line-height: inherit !important;
-    vertical-align: top;
-  }
-
-  &--plain {
-    color: v-bind(textColor);
-    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";