vome-core 0.0.1

package/src/admin/crud/vm-upsert.vue

@@ -0,0 +1,530 @@
+<template>
+  <Dialog
+    :open="crud.upsertVisible.value"
+    @update:open="(v) => (!v ? crud.upsertClose() : undefined)"
+  >
+    <DialogContent
+      shell="crud"
+      class="vm-crud-upsert"
+      :class="{ 'is-empty': isBodyEmpty }"
+      @pointer-down-outside="onPointerDownOutside"
+      @focus-outside="onFocusOutside"
+      @interact-outside="onInteractOutside"
+    >
+      <DialogHeader class="vm-crud-upsert__head">
+        <DialogTitle class="vm-crud-upsert__title">{{ titleText }}</DialogTitle>
+      </DialogHeader>
+      <div class="vm-crud-upsert__body">
+        <template v-if="!isBodyEmpty">
+          <div
+            v-for="item in formItemsBeforeSlot"
+            :key="item.prop"
+            class="vm-crud-upsert__field"
+            :class="{ 'is-error': fieldErrors[item.prop] }"
+            :style="{ gridColumn: `span ${itemSpan(item)}` }"
+          >
+            <Label class="vm-crud-upsert__label">
+              {{ item.label }}
+              <span v-if="item.required" class="vm-crud-upsert__req">*</span>
+            </Label>
+
+            <vm-radio
+              v-if="itemType(item) === 'radio'"
+              :name="`upsert-${item.prop}`"
+              :options="resolveOptions(item.options)"
+              :model-value="String(crud.upsertForm.value[item.prop] ?? '')"
+              :disabled="isInfo"
+              @update:model-value="(v) => setField(item.prop, v)"
+            />
+
+            <component
+              :is="resolveField(item)"
+              v-else-if="resolveField(item)"
+              :class="fieldClass(item)"
+              v-bind="fieldProps(item)"
+              :model-value="crud.upsertForm.value[item.prop]"
+              :disabled="isInfo"
+              @update:model-value="(v: unknown) => setField(item.prop, v)"
+            />
+
+            <Input
+              v-else
+              class="vm-crud-upsert__control"
+              :placeholder="item.placeholder"
+              :disabled="isInfo"
+              :aria-invalid="fieldErrors[item.prop] ? true : undefined"
+              :model-value="String(crud.upsertForm.value[item.prop] ?? '')"
+              @update:model-value="(v) => setField(item.prop, v)"
+            />
+            <p v-if="fieldErrors[item.prop]" class="vm-crud-upsert__error">
+              {{ fieldErrors[item.prop] }}
+            </p>
+          </div>
+          <slot :form="crud.upsertForm.value" />
+          <div
+            v-for="item in formItemsAfterSlot"
+            :key="item.prop"
+            class="vm-crud-upsert__field"
+            :class="{ 'is-error': fieldErrors[item.prop] }"
+            :style="{ gridColumn: `span ${itemSpan(item)}` }"
+          >
+            <Label class="vm-crud-upsert__label">
+              {{ item.label }}
+              <span v-if="item.required" class="vm-crud-upsert__req">*</span>
+            </Label>
+
+            <textarea
+              class="vm-crud-upsert__textarea"
+              :placeholder="item.placeholder"
+              :disabled="isInfo"
+              :value="String(crud.upsertForm.value[item.prop] ?? '')"
+              @input="setField(item.prop, ($event.target as HTMLTextAreaElement).value)"
+            />
+            <p v-if="fieldErrors[item.prop]" class="vm-crud-upsert__error">
+              {{ fieldErrors[item.prop] }}
+            </p>
+          </div>
+        </template>
+        <div v-else class="vm-crud-upsert__empty">
+          <vm-empty kind="暂无内容" />
+        </div>
+      </div>
+      <DialogFooter class="vm-crud-upsert__foot">
+        <button
+          type="button"
+          class="vm-crud-upsert__btn is-ghost"
+          :disabled="submitting"
+          @click="crud.upsertClose()"
+        >
+          {{ crud.dict.label.close }}
+        </button>
+        <button
+          v-if="showConfirm"
+          type="button"
+          class="vm-crud-upsert__btn is-primary"
+          :disabled="submitting"
+          @click="onSubmit"
+        >
+          {{ submitting ? '提交中…' : crud.dict.label.confirm }}
+        </button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { useCrud } from './useCrud'
+import { injectUpsertOptions } from './key'
+import { getCrudStyle } from './style'
+import { resolveCrudComponent } from './registry'
+import { applySetRules, validateFormFields } from './validate'
+import { resolveFormSpan, useFormCols } from './span'
+import { isDialogFloatTarget } from '../lib/dialog-float'
+defineOptions({ name: 'vm-upsert' })
+
+const props = withDefaults(
+  defineProps<{
+    items?: CrudFormItem[]
+    title?: string
+  }>(),
+  {},
+)
+
+const slots = useSlots()
+const crud = useCrud()
+const upsertOpts = injectUpsertOptions()
+const formCols = useFormCols()
+const submitting = ref(false)
+const fieldErrors = ref<Record<string, string>>({})
+
+const mergedItems = computed(() => {
+  const raw = props.items?.length ? props.items : upsertOpts?.items || []
+  const useRules = getCrudStyle().form.plugins.some(
+    (p) => (p as { __plugin?: string })?.__plugin === 'setRules',
+  )
+  return useRules ? applySetRules(raw) : raw
+})
+
+const titleText = computed(() => {
+  if (props.title != null && props.title !== '') return props.title
+  if (upsertOpts?.dialog?.title) return upsertOpts.dialog.title
+  if (crud.upsertMode.value === 'add') return crud.dict.label.add
+  if (crud.upsertMode.value === 'info') return crud.dict.label.info
+  return crud.dict.label.update
+})
+
+const visibleItems = computed(() =>
+  mergedItems.value.filter((it) => {
+    if (typeof it.hidden === 'function') return !it.hidden(crud.upsertForm.value)
+    return !it.hidden
+  }),
+)
+
+/** 备注等 textarea 固定渲染在 slot 之后 */
+const formItemsBeforeSlot = computed(() =>
+  visibleItems.value.filter((it) => itemType(it) !== 'textarea'),
+)
+const formItemsAfterSlot = computed(() =>
+  visibleItems.value.filter((it) => itemType(it) === 'textarea'),
+)
+
+const isInfo = computed(() => crud.upsertMode.value === 'info')
+/** dialog.confirm 显式控制；未设时 info 模式自动隐藏确定 */
+const showConfirm = computed(() => {
+  const flag = upsertOpts?.dialog?.confirm
+  if (typeof flag === 'boolean') return flag
+  return !isInfo.value
+})
+const isBodyEmpty = computed(
+  () => !visibleItems.value.length && !slots.default,
+)
+
+function onPointerDownOutside(event: Event) {
+  if (isDialogFloatTarget(event)) event.preventDefault()
+}
+
+function onFocusOutside(event: Event) {
+  if (isDialogFloatTarget(event)) event.preventDefault()
+}
+
+function onInteractOutside(event: Event) {
+  if (isDialogFloatTarget(event)) event.preventDefault()
+}
+
+function setField(prop: string, value: unknown) {
+  if (isInfo.value) return
+  if (fieldErrors.value[prop]) {
+    const next = { ...fieldErrors.value }
+    delete next[prop]
+    fieldErrors.value = next
+  }
+  crud.upsertForm.value = { ...crud.upsertForm.value, [prop]: value }
+}
+
+function itemType(item: CrudFormItem) {
+  if (item.type) return item.type
+  const name = item.component?.name
+  if (typeof name !== 'string') return 'input'
+  if (name === 'vm-switch') return 'switch'
+  if (name === 'vm-select' || name === 'vm-tree-select') {
+    return 'select'
+  }
+  return 'input'
+}
+
+function isSwitchField(item: CrudFormItem) {
+  return itemType(item) === 'switch'
+}
+
+function isUploadField(item: CrudFormItem) {
+  const name = item.component?.name
+  return name === 'vm-upload' || name === 'upload'
+}
+
+function fieldClass(item: CrudFormItem) {
+  if (isSwitchField(item)) return 'vm-crud-upsert__switch-field'
+  if (isUploadField(item)) return 'vm-crud-upsert__upload-field'
+  return 'vm-crud-upsert__control'
+}
+
+function resolveField(item: CrudFormItem) {
+  if (itemType(item) === 'radio' || itemType(item) === 'textarea') return undefined
+  const name = item.component?.name
+  if (typeof name === 'string') {
+    if (name === 'upload') return resolveCrudComponent('vm-upload')
+    const comp = resolveCrudComponent(name)
+    if (comp) return comp
+  } else if (name) {
+    return name
+  }
+  if (item.type === 'switch') return resolveCrudComponent('vm-switch')
+  if (item.type === 'select') return resolveCrudComponent('vm-select')
+  return undefined
+}
+
+function fieldProps(item: CrudFormItem) {
+  return {
+    options: resolveOptions(item.options),
+    placeholder: item.placeholder,
+    refreshOnChange: false,
+    ...(item.component?.props || {}),
+  }
+}
+
+/** options: dict.get('x') → ComputedRef，渲染时 toValue */
+function resolveOptions(options: CrudFormItem['options']) {
+  const list = options == null ? [] : toValue(options)
+  return Array.isArray(list) ? list : []
+}
+
+function itemSpan(item: CrudFormItem) {
+  return resolveFormSpan(item.span, formCols.value)
+}
+
+async function onSubmit() {
+  if (isInfo.value) {
+    crud.upsertClose()
+    return
+  }
+  if (submitting.value) return
+  const errors = await validateFormFields(
+    visibleItems.value,
+    crud.upsertForm.value,
+  )
+  fieldErrors.value = errors
+  if (Object.keys(errors).length) return
+  submitting.value = true
+  try {
+    if (upsertOpts?.onSubmit) {
+      await upsertOpts.onSubmit(
+        { ...crud.upsertForm.value },
+        {
+          next: async (data) => {
+            crud.upsertForm.value = { ...crud.upsertForm.value, ...data }
+            await crud.upsertSubmit()
+          },
+          done: () => {},
+          close: () => crud.upsertClose(),
+        },
+      )
+      return
+    }
+    await crud.upsertSubmit()
+  } catch (e) {
+    console.error(e)
+    const errObj = e as Error & { toasted?: boolean }
+    const msg = e instanceof Error && e.message ? e.message : '操作失败'
+    if (!errObj.toasted) toast.error(msg.slice(0, 200))
+  } finally {
+    submitting.value = false
+  }
+}
+
+watch(
+  () => crud.upsertVisible.value,
+  (open) => {
+    if (!open) {
+      submitting.value = false
+      fieldErrors.value = {}
+      return
+    }
+    const data = { ...crud.upsertForm.value }
+    upsertOpts?.onOpen?.(data)
+    for (const it of mergedItems.value) {
+      if (data[it.prop] === undefined && it.value !== undefined) {
+        data[it.prop] = it.value
+      }
+    }
+    crud.upsertForm.value = data
+    upsertOpts?.onOpened?.({ ...crud.upsertForm.value })
+    const focusPlugin = getCrudStyle().form.plugins.find(
+      (p) => (p as { __plugin?: string })?.__plugin === 'setFocus',
+    ) as { prop?: string } | undefined
+    const prop =
+      focusPlugin?.prop ||
+      mergedItems.value.find((i) => !i.hidden)?.prop
+    requestAnimationFrame(() => {
+      const el = document.querySelector(
+        `.vm-crud-upsert__field input, .vm-crud-upsert__field textarea`,
+      ) as HTMLInputElement | null
+      if (prop) {
+        const named = document.querySelector(
+          `[name="upsert-${prop}"], .vm-crud-upsert__field:has(input) input`,
+        ) as HTMLInputElement | null
+        ;(named || el)?.focus?.()
+      } else {
+        el?.focus?.()
+      }
+    })
+  },
+)
+
+defineExpose({
+  form: crud.upsertForm,
+  mode: crud.upsertMode,
+  submit: onSubmit,
+  close: () => crud.upsertClose(),
+  add: () => crud.rowAdd(),
+  append: (data?: Record<string, unknown>) => crud.rowAppend(data),
+  edit: (data: Record<string, unknown>) => crud.rowEdit(data),
+  info: (data: Record<string, unknown>) => crud.rowInfo(data),
+})
+</script>
+
+<style lang="scss" scoped>
+.vm-crud-upsert__head {
+  flex-shrink: 0;
+  padding: 12px 22px;
+  border-bottom: 1px solid var(--border);
+
+  @media (max-width: 768px) {
+    padding: 8px 12px;
+  }
+}
+
+.vm-crud-upsert__title {
+  font-size: 15px;
+  font-weight: 650;
+  letter-spacing: -0.01em;
+  line-height: 1.3;
+}
+
+.vm-crud-upsert__body {
+  display: grid;
+  flex: 1 1 auto;
+  grid-template-columns: repeat(24, minmax(0, 1fr));
+  gap: 16px;
+  min-height: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
+  padding: 18px 22px;
+  align-content: start;
+
+  /* slot 内容在宿主 SFC，须 :deep 才能命中 label / control 样式 */
+  :deep(.vm-crud-upsert__field) {
+    display: grid;
+    gap: 6px;
+    align-content: start;
+    min-width: 0;
+  }
+
+  :deep(.vm-crud-upsert__label) {
+    font-size: 12px;
+    color: var(--muted-foreground);
+  }
+
+  :deep(.vm-crud-upsert__req) {
+    color: var(--destructive);
+  }
+
+  :deep(.vm-crud-upsert__control) {
+    width: 100%;
+    height: var(--vm-control-height) !important;
+    min-height: var(--vm-control-height);
+    border-radius: var(--vm-control-radius) !important;
+    font-size: var(--vm-control-font-size) !important;
+    line-height: 1.4 !important;
+  }
+
+  @media (max-width: 768px) {
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+    flex: 1 1 auto;
+    min-height: 0;
+    gap: 10px;
+    padding: 10px 12px;
+  }
+}
+
+.vm-crud-upsert__empty {
+  grid-column: 1 / -1;
+  display: flex;
+  min-height: 160px;
+  align-items: center;
+  justify-content: center;
+}
+
+.vm-crud-upsert__field {
+  &.is-error :deep(.vm-crud-upsert__control) {
+    border-color: var(--destructive) !important;
+  }
+}
+
+.vm-crud-upsert__error {
+  margin: 0;
+  font-size: 12px;
+  line-height: 1.4;
+  color: var(--destructive);
+}
+
+:deep(.vm-group-cascader.vm-crud-upsert__control) {
+  height: auto !important;
+  min-height: var(--vm-control-height);
+}
+
+/* 上传：按 size 撑开，勿套用单行输入框高度 */
+:deep(.vm-upload.vm-crud-upsert__upload-field) {
+  width: 100%;
+  height: auto !important;
+  min-height: 0;
+}
+
+:deep(.vm-crud-upsert__switch-field.vm-switch) {
+  width: 40px;
+  height: 22px;
+  margin-top: 8px;
+}
+
+.vm-crud-upsert__textarea {
+  width: 100%;
+  min-height: 72px;
+  padding: 8px var(--vm-control-padding-x);
+  border: 1px solid var(--input);
+  border-radius: var(--vm-control-radius);
+  background: var(--background);
+  color: var(--foreground);
+  font-size: 14px;
+  line-height: 1.5;
+  resize: vertical;
+  outline: none;
+  transition: border-color 0.15s ease;
+
+  &:focus,
+  &:focus-visible {
+    border-color: var(--focus-border);
+    box-shadow: none;
+  }
+}
+
+.vm-crud-upsert__foot {
+  display: flex;
+  flex-shrink: 0;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 10px 22px;
+  border-top: 1px solid var(--border);
+
+  @media (max-width: 768px) {
+    flex-direction: column-reverse;
+    gap: 8px;
+    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
+
+    .vm-crud-upsert__btn {
+      width: 100%;
+    }
+  }
+}
+
+.vm-crud-upsert__btn {
+  height: 36px;
+  padding: 0 16px;
+  border: none;
+  border-radius: 12px;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.15s ease, color 0.15s ease;
+
+  &.is-primary {
+    background: var(--brand);
+    color: #fff;
+
+    &:hover:not(:disabled) {
+      background: var(--brand-deep);
+    }
+  }
+
+  &.is-ghost {
+    background: var(--muted);
+    color: var(--foreground);
+
+    &:hover:not(:disabled) {
+      background: color-mix(in srgb, var(--muted) 70%, var(--foreground) 8%);
+    }
+  }
+
+  &:disabled {
+    cursor: wait;
+    opacity: 0.65;
+  }
+}
+</style>