hy-app 0.2.0 → 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-back-top/index.scss

@@ -1,15 +1,6 @@
 @use "../../libs/css/mixin.scss" as *;
 @use "../../theme.scss" as *;
 
-/* 暗色主题 */
-@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;
@@ -17,7 +8,7 @@
   flex: 1;
   height: 100%;
   justify-content: center;
-  background-color: #e1e1e1;
+  background-color: $hy-background--3;
 
   &__tips {
     font-size: 12px;

package/components/hy-badge/index.scss

@@ -33,18 +33,18 @@ $hy-badge-text-font-size: 11px !default;
 
   /* 主题色 */
   @include themeColor(primary, $hy-primary);
-  @include themeColor(primary--inverted, "", "", $hy-primary);
+  @include themeColor(primary--inverted, "", transparent, $hy-primary);
 
   @include themeColor(error, $hy-error);
-  @include themeColor(error--inverted, "", "", $hy-error);
+  @include themeColor(error--inverted, "", transparent, $hy-error);
 
   @include themeColor(success, $hy-success);
-  @include themeColor(success--inverted, "", "", $hy-success);
+  @include themeColor(success--inverted, "", transparent, $hy-success);
 
   @include themeColor(warning, $hy-warning);
-  @include themeColor(warning--inverted, "", "", $hy-warning);
+  @include themeColor(warning--inverted, "", transparent, $hy-warning);
 
   @include themeColor(info, $hy-info);
-  @include themeColor(info--inverted, "", "", $hy-info);
+  @include themeColor(info--inverted, "", transparent, $hy-info);
 
 }

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

@@ -127,13 +127,13 @@
 
 <script lang="ts">
 export default {
-  name: 'hy-button',
+  name: "hy-button",
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared'
-  }
-}
+    styleIsolation: "shared",
+  },
+};
 </script>
 
 <script setup lang="ts">
@@ -197,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";
@@ -207,10 +207,9 @@ 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 = "#ffffff");
   }

package/components/hy-button/index.scss

@@ -78,17 +78,6 @@
   @include borderRadio(circle);
   @include borderRadio(square);
 
-  &__icon {
-    min-width: 1em;
-    line-height: inherit !important;
-    vertical-align: top;
-  }
-
-  //&--plain {
-  //  //color: v-bind(textColor);
-  //  color: $hy-primary;
-  //  background-color: #fff;
-  //}
 
   @include m(hairline) {
     border-width: 0.5px;

package/components/hy-calendar/index.scss

@@ -1,12 +1,6 @@
 @use "../../libs/css/mixin.scss" as *;
 @use "../../theme.scss" as *;
 
-@include b(theme) {
-  @include m(dark) {
-    background-color: $hy-dark-background;
-    color: $hy-dark-color;
-  }
-}
 
 /* 主样式 */
 @include b(calendar){
@@ -23,7 +17,6 @@
 
     &__title {
       font-size: 16px;
-      color: $hy-color-title;
       text-align: center;
       height: 42px;
       line-height: 42px;
@@ -32,7 +25,7 @@
 
     &__subtitle {
       font-size: 14px;
-      color: $hy-color-hint;
+      color: $hy-text-color--2;
       height: 40px;
       text-align: center;
       line-height: 40px;
@@ -45,7 +38,7 @@
 
       &__weekday {
         font-size: 13px;
-        color: $hy-tips-color;
+        color: $hy-text-color--grey;
         line-height: 30px;
         flex: 1;
         text-align: center;
@@ -61,7 +54,7 @@
       font-size: 14px;
       line-height: 42px;
       height: 42px;
-      color: $hy-color-hint;
+      color: $hy-text-color--2;
       text-align: center;
       font-weight: bold;
     }
@@ -88,7 +81,7 @@
 
         &__text {
           font-size: 155px;
-          color: $hy-info-dark;
+          color: $hy-text-color--4;
         }
       }
 
@@ -107,6 +100,19 @@
           align-items: center;
           justify-content: center;
           position: relative;
+          &--selected {
+            background-color: $hy-primary;
+            @include flex;
+            justify-content: center;
+            align-items: center;
+            flex: 1;
+            border-radius: 3px;
+            @include m(center) {
+              border-radius: 0;
+              //color: #000000;
+              background-color: $hy-primary-light;
+            }
+          }
 
           &__dot {
             width: 7px;
@@ -119,12 +125,11 @@
           }
 
           &__buttom-info {
-            color: $hy-color-hint;
+            color: $hy-text-color--2;
             text-align: center;
             position: absolute;
             bottom: 5px;
             font-size: 10px;
-            text-align: center;
             left: 0;
             right: 0;
 
@@ -133,7 +138,7 @@
             }
 
             &--disabled {
-              color: #cacbcd;
+              background-color: $hy-primary-disabled;
             }
           }
 
@@ -143,22 +148,14 @@
 
             &--selected {
               color: #ffffff;
+              background-color: $hy-primary;
             }
 
             &--disabled {
-              color: $hy-info-dark;
+              color: $hy-text-color--disabled;
             }
           }
 
-          &--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;

package/components/hy-calendar/month.vue

@@ -25,12 +25,9 @@
           :key="index1"
           :style="[dayStyle(index, index1, item1)]"
           @tap="clickHandler(index, index1, item1)"
-          :class="[
-            item1.selected && 'hy-calendar-month__days__day__select--selected',
-          ]"
         >
           <view
-            class="hy-calendar-month__days__day__select"
+            :class="daySelectClass(index, index1, item1)"
             :style="[daySelectStyle(index, index1, item1)]"
           >
             <text
@@ -67,7 +64,8 @@
 
 <script>
 import { addUnit, colorGradient, deepClone, getRect, sleep } from "../../utils";
-import dayjs from "dayjs/esm/index";
+import dayjs from "dayjs/esm";
+import { formatTime } from "../../utils";
 export default {
   name: "hy-calendar-month",
   props: {
@@ -187,7 +185,7 @@ export default {
     selectedChange() {
       return [this.minDate, this.maxDate, this.defaultDate];
     },
-    dayStyle(index1, index2, item) {
+    dayStyle() {
       return (index1, index2, item) => {
         const style = {};
         let week = item.week;
@@ -217,6 +215,29 @@ export default {
         return style;
       };
     },
+    daySelectClass() {
+      return (index1, index2, item) => {
+        const date = dayjs(item.date).format("YYYY-MM-DD");
+        const len = this.selected.length - 1;
+        const classes = ["hy-calendar-month__days__day__select"];
+        // 判断选中的
+        if (this.selected.some((item) => this.dateSame(item, date))) {
+          classes.push("hy-calendar-month__days__day__select--selected");
+          if (this.selected.length >= 2) {
+            // 判断非两边选中内容
+            if (
+              !this.dateSame(date, this.selected[0]) &&
+              !this.dateSame(date, this.selected[len])
+            ) {
+              classes.push(
+                "hy-calendar-month__days__day__select--selected--center",
+              );
+            }
+          }
+        }
+        return classes;
+      };
+    },
     daySelectStyle() {
       return (index1, index2, item) => {
         let date = dayjs(item.date).format("YYYY-MM-DD"),
@@ -337,6 +358,7 @@ export default {
     this.init();
   },
   methods: {
+    dayjs,
     init() {
       // 初始化默认选中
       this.$emit("monthSelected", this.selected);

package/components/hy-calendar/props.ts

@@ -8,7 +8,7 @@ const defaultProps: IProps = {
   startText: "开始",
   endText: "结束",
   customList: [],
-  color: "#3c9cff",
+  color: "",
   minDate: 0,
   maxDate: 0,
   defaultDate: null,

package/components/hy-card/index.scss

@@ -1,21 +1,12 @@
 @use "../../libs/css/mixin.scss" as *;
 @use "../../theme.scss" as *;
 
-/* 暗色主题 */
-@include b(theme){
-  @include m(dark) {
-    @include b(card) {
-      color: $hy-dark-color;
-      background-color: $hy-dark-background--container;
-    }
-  }
-}
 
 @include b(card) {
   position: relative;
   overflow: hidden;
   font-size: 28rpx;
-  background-color: #ffffff;
+  background-color: $hy-background--container;
   box-sizing: border-box;
 
   &-full {
@@ -50,7 +41,7 @@
     }
 
     &--right {
-      color: $hy-text-color-grey;
+      color: $hy-text-color--grey;
       margin-left: 6rpx;
     }
   }

package/components/hy-cell/index.scss

@@ -1,24 +1,7 @@
 @use "../../libs/css/mixin.scss" as *;
 @use "../../theme.scss" as *;
 
-/* 暗色主题 */
-@include b(theme){
-  @include m(dark) {
-    @include b(cell) {
-      color: $hy-dark-color;
-      &__body--container {
-        background-color: $hy-dark-background--container;
-        &__right-icon {
-          :deep() {
-            @include b(icon) {
-              color: $hy-dark-icon;
-            }
-          }
-        }
-      }
-    }
-  }
-}
+
 @include b(cell) {
   flex: 1;
 
@@ -74,6 +57,7 @@
       align-items: center;
       justify-content: space-between;
       flex: 1;
+      background-color: $hy-background--container;
 
       /* 大 */
       &__large {
@@ -98,7 +82,7 @@
 
       /*点击状态*/
       &__clickable {
-        background-color: $hy-light-background-hover;
+        background-color: $hy-background--hover;
       }
 
       &__content {
@@ -119,7 +103,7 @@
           /*sub值*/
           &--sub {
             margin-top: $hy-border-margin-padding-sm;
-            color: $hy-text-color-grey;
+            color: $hy-text-color--grey;
           }
         }
       }
@@ -131,7 +115,7 @@
         flex: 1;
         &__value {
           line-height: 24px;
-          color: $hy-text-color-grey;
+          color: $hy-text-color--grey;
           margin-right: $hy-border-margin-padding-sm;
         }
       }
@@ -139,6 +123,9 @@
       /*右边icon*/
       &__right-icon {
         transition: transform 0.3s;
+        :deep(.hy-icon) {
+          color: $hy-text-color--3;
+        }
 
         &--up {
           transform: rotate(-90deg);
@@ -156,7 +143,7 @@
   }
 
   @include m(disabled) {
-    color: $hy-text-color-disable;
+    color: $hy-text-color--disabled;
     /* #ifndef APP-NVUE */
     cursor: not-allowed;
     /* #endif */

package/components/hy-checkbox/hy-checkbox.vue

@@ -30,7 +30,11 @@
           </slot>
         </view>
         <view
-          class="hy-checkbox__label-wrap cursor-pointer"
+          :class="[
+            'hy-checkbox__label-wrap',
+            'cursor-pointer',
+            disabled && 'hy-checkbox__label-wrap--disabled',
+          ]"
           @tap.stop="labelClickHandler($event, item)"
         >
           <slot name="label" :record="item">
@@ -50,13 +54,13 @@
 
 <script lang="ts">
 export default {
-  name: 'hy-checkbox',
+  name: "hy-checkbox",
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared'
-  }
-}
+    styleIsolation: "shared",
+  },
+};
 </script>
 
 <script setup lang="ts">
@@ -219,7 +223,6 @@ const setRadioCheckedStatus = (temp: CheckboxColumnsVo) => {
     return item;
   });
   emit("change", temp);
-  console.log(columns_1.value[0].checked, "前");
   emit(
     "update:modelValue",
     columns_1.value.length === 1

package/components/hy-checkbox/index.scss

@@ -1,15 +1,6 @@
 @use "../../libs/css/mixin.scss" as *;
 @use "../../theme.scss" as *;
 
-/* 暗色主题 */
-@include b(theme){
-  @include m(dark) {
-    @include b(checkbox) {
-      color: $hy-dark-color;
-    }
-  }
-}
-
 @include b(checkbox) {
   &-group {
     &--row {
@@ -65,28 +56,34 @@
 
     /* #endif */
 
-    &--circle {
+    @include m(circle) {
       border-radius: 50%;
     }
 
-    &--square {
+    @include m(square) {
       border-radius: 3px;
     }
 
-    &--checked {
+    @include m(checked) {
       color: #FFFFFF;
       background-color: $hy-primary;
       border-color: $hy-primary;
     }
 
-    &--disabled {
-      background-color: $hy-light-background-disabled;
+    @include m(disabled) {
+      background-color: $hy-text-color--disabled;
+      :deep(.hy-icon) {
+        display: none;
+      }
     }
 
-    &--disabled--checked {
+    @include m([disabled--checked]){
       background-color: $hy-primary;
       border-color: $hy-primary;
       opacity: 0.5;
+      :deep(.hy-icon) {
+        display: block;
+      }
     }
   }
 
@@ -97,8 +94,8 @@
     font-size: $hy-font-size-base;
     margin-right: $hy-border-margin-padding-sm;
 
-    &--disabled {
-      color: $hy-text-color-disable;
+    @include m(disabled) {
+      color: $hy-text-color--disabled;
     }
   }
 }

package/components/hy-config-provider/hy-config-provider.vue

@@ -20,6 +20,7 @@ import { computed, toRefs } from "vue";
 import type IProps from "./typing";
 import defaultProps from "./props";
 import { addUnit } from "@/package";
+import { colorGradient } from "@/package/utils";
 
 const props = withDefaults(defineProps<IProps>(), defaultProps);
 const {
@@ -36,10 +37,11 @@ const themeClass = computed(() => {
 });
 
 const themeStyle = computed(() => {
+  console.log(colorGradient(themeColor.value)[90], themeColor.value);
   return [
     {
       "--hy-theme-color": themeColor.value,
-      "--hy-theme-color--light": themeLightColor.value,
+      "--hy-theme--light": colorGradient(themeColor.value)[90],
       padding: addUnit(padding.value),
     },
     customStyle.value,

package/components/hy-config-provider/index.scss

@@ -1,12 +1,6 @@
 @use "../../libs/css/mixin.scss" as *;
 @use "../../theme.scss" as *;
 
-@include b(theme) {
-  @include m(dark) {
-    background-color: $hy-dark-background;
-    color: $hy-dark-color;
-  }
-}
 
 @include b(config-provider) {
   box-sizing: border-box;
@@ -18,4 +12,6 @@
   height: 100vh;
   /* #endif */
   overflow: auto;
+  background-color: $hy-background;
+  color: $hy-text-color;
 }

package/components/hy-count-down/index.scss

@@ -1,15 +1,6 @@
 @use "../../libs/css/mixin.scss" as *;
 @use "../../theme.scss" as *;
 
-/* 暗色主题 */
-@include b(theme){
-  @include m(dark) {
-    @include b(count-down) {
-      color: $hy-dark-color;
-    }
-  }
-}
-
 @include b(count-down) {
   &__text {
     font-size: 15px;

package/components/hy-count-to/index.scss

@@ -1,19 +1,11 @@
 @use "../../theme.scss" as *;
 @use "../../libs/css/mixin.scss" as *;
 
-/* 暗色主题 */
-@include b(theme){
-  @include m(dark) {
-    @include b(count-to) {
-      color: $hy-dark-color;
-    }
-  }
-}
 
 @include b(count-to) {
   /* #ifndef APP-NVUE */
   display: inline-flex;
   /* #endif */
   text-align: center;
-  color: $hy-tips-color;
+  color: $hy-text-color;
 }

package/components/hy-divider/index.scss

@@ -15,12 +15,13 @@
   }
 
   &__text {
+    color: $hy-text-color--3;
     margin: 0 $hy-border-margin-padding-sm;
   }
 
   &__dot {
     font-size: $hy-font-size-sm;
     margin: 0 $hy-border-margin-padding-sm;
-    color: #c0c4cc;
+    color: $hy-text-color--3;
   }
 }

package/components/hy-divider/props.ts

@@ -8,8 +8,8 @@ const defaultProps: IProps = {
   textPosition: "center",
   text: "",
   textSize: 14,
-  textColor: "#909399",
-  lineColor: "#dcdfe6",
+  textColor: "",
+  lineColor: "",
   loadingIcon: IconConfig.LOADING,
   loadMoreText: "加载更多",
   loadingText: "正在加载...",

package/components/hy-dropdown/index.scss

@@ -5,7 +5,7 @@
   width: 100%;
   display: flex;
   align-items: center;
-  background-color: #fff;
+  background-color: $hy-background;
   box-sizing: border-box;
 }