Browse Source

fix: ui form

pull/6500/head
sreehari jayaraj 1 year ago
parent
commit
c9ff7fd9ba
  1. 8
      packages/nc-gui/components/cell/TextArea.vue
  2. 4
      packages/nc-gui/components/smartsheet/Cell.vue
  3. 2
      packages/nc-gui/components/smartsheet/Form.vue
  4. 6
      packages/nc-gui/components/smartsheet/header/Cell.vue

8
packages/nc-gui/components/cell/TextArea.vue

@ -28,6 +28,8 @@ const isEditColumn = inject(EditColumnInj, ref(false))
const rowHeight = inject(RowHeightInj, ref(1 as const)) const rowHeight = inject(RowHeightInj, ref(1 as const))
const isForm = inject(IsFormInj, ref(false))
const { showNull } = useGlobal() const { showNull } = useGlobal()
const vModel = useVModel(props, 'modelValue', emits, { defaultValue: '' }) const vModel = useVModel(props, 'modelValue', emits, { defaultValue: '' })
@ -72,6 +74,7 @@ onClickOutside(inputWrapperRef, (e) => {
:class="{ :class="{
'min-h-10': rowHeight !== 1, 'min-h-10': rowHeight !== 1,
'min-h-6.5': rowHeight === 1, 'min-h-6.5': rowHeight === 1,
'h-full': isForm,
}" }"
> >
<textarea <textarea
@ -80,7 +83,10 @@ onClickOutside(inputWrapperRef, (e) => {
v-model="vModel" v-model="vModel"
rows="4" rows="4"
class="h-full w-full outline-none border-none" class="h-full w-full outline-none border-none"
:class="`${editEnabled ? 'p-2' : ''}`" :class="{
'p-2': editEnabled,
'py-1 h-full': isForm,
}"
:style="{ :style="{
minHeight: `${height}px`, minHeight: `${height}px`,
}" }"

4
packages/nc-gui/components/smartsheet/Cell.vue

@ -48,7 +48,6 @@ import {
useDebounceFn, useDebounceFn,
useProject, useProject,
useSmartsheetRowStoreOrThrow, useSmartsheetRowStoreOrThrow,
useVModel,
} from '#imports' } from '#imports'
interface Props { interface Props {
@ -205,7 +204,8 @@ onUnmounted(() => {
'nc-grid-numeric-cell-right': isGrid && isNumericField && !isEditColumnMenu && !isForm && !isExpandedFormOpen, 'nc-grid-numeric-cell-right': isGrid && isNumericField && !isEditColumnMenu && !isForm && !isExpandedFormOpen,
'h-10': isForm && !isSurveyForm && !isAttachment(column) && !props.virtual, 'h-10': isForm && !isSurveyForm && !isAttachment(column) && !props.virtual,
'nc-grid-numeric-cell-left': (isForm && isNumericField && isExpandedFormOpen) || isEditColumnMenu, 'nc-grid-numeric-cell-left': (isForm && isNumericField && isExpandedFormOpen) || isEditColumnMenu,
'h-40': column.uidt === 'LongText' && props.editEnabled, '!min-h-40': isTextArea(column) && props.editEnabled,
'!border-2': props.editEnabled,
}, },
]" ]"
@keydown.enter.exact="navigate(NavigateDir.NEXT, $event)" @keydown.enter.exact="navigate(NavigateDir.NEXT, $event)"

2
packages/nc-gui/components/smartsheet/Form.vue

@ -691,7 +691,7 @@ watch(view, (nextView) => {
</a-input> </a-input>
</a-form-item> </a-form-item>
<a-form-item class="mt-2 mb-0 w-1/2 !mb-1"> <a-form-item class="mt-2 mb-0 w-1/2">
<a-input <a-input
v-model:value="element.description" v-model:value="element.description"
type="text" type="text"

6
packages/nc-gui/components/smartsheet/header/Cell.vue

@ -66,9 +66,8 @@ const openDropDown = () => {
<SmartsheetHeaderCellIcon v-if="column && !props.hideIcon" /> <SmartsheetHeaderCellIcon v-if="column && !props.hideIcon" />
<div <div
v-if="column" v-if="column"
class="name pl-1 !truncate" class="name pl-1"
:class="{ 'cursor-pointer pt-0.25': !isForm && isUIAllowed('fieldEdit') && !hideMenu }" :class="{ 'cursor-pointer pt-0.25': !isForm && isUIAllowed('fieldEdit') && !hideMenu }"
style="white-space: pre-line"
:title="column.title" :title="column.title"
> >
{{ column.title }} {{ column.title }}
@ -114,6 +113,7 @@ const openDropDown = () => {
<style scoped> <style scoped>
.name { .name {
max-width: calc(100% - 10px); max-width: calc(100% - 10px);
word-break: break-all; word-break: break-word;
white-space: pre-line;
} }
</style> </style>

Loading…
Cancel
Save