init
This commit is contained in:
125
uni_modules/nutui-uni/components/calendar/calendar.ts
Normal file
125
uni_modules/nutui-uni/components/calendar/calendar.ts
Normal file
@@ -0,0 +1,125 @@
|
||||
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 = {
|
||||
...popupProps,
|
||||
...commonProps,
|
||||
/**
|
||||
* @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[]`
|
||||
*/
|
||||
defaultValue: {
|
||||
type: [String, Array] as PropType<string | string[]>,
|
||||
},
|
||||
/**
|
||||
* @description 开始日期
|
||||
*/
|
||||
startDate: makeStringProp(getDay(0)),
|
||||
/**
|
||||
* @description 结束日期
|
||||
*/
|
||||
endDate: makeStringProp(getDay(365)),
|
||||
/**
|
||||
* @description 范围选择，开始信息文案
|
||||
*/
|
||||
startText: makeStringProp('开始'),
|
||||
/**
|
||||
* @description 范围选择，结束信息文案
|
||||
*/
|
||||
endText: makeStringProp('结束'),
|
||||
/**
|
||||
* @description 底部确认按钮文案
|
||||
*/
|
||||
confirmText: makeStringProp('确认'),
|
||||
/**
|
||||
* @description 是否展示今天标记
|
||||
*/
|
||||
showToday: truthProp,
|
||||
/**
|
||||
* @description 是否在展示日历标题
|
||||
*/
|
||||
showTitle: truthProp,
|
||||
/**
|
||||
* @description 是否展示日期标题
|
||||
*/
|
||||
showSubTitle: truthProp,
|
||||
/**
|
||||
* @description 是否启动滚动动画
|
||||
*/
|
||||
toDateAnimation: truthProp,
|
||||
/**
|
||||
* @description 设置周起始日
|
||||
*/
|
||||
firstDayOfWeek: makeNumberProp(0),
|
||||
/**
|
||||
* @description 一个用来判断该日期是否被禁用的函数，接受一个 `年 - 月 - 日` 作为参数。 应该返回一个 Boolean 值。
|
||||
* @default undefined
|
||||
*/
|
||||
disabledDate: Function,
|
||||
/**
|
||||
* @description 是否使用 footer 插槽，如果使用,此值必须为 true
|
||||
*/
|
||||
footerSlot: Boolean,
|
||||
/**
|
||||
* @description 是否使用 btn 插槽，如果使用,此值必须为 true
|
||||
*/
|
||||
btnSlot: Boolean,
|
||||
/**
|
||||
* @description 自定义弹窗样式
|
||||
*/
|
||||
popStyle: {
|
||||
type: [String, Object, Array] as PropType<StyleValue>,
|
||||
default: '',
|
||||
},
|
||||
/**
|
||||
* @description 遮罩显示时的背景是否锁定
|
||||
*/
|
||||
lockScroll: truthProp,
|
||||
}
|
||||
|
||||
export type CalendarProps = ExtractPropTypes<typeof calendarProps>
|
||||
|
||||
/* eslint-disable unused-imports/no-unused-vars */
|
||||
export const calendarEmits = {
|
||||
[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
|
||||
262
uni_modules/nutui-uni/components/calendar/calendar.vue
Normal file
262
uni_modules/nutui-uni/components/calendar/calendar.vue
Normal file
@@ -0,0 +1,262 @@
|
||||
<script lang="ts" setup>
|
||||
import { computed, defineComponent, ref, useSlots } from 'vue'
|
||||
import {
|
||||
CHOOSE_EVENT,
|
||||
CLOSE_EVENT,
|
||||
CLOSED_EVENT,
|
||||
OPEN_EVENT,
|
||||
OPENED_EVENT,
|
||||
PREFIX,
|
||||
SELECT_EVENT,
|
||||
UPDATE_VISIBLE_EVENT,
|
||||
} from '../_constants'
|
||||
import { getMainClass } from '../_utils'
|
||||
import NutCalendarItem from '../calendaritem/calendaritem.vue'
|
||||
import type { CalendarInst } from '../calendaritem/types'
|
||||
import NutPopup from '../popup/popup.vue'
|
||||
import { calendarEmits, calendarProps } from './calendar'
|
||||
|
||||
const props = defineProps(calendarProps)
|
||||
|
||||
const emit = defineEmits(calendarEmits)
|
||||
|
||||
const slots = useSlots()
|
||||
|
||||
const innerVisible = computed({
|
||||
get() {
|
||||
return props.visible
|
||||
},
|
||||
set(value) {
|
||||
emit('update:visible', value)
|
||||
},
|
||||
})
|
||||
|
||||
const classes = computed(() => {
|
||||
return getMainClass(props, componentName)
|
||||
})
|
||||
|
||||
const popClasses = computed(() => {
|
||||
return `${componentName}__popup ${props.popClass}`
|
||||
})
|
||||
|
||||
const popStyles = computed(() => {
|
||||
return [{
|
||||
height: '85vh',
|
||||
}, props.popStyle]
|
||||
})
|
||||
|
||||
const overlayClasses = computed(() => {
|
||||
return `${componentName}__overlay ${props.overlayClass}`
|
||||
})
|
||||
|
||||
const calendarRef = ref<CalendarInst | null>(null)
|
||||
|
||||
function scrollToDate(date: string) {
|
||||
calendarRef.value?.scrollToDate(date)
|
||||
}
|
||||
|
||||
function initPosition() {
|
||||
calendarRef.value?.initPosition()
|
||||
}
|
||||
|
||||
function close() {
|
||||
emit(UPDATE_VISIBLE_EVENT, false)
|
||||
emit(CLOSE_EVENT)
|
||||
}
|
||||
|
||||
function choose(param: string | object) {
|
||||
close()
|
||||
|
||||
emit(CHOOSE_EVENT, param)
|
||||
}
|
||||
|
||||
function select(param: string) {
|
||||
emit(SELECT_EVENT, param)
|
||||
}
|
||||
|
||||
function update() {
|
||||
emit(UPDATE_VISIBLE_EVENT, false)
|
||||
}
|
||||
|
||||
function handleCloseIconClick() {
|
||||
emit('clickCloseIcon')
|
||||
}
|
||||
|
||||
function handleOverlayClick() {
|
||||
emit('clickOverlay')
|
||||
}
|
||||
|
||||
function handleOpen() {
|
||||
emit(OPEN_EVENT)
|
||||
}
|
||||
|
||||
function handleOpened() {
|
||||
emit(OPENED_EVENT)
|
||||
|
||||
if (props.defaultValue) {
|
||||
if (Array.isArray(props.defaultValue)) {
|
||||
if (props.defaultValue.length > 0) {
|
||||
scrollToDate(props.defaultValue[0])
|
||||
}
|
||||
}
|
||||
else {
|
||||
scrollToDate(props.defaultValue)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function handleClose() {
|
||||
emit(CLOSE_EVENT)
|
||||
}
|
||||
|
||||
function handleClosed() {
|
||||
emit(CLOSED_EVENT)
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
scrollToDate,
|
||||
initPosition,
|
||||
})
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
const componentName = `${PREFIX}-calendar`
|
||||
|
||||
export default defineComponent({
|
||||
name: componentName,
|
||||
options: {
|
||||
virtualHost: true,
|
||||
addGlobalClass: true,
|
||||
styleIsolation: 'shared',
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view :class="classes" :style="props.customStyle">
|
||||
<template v-if="props.poppable">
|
||||
<NutPopup
|
||||
v-model:visible="innerVisible"
|
||||
:custom-class="popClasses"
|
||||
:custom-style="popStyles"
|
||||
:overlay-class="overlayClasses"
|
||||
:overlay-style="props.overlayStyle"
|
||||
position="bottom"
|
||||
round
|
||||
:closeable="props.closeable"
|
||||
:close-icon="props.closeIcon"
|
||||
:close-icon-position="props.closeIconPosition"
|
||||
:z-index="props.zIndex"
|
||||
:lock-scroll="props.lockScroll"
|
||||
:overlay="props.overlay"
|
||||
:close-on-click-overlay="props.closeOnClickOverlay"
|
||||
:destroy-on-close="false"
|
||||
@click-close-icon="handleCloseIconClick"
|
||||
@click-overlay="handleOverlayClick"
|
||||
@open="handleOpen"
|
||||
@opened="handleOpened"
|
||||
@close="handleClose"
|
||||
@closed="handleClosed"
|
||||
>
|
||||
<NutCalendarItem
|
||||
ref="calendarRef"
|
||||
:visible="innerVisible"
|
||||
:type="props.type"
|
||||
:poppable="props.poppable"
|
||||
:is-auto-back-fill="props.isAutoBackFill"
|
||||
:title="props.title"
|
||||
:default-value="props.defaultValue"
|
||||
:start-date="props.startDate"
|
||||
:end-date="props.endDate"
|
||||
:start-text="props.startText"
|
||||
:end-text="props.endText"
|
||||
:confirm-text="props.confirmText"
|
||||
:show-today="props.showToday"
|
||||
:show-title="props.showTitle"
|
||||
:show-sub-title="props.showSubTitle"
|
||||
:to-date-animation="props.toDateAnimation"
|
||||
:first-day-of-week="props.firstDayOfWeek"
|
||||
:disabled-date="props.disabledDate"
|
||||
:footer-slot="props.footerSlot"
|
||||
:btn-slot="props.btnSlot"
|
||||
@choose="choose"
|
||||
@select="select"
|
||||
@update="update"
|
||||
@close="close"
|
||||
>
|
||||
<template v-if="slots.btn" #btn>
|
||||
<slot name="btn" />
|
||||
</template>
|
||||
|
||||
<template v-if="slots.day" #day="{ date }">
|
||||
<slot name="day" :date="date" />
|
||||
</template>
|
||||
|
||||
<template v-if="slots.topInfo" #topInfo="{ date }">
|
||||
<slot name="topInfo" :date="date" />
|
||||
</template>
|
||||
|
||||
<template v-if="slots.bottomInfo" #bottomInfo="{ date }">
|
||||
<slot name="bottomInfo" :date="date" />
|
||||
</template>
|
||||
|
||||
<template v-if="slots.footer" #footer="{ date }">
|
||||
<slot name="footer" :date="date" />
|
||||
</template>
|
||||
</NutCalendarItem>
|
||||
</NutPopup>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<NutCalendarItem
|
||||
ref="calendarRef"
|
||||
:visible="innerVisible"
|
||||
:type="props.type"
|
||||
:poppable="props.poppable"
|
||||
:is-auto-back-fill="props.isAutoBackFill"
|
||||
:title="props.title"
|
||||
:default-value="props.defaultValue"
|
||||
:start-date="props.startDate"
|
||||
:end-date="props.endDate"
|
||||
:start-text="props.startText"
|
||||
:end-text="props.endText"
|
||||
:confirm-text="props.confirmText"
|
||||
:show-today="props.showToday"
|
||||
:show-title="props.showTitle"
|
||||
:show-sub-title="props.showSubTitle"
|
||||
:to-date-animation="props.toDateAnimation"
|
||||
:first-day-of-week="props.firstDayOfWeek"
|
||||
:disabled-date="props.disabledDate"
|
||||
:footer-slot="props.footerSlot"
|
||||
:btn-slot="props.btnSlot"
|
||||
@choose="choose"
|
||||
@select="select"
|
||||
@close="close"
|
||||
>
|
||||
<template v-if="slots.btn" #btn>
|
||||
<slot name="btn" />
|
||||
</template>
|
||||
|
||||
<template v-if="slots.day" #day="{ date }">
|
||||
<slot name="day" :date="date" />
|
||||
</template>
|
||||
|
||||
<template v-if="slots.topInfo" #topInfo="{ date }">
|
||||
<slot name="topInfo" :date="date" />
|
||||
</template>
|
||||
|
||||
<template v-if="slots.bottomInfo" #bottomInfo="{ date }">
|
||||
<slot name="bottomInfo" :date="date" />
|
||||
</template>
|
||||
|
||||
<template v-if="slots.footer" #footer="{ date }">
|
||||
<slot name="footer" :date="date" />
|
||||
</template>
|
||||
</NutCalendarItem>
|
||||
</template>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@import "./index";
|
||||
</style>
|
||||
1
uni_modules/nutui-uni/components/calendar/index.scss
Normal file
1
uni_modules/nutui-uni/components/calendar/index.scss
Normal file
@@ -0,0 +1 @@
|
||||
@import "../popup/index";
|
||||
1
uni_modules/nutui-uni/components/calendar/index.ts
Normal file
1
uni_modules/nutui-uni/components/calendar/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export * from './calendar'
|
||||
Reference in New Issue
Block a user