多维表格
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

95 lines
2.5 KiB

Nc feat/form view builder field settings in right pannel and fixed column delete modal virtual cell icon issue (#7927) * feat(nc-gui): form field in right pannel setup * fix(nc-gui): inline form field reorder issue * fix(nc-gui): make edit form field right panel scrollable * fix(nc-gui): form field limit option hide btn focus box shadow style issue * fix(nc-gui): add support to edit form column in form view builder * feat(nc-gui): added form field header menu dropdown * fix(nc-gui): tab issue in form builder * feat(nc-gui): add support to edit column from form builder itself * fix(nc-gui): wrong virtual cell icon in column delete modal * feat(nc-gui): column edit, hide, delete option in form builder field settings * fix(nc-gui): move all form field settings radio btns to the right side * chore(nc-gui): lint * chore(nc-gui): lint errors * chore(nc-gui): lint * fix(nc-gui): update 'change icon color' text case * fix(nc-gui): small changes * fix(nc-gui): form builder side panel field div key issue * fix(nc-gui): form view outsideclick fild toggle issue * chore(nc-gui): lint * fix(nc-gui): hide select dropdown in value is selected and show if value is not selected * fix(nc-gui): suggested review changes * fix(nc-gui): make form field rich text options sticky at bottom * chore(nc-gui): lint * fix(nc-gui): small changes * fix(nc-gui): lazy import richtext component * fix(nc-gui): set the max height for form rich text fields * fix(nc-gui): move form settings switch inputs to the right side * fix(nc-gui): move form select type field layout option to appearance settings section * fix(nc-gui): select form active field text on focus * fix(nc-gui): form rich text element menu option tabindex issue * fix(nc-gui): form search field input autofill issue * fix(nc-gui): update position of rich text menu option of form description * feat(nc-gui): adjustable form view sidebar width * chore(nc-gui): lint * fix(nc-gui): typo mistake * fix(nc-gui): PR review changes
9 months ago
<script lang="ts" setup>
import { Pane, Splitpanes } from 'splitpanes'
import 'splitpanes/dist/splitpanes.css'
const { leftSidebarWidth, windowSize, formRightSidebarState, formRightSidebarWidthPercent } = storeToRefs(useSidebarStore())
const formPreviewSize = computed(() => 100 - formRightSidebarWidthPercent.value)
function onResize(widthPercent: any) {
const sidebarWidth = (widthPercent * (windowSize.value - leftSidebarWidth.value)) / 100
if (sidebarWidth > formRightSidebarState.value.maxWidth) {
formRightSidebarState.value.width = formRightSidebarState.value.maxWidth
} else if (sidebarWidth < formRightSidebarState.value.minWidth) {
formRightSidebarState.value.width = formRightSidebarState.value.minWidth
} else {
formRightSidebarState.value.width = sidebarWidth
}
}
const normalizeSidebarWidth = computed(() => {
if (formRightSidebarState.value.width > formRightSidebarState.value.maxWidth) {
return formRightSidebarState.value.maxWidth
} else if (formRightSidebarState.value.width < formRightSidebarState.value.minWidth) {
return formRightSidebarState.value.minWidth
} else {
return formRightSidebarState.value.width
}
})
</script>
<template>
<Splitpanes
class="nc-form-right-sidebar-content-resizable-wrapper w-full h-full"
@resize="(event: any) => onResize(event[1].size)"
>
<Pane :size="formPreviewSize" class="flex-1 h-full">
<slot name="preview" />
</Pane>
<Pane
min-size="15%"
class="nc-sidebar-splitpane relative"
:size="formRightSidebarWidthPercent"
:style="{
minWidth: `${formRightSidebarState.minWidth}px !important`,
maxWidth: `${normalizeSidebarWidth}px !important`,
}"
>
<slot name="sidebar" />
</Pane>
</Splitpanes>
</template>
<style lang="scss">
/** Split pane CSS */
.nc-form-right-sidebar-content-resizable-wrapper > {
.splitpanes__splitter {
@apply !w-0 relative overflow-visible;
}
.splitpanes__splitter:before {
@apply bg-gray-200 w-0.25 absolute left-0 top-0 h-full z-40;
content: '';
}
.splitpanes__splitter:hover:before {
@apply bg-scrollbar;
width: 3px !important;
left: 0px;
}
.splitpanes--dragging .splitpanes__splitter:before {
@apply bg-scrollbar;
width: 3px !important;
left: 0px;
}
.splitpanes--dragging .splitpanes__splitter {
@apply w-1 mr-0;
}
}
.splitpanes__pane {
transition: width 0.15s ease-in-out !important;
}
.splitpanes--dragging {
cursor: col-resize;
> .splitpanes__pane {
transition: none !important;
}
}
</style>