stellar-ui-plus 1.16.18

package/components/ste-calendar/README.md

@@ -0,0 +1,241 @@
+# Calendar 日历
+
+日历组件
+
+---$
+
+### 基础用法
+
+-   属性`height`用于设置日历的高度，单位为`rpx`，默认`100%`
+-   属性`showTitle`用于设置是否显示日历的标题，默认`true`
+-   属性`title`用户设置日历的标题，默认`日期选择`
+-   事件`confirm`用于监听用户点击确定按钮事件，参数为选中的日期数组
+
+```html
+<script setup lang="ts">
+    import { ref } from 'vue';
+    import type { RefCalendar } from '@/uni_modules/stellar-ui-plus/types/refComponents';
+    const show1 = ref(false);
+    const show2 = ref(false);
+    const show3 = ref(false);
+    const show4 = ref(false);
+    const show5 = ref(false);
+    const show6 = ref(false);
+    const show7 = ref(false);
+    const show8 = ref(false);
+    const show9 = ref(false);
+    const show10 = ref(false);
+    const show11 = ref(false);
+    const show12 = ref(false);
+    const show13 = ref(false);
+
+    const handleConfirm = (v: (string | number)[]) => {
+        toast.showToast({
+            title: '确定选择：' + v.join(' '),
+            icon: 'none',
+            duration: 1500,
+        });
+    };
+
+    const defaultMonth = ref<RefCalendar>();
+
+    const setViewMonth = () => {
+        defaultMonth.value?.showMonth('2024-07');
+    };
+</script>
+<template>
+    <ste-calendar height="720" :showTitle="false" @confirm="handleConfirm" />
+</template>
+```
+
+### 结合弹窗使用
+
+#### 基础使用
+
+```html
+<ste-button @click="show1 = true">默认(单个日期)</ste-button>
+<ste-popup v-model:show="show1" height="60vh" position="bottom">
+    <div style="padding-bottom: 20px; height: 100%">
+        <ste-calendar @confirm="handleConfirm" />
+    </div>
+</ste-popup>
+```
+
+#### 多个日期
+
+-   属性`mode`用于设置日历的模式，可选值`single`、`multiple`、`range`，默认`single`
+    -   设置为`multiple`可以选择多个日期
+
+```html
+<ste-button @click="show2 = true">多个日期</ste-button>
+<ste-popup v-model:show="show2" height="60vh" position="bottom">
+    <div style="padding-bottom: 20px; height: 100%">
+        <ste-calendar mode="multiple" @confirm="handleConfirm" />
+    </div>
+</ste-popup>
+```
+
+#### 日期范围
+
+-   属性`mode`用于设置日历的模式，可选值`single`、`multiple`、`range`，默认`single`
+    -   设置为`single`可以选择日期范围
+
+```html
+<ste-button @click="show3 = true">日期范围</ste-button>
+<ste-popup v-model:show="show3" height="60vh" position="bottom">
+    <div style="padding-bottom: 20px; height: 100%">
+        <ste-calendar mode="range" @confirm="handleConfirm" />
+    </div>
+</ste-popup>
+```
+
+#### 自定义主题色
+
+-   属性`color`可以设置日历的主题色，包括周末日期颜色、日期选中颜色、日期范围选中颜色、确定按钮颜色
+
+```html
+<ste-button @click="show4 = true">自定义主题色</ste-button>
+<ste-popup v-model:show="show4" height="60vh" position="bottom">
+    <div style="padding-bottom: 20px; height: 100%">
+        <ste-calendar color="#3478f6" @confirm="handleConfirm" />
+    </div>
+</ste-popup>
+```
+
+#### 自定义文案
+
+-   属性`title`可以设置标题文案
+-   属性`startText`可以设置开始日期的文案，`mode`值为`range`时生效
+-   属性`endText`可以设置结束日期的文案，`mode`值为`range`时生效
+
+```html
+<ste-button @click="show5 = true">自定义文案</ste-button>
+<ste-popup v-model:show="show5" height="60vh" position="bottom">
+    <div style="padding-bottom: 20px; height: 100%">
+        <ste-calendar mode="range" title="酒店预约" startText="住店" endText="离店" @confirm="handleConfirm" />
+    </div>
+</ste-popup>
+```
+
+#### 日期最大范围
+
+-   属性`minDate`可以设置日期的最小可选范围
+-   属性`maxDate`可以设置日期的最大可选范围
+
+```html
+<ste-button @click="show6 = true">日期最大范围</ste-button>
+<ste-popup v-model:show="show6" height="60vh" position="bottom">
+    <div style="padding-bottom: 20px; height: 100%">
+        <ste-calendar mode="range" minDate="2024-05-10" maxDate="2024-05-20" @confirm="handleConfirm" />
+    </div>
+</ste-popup>
+```
+
+#### 多选数量限制
+
+-   属性`maxCount`用于设置多选模式下最多可选的日期数量
+
+```html
+<ste-button @click="show7 = true">多选数量限制</ste-button>
+<ste-popup v-model:show="show7" height="60vh" position="bottom">
+    <div style="padding-bottom: 20px; height: 100%">
+        <ste-calendar mode="multiple" :maxCount="5" @confirm="handleConfirm" />
+    </div>
+</ste-popup>
+```
+
+#### 多选数量限制
+
+-   属性`maxRange`用于设置范围模式下最多可选的日期数量
+-   属性`showRangePrompt`用于设置范围模式下是否显示超出数量时的提示文案
+-   属性`rangePrompt`用于设置范围模式下超出数量时的提示文案
+
+```html
+<ste-button @click="show8 = true">范围数量限制</ste-button>
+<ste-popup v-model:show="show8" height="60vh" position="bottom">
+    <div style="padding-bottom: 20px; height: 100%">
+        <ste-calendar mode="range" :maxRange="5" @confirm="handleConfirm" />
+    </div>
+</ste-popup>
+```
+
+#### 默认选择日期
+
+-   属性`list`用于设置默认选择的日期
+
+```html
+<ste-button @click="show9 = true">默认选择日期</ste-button>
+<ste-popup v-model:show="show9" height="60vh" position="bottom">
+    <div style="padding-bottom: 20px; height: 100%">
+        <ste-calendar :list="[Date.now()]" @confirm="handleConfirm" />
+    </div>
+</ste-popup>
+```
+
+#### 默认展示月份
+
+-   属性`defaultMonth`用于设置默认展示的月份，因为弹窗中的日历不在文档流，无法设置滚动距离，所以需要在弹窗动画结束之后手动设置默认展示的月份
+
+```html
+<ste-button @click="show10 = true">默认展示月份</ste-button>
+<ste-popup v-model:show="show10" position="bottom" height="60vh" @open-after="setViewMonth">
+    <div style="padding-bottom: 20px; height: 100%">
+        <ste-calendar ref="defaultMonth" minDate="2024-05-20" maxDate="2024-08-01" @confirm="handleConfirm" />
+    </div>
+</ste-popup>
+```
+
+#### 隐藏确定按钮
+
+-   属性`showConfirm`用于设置是否显示确定按钮
+-   事件`select`用于监听选择日期的事件
+
+```html
+<ste-button @click="show11 = true">隐藏确定按钮</ste-button>
+<ste-popup v-model:show="show11" position="bottom" height="60vh">
+    <div style="padding-bottom: 20px; height: 100%">
+        <ste-calendar minDate="2024-05-20" maxDate="2024-08-01" @select="handleConfirm" :showConfirm="false" />
+    </div>
+</ste-popup>
+```
+
+#### 只读
+
+-   属性`readonly`用于设置是否只读
+
+```html
+<ste-button @click="show12 = true">只读</ste-button>
+<ste-popup v-model:show="show12" position="bottom" height="60vh">
+    <div style="padding-bottom: 20px; height: 100%">
+        <ste-calendar minDate="2024-05-20" maxDate="2024-06-10" readonly :list="['2024-05-21']" />
+    </div>
+</ste-popup>
+```
+
+#### 隐藏背景月份
+
+-   属性`showMark`用于设置是否显示背景月份
+
+```html
+<ste-button @click="show13 = true">隐藏背景月份</ste-button>
+<ste-popup v-model:show="show13" position="bottom" height="60vh">
+    <div style="padding-bottom: 20px; height: 100%">
+        <ste-calendar :showMark="false" @select="handleConfirm" />
+    </div>
+</ste-popup>
+```
+
+---$
+
+### API
+
+<!-- props -->
+
+#### Methods
+
+| 方法名    | 说明               | 参数                        | 支持版本 |
+| --------- | ------------------ | --------------------------- | -------- |
+| showMonth | 设置默认展示的月份 | 要展示的年月（YYYY-MM格式） | -        |
+
+---$
+{{xuyajun}}

package/components/ste-calendar/config.json

@@ -0,0 +1,5 @@
+{
+  "group": "表单组件",
+  "title": "Calendar 日历",
+  "icon": "https://image.whzb.com/chain/StellarUI/%E7%BB%84%E4%BB%B6%E5%9B%BE%E6%A0%87/button.png"
+}

package/components/ste-calendar/date.ts

@@ -0,0 +1,110 @@
+import utils from '../../utils/utils'
+import type { Dayjs } from '../../types/index'
+
+export interface WeekType {
+  dayText: string | number
+  key: string | number
+  disabled: boolean
+  weekend: boolean
+}
+
+export interface MonthType {
+  date: Dayjs
+  monthText: string
+  key: string
+  month: number
+  weeks: WeekType[][]
+}
+
+export type DateType = string | number | Dayjs | Date
+
+/**
+ * 获取从当前月份开始的12个月
+ */
+function getMonthList(minDate?: DateType, maxDate?: DateType) {
+  const start = minDate ? utils.dayjs(minDate) : utils.dayjs()
+  const sY = Number(start.format('YYYY'))
+  const sM = Number(start.format('MM'))
+  const end = maxDate ? utils.dayjs(maxDate) : null
+  let eY, eM
+  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
+  }
+  const months = []
+  for (let y = sY; y <= eY; y++) {
+    for (let m = y === sY ? sM : 1; m <= (y === eY ? eM : 12); m++)
+      months.push(utils.dayjs(`${y}-${m < 10 ? `0${m}` : m}-01`))
+  }
+  return months
+}
+
+/**
+ * 获取每个月的天数
+ */
+export function getMonthDays(year: number, month: number) {
+  // 是否是闰年
+  const isLeapYear = (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0
+  // 每个月的天数
+  const daysCount = [31, isLeapYear ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
+  return daysCount[month]
+}
+
+/**
+ * 获取日历数据
+ */
+export function getCalendarData(minDate?: DateType, maxDate?: DateType, formatter = 'YYYY-MM-DD') {
+  const monthDatas: MonthType[] = []
+  const months = getMonthList(minDate, maxDate)
+  months.forEach((date) => {
+    const daysCount = getMonthDays(date.year(), date.month())
+    // 一号的星期
+    const firstDay = date.startOf('month').day()
+    const monthData: MonthType = {
+      date,
+      monthText: date.format('YYYY年MM月'),
+      key: date.format('YYYY-MM'),
+      month: date.month() + 1,
+      weeks: [],
+    }
+    // 计算本月周数
+    const weekNum = Math.ceil((daysCount + firstDay) / 7)
+    let day = 1
+    for (let w = 0; w < weekNum; w++) {
+      const week = []
+      for (let d = 0; d < 7; d++) {
+        let _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))
+
+        week.push({
+          dayText: _day,
+          key,
+          disabled,
+          weekend: d === 0 || d === 6,
+        })
+      }
+      monthData.weeks.push(week)
+    }
+    monthDatas.push(monthData)
+  })
+  return { monthDatas, weekTexts: '日一二三四五六'.split('') }
+}
+
+/**
+ * 格式化时间
+ */
+export function formatDate(date: DateType, formatter = 'YYYY-MM-DD') {
+  return utils.dayjs(date).format(formatter)
+}

package/components/ste-calendar/props.ts

@@ -0,0 +1,26 @@
+import type { PropType } from 'vue'
+import type { DateType } from './date'
+
+export default {
+  title: { type: String, default: () => '日期选择' },
+  showTitle: { type: Boolean, default: () => true },
+  list: { type: Array as PropType<DateType[]>, default: () => [] },
+  mode: { type: String, default: () => 'single' },
+  startText: { type: String, default: () => '开始' },
+  endText: { type: String, 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 },
+  readonly: { type: Boolean, default: () => false },
+  maxRange: { type: Number, default: () => null },
+  rangePrompt: { type: String, default: () => null },
+  showRangePrompt: { type: Boolean, default: () => true },
+  allowSameDay: { type: Boolean, default: () => false },
+  showConfirm: { type: Boolean, default: () => true },
+  width: { type: [Number, String], default: () => '100%' },
+  height: { type: [Number, String], default: () => '100%' },
+}

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

@@ -0,0 +1,172 @@
+{
+    "name": "ste-calendar",
+    "description": "按钮组件",
+    "example": "<ste-calendar></ste-calendar>",
+    "tutorial": "https://stellar-ui.intecloud.com.cn/plus/#/?active=calendar",
+    "attributes": [
+        {
+            "name": "title",
+            "description": "尺寸",
+            "type": "string",
+            "default": "日期选择"
+        },
+        {
+            "name": "showTitle",
+            "description": "是否显示标题",
+            "type": "boolean",
+            "default": true
+        },
+        {
+            "name": "list",
+            "description": "选中的日期列表",
+            "type": "number | string",
+            "default": []
+        },
+        {
+            "name": "mode",
+            "description": "选项的值",
+            "type": "string",
+            "default": "single",
+            "values": [
+                {
+                    "name": "single",
+                    "description": "选择单个日期（默认）"
+                },
+                {
+                    "name": "multiple",
+                    "description": "可以选择多个日期"
+                },
+                {
+                    "name": "range",
+                    "description": "可以选择日期范围"
+                }
+            ]
+        },
+        {
+            "name": "startText",
+            "description": "开始日期文本",
+            "type": "string",
+            "default": "开始"
+        },
+        {
+            "name": "endText",
+            "description": "结束日期文本",
+            "type": "string",
+            "default": "结束"
+        },
+        {
+            "name": "color",
+            "description": "主题颜色（选中日期背景、周末文日期颜色和确定按钮）",
+            "type": "string",
+            "default": "#0090FF"
+        },
+        {
+            "name": "minDate",
+            "description": "最小可选日期",
+            "type": "number | string | Date",
+            "default": 0
+        },
+        {
+            "name": "maxDate",
+            "description": "最大可选日期",
+            "type": "number | string | Date",
+            "default": 0
+        },
+        {
+            "name": "defaultMonth",
+            "description": "默认展示的月份",
+            "type": "number | string | Date",
+            "default": 0
+        },
+        {
+            "name": "maxCount",
+            "description": "mode=multiple时，最多可选多少个日期",
+            "type": "number",
+            "default": 0
+        },
+        {
+            "name": "formatter",
+            "description": "日期格式化(默认'YYYY-MM-DD')",
+            "type": "string",
+            "default": "YYYY-MM-DD"
+        },
+        {
+            "name": "showMark",
+            "description": "是否显示月份背景色",
+            "type": "boolean",
+            "default": true
+        },
+        {
+            "name": "readonly",
+            "description": "是否为只读状态，只读状态下禁止选择日期",
+            "type": "boolean",
+            "default": false
+        },
+        {
+            "name": "maxRange",
+            "description": "日期区间最多可选天数，默认无限制，mode = range时有效",
+            "type": "number"
+        },
+        {
+            "name": "rangePrompt",
+            "description": "范围选择超过最多可选天数时的提示文案，mode = range时有效",
+            "type": "string"
+        },
+        {
+            "name": "showRangePrompt",
+            "description": "范围选择超过最多可选天数时，是否展示提示文案，mode = range时有效",
+            "type": "boolean",
+            "default": true
+        },
+        {
+            "name": "allowSameDay",
+            "description": "是否允许日期范围的起止时间为同一天，mode = range时有效",
+            "type": "boolean",
+            "default": false
+        },
+        {
+            "name": "showConfirm",
+            "description": "是否显示确定按钮",
+            "type": "boolean",
+            "default": true
+        },
+        {
+            "name": "width",
+            "description": "可视区域宽度",
+            "type": "number | string",
+            "default": "100%"
+        },
+        {
+            "name": "height",
+            "description": "可视区域高度",
+            "type": "number | string",
+            "default": "100%"
+        },
+        {
+            "name": "[event]select",
+            "description": "选择日期时触发",
+            "type": "(days:(number|string)[],day:number|string) => void",
+            "params": [
+                {
+                    "name": "days",
+                    "description": "选中的日期列表"
+                },
+                {
+                    "name": "day",
+                    "description": "当前选中的日期"
+                }
+            ]
+        },
+        {
+            "name": "[event]confirm",
+            "description": "点击确定按钮时触发",
+            "type": "(days:(number|string)[]) => void",
+            "params": [
+                {
+                    "name": "days",
+                    "description": "当前选中的日期列表"
+                }
+            ]
+        }
+    ]
+}