vue3-django 0.1.13 → 0.1.15

package/docs/migration.md

@@ -201,6 +201,10 @@ const actions = [
 `#actions` 插槽可替换操作区域。布局转发 `action-done(result, action)` 和 `error`。
 其他位置也可直接使用 `<Actions>`；抽屉操作需要位于 Layout 子树中。
 
+表单 `widget: 'textarea'` 沿用原版默认自适应高度：最少 8 行、最多 24 行。
+通过字段配置 `autosize: { minRows: 4, maxRows: 12 }` 自定义行数范围，
+也可设为 `true` 随内容自动增高，或 `false` 关闭自适应高度。
+
 JSON 表单组件已迁移到 Vue 3，可从包入口导入 `JsonInput`、`JsonEditor`。
 字段配置支持 `widget: 'JsonInput'` / `widget: 'JsonEditor'`（也支持 `json-input`、
 `json-editor`），或直接传入组件。使用 `v-model` / `update:modelValue` 替代旧版

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue3-django",
-  "version": "0.1.13",
+  "version": "0.1.15",
   "description": "DRF metadata-driven Vue 3 framework",
   "repository": {
     "type": "git",

package/src/components/form/Field.vue

@@ -18,6 +18,12 @@ const props = defineProps({
 const emit = defineEmits(['update:modelValue', 'uploading', 'error'])
 const value = computed({ get: () => props.modelValue, set: (v) => emit('update:modelValue', v) })
 const numberType = computed(() => ['integer', 'decimal', 'float'].includes(props.field.type))
+// ElInputNumber's numeric step also drives its buttons. Set the native constraint
+// separately so decimal input accepts any precision without breaking the controls.
+function setNumberStep(el, { value }) {
+  el.querySelector('input')?.setAttribute('step', value)
+}
+const vNumberStep = { mounted: setNumberStep, updated: setNumberStep }
 const widget = computed(() => toRaw(props.field.widget))
 const jsonWidget = computed(() => {
   const name =
@@ -154,6 +160,7 @@ function mobileInput(v) {
   />
   <ElInputNumber
     v-else-if="numberType"
+    v-number-step="field.type === 'integer' ? '1' : 'any'"
     v-model="value"
     controls-position="right"
     :precision="field.type === 'integer' ? 0 : undefined"
@@ -173,6 +180,9 @@ function mobileInput(v) {
     v-else
     v-model="value"
     :type="['textarea', 'password'].includes(field.widget) ? field.widget : 'text'"
+    :autosize="
+      field.widget === 'textarea' ? (field.autosize ?? { minRows: 8, maxRows: 24 }) : false
+    "
     :maxlength="field.max_length"
     :autocomplete="field.autocomplete"
     :placeholder="field.placeholder ?? [field.label, field.help_text].filter(Boolean).join('\n')"

package/src/views/model/edit.vue

@@ -17,6 +17,7 @@ const { registry, revisions, store } = useDjango()
 const appModel = computed(() => props.appModel ?? route.path.split('/').slice(1, 3).join('.'))
 const id = computed(() => (props.mode === 'create' ? undefined : (props.id ?? route.params.id)))
 const data = ref({})
+const savedData = ref({})
 const views = shallowRef()
 const error = ref('')
 const form = ref()
@@ -28,13 +29,37 @@ const parent = computed(() => ({
   viewsConfig: views.value,
 }))
 const panels = computed(() => views.value?.panels ?? views.value?.pannels ?? [])
-const persisted = computed(() => parent.value.id != null)
+const relationParent = computed(() => ({
+  ...registry.get(appModel.value),
+  id: savedData.value[registry.getConfig(appModel.value).idField ?? 'id'] ?? id.value,
+  data: savedData.value,
+  viewsConfig: views.value,
+}))
+const persisted = computed(() => relationParent.value.id != null)
+function snapshot(value) {
+  // API data can contain nested objects; drafts must not mutate the saved snapshot.
+  savedData.value = JSON.parse(JSON.stringify(value))
+}
+function loaded(model) {
+  snapshot(data.value)
+  emit('loaded', model)
+}
+function parentUpdated(value) {
+  const changes = Object.fromEntries(
+    Object.entries(value).filter(
+      ([key, item]) => JSON.stringify(item) !== JSON.stringify(savedData.value[key]),
+    ),
+  )
+  data.value = { ...data.value, ...changes }
+  snapshot(value)
+}
 let generation = 0
 watch(
   () => [appModel.value, id.value],
   async () => {
     const current = ++generation
     data.value = {}
+    savedData.value = {}
     views.value = undefined
     error.value = ''
     activePanels.value = [0]
@@ -52,6 +77,7 @@ watch(
 )
 onBeforeUnmount(() => generation++)
 async function posted(event) {
+  snapshot({ ...savedData.value, ...event.data })
   if (store) store.invalidate(appModel.value)
   else if (revisions) revisions[appModel.value] = (revisions[appModel.value] ?? 0) + 1
   emit('form-posted', event)
@@ -59,6 +85,7 @@ async function posted(event) {
   if (event.intent === 'saveAndAnother') {
     const wasCreating = id.value == null
     data.value = {}
+    savedData.value = {}
     await router.replace(`/${appModel.value.replace('.', '/')}/add/`)
     if (wasCreating) await form.value?.load()
   } else if (id.value == null && event.data[key] != null) {
@@ -90,7 +117,7 @@ defineExpose({ submit: () => form.value?.submit(), load: () => form.value?.load(
     :app-model="appModel"
     :id="id"
     @form-posted="posted"
-    @loaded="emit('loaded', $event)"
+    @loaded="loaded"
     @error="emit('error', $event)"
   >
     <template
@@ -122,8 +149,8 @@ defineExpose({ submit: () => form.value?.submit(), load: () => form.value?.load(
           </ElCollapseItem>
         </ElCollapse>
         <ModelRelations
-          :parent="parent"
-          @parent-updated="data = $event"
+          :parent="relationParent"
+          @parent-updated="parentUpdated"
           @edit="editRelation"
           @error="emit('error', $event)"
         />