uview-pro 0.2.0 → 0.2.1

package/changelog.md

@@ -1,3 +1,25 @@
+## 0.2.1（2025-09-29）
+
+### 🚀 Chore | 构建/工程依赖/工具
+
+- 优化代码格式化和 ESLint 配置 ([771eacd](https://github.com/anyup/uView-Pro/commit/771eacd58d410e468a8aec4225bbe7b402480b2f))
+
+### ⚡ Performance Improvements | 性能优化
+
+- 压缩部分js工具库 ([6615b70](https://github.com/anyup/uView-Pro/commit/6615b7085a51c4fbc9f884ec68e05db1a1e89e27))
+
+### ✨ Features | 新功能
+
+- **u-calendar:** 日历组件增加农历显示功能 ([e2368ac](https://github.com/anyup/uView-Pro/commit/e2368ac88b0abb4493ab12a1785eb2a0e38e502c))
+
+### ♻️ Code Refactoring | 代码重构
+
+- **calendar:** 重构日历组件类型定义 ([0040e9e](https://github.com/anyup/uView-Pro/commit/0040e9e1095446536370e9aca3c135bc05527acb))
+
+### 🐛 Bug Fixes | Bug 修复
+
+- **u-input:** 修复输入框禁用状态时清空按钮仍显示的问题 ([722715f](https://github.com/anyup/uView-Pro/commit/722715f7d6607584c0e158ba2de2342147e3be17))
+
 ## 0.2.0（2025-09-28）
 
 ### ♻️ Code Refactoring | 代码重构

package/components/u-calendar/types.ts

@@ -1,11 +1,13 @@
 import { type ExtractPropTypes, type PropType } from 'vue';
-import type { CalendarMode, ThemeType } from '../../types/global';
+import type { CalendarChangeDate, CalendarChangeRange, CalendarMode, ThemeType } from '../../types/global';
+import { baseProps } from '../common/props';
 
 /**
  * calendar 日历类型定义
  * @description 供 u-calendar 组件 props 使用
  */
 export const CalendarProps = {
+    ...baseProps,
     /** 是否开启底部安全区适配 */
     safeAreaInsetBottom: { type: Boolean, default: false },
     /** 是否允许通过点击遮罩关闭Picker */
@@ -57,7 +59,15 @@ export const CalendarProps = {
     /** 是否显示右上角的关闭图标 */
     closeable: { type: Boolean, default: true },
     /** 顶部的提示文字 */
-    toolTip: { type: String, default: '选择日期' }
+    toolTip: { type: String, default: '选择日期' },
+    /** 是否显示农历 */
+    showLunar: { type: Boolean, default: false }
 };
 
 export type CalendarProps = ExtractPropTypes<typeof CalendarProps>;
+
+export type CalendarEmits = {
+    (e: 'update:modelValue', value: boolean): void;
+    (e: 'input', value: boolean): void;
+    (e: 'change', value: CalendarChangeDate | CalendarChangeRange): void;
+};

package/components/u-calendar/u-calendar.vue

@@ -11,7 +11,7 @@
         :border-radius="borderRadius"
         :closeable="closeable"
     >
-        <view class="u-calendar">
+        <view class="u-calendar" :class="props.customClass" :style="$u.toStyle(customStyle)">
             <view class="u-calendar__header">
                 <view class="u-calendar__header__text" v-if="!slots.tooltip">
                     {{ toolTip }}
@@ -65,6 +65,17 @@
                     <view class="u-calendar__content__item__tips" :style="{ color: activeColor }" v-if="mode == 'range' && endDate == `${year}-${month}-${index + 1}`">{{
                         endText
                     }}</view>
+                    <view
+                        v-if="
+                            props.showLunar &&
+                            !(mode == 'range' && startDate == `${year}-${month}-${index + 1}` && startDate != endDate) &&
+                            !(mode == 'range' && endDate == `${year}-${month}-${index + 1}`)
+                        "
+                        class="u-calendar__content__item__tips"
+                        :style="{ color: getColor(index, 2) }"
+                    >
+                        {{ lunarArr[index]?.dayCn === '初一' ? lunarArr[index].monthCn : (lunarArr[index]?.dayCn ?? '') }}
+                    </view>
                 </view>
                 <view class="u-calendar__content__bg-month">{{ month }}</view>
             </view>
@@ -84,7 +95,8 @@
 <script setup lang="ts">
 import { ref, computed, watch, onMounted, useSlots } from 'vue';
 import { $u } from '../..';
-import { CalendarProps } from './types';
+import { CalendarProps, type CalendarEmits } from './types';
+import Calendar from '../../libs/util/calendar';
 
 defineOptions({
     name: 'u-calendar'
@@ -121,7 +133,7 @@ defineOptions({
  */
 
 const props = defineProps(CalendarProps);
-const emit = defineEmits(['update:modelValue', 'input', 'change']);
+const emit = defineEmits<CalendarEmits>();
 const slots = useSlots();
 
 // 组件内部状态
@@ -130,6 +142,7 @@ const weekday = ref(1);
 const weekdayArr = ref<number[]>([]);
 const days = ref(0);
 const daysArr = ref<number[]>([]);
+const lunarArr = ref<any[]>([]);
 const showTitle = ref('');
 const year = ref(2020);
 const month = ref(0);
@@ -151,6 +164,7 @@ const max = ref<{ year: number; month: number; day: number } | null>(null);
 const weekDayZh = ref(['日', '一', '二', '三', '四', '五', '六']);
 
 const dataChange = computed(() => `${props.mode}-${props.minDate}-${props.maxDate}`);
+const lunarChange = computed(() => props.showLunar);
 // 如果用户有传递z-index值，优先使用
 const uZIndex = computed(() => (props.zIndex ? props.zIndex : $u.zIndex.popup));
 const popupValue = computed({
@@ -158,7 +172,7 @@ const popupValue = computed({
     set: (val: boolean) => emit('update:modelValue', val)
 });
 
-watch(dataChange, () => {
+watch([dataChange, lunarChange], () => {
     init();
 });
 
@@ -327,11 +341,33 @@ function changeData() {
     weekday.value = getWeekday(year.value, month.value);
     weekdayArr.value = generateArray(1, weekday.value);
     showTitle.value = `${year.value}年${month.value}月`;
+    if (props.showLunar) {
+        lunarArr.value = [];
+        daysArr.value.forEach(d => {
+            lunarArr.value.push(getLunar(year.value, month.value, d));
+        });
+    }
     if (props.isChange && props.mode == 'date') {
         btnFix(true);
     }
 }
 
+/**
+ * 获取农历
+ */
+function getLunar(year, month, day) {
+    const val = Calendar.solar2lunar(year, month, day);
+    return {
+        dayCn: val.IDayCn,
+        weekCn: val.ncWeek,
+        monthCn: val.IMonthCn,
+        day: val.lDay,
+        week: val.nWeek,
+        month: val.lMonth,
+        year: val.lYear
+    };
+}
+
 /**
  * 日期点击事件
  */
@@ -403,6 +439,7 @@ function btnFix(show: boolean) {
             // 今天
             isToday = true;
         }
+        const lunar = props.showLunar ? getLunar(y, m, d) : null;
         emit('change', {
             year: y,
             month: m,
@@ -410,7 +447,8 @@ function btnFix(show: boolean) {
             days: daysNum,
             result: result,
             week: weekText,
-            isToday: isToday
+            isToday: isToday,
+            lunar: lunar
             // switch: show //是否是切换年月操作
         });
     } else {
@@ -423,6 +461,12 @@ function btnFix(show: boolean) {
         let endDayStr = formatNum(endDay.value);
         let endDateStr = `${endYear.value}-${endMonthStr}-${endDayStr}`;
         let endWeek = getWeekText(endDateStr);
+        let startLunar = null;
+        let endLunar = null;
+        if (props.showLunar) {
+            startLunar = getLunar(startYear.value, startMonth.value, startDay.value);
+            endLunar = getLunar(endYear.value, endMonth.value, endDay.value);
+        }
         emit('change', {
             startYear: startYear.value,
             startMonth: startMonth.value,
@@ -433,7 +477,9 @@ function btnFix(show: boolean) {
             endMonth: endMonth.value,
             endDay: endDay.value,
             endDate: endDateStr,
-            endWeek: endWeek
+            endWeek: endWeek,
+            startLunar: startLunar,
+            endLunar: endLunar
         });
     }
 }

package/components/u-input/u-input.vue

@@ -58,7 +58,7 @@
             @confirm="onConfirm"
         />
         <view class="u-input__right-icon u-flex">
-            <view class="u-input__right-icon__clear u-input__right-icon__item" v-if="clearable && modelValue != ''">
+            <view class="u-input__right-icon__clear u-input__right-icon__item" v-if="clearable && modelValue != '' && !disabled">
                 <u-icon size="32" name="close-circle-fill" color="#c0c4cc" @click="onClear" />
             </view>
             <view class="u-input__right-icon__clear u-input__right-icon__item" v-if="passwordIcon && type == 'password'">