hy-app 0.1.4 → 0.2.0

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-button/props.ts

@@ -26,8 +26,7 @@ const defaultProps: IProps = {
   hoverStartTime: 0,
   hoverStayTime: 200,
   text: "",
-  icon: "",
-  iconColor: "",
+  icon: {},
   color: "",
   stop: true,
 };

package/components/hy-button/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 HyButtonProps {
   /**
    * @description 是否显示按钮的细边框 (默认 true )
    * */
@@ -102,13 +103,9 @@ export default interface IProps {
    * */
   text?: string;
   /**
-   * @description 按钮图标
+   * @description 按钮图标api集合
    * */
-  icon?: string | HyIconConfig;
-  /**
-   * @description 按钮图标颜色
-   * */
-  iconColor?: string;
+  icon?: Partial<HyIconProps>;
   /**
    * @description 按钮颜色，支持传入linear-gradient渐变色
    * */

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";

package/components/hy-calendar/index.scss

@@ -1,169 +1,178 @@
 @use "../../libs/css/mixin.scss" as *;
 @use "../../theme.scss" as *;
 
-/* 主样式 */
-.u-calendar {
-  &__confirm {
-    padding: 7px 18px;
+@include b(theme) {
+  @include m(dark) {
+    background-color: $hy-dark-background;
+    color: $hy-dark-color;
   }
 }
 
-/* 头部样式 */
-.u-calendar-header {
-  display: flex;
-  flex-direction: column;
-  padding-bottom: 4px;
-
-  &__title {
-    font-size: 16px;
-    color: $hy-color-title;
-    text-align: center;
-    height: 42px;
-    line-height: 42px;
-    font-weight: bold;
+/* 主样式 */
+@include b(calendar){
+  /* 确认按钮 */
+  &__confirm {
+    padding: 7px 18px;
   }
 
-  &__subtitle {
-    font-size: 14px;
-    color: $u-main-color;
-    height: 40px;
-    text-align: center;
-    line-height: 40px;
-    font-weight: bold;
-  }
+  /* 头部样式 */
+  &-header {
+    display: flex;
+    flex-direction: column;
+    padding-bottom: 4px;
 
-  &__weekdays {
-    @include flex;
-    justify-content: space-between;
+    &__title {
+      font-size: 16px;
+      color: $hy-color-title;
+      text-align: center;
+      height: 42px;
+      line-height: 42px;
+      font-weight: bold;
+    }
 
-    &__weekday {
-      font-size: 13px;
-      color: $u-main-color;
-      line-height: 30px;
-      flex: 1;
+    &__subtitle {
+      font-size: 14px;
+      color: $hy-color-hint;
+      height: 40px;
       text-align: center;
+      line-height: 40px;
+      font-weight: bold;
     }
-  }
-}
 
-/* 内容样式 */
-.u-calendar-month-wrapper {
-  margin-top: 4px;
-}
+    &__weekdays {
+      @include flex;
+      justify-content: space-between;
 
-.u-calendar-month {
-  &__title {
-    display: flex;
-    flex-direction: column;
-    font-size: 14px;
-    line-height: 42px;
-    height: 42px;
-    color: $u-main-color;
-    text-align: center;
-    font-weight: bold;
+      &__weekday {
+        font-size: 13px;
+        color: $hy-tips-color;
+        line-height: 30px;
+        flex: 1;
+        text-align: center;
+      }
+    }
   }
 
-  &__days {
-    position: relative;
-    @include flex;
-    flex-wrap: wrap;
-
-    &__month-mark-wrapper {
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      @include flex;
-      justify-content: center;
-      align-items: center;
 
-      &__text {
-        font-size: 155px;
-        color: rgba(231, 232, 234, 0.83);
-      }
+  &-month {
+    &__title {
+      display: flex;
+      flex-direction: column;
+      font-size: 14px;
+      line-height: 42px;
+      height: 42px;
+      color: $hy-color-hint;
+      text-align: center;
+      font-weight: bold;
+    }
+
+    /* 内容样式 */
+    &-wrapper {
+      margin-top: 4px;
     }
 
-    &__day {
+    &__days {
+      position: relative;
       @include flex;
-      padding: 2px;
-      /* #ifndef APP-NVUE */
-      // vue下使用css进行宽度计算，因为某些安卓机会无法进行js获取父元素宽度进行计算得出，会有偏移
-      width: calc(100% / 7);
-      box-sizing: border-box;
-      /* #endif */
-
-      &__select {
-        flex: 1;
+      flex-wrap: wrap;
+
+      &__month-mark-wrapper {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
         @include flex;
-        align-items: center;
         justify-content: center;
-        position: relative;
-
-        &__dot {
-          width: 7px;
-          height: 7px;
-          border-radius: 100px;
-          background-color: $u-error;
-          position: absolute;
-          top: 12px;
-          right: 7px;
-        }
+        align-items: center;
 
-        &__buttom-info {
-          color: $u-content-color;
-          text-align: center;
-          position: absolute;
-          bottom: 5px;
-          font-size: 10px;
-          text-align: center;
-          left: 0;
-          right: 0;
+        &__text {
+          font-size: 155px;
+          color: $hy-info-dark;
+        }
+      }
 
-          &--selected {
-            color: #ffffff;
+      &__day {
+        @include flex;
+        padding: 2px;
+        /* #ifndef APP-NVUE */
+        // vue下使用css进行宽度计算，因为某些安卓机会无法进行js获取父元素宽度进行计算得出，会有偏移
+        width: calc(100% / 7);
+        box-sizing: border-box;
+        /* #endif */
+
+        &__select {
+          flex: 1;
+          @include flex;
+          align-items: center;
+          justify-content: center;
+          position: relative;
+
+          &__dot {
+            width: 7px;
+            height: 7px;
+            border-radius: 100px;
+            background-color: $hy-error;
+            position: absolute;
+            top: 12px;
+            right: 7px;
           }
 
-          &--disabled {
-            color: #cacbcd;
+          &__buttom-info {
+            color: $hy-color-hint;
+            text-align: center;
+            position: absolute;
+            bottom: 5px;
+            font-size: 10px;
+            text-align: center;
+            left: 0;
+            right: 0;
+
+            &--selected {
+              color: #ffffff;
+            }
+
+            &--disabled {
+              color: #cacbcd;
+            }
           }
-        }
 
-        &__info {
-          text-align: center;
-          font-size: 16px;
+          &__info {
+            text-align: center;
+            font-size: 16px;
 
-          &--selected {
-            color: #ffffff;
-          }
+            &--selected {
+              color: #ffffff;
+            }
 
-          &--disabled {
-            color: #cacbcd;
+            &--disabled {
+              color: $hy-info-dark;
+            }
           }
-        }
 
-        &--selected {
-          background-color: $u-primary;
-          @include flex;
-          justify-content: center;
-          align-items: center;
-          flex: 1;
-          border-radius: 3px;
-        }
+          &--selected {
+            background-color: var(--hy-theme-dark, $hy-primary);
+            @include flex;
+            justify-content: center;
+            align-items: center;
+            flex: 1;
+            border-radius: 3px;
+          }
 
-        &--range-selected {
-          opacity: 0.3;
-          border-radius: 0;
-        }
+          &--range-selected {
+            opacity: 0.3;
+            border-radius: 0;
+          }
 
-        &--range-start-selected {
-          border-top-right-radius: 0;
-          border-bottom-right-radius: 0;
-        }
+          &--range-start-selected {
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+          }
 
-        &--range-end-selected {
-          border-top-left-radius: 0;
-          border-bottom-left-radius: 0;
+          &--range-end-selected {
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+          }
         }
       }
     }

package/components/hy-calendar/month.vue

@@ -1,43 +1,43 @@
 <template>
-  <view class="u-calendar-month-wrapper" ref="u-calendar-month-wrapper">
+  <view class="hy-calendar-month-wrapper" ref="hy-calendar-month-wrapper">
     <view
       v-for="(item, index) in months"
       :key="index"
-      :class="[`u-calendar-month-${index}`]"
-      :ref="`u-calendar-month-${index}`"
+      :class="[`hy-calendar-month-${index}`]"
+      :ref="`hy-calendar-month-${index}`"
       :id="`month-${index}`"
     >
-      <text v-if="index !== 0" class="u-calendar-month__title"
+      <text v-if="index !== 0" class="hy-calendar-month__title"
         >{{ item.year }}年{{ item.month }}月</text
       >
-      <view class="u-calendar-month__days">
+      <view class="hy-calendar-month__days">
         <view
           v-if="showMark"
-          class="u-calendar-month__days__month-mark-wrapper"
+          class="hy-calendar-month__days__month-mark-wrapper"
         >
-          <text class="u-calendar-month__days__month-mark-wrapper__text">{{
+          <text class="hy-calendar-month__days__month-mark-wrapper__text">{{
             item.month
           }}</text>
         </view>
         <view
-          class="u-calendar-month__days__day"
+          class="hy-calendar-month__days__day"
           v-for="(item1, index1) in item.date"
           :key="index1"
           :style="[dayStyle(index, index1, item1)]"
           @tap="clickHandler(index, index1, item1)"
           :class="[
-            item1.selected && 'u-calendar-month__days__day__select--selected',
+            item1.selected && 'hy-calendar-month__days__day__select--selected',
           ]"
         >
           <view
-            class="u-calendar-month__days__day__select"
+            class="hy-calendar-month__days__day__select"
             :style="[daySelectStyle(index, index1, item1)]"
           >
             <text
-              class="u-calendar-month__days__day__select__info"
+              class="hy-calendar-month__days__day__select__info"
               :class="[
                 item1.disabled || isForbid(item1)
-                  ? 'u-calendar-month__days__day__select__info--disabled'
+                  ? 'hy-calendar-month__days__day__select__info--disabled'
                   : '',
               ]"
               :style="[textStyle(item1)]"
@@ -45,10 +45,10 @@
             >
             <text
               v-if="getBottomInfo(index, index1, item1)"
-              class="u-calendar-month__days__day__select__buttom-info"
+              class="hy-calendar-month__days__day__select__buttom-info"
               :class="[
                 item1.disabled || isForbid(item1)
-                  ? 'u-calendar-month__days__day__select__buttom-info--disabled'
+                  ? 'hy-calendar-month__days__day__select__buttom-info--disabled'
                   : '',
               ]"
               :style="[textStyle(item1)]"
@@ -56,7 +56,7 @@
             >
             <text
               v-if="item1.dot"
-              class="u-calendar-month__days__day__select__dot"
+              class="hy-calendar-month__days__day__select__dot"
             ></text>
           </view>
         </view>
@@ -69,7 +69,7 @@
 import { addUnit, colorGradient, deepClone, getRect, sleep } from "../../utils";
 import dayjs from "dayjs/esm/index";
 export default {
-  name: "u-calendar-month",
+  name: "hy-calendar-month",
   props: {
     // 是否显示月份背景色
     showMark: {
@@ -363,7 +363,7 @@ export default {
     // 获取月份数据区域的宽度，因为nvue不支持百分比，所以无法通过css设置每个日期item的宽度
     getWrapperWidth() {
       // #ifndef APP-NVUE
-      getRect(".u-calendar-month-wrapper").then((size) => {
+      getRect(".hy-calendar-month-wrapper").then((size) => {
         this.width = size.width;
       });
       // #endif
@@ -371,7 +371,7 @@ export default {
     getMonthRect() {
       // 获取每个月份数据的尺寸，用于父组件在scroll-view滚动事件中，监听当前滚动到了第几个月份
       const promiseAllArr = this.months.map((item, index) =>
-        this.getMonthRectByPromise(`u-calendar-month-${index}`),
+        this.getMonthRectByPromise(`hy-calendar-month-${index}`),
       );
       // 一次性返回
       Promise.all(promiseAllArr).then((sizes) => {

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

@@ -1,4 +1,4 @@
-export default interface IProps {
+export default interface HyCalendarProps {
   /**
    * @description 是否显示日历弹窗 (默认 false )
    * */

package/components/hy-card/hy-card.vue

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