hy-app 0.1.5 → 0.2.1

package/components/hy-calendar/index.scss

@@ -1,169 +1,175 @@
 @use "../../libs/css/mixin.scss" as *;
 @use "../../theme.scss" as *;
 
+
 /* 主样式 */
-.u-calendar {
+@include b(calendar){
+  /* 确认按钮 */
   &__confirm {
     padding: 7px 18px;
   }
-}
-
-/* 头部样式 */
-.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;
-  }
 
-  &__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;
+      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-text-color--2;
+      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-text-color--grey;
+        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-text-color--2;
+      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-text-color--4;
+        }
+      }
 
+      &__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;
           &--selected {
-            color: #ffffff;
+            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;
+            }
           }
 
-          &--disabled {
-            color: #cacbcd;
+          &__dot {
+            width: 7px;
+            height: 7px;
+            border-radius: 100px;
+            background-color: $hy-error;
+            position: absolute;
+            top: 12px;
+            right: 7px;
           }
-        }
-
-        &__info {
-          text-align: center;
-          font-size: 16px;
 
-          &--selected {
-            color: #ffffff;
+          &__buttom-info {
+            color: $hy-text-color--2;
+            text-align: center;
+            position: absolute;
+            bottom: 5px;
+            font-size: 10px;
+            left: 0;
+            right: 0;
+
+            &--selected {
+              color: #ffffff;
+            }
+
+            &--disabled {
+              background-color: $hy-primary-disabled;
+            }
           }
 
-          &--disabled {
-            color: #cacbcd;
-          }
-        }
+          &__info {
+            text-align: center;
+            font-size: 16px;
 
-        &--selected {
-          background-color: $u-primary;
-          @include flex;
-          justify-content: center;
-          align-items: center;
-          flex: 1;
-          border-radius: 3px;
-        }
+            &--selected {
+              color: #ffffff;
+              background-color: $hy-primary;
+            }
 
-        &--range-selected {
-          opacity: 0.3;
-          border-radius: 0;
-        }
+            &--disabled {
+              color: $hy-text-color--disabled;
+            }
+          }
 
-        &--range-start-selected {
-          border-top-right-radius: 0;
-          border-bottom-right-radius: 0;
-        }
+          &--range-selected {
+            opacity: 0.3;
+            border-radius: 0;
+          }
 
-        &--range-end-selected {
-          border-top-left-radius: 0;
-          border-bottom-left-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;
+          }
         }
       }
     }

package/components/hy-calendar/month.vue

@@ -1,43 +1,40 @@
 <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',
-          ]"
         >
           <view
-            class="u-calendar-month__days__day__select"
+            :class="daySelectClass(index, index1, item1)"
             :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 +42,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 +53,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>
@@ -67,9 +64,10 @@
 
 <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: "u-calendar-month",
+  name: "hy-calendar-month",
   props: {
     // 是否显示月份背景色
     showMark: {
@@ -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);
@@ -363,7 +385,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 +393,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/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/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";

package/components/hy-card/index.scss

@@ -1,11 +1,12 @@
 @use "../../libs/css/mixin.scss" as *;
 @use "../../theme.scss" as *;
 
-.hy-card {
+
+@include b(card) {
   position: relative;
   overflow: hidden;
   font-size: 28rpx;
-  background-color: #ffffff;
+  background-color: $hy-background--container;
   box-sizing: border-box;
 
   &-full {
@@ -27,7 +28,6 @@
     }
 
     &--left {
-      color: #303133ff;
       display: flex;
 
       &__thumb {
@@ -36,22 +36,13 @@
 
       &__title {
         max-width: 400rpx;
-        height: 20px;
-        @include line-feed;
+        @include lineEllipsis;
       }
     }
 
     &--right {
-      color: $hy-text-color-grey;
+      color: $hy-text-color--grey;
       margin-left: 6rpx;
     }
   }
-
-  &__body {
-    color: $hy-bg-color;
-  }
-
-  &__foot {
-    color: $hy-text-color-grey;
-  }
 }

package/components/hy-card/props.ts

@@ -3,8 +3,8 @@ import type IProps from "./typing";
 const defaultProps: IProps = {
   full: false,
   title: "",
-  titleColor: "#303133",
-  titleSize: "15px",
+  titleColor: "",
+  titleSize: "18px",
   subTitle: "",
   subTitleColor: "#909399",
   subTitleSize: "13",

package/components/hy-cell/hy-cell.vue

@@ -1,29 +1,27 @@
 <template>
   <view :style="customStyle" class="hy-cell">
     <view
-      class="hy-cell__title"
-      :style="{ borderBottom: titleBorder ? '1rpx solid #c8c7cc66' : '' }"
+      :class="['hy-cell--title', showVertical && 'hy-cell--title__vertical']"
       v-if="title || $slots['title']"
     >
       <slot name="title" :title="title">
-        <view class="hy-cell__title-nav">
-          <view
-            class="hy-cell__title-nav--ver"
-            :style="{ background: verticalColor }"
-            v-if="showVertical"
-          ></view>
-          <text class="hy-cell__title-nav--text">{{ title }}</text>
-        </view>
+        <text class="hy-cell--title__text">{{ title }}</text>
       </slot>
     </view>
-    <view class="hy-cell__body">
+    <view
+      class="hy-cell__body"
+      :style="{ 'border-radius': addUnit(borderRadius) }"
+    >
       <slot>
         <template v-for="(item, i) in list" :key="i">
           <view
             :class="ItemClass"
             :hover-class="containerClass(item)"
             :hover-stay-time="250"
-            :style="{ borderBottom: border ? '1rpx solid #c8c7cc66' : '' }"
+            :style="{
+              borderBottom:
+                border && i !== list.length - 1 ? '1rpx solid #c8c7cc66' : '',
+            }"
             @tap="clickHandler($event, item, i)"
           >
             <view class="hy-cell__body--container__content">
@@ -130,6 +128,16 @@
   </view>
 </template>
 
+<script lang="ts">
+export default {
+  name: "hy-cell",
+  options: {
+    virtualHost: true,
+    styleIsolation: "shared",
+  },
+};
+</script>
+
 <script setup lang="ts">
 import defaultProps from "./props";
 import type IProps from "./typing";
@@ -138,9 +146,10 @@ import { IconConfig } from "../../config";
 
 import HyIcon from "../hy-icon/hy-icon.vue";
 import { computed, toRefs } from "vue";
+import { addUnit } from "@/package";
 
 const props = withDefaults(defineProps<IProps>(), defaultProps);
-const { size, disabled, clickable } = toRefs(props);
+const { size, disabled, clickable, borderRadius } = toRefs(props);
 const emit = defineEmits(["click"]);
 
 /**