forked from opentiny/tiny-vue
styles(drawer): [drawer] add drawer types (#1318)
This commit is contained in:
parent
301de64902
commit
fc10ea4cf6
|
@ -1,15 +1,16 @@
|
|||
import debounce from '../common/deps/debounce'
|
||||
import { addClass, removeClass } from '../common/deps/dom'
|
||||
import type { IDrawerState, IDrawerProps, IDrawerApi, IDrawerCT, ISharedRenderlessParamUtils } from '@/types'
|
||||
|
||||
export const close =
|
||||
({ emit, state }) =>
|
||||
({ emit, state }: { emit: ISharedRenderlessParamUtils['emit']; state: IDrawerState }) =>
|
||||
() => {
|
||||
state.toggle = false
|
||||
emit('close', state)
|
||||
}
|
||||
|
||||
export const watchVisible =
|
||||
({ state }) =>
|
||||
({ state }: { state: IDrawerState }) =>
|
||||
(bool) => {
|
||||
setTimeout(() => {
|
||||
state.toggle = bool
|
||||
|
@ -17,22 +18,22 @@ export const watchVisible =
|
|||
}
|
||||
|
||||
export const watchToggle =
|
||||
({ emit }) =>
|
||||
(bool) => {
|
||||
({ emit }: { emit: ISharedRenderlessParamUtils['emit'] }) =>
|
||||
(bool: boolean) => {
|
||||
setTimeout(() => {
|
||||
emit('update:visible', bool)
|
||||
}, 0)
|
||||
}
|
||||
|
||||
export const confirm =
|
||||
({ emit, state }) =>
|
||||
({ emit, state }: { emit: ISharedRenderlessParamUtils['emit']; state: IDrawerState }) =>
|
||||
() => {
|
||||
state.toggle = false
|
||||
emit('confirm', state)
|
||||
}
|
||||
|
||||
export const mousedown =
|
||||
({ state, vm }) =>
|
||||
({ state, vm }: { vm: ISharedRenderlessParamUtils<IDrawerCT>['vm']; state: IDrawerState }) =>
|
||||
(event) => {
|
||||
event.preventDefault()
|
||||
|
||||
|
@ -44,7 +45,7 @@ export const mousedown =
|
|||
state.dragEvent.offsetWidth = drawerBox.offsetWidth
|
||||
}
|
||||
|
||||
export const mousemove = ({ state, props }) =>
|
||||
export const mousemove = ({ state, props }: { state: IDrawerState; props: IDrawerProps }) =>
|
||||
debounce(1, (event) => {
|
||||
if (!state.dragEvent.isDrag) {
|
||||
return
|
||||
|
@ -67,21 +68,21 @@ export const mousemove = ({ state, props }) =>
|
|||
} else if (placement === 'right') {
|
||||
state.width = offsetWidth - offsetX
|
||||
}
|
||||
})
|
||||
}) as Parameters<Document['removeEventListener']>['1']
|
||||
|
||||
export const mouseup =
|
||||
({ state }) =>
|
||||
({ state }: { state: IDrawerState }) =>
|
||||
() => {
|
||||
if (!state.dragEvent.isDrag) {
|
||||
return
|
||||
}
|
||||
|
||||
event.preventDefault()
|
||||
;(event as any).preventDefault()
|
||||
state.dragEvent.isDrag = false
|
||||
}
|
||||
|
||||
export const addDragEvent =
|
||||
({ api, vm }) =>
|
||||
({ api, vm }: { api: IDrawerApi; vm: ISharedRenderlessParamUtils<IDrawerCT>['vm'] }) =>
|
||||
() => {
|
||||
const el = vm.$refs.dragBar
|
||||
|
||||
|
@ -95,7 +96,7 @@ export const addDragEvent =
|
|||
}
|
||||
|
||||
export const removeDragEvent =
|
||||
({ api, vm }) =>
|
||||
({ api, vm }: { api: IDrawerApi; vm: ISharedRenderlessParamUtils<IDrawerCT>['vm'] }) =>
|
||||
() => {
|
||||
const el = vm.$refs.dragBar
|
||||
|
||||
|
@ -117,8 +118,8 @@ export const hideScrollbar = (lockScrollClass) => () => {
|
|||
}
|
||||
|
||||
export const watchVisibleNotImmediate =
|
||||
({ api, props }) =>
|
||||
(visible) => {
|
||||
({ api, props }: { api: IDrawerApi; props: IDrawerProps }) =>
|
||||
(visible: boolean) => {
|
||||
if (props.lockScroll) {
|
||||
visible ? api.showScrollbar() : api.hideScrollbar()
|
||||
}
|
||||
|
|
|
@ -12,18 +12,26 @@ import {
|
|||
hideScrollbar,
|
||||
watchVisibleNotImmediate
|
||||
} from './index'
|
||||
import type {
|
||||
IDrawerProps,
|
||||
IDrawerState,
|
||||
IDrawerApi,
|
||||
ISharedRenderlessParamUtils,
|
||||
ISharedRenderlessFunctionParams,
|
||||
IDrawerCT
|
||||
} from '@/types'
|
||||
|
||||
export const api = ['state', 'close', 'confirm']
|
||||
|
||||
export const renderless = (
|
||||
props,
|
||||
{ reactive, watch, onMounted, onBeforeUnmount, computed },
|
||||
{ emit, vm, mode, constants }
|
||||
props: IDrawerProps,
|
||||
{ reactive, watch, onMounted, onBeforeUnmount, computed }: ISharedRenderlessFunctionParams<null>,
|
||||
{ emit, vm, mode, constants }: ISharedRenderlessParamUtils<IDrawerCT>
|
||||
) => {
|
||||
const lockScrollClass = constants.SCROLL_LOCK_CLASS(mode)
|
||||
|
||||
const api = {}
|
||||
const state = reactive({
|
||||
const api: Partial<IDrawerApi> = {}
|
||||
const state = reactive<IDrawerState>({
|
||||
toggle: false,
|
||||
width: 0,
|
||||
dragEvent: { x: 0, isDrag: false, offsetWidth: 0 },
|
||||
|
@ -37,29 +45,29 @@ export const renderless = (
|
|||
mousedown: mousedown({ state, vm }),
|
||||
mousemove: mousemove({ state, props }),
|
||||
mouseup: mouseup({ state }),
|
||||
addDragEvent: addDragEvent({ api, vm }),
|
||||
removeDragEvent: removeDragEvent({ api, vm }),
|
||||
addDragEvent: addDragEvent({ api: api as IDrawerApi, vm }),
|
||||
removeDragEvent: removeDragEvent({ api: api as IDrawerApi, vm }),
|
||||
watchVisible: watchVisible({ state }),
|
||||
watchToggle: watchToggle({ emit }),
|
||||
showScrollbar: showScrollbar(lockScrollClass),
|
||||
hideScrollbar: hideScrollbar(lockScrollClass),
|
||||
watchVisibleNotImmediate: watchVisibleNotImmediate({ api, props })
|
||||
watchVisibleNotImmediate: watchVisibleNotImmediate({ api: api as IDrawerApi, props })
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
props.dragable && api.addDragEvent()
|
||||
props.dragable && (api as IDrawerApi).addDragEvent()
|
||||
if (props.lockScroll && props.visible) {
|
||||
api.showScrollbar()
|
||||
;(api as IDrawerApi).showScrollbar()
|
||||
}
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
props.dragable && api.removeDragEvent()
|
||||
props.lockScroll && api.hideScrollbar()
|
||||
props.dragable && (api as IDrawerApi).removeDragEvent()
|
||||
props.lockScroll && (api as IDrawerApi).hideScrollbar()
|
||||
})
|
||||
|
||||
watch(() => props.visible, api.watchVisible, { immediate: true })
|
||||
watch(() => state.toggle, api.watchToggle)
|
||||
watch(() => props.visible, (api as IDrawerApi).watchVisible, { immediate: true })
|
||||
watch(() => state.toggle, (api as IDrawerApi).watchToggle)
|
||||
watch(
|
||||
() => props.width,
|
||||
() => (state.width = 0)
|
||||
|
|
|
@ -0,0 +1,40 @@
|
|||
import type { ExtractPropTypes, ComputedRef } from 'vue'
|
||||
import type { drawerProps } from '@/drawer/src'
|
||||
import type {
|
||||
close,
|
||||
watchVisible,
|
||||
watchToggle,
|
||||
confirm,
|
||||
mousedown,
|
||||
mouseup,
|
||||
mousemove,
|
||||
addDragEvent,
|
||||
removeDragEvent,
|
||||
showScrollbar,
|
||||
hideScrollbar,
|
||||
watchVisibleNotImmediate
|
||||
} from '../src/drawer'
|
||||
|
||||
export interface IDrawerState {
|
||||
toggle: boolean
|
||||
width: number
|
||||
dragEvent: { x: number; isDrag: boolean; offsetWidth: number }
|
||||
computedWidth: ComputedRef<string>
|
||||
}
|
||||
export type IDrawerProps = ExtractPropTypes<typeof drawerProps>
|
||||
export interface IDrawerApi {
|
||||
state: IDrawerState
|
||||
confirm: ReturnType<typeof confirm>
|
||||
close: ReturnType<typeof close>
|
||||
mousemove: ReturnType<typeof mousemove>
|
||||
mouseup: ReturnType<typeof mouseup>
|
||||
mousedown: ReturnType<typeof mousedown>
|
||||
addDragEvent: ReturnType<typeof addDragEvent>
|
||||
removeDragEvent: ReturnType<typeof removeDragEvent>
|
||||
watchVisible: ReturnType<typeof watchVisible>
|
||||
watchToggle: ReturnType<typeof watchToggle>
|
||||
showScrollbar: ReturnType<typeof showScrollbar>
|
||||
hideScrollbar: ReturnType<typeof hideScrollbar>
|
||||
watchVisibleNotImmediate: ReturnType<typeof watchVisibleNotImmediate>
|
||||
}
|
||||
export type IDrawerCT = ReturnType<typeof drawerProps._constants.default>
|
|
@ -2,70 +2,70 @@ import { $props, $prefix, $setup } from '@opentiny/vue-common'
|
|||
import template from 'virtual-template?pc|mobile-first'
|
||||
|
||||
const $constants = {
|
||||
SCROLL_LOCK_CLASS(mode) {
|
||||
SCROLL_LOCK_CLASS(mode: string) {
|
||||
const scrollLockClasses = {
|
||||
'mobile-first': 'overflow-hidden'
|
||||
}
|
||||
return scrollLockClasses[mode] || ''
|
||||
return (scrollLockClasses[mode] || '') as string
|
||||
}
|
||||
}
|
||||
export const drawerProps = {
|
||||
...$props,
|
||||
_constants: {
|
||||
type: Object,
|
||||
default: () => $constants
|
||||
},
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
customClass: [String, Object, Array],
|
||||
placement: {
|
||||
type: String,
|
||||
default: 'right'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '500px'
|
||||
},
|
||||
title: String,
|
||||
showClose: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showHeader: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showFooter: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
mask: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
maskClosable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
dragable: Boolean,
|
||||
lockScroll: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
flex: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
zIndex: {
|
||||
type: Number,
|
||||
default: 2000
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
name: $prefix + 'Drawer',
|
||||
props: {
|
||||
...$props,
|
||||
_constants: {
|
||||
type: Object,
|
||||
default: () => $constants
|
||||
},
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
customClass: [String, Object, Array],
|
||||
placement: {
|
||||
type: String,
|
||||
default: 'right'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '500px'
|
||||
},
|
||||
title: String,
|
||||
showClose: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showHeader: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showFooter: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
mask: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
maskClosable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
dragable: Boolean,
|
||||
lockScroll: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
flex: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
zIndex: {
|
||||
type: Number,
|
||||
default: 2000
|
||||
}
|
||||
},
|
||||
props: drawerProps,
|
||||
setup(props, context) {
|
||||
return $setup({ props, context, template })
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue