This is an automated email from the ASF dual-hosted git repository.
nicholasjiang pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/paimon-webui.git
The following commit(s) were added to refs/heads/main by this push:
new a5a849ea [Bugfix] Fix draggable (#355)
a5a849ea is described below
commit a5a849ea3724129f15a939279164cad46ea7c205
Author: xiaomo <[email protected]>
AuthorDate: Wed Jun 12 13:29:05 2024 +0800
[Bugfix] Fix draggable (#355)
---
.../metadata/components/columns-form/index.tsx | 2 +-
.../components/table-column-content/index.tsx | 30 +++++++++++++++-------
.../views/metadata/components/table-form/index.tsx | 2 +-
3 files changed, 23 insertions(+), 11 deletions(-)
diff --git a/paimon-web-ui/src/views/metadata/components/columns-form/index.tsx
b/paimon-web-ui/src/views/metadata/components/columns-form/index.tsx
index 086b2f50..2759484d 100644
--- a/paimon-web-ui/src/views/metadata/components/columns-form/index.tsx
+++ b/paimon-web-ui/src/views/metadata/components/columns-form/index.tsx
@@ -160,7 +160,7 @@ export default defineComponent({
model={this.formValue}
>
<ColumnFormContent
- v-model:data={this.formValue.tableColumns}
+ v-model:modelValue={this.formValue.tableColumns}
isEdit={this.isEdit}
/>
</n-form>
diff --git
a/paimon-web-ui/src/views/metadata/components/table-column-content/index.tsx
b/paimon-web-ui/src/views/metadata/components/table-column-content/index.tsx
index b4abf79c..06843067 100644
--- a/paimon-web-ui/src/views/metadata/components/table-column-content/index.tsx
+++ b/paimon-web-ui/src/views/metadata/components/table-column-content/index.tsx
@@ -17,12 +17,12 @@ under the License. */
import type { DataTableColumns } from 'naive-ui'
import { UnorderedListOutlined } from '@vicons/antd'
-
+import { VueDraggable } from 'vue-draggable-plus'
import { dataTypeOptions, hasEndLength, hasLength } from './constant'
import type { ColumnDTO } from '@/api/models/catalog'
const props = {
- 'data': {
+ 'modelValue': {
type: Array as PropType<ColumnDTO[]>,
default: () => [],
},
@@ -30,7 +30,7 @@ const props = {
type: Boolean as PropType<boolean>,
default: false,
},
- 'onUpdate:data': [Function, Array] as PropType<((value: ColumnDTO[]) =>
void) | undefined>,
+ 'onUpdate:modelValue': [Function, Array] as PropType<((value: ColumnDTO[])
=> void) | undefined>,
}
export const newField: ColumnDTO = {
@@ -53,14 +53,14 @@ export default defineComponent({
const { t } = useLocaleHooks()
const onDelete = (i: number) => {
- const _data = toRaw(props.data)
+ const _data = toRaw(props.modelValue)
if (_data.length <= 1)
return
- props.data.splice(i, 1)
+ props.modelValue.splice(i, 1)
}
- watch(props.data, (newData) => {
+ watch(props.modelValue, (newData) => {
newData.forEach((item, index) => {
item.sort = index
})
@@ -252,9 +252,21 @@ export default defineComponent({
},
render() {
return (
- <vue-draggable v-model:value={this.data} animation={150}
handle=".drag-handle" target=".n-data-table-tbody">
- <n-data-table columns={this.columns} data={this.data} style={{
marginBottom: '24px' }} />
- </vue-draggable>
+ h(
+ VueDraggable,
+ {
+ 'modelValue': this.modelValue,
+ 'onUpdate:modelValue': (value: any) => {
+ this.$props['onUpdate:modelValue']?.(value)
+ },
+ 'animation': 150,
+ 'handle': '.drag-handle',
+ 'target': '.n-data-table-tbody',
+ },
+ {
+ default: () => <n-data-table columns={this.columns}
data={this.modelValue} style={{ marginBottom: '24px' }} />,
+ },
+ )
)
},
})
diff --git a/paimon-web-ui/src/views/metadata/components/table-form/index.tsx
b/paimon-web-ui/src/views/metadata/components/table-form/index.tsx
index b2f31f63..5d3673a7 100644
--- a/paimon-web-ui/src/views/metadata/components/table-form/index.tsx
+++ b/paimon-web-ui/src/views/metadata/components/table-form/index.tsx
@@ -174,7 +174,7 @@ export default defineComponent({
</n-button>
</n-space>
<ColumnFormContent
- v-model:data={this.formValue.tableColumns}
+ v-model:modelValue={this.formValue.tableColumns}
/>
<div
class={styles.form_title}>{this.t('metadata.partition_columns')}</div>
<n-form-item showLabel={false} path="type">
