stellar-ui-plus 1.17.1 → 1.17.3

package/components/ste-button/ste-button.vue

@@ -108,6 +108,7 @@ const cmpBtnStyle = computed(() => {
             style.fontSize = 'var(--font-size-28, 28rpx)';
             break;
     }
+    console.log('getColor().steThemeColor', getColor().steThemeColor);
     // 背景色 & 字体色
     style = { ...style, ...utils.bg2style(props.background ? props.background : getColor().steThemeColor) };
     style.color = props.color;

package/components/ste-calendar/README.md

@@ -224,6 +224,43 @@
     </div>
 </ste-popup>
 ```
+#### 自定义组件
+
+- 属性`weekendColor`用于设置周末日期颜色
+- 属性`monthCount`用于设置渲染的月数
+- 属性`signs`用于设置标记的日期
+
+```html
+<script setup>
+import { ref, reactive } from 'vue';
+import type { SignType } from '@/uni_modules/stellar-ui-plus/components/ste-calendar/date';
+import utils from '@/uni_modules/stellar-ui-plus/utils/utils';
+const defaultDate = ref(utils.dayjs().format('YYYY-MM'));
+const signs = reactive<{ [key: string]: SignType }>({
+    // 标记今天
+    [utils.dayjs().format('YYYY-MM-DD')]: [
+        { content: 'XXXXX', className: 'test-signs' },
+        { content: 'XXXXX', className: 'test-signs' },
+        { content: 'XXXXX', className: 'test-signs' },
+    ],
+    // 标记明天
+    [utils.dayjs(Date.now() + 1000 * 60 * 60 * 24).format('YYYY-MM-DD')]: [
+        { content: 'XXXXX', style: { color: '#666', background: '#f5f5f5' } },
+        { content: 'XXXXX', style: { color: '#666', background: '#f5f5f5' } },
+    ],
+});
+</script>
+<template>
+    <ste-select mode="month" v-model="defaultDate" width="200" options-width="420" border-color="transparency">
+        <template v-slot:icon>
+            <ste-icon code="&#xe699;"></ste-icon>
+    </template>
+</ste-select>
+
+<ste-calendar @select="handleConfirm" weekendColor="#999" color="#09f" :signs="signs" :defaultDate="defaultDate"
+    :monthCount="1" :showConfirm="false" :showTitle="false" />
+</template>
+```
 
 ---$
 

package/components/ste-calendar/date.ts

@@ -1,11 +1,18 @@
 import utils from '../../utils/utils'
 import type { Dayjs } from '../../types/index'
+import type { CSSProperties } from 'vue'
+
+export type SignType = { content: string, style?: CSSProperties, className?: string, key?: number }[]
+
 
 export interface WeekType {
   dayText: string | number
   key: string | number
   disabled: boolean
   weekend: boolean
+  today: boolean
+  date: string | number | null
+  signs: SignType | null
 }
 
 export interface MonthType {
@@ -21,8 +28,9 @@ export type DateType = string | number | Dayjs | Date
 /**
  * 获取从当前月份开始的12个月
  */
-function getMonthList(minDate?: DateType, maxDate?: DateType) {
-  const start = minDate ? utils.dayjs(minDate) : utils.dayjs()
+function getMonthList(minDate?: DateType, maxDate?: DateType, defaultDate?: DateType, monthCount?: number) {
+  if (maxDate) monthCount = 12;
+  const start = minDate ? utils.dayjs(minDate) : utils.dayjs(defaultDate)
   const sY = Number(start.format('YYYY'))
   const sM = Number(start.format('MM'))
   const end = maxDate ? utils.dayjs(maxDate) : null
@@ -30,10 +38,9 @@ function getMonthList(minDate?: DateType, maxDate?: DateType) {
   if (end) {
     eY = Number(end.format('YYYY'))
     eM = Number(end.format('MM'))
-  }
-  else {
-    eY = sM + 11 > 12 ? sY + 1 : sY
-    eM = sM + 11 > 12 ? sM + 11 - 12 : sM + 11
+  } else {
+    eY = sM + Number(monthCount) - 1 > 12 ? sY + 1 : sY
+    eM = sM + Number(monthCount) - 1 > 12 ? sM + Number(monthCount) - 1 - 12 : sM + Number(monthCount) - 1
   }
   const months = []
   for (let y = sY; y <= eY; y++) {
@@ -57,9 +64,10 @@ export function getMonthDays(year: number, month: number) {
 /**
  * 获取日历数据
  */
-export function getCalendarData(minDate?: DateType, maxDate?: DateType, formatter = 'YYYY-MM-DD') {
+export function getCalendarData(minDate?: DateType, maxDate?: DateType, defaultDate?: DateType, monthCount = 12, formatter = 'YYYY-MM-DD', signs: { [key: string]: SignType } = {}) {
   const monthDatas: MonthType[] = []
-  const months = getMonthList(minDate, maxDate)
+  const months = getMonthList(minDate, maxDate, defaultDate, monthCount)
+  const today = utils.dayjs().format('YYYY-MM-DD');
   months.forEach((date) => {
     const daysCount = getMonthDays(date.year(), date.month())
     // 一号的星期
@@ -78,21 +86,28 @@ export function getCalendarData(minDate?: DateType, maxDate?: DateType, formatte
       const week = []
       for (let d = 0; d < 7; d++) {
         let _day
-        if ((w === 0 && d < firstDay) || day > daysCount)
-          _day = ''
-        else
-          _day = day++
-
+        if ((w === 0 && d < firstDay) || day > daysCount) _day = ''
+        else _day = day++
         const key = _day ? utils.dayjs(`${monthData.key}-${_day}`).format(formatter) : Math.random()
         let disabled = !_day
         if (_day)
           disabled = Boolean((minDate && key < minDate) || (maxDate && key > maxDate))
 
+        const daySigns = _day && signs && signs[key] ? signs[key].slice(0, 3).map(item => ({
+          ...item,
+          key: Math.random()
+        })) : null;
+
+
         week.push({
           dayText: _day,
           key,
           disabled,
           weekend: d === 0 || d === 6,
+          // 是否是今天
+          today: Boolean(_day && today === key),
+          date: _day ? key : null,
+          signs: daySigns,
         })
       }
       monthData.weeks.push(week)

package/components/ste-calendar/props.ts

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue'
-import type { DateType } from './date'
+import type { DateType, SignType } from './date'
 
 export default {
   title: { type: String, default: () => '日期选择' },
@@ -11,7 +11,6 @@ export default {
   color: { type: String, default: () => '' },
   minDate: { type: [String, Number, Date], default: () => 0 },
   maxDate: { type: [String, Number, Date], default: () => 0 },
-  defaultMonth: { type: [Number, String, Date], default: () => 0 },
   maxCount: { type: [Number, String], default: () => 0 },
   formatter: { type: String, default: () => 'YYYY-MM-DD' },
   showMark: { type: Boolean, default: () => true },
@@ -23,4 +22,8 @@ export default {
   showConfirm: { type: Boolean, default: () => true },
   width: { type: [Number, String], default: () => '100%' },
   height: { type: [Number, String], default: () => '100%' },
+  signs: { type: Object as PropType<{ [key: string]: SignType }>, default: () => ({}) },
+  defaultDate: { type: [String, Number, Date], default: () => 0 },
+  monthCount: { type: Number, default: () => 12 },
+  weekendColor: { type: String, default: () => '' },
 }

package/components/ste-calendar/ste-calendar.easycom.json

@@ -72,12 +72,6 @@
             "type": "number | string | Date",
             "default": 0
         },
-        {
-            "name": "defaultMonth",
-            "description": "默认展示的月份",
-            "type": "number | string | Date",
-            "default": 0
-        },
         {
             "name": "maxCount",
             "description": "mode=multiple时，最多可选多少个日期",
@@ -142,6 +136,30 @@
             "type": "number | string",
             "default": "100%"
         },
+        {
+            "name": "defaultDate",
+            "description": "默认展示的日期",
+            "type": "number | string | Date",
+            "default": "今天"
+        },
+        {
+            "name": "monthCount",
+            "description": "渲染的月份个数",
+            "type": "number",
+            "default": 12
+        },
+        {
+            "name": "weekendColor",
+            "description": "周末颜色，默认跟随主题色",
+            "type": "string",
+            "default": ""
+        },
+        {
+            "name": "signs",
+            "description": "日历标签",
+            "type": "{[key:string]:SignType}",
+            "default": "{}"
+        },
         {
             "name": "[event]select",
             "description": "选择日期时触发",
@@ -167,6 +185,17 @@
                     "description": "当前选中的日期列表"
                 }
             ]
+        },
+        {
+            "name": "[event]view-month",
+            "description": "页面展示月份发生变化时触发",
+            "type": "(month:string) => void",
+            "params": [
+                {
+                    "name": "month",
+                    "description": "当前页面上显示的月份"
+                }
+            ]
         }
     ]
-}
+}