vome-core 0.0.1

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

@@ -0,0 +1,234 @@
+<template>
+  <Dialog :open="open" @update:open="onOpenChange">
+    <DialogContent
+      shell="crud"
+      class="vm-dialog"
+      :class="{ 'is-empty': !hasBody, 'is-fill': fill }"
+      @pointer-down-outside="onPointerDownOutside"
+      @focus-outside="onFocusOutside"
+      @interact-outside="onInteractOutside"
+    >
+      <DialogHeader class="vm-dialog__head">
+        <DialogTitle class="vm-dialog__title">{{ title }}</DialogTitle>
+      </DialogHeader>
+      <div class="vm-dialog__body">
+        <slot v-if="hasBody" />
+        <div v-else class="vm-dialog__empty">
+          <vm-empty kind="暂无内容" />
+        </div>
+      </div>
+      <DialogFooter class="vm-dialog__foot">
+        <slot v-if="$slots.footer" name="footer" />
+        <template v-else>
+          <button
+            type="button"
+            class="vm-dialog__btn is-ghost"
+            :disabled="confirmLoading"
+            @click="onCloseClick"
+          >
+            {{ closeText }}
+          </button>
+          <button
+            v-if="confirm"
+            type="button"
+            class="vm-dialog__btn is-primary"
+            :disabled="confirmLoading"
+            @click="onConfirmClick"
+          >
+            {{ confirmLoading ? '提交中…' : confirmText }}
+          </button>
+        </template>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { isDialogFloatTarget } from '../lib/dialog-float'
+
+defineOptions({ name: 'vm-dialog' })
+
+const props = withDefaults(
+  defineProps<{
+    open?: boolean
+    title?: string
+    /** 宽度：桌面 50vw，移动端全屏 */
+    width?: string
+    /** 是否显示确定按钮，默认 true；说明类弹窗传 false */
+    confirm?: boolean
+    confirmLoading?: boolean
+    confirmText?: string
+    closeText?: string
+    /** 拉满 CRUD 壳层最高高度（700px），列表类弹窗用 */
+    fill?: boolean
+  }>(),
+  {
+    open: false,
+    title: '',
+    width: '50vw',
+    confirm: true,
+    confirmLoading: false,
+    confirmText: '确定',
+    closeText: '关闭',
+    fill: false,
+  },
+)
+
+const emit = defineEmits<{
+  'update:open': [v: boolean]
+  /** 关闭动作；监听时可拦截（不调 done 则不关） */
+  close: [done: () => void]
+  /** 确定动作；监听时可拦截（不调 done 则不关） */
+  confirm: [done: () => void]
+}>()
+
+const slots = useSlots()
+const hasBody = computed(() => Boolean(slots.default))
+const instance = getCurrentInstance()
+
+function finishClose() {
+  emit('update:open', false)
+}
+
+/** 声明式 emit 不在 attrs 里，从 vnode.props 判断是否有监听 */
+function hasListener(event: 'close' | 'confirm') {
+  const p = instance?.vnode.props
+  if (!p) return false
+  const key = `on${event[0]!.toUpperCase()}${event.slice(1)}`
+  return typeof p[key] === 'function' || Array.isArray(p[key])
+}
+
+function onOpenChange(v: boolean) {
+  if (v) {
+    emit('update:open', true)
+    return
+  }
+  onCloseClick()
+}
+
+function onCloseClick() {
+  if (hasListener('close')) {
+    emit('close', finishClose)
+    return
+  }
+  finishClose()
+}
+
+function onConfirmClick() {
+  if (props.confirmLoading) return
+  if (hasListener('confirm')) {
+    emit('confirm', finishClose)
+    return
+  }
+  finishClose()
+}
+
+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()
+}
+</script>
+
+<style lang="scss" scoped>
+.vm-dialog__head {
+  flex-shrink: 0;
+  padding: 12px 22px;
+  border-bottom: 1px solid var(--border);
+
+  @media (max-width: 768px) {
+    padding: 8px 12px;
+  }
+}
+
+.vm-dialog__title {
+  font-size: 15px;
+  font-weight: 650;
+  letter-spacing: -0.01em;
+  line-height: 1.3;
+  color: var(--foreground);
+}
+
+.vm-dialog__body {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-height: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
+  padding: 18px 22px 16px;
+
+  @media (max-width: 768px) {
+    flex: 1;
+    padding: 12px;
+  }
+}
+
+.vm-dialog__empty {
+  display: flex;
+  min-height: 160px;
+  align-items: center;
+  justify-content: center;
+}
+
+.vm-dialog__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-dialog__btn {
+      width: 100%;
+    }
+  }
+}
+
+.vm-dialog__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>

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

@@ -0,0 +1,14 @@
+<template>
+  <div class="vm-crud-flex1" />
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'vm-flex1' })
+</script>
+
+<style lang="scss" scoped>
+.vm-crud-flex1 {
+  flex: 1;
+  min-width: 0;
+}
+</style>

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

@@ -0,0 +1,239 @@
+<template>
+  <div class="vm-form" :class="[`is-label-${labelPosition}`]">
+    <div
+      v-for="item in visibleItems"
+      :key="item.prop"
+      class="vm-form__field"
+      :class="{ 'is-error': fieldErrors[item.prop] }"
+      :style="{ gridColumn: `span ${itemSpan(item)}` }"
+    >
+      <label v-if="item.label" class="vm-form__label" :style="labelStyle">
+        {{ item.label }}
+        <span v-if="item.required" class="vm-form__req">*</span>
+      </label>
+      <component
+        :is="resolveField(item)"
+        v-if="resolveField(item)"
+        v-bind="fieldProps(item)"
+        :model-value="form[item.prop]"
+        :disabled="item.disabled"
+        :aria-invalid="fieldErrors[item.prop] ? true : undefined"
+        @update:model-value="(v: unknown) => set(item.prop, v)"
+      />
+      <Input
+        v-else-if="!item.type || item.type === 'input'"
+        :ref="(el) => setFieldRef(item.prop, el)"
+        class="vm-form__control"
+        :placeholder="item.placeholder"
+        :disabled="item.disabled"
+        :aria-invalid="fieldErrors[item.prop] ? true : undefined"
+        :model-value="String(form[item.prop] ?? '')"
+        @update:model-value="(v) => set(item.prop, v)"
+      />
+      <textarea
+        v-else-if="item.type === 'textarea'"
+        class="vm-form__textarea"
+        :placeholder="item.placeholder"
+        :disabled="item.disabled"
+        :aria-invalid="fieldErrors[item.prop] ? true : undefined"
+        :value="String(form[item.prop] ?? '')"
+        @input="set(item.prop, ($event.target as HTMLTextAreaElement).value)"
+      />
+      <p v-if="fieldErrors[item.prop]" class="vm-form__error">
+        {{ fieldErrors[item.prop] }}
+      </p>
+    </div>
+    <slot :form="form" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { resolveCrudComponent } from './registry'
+import { getCrudStyle } from './style'
+import { resolveFormSpan, useFormCols } from './span'
+import { applySetRules, validateFormFields } from './validate'
+defineOptions({ name: 'vm-form' })
+
+const props = withDefaults(
+  defineProps<{
+    items?: CrudFormItem[]
+    modelValue?: Record<string, unknown>
+    labelPosition?: 'top' | 'left' | 'right'
+    labelWidth?: string
+  }>(),
+  {
+    items: () => [],
+    modelValue: () => ({}),
+  },
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [v: Record<string, unknown>]
+}>()
+
+const style = getCrudStyle()
+const formCols = useFormCols()
+const form = reactive<Record<string, unknown>>({ ...props.modelValue })
+const fieldErrors = ref<Record<string, string>>({})
+const refs: Record<string, { focus?: () => void } | null> = {}
+
+const labelPosition = computed(
+  () => props.labelPosition || style.form.labelPosition,
+)
+const labelStyle = computed(() =>
+  labelPosition.value !== 'top'
+    ? { width: props.labelWidth || style.form.labelWidth }
+    : undefined,
+)
+
+/** required 默认补 rules；校验引擎本身也会读 required */
+const visibleItems = computed(() => {
+  const raw = applySetRules(props.items || [])
+  return raw.filter((it) => {
+    if (typeof it.hidden === 'function') return !it.hidden(form)
+    return !it.hidden
+  })
+})
+
+watch(
+  () => props.modelValue,
+  (v) => Object.assign(form, v || {}),
+  { deep: true },
+)
+
+function clearFieldError(prop: string) {
+  if (!fieldErrors.value[prop]) return
+  const next = { ...fieldErrors.value }
+  delete next[prop]
+  fieldErrors.value = next
+}
+
+function set(prop: string, value: unknown) {
+  form[prop] = value
+  clearFieldError(prop)
+  emit('update:modelValue', { ...form })
+}
+
+function itemSpan(item: CrudFormItem) {
+  return resolveFormSpan(item.span, formCols.value)
+}
+
+function resolveField(item: CrudFormItem) {
+  const name = item.component?.name
+  if (typeof name === 'string' && name === 'upload') {
+    return resolveCrudComponent('vm-upload')
+  }
+  return resolveCrudComponent(name)
+}
+
+function fieldProps(item: CrudFormItem) {
+  return {
+    options: resolveOptions(item.options),
+    placeholder: item.placeholder,
+    refreshOnChange: false,
+    ...(item.component?.props || {}),
+  }
+}
+
+function resolveOptions(options: CrudFormItem['options']) {
+  const list = options == null ? [] : toValue(options)
+  return Array.isArray(list) ? list : []
+}
+
+function setFieldRef(prop: string, el: unknown) {
+  refs[prop] = el as { focus?: () => void } | null
+}
+
+function focus(prop?: string) {
+  const name = prop || visibleItems.value[0]?.prop
+  if (!name) return
+  const el = refs[name] as { focus?: () => void; $el?: HTMLElement } | null
+  el?.focus?.()
+  const node = (el as { $el?: HTMLElement })?.$el?.querySelector?.('input')
+  node?.focus?.()
+}
+
+function clearValidate() {
+  fieldErrors.value = {}
+}
+
+/** 校验表单；必填等规则在字段下展示，不弹 toast。通过返回 true */
+async function validate(): Promise<boolean> {
+  const errors = await validateFormFields(visibleItems.value, form)
+  fieldErrors.value = errors
+  const first = Object.keys(errors)[0]
+  if (first) focus(first)
+  return Object.keys(errors).length === 0
+}
+
+defineExpose({ form, focus, set, validate, clearValidate, fieldErrors })
+</script>
+
+<style lang="scss" scoped>
+.vm-form {
+  display: grid;
+  grid-template-columns: repeat(24, minmax(0, 1fr));
+  gap: 12px;
+
+  @media (max-width: 768px) {
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+  }
+}
+
+.vm-form__field {
+  display: grid;
+  gap: 6px;
+
+  &.is-error :deep(.vm-form__control),
+  &.is-error .vm-form__textarea {
+    border-color: var(--destructive, var(--danger, #c45b5e)) !important;
+  }
+}
+
+.vm-form.is-label-left .vm-form__field,
+.vm-form.is-label-right .vm-form__field {
+  grid-template-columns: auto 1fr;
+  align-items: start;
+}
+
+.vm-form__label {
+  font-size: 12px;
+  color: var(--muted-foreground);
+}
+
+.vm-form__req {
+  color: var(--destructive, var(--danger, #c45b5e));
+}
+
+.vm-form__error {
+  margin: 0;
+  grid-column: 1 / -1;
+  font-size: 12px;
+  line-height: 1.4;
+  color: var(--destructive, var(--danger, #c45b5e));
+}
+
+.vm-form.is-label-left .vm-form__error,
+.vm-form.is-label-right .vm-form__error {
+  grid-column: 2;
+}
+
+.vm-form__control,
+.vm-form__textarea {
+  width: 100%;
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  background: var(--card);
+  font-size: 13px;
+}
+
+.vm-form__control {
+  height: var(--vm-control-height);
+  padding: 0 var(--vm-control-padding-x);
+}
+
+.vm-form__textarea {
+  min-height: 72px;
+  padding: 8px var(--vm-control-padding-x);
+}
+</style>

package/src/admin/crud/vm-multi-delete-btn.vue

@@ -0,0 +1,48 @@
+<template>
+  <button
+    v-if="crud.getPermission('delete')"
+    type="button"
+    class="vm-crud-toolbar__btn is-danger"
+    :disabled="!crud.selection.value.length"
+    @click="crud.rowDelete()"
+  >
+    <i class="ri-delete-bin-line" />
+    {{ crud.dict.label.multiDelete }}
+  </button>
+</template>
+
+<script setup lang="ts">
+import { useCrud } from './useCrud'
+
+defineOptions({ name: 'vm-multi-delete-btn' })
+const crud = useCrud()
+</script>
+
+<style lang="scss" scoped>
+.vm-crud-toolbar__btn {
+  display: inline-flex;
+  height: 36px;
+  align-items: center;
+  gap: 4px;
+  padding: 0 14px;
+  border: none;
+  border-radius: 12px;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.45;
+  }
+
+  &.is-danger {
+    background: var(--danger-soft);
+    color: var(--danger);
+
+    &:hover:not(:disabled) {
+      background: color-mix(in srgb, var(--danger-soft) 70%, var(--danger) 12%);
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,125 @@
+<template>
+  <div class="vm-crud-pagination">
+    <span class="vm-crud-pagination__total">共 {{ crud.pagination.value.total }} 条</span>
+    <div class="vm-crud-pagination__actions">
+      <Select
+        :model-value="String(crud.pagination.value.size)"
+        @update:model-value="changeSize"
+      >
+        <SelectTrigger class="vm-crud-pagination__size">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="10">10 / 页</SelectItem>
+          <SelectItem value="20">20 / 页</SelectItem>
+          <SelectItem value="50">50 / 页</SelectItem>
+          <SelectItem value="100">100 / 页</SelectItem>
+        </SelectContent>
+      </Select>
+      <button
+        type="button"
+        class="vm-crud-pagination__btn"
+        :disabled="crud.pagination.value.page <= 1"
+        @click="go(crud.pagination.value.page - 1)"
+      >
+        上一页
+      </button>
+      <span class="vm-crud-pagination__page">
+        {{ crud.pagination.value.page }} / {{ totalPages }}
+      </span>
+      <button
+        type="button"
+        class="vm-crud-pagination__btn"
+        :disabled="crud.pagination.value.page >= totalPages"
+        @click="go(crud.pagination.value.page + 1)"
+      >
+        下一页
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useCrud } from './useCrud'
+
+defineOptions({ name: 'vm-pagination' })
+
+const crud = useCrud()
+
+const totalPages = computed(() =>
+  Math.max(1, Math.ceil(crud.pagination.value.total / crud.pagination.value.size) || 1),
+)
+
+function go(page: number) {
+  const next = Math.min(Math.max(1, page), totalPages.value)
+  crud.pagination.value = { ...crud.pagination.value, page: next }
+  void crud.refresh()
+}
+
+function changeSize(size: unknown) {
+  crud.pagination.value = {
+    ...crud.pagination.value,
+    size: Number(size),
+    page: 1,
+  }
+  void crud.refresh()
+}
+</script>
+
+<style lang="scss" scoped>
+.vm-crud-pagination {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding-top: 8px;
+  border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
+  color: var(--muted-foreground);
+  font-size: 12px;
+}
+
+.vm-crud-pagination__actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+:deep(.vm-crud-pagination__size) {
+  height: 34px !important;
+  width: 96px;
+  border: none !important;
+  border-radius: 12px !important;
+  background: var(--muted) !important;
+  box-shadow: none !important;
+}
+
+.vm-crud-pagination__btn {
+  height: 34px;
+  padding: 0 12px;
+  border: none;
+  border-radius: 12px;
+  background: var(--muted);
+  color: var(--foreground);
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.15s ease, color 0.15s ease;
+
+  &:hover:not(:disabled) {
+    background: color-mix(in srgb, var(--muted) 70%, var(--foreground) 8%);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.4;
+  }
+}
+
+.vm-crud-pagination__page {
+  min-width: 56px;
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+  color: color-mix(in srgb, var(--foreground) 80%, transparent);
+}
+</style>

package/src/admin/crud/vm-refresh-btn.vue

@@ -0,0 +1,34 @@
+<template>
+  <button type="button" class="vm-crud-toolbar__btn is-ghost" @click="crud.refresh()">
+    <i class="ri-refresh-line" />
+    {{ crud.dict.label.refresh }}
+  </button>
+</template>
+
+<script setup lang="ts">
+import { useCrud } from './useCrud'
+
+defineOptions({ name: 'vm-refresh-btn' })
+const crud = useCrud()
+</script>
+
+<style lang="scss" scoped>
+.vm-crud-toolbar__btn {
+  display: inline-flex;
+  height: 36px;
+  align-items: center;
+  gap: 4px;
+  padding: 0 14px;
+  border: none;
+  border-radius: 12px;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  background: var(--muted);
+  color: var(--foreground);
+
+  &:hover {
+    background: color-mix(in srgb, var(--muted) 70%, var(--foreground) 8%);
+  }
+}
+</style>