mirror of https://github.com/nocodb/nocodb
Braks
2 years ago
committed by
GitHub
31 changed files with 225 additions and 129 deletions
@ -0,0 +1,26 @@
|
||||
<script lang="ts" setup> |
||||
import { useExpandedFormDetached } from '#imports' |
||||
|
||||
const { states, close } = useExpandedFormDetached() |
||||
|
||||
const shouldClose = (isVisible: boolean, i: number) => { |
||||
if (!isVisible) close(i) |
||||
} |
||||
</script> |
||||
|
||||
<template> |
||||
<template v-for="(state, i) of states" :key="`expanded-form-${i}`"> |
||||
<LazySmartsheetExpandedForm |
||||
v-model="state.isOpen" |
||||
:row="state.row" |
||||
:load-row="state.loadRow" |
||||
:meta="state.meta" |
||||
:row-id="state.rowId" |
||||
:state="state.state" |
||||
:use-meta-fields="state.useMetaFields" |
||||
:view="state.view" |
||||
@update:model-value="shouldClose($event, i)" |
||||
@cancel="close(i)" |
||||
/> |
||||
</template> |
||||
</template> |
||||
@ -0,0 +1,44 @@
|
||||
import type { TableType, ViewType } from 'nocodb-sdk' |
||||
import { createEventHook, ref, useInjectionState } from '#imports' |
||||
import type { Row } from '~/lib' |
||||
|
||||
interface UseExpandedFormDetachedProps { |
||||
'isOpen'?: boolean |
||||
'row': Row | null |
||||
'state'?: Record<string, any> | null |
||||
'meta': TableType |
||||
'loadRow'?: boolean |
||||
'useMetaFields'?: boolean |
||||
'rowId'?: string |
||||
'view'?: ViewType |
||||
'onCancel'?: Function |
||||
'onUpdate:modelValue'?: Function |
||||
} |
||||
|
||||
const [setup, use] = useInjectionState(() => { |
||||
return ref<UseExpandedFormDetachedProps[]>([]) |
||||
}) |
||||
|
||||
export function useExpandedFormDetached() { |
||||
let states = use()! |
||||
|
||||
if (!states) { |
||||
states = setup() |
||||
} |
||||
|
||||
const closeHook = createEventHook<void>() |
||||
|
||||
const index = ref(-1) |
||||
|
||||
const open = (props: UseExpandedFormDetachedProps) => { |
||||
states.value.push(props) |
||||
index.value = states.value.length - 1 |
||||
} |
||||
|
||||
const close = (i?: number) => { |
||||
states.value.splice(i || index.value, 1) |
||||
if (index.value === i || !i) closeHook.trigger() |
||||
} |
||||
|
||||
return { states, open, close, onClose: closeHook.on } |
||||
} |
||||
Loading…
Reference in new issue