diff --git a/docs/components/basic/popup.md b/docs/components/basic/popup.md index 940734e3..eaf3e45f 100644 --- a/docs/components/basic/popup.md +++ b/docs/components/basic/popup.md @@ -173,11 +173,11 @@ |------------------|-------------|----------------| | click-pop | 点击弹出层时触发 | `event: Event` | | click-close-icon | 点击关闭图标时触发 | `event: Event` | +| click-overlay | 点击遮罩触发 | `event: Event` | | open | 打开弹框时触发 | - | -| close | 关闭弹框时触发 | - | | opened | 遮罩打开动画结束时触发 | `event: Event` | +| close | 关闭弹框时触发 | - | | closed | 遮罩关闭动画结束时触发 | `event: Event` | -| click-overlay | 点击遮罩触发 | `event: Event` | ### Slots diff --git a/docs/components/dentry/calendar.md b/docs/components/dentry/calendar.md index a1d077b5..2fec1393 100644 --- a/docs/components/dentry/calendar.md +++ b/docs/components/dentry/calendar.md @@ -784,55 +784,60 @@ export default { ### Props -| 参数 | 说明 | 类型 | 默认值 | -| ---------------------- | ------------------------------------------------------------------------------------------ | ------------------- | ----------------- | -| v-model:visible | 是否可见 | boolean | `false` | -| type | 类型，日期单择`one`，区间选择`range`,日期多选`multiple`,周选择`week` | string | '`one`' | -| poppable | 是否弹窗状态展示 | boolean | `true` | -| is-auto-back-fill | 自动回填 | boolean | `false` | -| title | 显示标题 | string | `日期选择` | -| default-value | 默认值，单个日期选择 `string`，其他为 `string[]` | string \| string[] | `null` | -| start-date | 开始日期 | string | `今天` | -| end-date | 结束日期 | string | `距离今天 365 天` | -| show-today | 是否展示今天标记 | boolean | `true` | -| start-text | 范围选择，开始信息文案 | string | `开始` | -| end-text | 范围选择，结束信息文案 | string | `结束` | -| confirm-text | 底部确认按钮文案 | string | `确认` | -| show-title | 是否在展示日历标题 | boolean | `true` | -| show-sub-title | 是否展示日期标题 | boolean | `true` | -| to-date-animation | 是否启动滚动动画 | boolean | `true` | -| first-day-of-week | 设置周起始日 | 0-6 | `0` | -| disabled-date `v1.4.0` | 一个用来判断该日期是否被禁用的函数，接受一个`年-月-日`作为参数。 应该返回一个 Boolean 值。 | function | `-` | -| footer-slot `v1.4.0` | 是否使用footer插槽，如果使用，此值必须为 true | Boolean | `false` | -| btn-slot `v1.5.7` | 是否使用btn插槽，如果使用，此值必须为 true | Boolean | `false` | +| 参数 | 说明 | 类型 | 默认值 | +|-----------------------|------------------------------------------------------|---------------------|--------------| +| v-model:visible | 是否可见 | boolean | `false` | +| type | 类型，日期单择`one`，区间选择`range`,日期多选`multiple`,周选择`week` | string | '`one`' | +| poppable | 是否弹窗状态展示 | boolean | `true` | +| is-auto-back-fill | 自动回填 | boolean | `false` | +| title | 显示标题 | string | `日期选择` | +| default-value | 默认值，单个日期选择 `string`，其他为 `string[]` | string \| string[] | `null` | +| start-date | 开始日期 | string | `今天` | +| end-date | 结束日期 | string | `距离今天 365 天` | +| show-today | 是否展示今天标记 | boolean | `true` | +| start-text | 范围选择，开始信息文案 | string | `开始` | +| end-text | 范围选择，结束信息文案 | string | `结束` | +| confirm-text | 底部确认按钮文案 | string | `确认` | +| show-title | 是否在展示日历标题 | boolean | `true` | +| show-sub-title | 是否展示日期标题 | boolean | `true` | +| to-date-animation | 是否启动滚动动画 | boolean | `true` | +| first-day-of-week | 设置周起始日 | 0-6 | `0` | +| disabled-date `1.4.0` | 一个用来判断该日期是否被禁用的函数，接受一个`年-月-日`作为参数。 应该返回一个 Boolean 值。 | function | `-` | +| footer-slot `1.4.0` | 是否使用footer插槽，如果使用，此值必须为 true | boolean | `false` | +| btn-slot `1.5.7` | 是否使用btn插槽，如果使用，此值必须为 true | boolean | `false` | +| pop-style `1.8.0` | 自定义弹窗样式 | `CSSProperties` | - | ### Events -| 事件名 | 说明 | 回调参数 | -| ---------------- | --------------------------------------------------------- | ------------------------ | +| 事件名 | 说明 | 回调参数 | +|------------------|-------------------------------|--------------------------| | choose | 选择之后或是点击确认按钮触发,日期数组（包含年月日和星期） | `(string \| string[])[]` | -| close | 关闭时触发 | - | -| select | 点击/选择后触发 | `(string \| string[])[]` | -| click-close-icon | 点击关闭图标后触发 | - | -| click-overlay | 点击遮罩关闭后触发 | - | +| select | 点击/选择后触发 | `(string \| string[])[]` | +| click-close-icon | 点击关闭图标后触发 | - | +| click-overlay | 点击遮罩关闭后触发 | - | +| open `1.8.0` | 打开弹窗时触发 | - | +| opened `1.8.0` | 打开弹窗动画结束时触发 | - | +| close | 关闭弹窗时触发 | - | +| closed `1.8.0` | 关闭弹窗动画结束时触发 | - | ### Slots -| 名称 | 说明 | -| ----------------------------- | ---------------------------------------- | -| btn | 自定义日历标题下部，可用以添加自定义操作 | -| day `不支持微信小程序` | 日期信息 | -| topInfo `不支持微信小程序` | 日期顶部信息 | -| bottomInfo `不支持微信小程序` | 日期底部信息 | -| footer `v1.4.0` | 日历自定义底部，替代confirm按钮 | +| 名称 | 说明 | +|-----------------------|----------------------| +| btn | 自定义日历标题下部，可用以添加自定义操作 | +| day `不支持微信小程序` | 日期信息 | +| topInfo `不支持微信小程序` | 日期顶部信息 | +| bottomInfo `不支持微信小程序` | 日期底部信息 | +| footer `1.4.0` | 日历自定义底部，替代confirm按钮 | + ### Methods 通过 [ref](https://vuejs.org/guide/essentials/template-refs.html) 可以获取到 `Calendar` 实例并调用实例方法。 -| 方法名 | 说明 | 参数 | -| --------------------- | ------------------------------------- | -------- | -| scrollToDate | 滚动到指定日期所在月,如：'2021-12-30' | `string` | -| initPosition `v4.0.1` | 初始化滚动位置 | 无 | +| 方法名 | 说明 | 参数 | +|--------------|---------------------------|----------| +| scrollToDate | 滚动到指定日期所在月,如：'2021-12-30' | `string` | +| initPosition | 初始化滚动位置 | 无 | ## 主题定制 @@ -840,20 +845,20 @@ export default { 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](/components/basic/configprovider)。 -| 名称 | 默认值 | -| --------------------------------------- | ------------------------- | -| --nut-calendar-primary-color | var(--nut-primary-color) | -| --nut-calendar-choose-color | var(--nut-primary-color) | -| --nut-calendar-choose-font-color | var(--nut-primary-color) | -| --nut-calendar-base-color | #333333 | -| --nut-calendar-disable-color | #d1d0d0 | -| --nut-calendar-base-font | var(--nut-font-size-3) | -| --nut-calendar-title-font | var(--nut-font-size-4) | -| --nut-calendar-title-font-weight | 500 | -| --nut-calendar-sub-title-font | var(--nut-font-size-2) | -| --nut-calendar-text-font | var(--nut-font-size-1) | -| --nut-calendar-day-font | 16px | -| --nut-calendar-day-active-border-radius | 0px | -| --nut-calendar-day-font-weight | 500 | -| --nut-calendar-day67-font-color | var(--nut-primary-color)_ | -| --nut-calendar-month-title-font-size | inherit | +| 名称 | 默认值 | +|-----------------------------------------|--------------------------| +| --nut-calendar-primary-color | var(--nut-primary-color) | +| --nut-calendar-choose-color | var(--nut-primary-color) | +| --nut-calendar-choose-font-color | var(--nut-primary-color) | +| --nut-calendar-base-color | #333333 | +| --nut-calendar-disable-color | #d1d0d0 | +| --nut-calendar-base-font | var(--nut-font-size-3) | +| --nut-calendar-title-font | var(--nut-font-size-4) | +| --nut-calendar-title-font-weight | 500 | +| --nut-calendar-sub-title-font | var(--nut-font-size-2) | +| --nut-calendar-text-font | var(--nut-font-size-1) | +| --nut-calendar-day-font | 16px | +| --nut-calendar-day-active-border-radius | 0px | +| --nut-calendar-day-font-weight | 500 | +| --nut-calendar-day67-font-color | var(--nut-primary-color) | +| --nut-calendar-month-title-font-size | inherit | diff --git a/docs/components/dentry/cascader.md b/docs/components/dentry/cascader.md index e9099d4d..30d3a7aa 100644 --- a/docs/components/dentry/cascader.md +++ b/docs/components/dentry/cascader.md @@ -344,48 +344,54 @@ export default { ### Props -| 参数 | 说明 | 类型 | 默认值 | -| ----------------------- | --------------------------------------------------------- | ---------------- | ------------- | -| v-model | 选中值，双向绑定 | Array | - | -| v-model:visible | 显示选择层 | boolean | `false` | -| options | 级联数据 | Array | - | -| lazy | 是否开启动态加载 | boolean | - | -| lazy-load | 动态加载回调，开启动态加载时生效 | Function | - | -| value-key | 自定义 `options` 结构中 `value` 的字段 | string | - | -| text-key | 自定义 `options` 结构中 `text` 的字段 | string | - | -| children-key | 自定义 `options` 结构中 `children` 的字段 | string | - | -| convert-config | 当 `options` 为可转换为树形结构的扁平结构时，配置转换规则 | object | - | -| title | 标题 | string | `''` | -| close-icon-position | 取消按钮位置，继承 `Popup` 组件 | string | `"top-right"` | -| closeable | 是否显示关闭按钮，继承 `Popup` 组件 | boolean | `false` | -| poppable | 是否需要弹层展示（设置为 `false` 后，`title` 失效） | boolean | `true` | -| title-gutter `v1.1.7` | 标签间隙 | number \| string | `0` | -| title-size `v1.1.7` | 标签栏字体尺寸大小 可选值 large normal small | string | `normal` | -| title-ellipsis `v1.1.7` | 是否省略过长的标题文字 | boolean | `true` | -| title-type `v1.1.7` | 选中底部展示样式 可选值 line、smile | string | `line` | +| 参数 | 说明 | 类型 | 默认值 | +|------------------------|------------------------------------|------------------|---------------| +| v-model | 选中值，双向绑定 | Array | - | +| v-model:visible | 显示选择层 | boolean | `false` | +| options | 级联数据 | Array | - | +| lazy | 是否开启动态加载 | boolean | - | +| lazy-load | 动态加载回调，开启动态加载时生效 | Function | - | +| value-key | 自定义 `options` 结构中 `value` 的字段 | string | - | +| text-key | 自定义 `options` 结构中 `text` 的字段 | string | - | +| children-key | 自定义 `options` 结构中 `children` 的字段 | string | - | +| convert-config | 当 `options` 为可转换为树形结构的扁平结构时，配置转换规则 | object | - | +| title | 标题 | string | `''` | +| close-icon-position | 取消按钮位置，继承 `Popup` 组件 | string | `"top-right"` | +| closeable | 是否显示关闭按钮，继承 `Popup` 组件 | boolean | `false` | +| poppable | 是否需要弹层展示（设置为 `false` 后，`title` 失效） | boolean | `true` | +| title-gutter `1.1.7` | 标签间隙 | number \| string | `0` | +| title-size `1.1.7` | 标签栏字体尺寸大小 可选值 large normal small | string | `normal` | +| title-ellipsis `1.1.7` | 是否省略过长的标题文字 | boolean | `true` | +| title-type `1.1.7` | 选中底部展示样式 可选值 line、smile | string | `line` | +| pop-style `1.8.0` | 自定义弹窗样式 | `CSSProperties` | - | + ### Events -| 事件名 | 说明 | 回调参数 | -| ----------- | ---------------- | -------------------- | -| change | 选中值改变时触发 | `(value, pathNodes)` | -| path-change | 选中项改变时触发 | `(pathNodes)` | +| 事件名 | 说明 | 回调参数 | +|----------------|-------------|----------------------| +| change | 选中值改变时触发 | `(value, pathNodes)` | +| path-change | 选中项改变时触发 | `(pathNodes)` | +| open `1.8.0` | 打开弹窗时触发 | - | +| opened `1.8.0` | 打开弹窗动画结束时触发 | - | +| close `1.8.0` | 关闭弹窗时触发 | - | +| closed `1.8.0` | 关闭弹窗动画结束时触发 | - | ### Slots -| 名称 | 说明 | -| -------------- | ------------------ | -| title `v1.5.4` | 自定义顶部标题部分 | +| 名称 | 说明 | +|---------------|-----------| +| title `1.5.4` | 自定义顶部标题部分 | ### options数据结构 -| 键名 | 说明 | 类型 | 默认值 | -| -------- | --------------------------------------- | ----------------- | ---------------------------------------------------------- | -| text | 显示名称,可以通过`text-key`更改键名 | `string` | - | -| value | 唯一标识,可以通过`value-key`更改键名 | `string` `number` | - | -| children | 子级选项,可以通过`children-key`更改键名 | `array` | - | -| disabled | 是否禁用 | `boolean` | false | -| leaf | 是否叶子节点 | `boolean` | `children`为空时`leaf`等于`true`,不为空时`leaf`等于`false` | -| loading | 加载状态 | `boolean` | false | +| 键名 | 说明 | 类型 | 默认值 | +|----------|-----------------------------|-------------------|-------------------------------------------------| +| text | 显示名称,可以通过`text-key`更改键名 | `string` | - | +| value | 唯一标识,可以通过`value-key`更改键名 | `string` `number` | - | +| children | 子级选项,可以通过`children-key`更改键名 | `array` | - | +| disabled | 是否禁用 | `boolean` | false | +| leaf | 是否叶子节点 | `boolean` | `children`为空时`leaf`等于`true`,不为空时`leaf`等于`false` | +| loading | 加载状态 | `boolean` | false | ## 主题定制 @@ -393,8 +399,8 @@ export default { 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](/components/basic/configprovider)。 -| 名称 | 默认值 | -| -------------------------------- | ------------------------ | +| 名称 | 默认值 | +|----------------------------------|--------------------------| | --nut-cascader-font-size | var(--nut-font-size-2) | | --nut-cascader-line-height | 22px | | --nut-cascader-tabs-item-padding | 0 10px | diff --git a/packages/nutui/components/calendar/calendar.ts b/packages/nutui/components/calendar/calendar.ts index 7fb06e8b..40e2631e 100644 --- a/packages/nutui/components/calendar/calendar.ts +++ b/packages/nutui/components/calendar/calendar.ts @@ -1,6 +1,14 @@ -import type { ExtractPropTypes, PropType } from 'vue' -import { CHOOSE_EVENT, CLOSE_EVENT, SELECT_EVENT, UPDATE_VISIBLE_EVENT } from '../_constants' -import { commonProps, getDay, isBoolean, isString, makeNumberProp, makeStringProp, truthProp } from '../_utils' +import type { ExtractPropTypes, PropType, StyleValue } from 'vue' +import { + CHOOSE_EVENT, + CLOSE_EVENT, + CLOSED_EVENT, + OPEN_EVENT, + OPENED_EVENT, + SELECT_EVENT, + UPDATE_VISIBLE_EVENT, +} from '../_constants' +import { commonProps, getDay, makeNumberProp, makeStringProp, truthProp } from '../_utils' import { popupProps } from '../popup/popup' export const calendarProps = { @@ -10,27 +18,22 @@ export const calendarProps = { * @description 是否可见 */ visible: Boolean, - /** * @description 类型，日期单选 `one`，区间选择 `range`，日期多选 `multiple`，周选择 `week` */ type: makeStringProp<'one' | 'range' | 'multiple' | 'week'>('one'), - /** * @description 是否弹窗状态展示 */ poppable: truthProp, - /** * @description 自动回填 */ isAutoBackFill: Boolean, - /** * @description 显示标题 */ title: makeStringProp('日期选择'), - /** * @description 默认值，单个日期选择为 `string`，其他为 `string[]` */ @@ -41,58 +44,47 @@ export const calendarProps = { * @description 开始日期 */ startDate: makeStringProp(getDay(0)), - /** * @description 结束日期 */ endDate: makeStringProp(getDay(365)), - /** * @description 是否展示今天标记 */ showToday: truthProp, - /** * @description 范围选择，开始信息文案 */ startText: makeStringProp('开始'), - /** * @description 范围选择，结束信息文案 */ endText: makeStringProp('结束'), - /** * @description 底部确认按钮文案 */ confirmText: makeStringProp('确认'), - /** * @description 是否在展示日历标题 */ showTitle: truthProp, - /** * @description 是否展示日期标题 */ showSubTitle: truthProp, - /** * @description 是否启动滚动动画 */ toDateAnimation: truthProp, - /** * @description 设置周起始日 */ firstDayOfWeek: makeNumberProp(0), - /** * @description 一个用来判断该日期是否被禁用的函数，接受一个 `年 - 月 - 日` 作为参数。 应该返回一个 Boolean 值。 * @default undefined */ disabledDate: Function, - /** * @description 是否使用 footer 插槽，如果使用,此值必须为 true */ @@ -101,17 +93,33 @@ export const calendarProps = { * @description 是否使用 btn 插槽，如果使用,此值必须为 true */ btnSlot: Boolean, + /** + * @description 自定义弹窗样式 + */ + popStyle: { + type: [String, Object, Array] as PropType, + default: '', + }, + /** + * @description 遮罩显示时的背景是否锁定 + */ + lockScroll: truthProp, } export type CalendarProps = ExtractPropTypes +/* eslint-disable unused-imports/no-unused-vars */ export const calendarEmits = { - [CHOOSE_EVENT]: (val: string | object) => isString(val) || val instanceof Object, - [CLOSE_EVENT]: () => true, - [UPDATE_VISIBLE_EVENT]: (val: boolean) => isBoolean(val), - [SELECT_EVENT]: (val: any) => val, + [UPDATE_VISIBLE_EVENT]: (value: boolean) => true, + [CHOOSE_EVENT]: (value: string | object) => true, + [SELECT_EVENT]: (value: any) => true, clickCloseIcon: () => true, clickOverlay: () => true, + [OPEN_EVENT]: () => true, + [OPENED_EVENT]: () => true, + [CLOSE_EVENT]: () => true, + [CLOSED_EVENT]: () => true, } +/* eslint-enable unused-imports/no-unused-vars */ export type CalendarEmits = typeof calendarEmits diff --git a/packages/nutui/components/calendar/calendar.vue b/packages/nutui/components/calendar/calendar.vue index 623cc45f..9f1c0ae9 100644 --- a/packages/nutui/components/calendar/calendar.vue +++ b/packages/nutui/components/calendar/calendar.vue @@ -1,94 +1,127 @@ -