vome-core 0.0.1

package/src/admin/crud/components/vm-column-custom.vue

@@ -0,0 +1,196 @@
+<template>
+  <div>
+    <Button size="sm" variant="outline" class="h-8" @click="open = true">
+      自定义列
+    </Button>
+    <vm-dialog v-model:open="open" title="自定义列" width="420px">
+      <div class="vm-col-custom">
+        <label
+          v-for="(item, i) in list"
+          :key="String(item.prop)"
+          class="vm-col-custom__item"
+        >
+          <input v-model="item.checked" type="checkbox" />
+          <span>{{ item.label }}</span>
+          <span class="vm-col-custom__move">
+            <button type="button" :disabled="i === 0" @click.prevent="move(i, -1)">↑</button>
+            <button
+              type="button"
+              :disabled="i === list.length - 1"
+              @click.prevent="move(i, 1)"
+            >
+              ↓
+            </button>
+          </span>
+        </label>
+      </div>
+      <template #footer>
+        <button type="button" class="vm-col-custom__btn is-ghost" @click="open = false">
+          取消
+        </button>
+        <button type="button" class="vm-col-custom__btn is-danger" @click="reset">
+          重置
+        </button>
+        <button type="button" class="vm-col-custom__btn is-primary" @click="save">
+          保存
+        </button>
+      </template>
+    </vm-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { injectTableOptions, TABLE_API_KEY } from '../key'
+defineOptions({ name: 'vm-column-custom' })
+
+const props = defineProps<{
+  name?: string
+  columns?: CrudColumn[]
+}>()
+
+const emit = defineEmits<{
+  change: [cols: CrudColumn[]]
+  'update:modelValue': [cols: CrudColumn[]]
+}>()
+
+const tableApi = inject(TABLE_API_KEY, null)
+const tableOpts = injectTableOptions()
+
+type Item = { label: string; prop: string; checked: boolean }
+
+const open = ref(false)
+const list = ref<Item[]>([])
+const storageKey = computedKey()
+
+function computedKey() {
+  return `column-custom__${props.name || (typeof location !== 'undefined' ? location.pathname : 'default')}`
+}
+
+function sourceColumns(): CrudColumn[] {
+  if (props.columns?.length) return props.columns
+  return tableApi?.getColumns() || tableOpts?.columns || []
+}
+
+function buildList() {
+  const saved = load()
+  list.value = sourceColumns()
+    .filter((c) => c.prop && c.type !== 'selection' && c.type !== 'op')
+    .map((c) => ({
+      label: c.label || String(c.prop),
+      prop: String(c.prop),
+      checked: saved?.[c.prop!]?.checked ?? !c.hidden,
+    }))
+}
+
+function load(): Record<string, { checked: boolean; order?: number }> | null {
+  try {
+    return JSON.parse(localStorage.getItem(storageKey) || 'null')
+  } catch {
+    return null
+  }
+}
+
+watch(
+  () => [props.columns, tableOpts?.columns, open.value] as const,
+  () => buildList(),
+  { immediate: true, deep: true },
+)
+
+function move(i: number, delta: number) {
+  const j = i + delta
+  if (j < 0 || j >= list.value.length) return
+  const arr = [...list.value]
+  const t = arr[i]!
+  arr[i] = arr[j]!
+  arr[j] = t
+  list.value = arr
+}
+
+function reset() {
+  localStorage.removeItem(storageKey)
+  buildList()
+}
+
+function save() {
+  const map: Record<string, { checked: boolean; order: number }> = {}
+  list.value.forEach((it, order) => {
+    map[it.prop] = { checked: it.checked, order }
+  })
+  localStorage.setItem(storageKey, JSON.stringify(map))
+  const cols = sourceColumns()
+  const ordered = [...cols].sort((a, b) => {
+    const ao = a.prop != null ? map[a.prop]?.order ?? 999 : 999
+    const bo = b.prop != null ? map[b.prop]?.order ?? 999 : 999
+    return ao - bo
+  })
+  const next = ordered.map((c) => {
+    if (!c.prop || c.type === 'selection' || c.type === 'op') return c
+    return { ...c, hidden: !(map[c.prop]?.checked ?? true) }
+  })
+  tableApi?.setColumns(next)
+  emit('change', next)
+  emit('update:modelValue', next)
+  open.value = false
+}
+</script>
+
+<style lang="scss" scoped>
+.vm-col-custom {
+  display: grid;
+  gap: 8px;
+}
+
+.vm-col-custom__item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 10px;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  font-size: 13px;
+  cursor: pointer;
+}
+
+.vm-col-custom__move {
+  margin-left: auto;
+  display: flex;
+  gap: 4px;
+
+  button {
+    width: 24px;
+    height: 24px;
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    background: var(--card);
+    cursor: pointer;
+
+    &:disabled {
+      opacity: 0.4;
+    }
+  }
+}
+
+.vm-col-custom__btn {
+  height: 36px;
+  padding: 0 14px;
+  border: none;
+  border-radius: 12px;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+
+  &.is-ghost {
+    background: var(--muted);
+  }
+
+  &.is-danger {
+    background: var(--danger-soft, #fceeee);
+    color: var(--danger, #c45b5e);
+  }
+
+  &.is-primary {
+    background: var(--brand);
+    color: #fff;
+  }
+}
+</style>

package/src/admin/crud/components/vm-context-menu.vue

@@ -0,0 +1,99 @@
+<template>
+  <Teleport to="body">
+    <div
+      v-if="visible"
+      class="vm-ctx-menu vm-dialog-float"
+      :style="{ left: `${x}px`, top: `${y}px` }"
+      @click.stop
+    >
+      <button
+        v-for="item in items"
+        :key="item.key"
+        type="button"
+        class="vm-ctx-menu__item"
+        :disabled="item.disabled"
+        @click="onPick(item)"
+      >
+        {{ item.label }}
+      </button>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'vm-context-menu' })
+
+const props = defineProps<{
+  items: CtxMenuItem[]
+}>()
+
+const emit = defineEmits<{
+  select: [key: string]
+}>()
+
+const visible = ref(false)
+const x = ref(0)
+const y = ref(0)
+
+function open(ev: MouseEvent) {
+  ev.preventDefault()
+  x.value = ev.clientX
+  y.value = ev.clientY
+  visible.value = true
+}
+
+function close() {
+  visible.value = false
+}
+
+function onPick(item: CtxMenuItem) {
+  if (item.disabled) return
+  emit('select', item.key)
+  close()
+}
+
+function onDoc() {
+  close()
+}
+
+onMounted(() => document.addEventListener('click', onDoc))
+onUnmounted(() => document.removeEventListener('click', onDoc))
+
+defineExpose({ open, close })
+</script>
+
+<style lang="scss" scoped>
+.vm-ctx-menu {
+  position: fixed;
+  z-index: 80;
+  min-width: 140px;
+  padding: 6px;
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  background: var(--card);
+  box-shadow: var(--shadow-soft, 0 8px 24px rgb(0 0 0 / 8%));
+}
+
+.vm-ctx-menu__item {
+  display: block;
+  width: 100%;
+  padding: 8px 10px;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--foreground);
+  font-size: 13px;
+  text-align: left;
+  cursor: pointer;
+
+  &:hover:not(:disabled) {
+    background: var(--brand-soft);
+    color: var(--brand);
+  }
+
+  &:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+}
+</style>

package/src/admin/crud/components/vm-date-picker.vue

@@ -0,0 +1,74 @@
+<template>
+  <input
+    class="vm-date-picker"
+    :type="inputType"
+    :value="inner"
+    :disabled="disabled"
+    :style="{ width }"
+    @change="onChange"
+  />
+</template>
+
+<script setup lang="ts">
+import { useCrud } from '../useCrud'
+
+defineOptions({ name: 'vm-date-picker' })
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string | null
+    type?: 'date' | 'datetime' | 'month' | 'year'
+    valueFormat?: string
+    prop?: string
+    width?: string
+    disabled?: boolean
+    refreshOnChange?: boolean
+  }>(),
+  {
+    type: 'date',
+    width: '160px',
+    refreshOnChange: true,
+  },
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [v: string]
+  change: [v: string]
+}>()
+
+const crud = useCrud()
+
+const inputType = computed(() => {
+  if (props.type === 'datetime') return 'datetime-local'
+  if (props.type === 'month') return 'month'
+  return 'date'
+})
+
+const inner = computed(() => {
+  const v = props.modelValue || ''
+  if (props.type === 'datetime' && v.includes(' ')) return v.replace(' ', 'T').slice(0, 16)
+  return v
+})
+
+function onChange(e: Event) {
+  let v = (e.target as HTMLInputElement).value
+  if (props.type === 'datetime' && v) v = v.replace('T', ' ') + ':00'
+  emit('update:modelValue', v)
+  emit('change', v)
+  if (props.prop && props.refreshOnChange) {
+    crud.refresh({ page: 1, [props.prop]: v || undefined })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.vm-date-picker {
+  height: var(--vm-control-height);
+  padding: 0 var(--vm-control-padding-x);
+  border: 1px solid var(--border);
+  border-radius: var(--vm-control-radius);
+  background: var(--card);
+  color: var(--foreground);
+  font-size: 13px;
+}
+</style>

package/src/admin/crud/components/vm-date-range.vue

@@ -0,0 +1,291 @@
+<template>
+  <div class="vm-date-range" :class="{ 'is-disabled': disabled }">
+    <div class="vm-date-range__side" @click="open(0)">
+      <div class="vm-date-range__field">
+        <span
+          v-if="!display(0) && startPlaceholder"
+          class="vm-date-range__ph"
+        >{{ startPlaceholder }}</span>
+        <input
+          ref="startEl"
+          class="vm-date-range__input"
+          :class="{ 'is-empty': !display(0) }"
+          :type="inputType"
+          :step="step"
+          :disabled="disabled"
+          :value="display(0)"
+          @click.stop="open(0)"
+          @change="(e) => set(0, e)"
+        />
+      </div>
+      <i class="ri-calendar-line vm-date-range__icon" aria-hidden="true" />
+    </div>
+    <span class="vm-date-range__sep">-</span>
+    <div class="vm-date-range__side" @click="open(1)">
+      <div class="vm-date-range__field">
+        <span
+          v-if="!display(1) && endPlaceholder"
+          class="vm-date-range__ph"
+        >{{ endPlaceholder }}</span>
+        <input
+          ref="endEl"
+          class="vm-date-range__input"
+          :class="{ 'is-empty': !display(1) }"
+          :type="inputType"
+          :step="step"
+          :disabled="disabled"
+          :value="display(1)"
+          @click.stop="open(1)"
+          @change="(e) => set(1, e)"
+        />
+      </div>
+      <i class="ri-calendar-line vm-date-range__icon" aria-hidden="true" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'vm-date-range' })
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: Array<string | null>
+    /** 时间精度：year | month | day | hour | minute | second */
+    precision?: 'year' | 'month' | 'day' | 'hour' | 'minute' | 'second'
+    startPlaceholder?: string
+    endPlaceholder?: string
+    disabled?: boolean
+  }>(),
+  {
+    precision: 'day',
+    startPlaceholder: '开始时间',
+    endPlaceholder: '结束时间',
+  },
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [v: Array<string | null>]
+  change: [v: Array<string | null>]
+}>()
+
+const startEl = ref<HTMLInputElement | null>(null)
+const endEl = ref<HTMLInputElement | null>(null)
+
+const inputType = computed(() => {
+  const p = props.precision
+  if (p === 'year') return 'number'
+  if (p === 'month') return 'month'
+  if (p === 'day') return 'date'
+  return 'datetime-local'
+})
+
+const step = computed(() => {
+  const p = props.precision
+  if (p === 'hour') return 3600
+  if (p === 'minute') return 60
+  if (p === 'second') return 1
+  if (p === 'year') return 1
+  return undefined
+})
+
+function toApi(raw: string): string | null {
+  if (!raw) return null
+  const p = props.precision
+  if (p === 'year') return raw
+  if (p === 'month' || p === 'day') return raw
+  let v = raw.replace('T', ' ')
+  if (p === 'hour') {
+    v = v.length >= 13 ? `${v.slice(0, 13)}:00:00` : `${v}:00:00`
+  } else if (p === 'minute') {
+    v = v.length >= 16 ? `${v.slice(0, 16)}:00` : `${v}:00`
+  } else if (v.length === 16) {
+    v = `${v}:00`
+  }
+  return v
+}
+
+function toInput(api: string | null | undefined): string {
+  if (!api) return ''
+  const p = props.precision
+  if (p === 'year' || p === 'month' || p === 'day') {
+    return String(api).slice(0, p === 'year' ? 4 : p === 'month' ? 7 : 10)
+  }
+  const s = String(api).replace(' ', 'T')
+  if (p === 'hour') return s.slice(0, 13)
+  if (p === 'minute') return s.slice(0, 16)
+  return s.slice(0, 19)
+}
+
+function display(idx: 0 | 1) {
+  return toInput(props.modelValue?.[idx] ?? null)
+}
+
+function open(idx: 0 | 1) {
+  if (props.disabled) return
+  const el = idx === 0 ? startEl.value : endEl.value
+  if (!el) return
+  try {
+    el.showPicker?.()
+  } catch {
+    el.focus()
+  }
+}
+
+function set(idx: 0 | 1, e: Event) {
+  const raw = (e.target as HTMLInputElement).value
+  const next: Array<string | null> = [
+    props.modelValue?.[0] ?? null,
+    props.modelValue?.[1] ?? null,
+  ]
+  next[idx] = toApi(raw)
+  emit('update:modelValue', next)
+  emit('change', next)
+}
+</script>
+
+<style lang="scss" scoped>
+.vm-date-range {
+  display: flex;
+  box-sizing: border-box;
+  width: 100%;
+  height: var(--vm-control-height);
+  align-items: center;
+  padding: 0 10px;
+  border: 1px solid transparent;
+  border-radius: 12px;
+  background: var(--muted);
+  gap: 0;
+
+  &.is-disabled {
+    opacity: 0.55;
+    pointer-events: none;
+  }
+
+  &:focus-within {
+    border-color: var(--focus-border);
+  }
+}
+
+.vm-date-range__side {
+  display: flex;
+  min-width: 0;
+  flex: 1 1 0;
+  height: 100%;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+}
+
+.vm-date-range__field {
+  position: relative;
+  display: flex;
+  min-width: 0;
+  flex: 1 1 0;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+}
+
+.vm-date-range__ph {
+  position: absolute;
+  z-index: 0;
+  left: 50%;
+  max-width: 100%;
+  overflow: hidden;
+  color: var(--muted-foreground);
+  font-size: 12px;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  pointer-events: none;
+  transform: translateX(-50%);
+}
+
+.vm-date-range__icon {
+  display: inline-flex;
+  flex: 0 0 auto;
+  width: 14px;
+  height: 14px;
+  align-items: center;
+  justify-content: center;
+  color: var(--muted-foreground);
+  font-size: 14px;
+  line-height: 1;
+  pointer-events: none;
+}
+
+.vm-date-range__input {
+  position: relative;
+  z-index: 1;
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  height: 100%;
+  padding: 0;
+  border: none;
+  background: transparent !important;
+  color: var(--foreground);
+  font-size: 12px;
+  text-align: center;
+  outline: none;
+  cursor: pointer;
+  appearance: textfield;
+  color-scheme: inherit;
+
+  &::-webkit-datetime-edit {
+    width: 100%;
+    padding: 0;
+    text-align: center;
+  }
+
+  &::-webkit-datetime-edit-fields-wrapper {
+    display: flex;
+    width: 100%;
+    justify-content: center;
+    padding: 0;
+  }
+
+  &::-webkit-date-and-time-value {
+    margin: 0 auto;
+    text-align: center;
+  }
+
+  &.is-empty {
+    color: transparent;
+
+    &::-webkit-datetime-edit,
+    &::-webkit-datetime-edit-fields-wrapper,
+    &::-webkit-datetime-edit-text,
+    &::-webkit-datetime-edit-year-field,
+    &::-webkit-datetime-edit-month-field,
+    &::-webkit-datetime-edit-day-field,
+    &::-webkit-datetime-edit-hour-field,
+    &::-webkit-datetime-edit-minute-field,
+    &::-webkit-datetime-edit-second-field,
+    &::-webkit-datetime-edit-ampm-field {
+      color: transparent;
+    }
+  }
+
+  &::-webkit-calendar-picker-indicator {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    cursor: pointer;
+    opacity: 0;
+  }
+}
+
+.vm-date-range__sep {
+  flex: 0 0 auto;
+  padding: 0 8px;
+  color: var(--muted-foreground);
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1;
+  user-select: none;
+}
+</style>

package/src/admin/crud/components/vm-date-text.vue

@@ -0,0 +1,41 @@
+<template>
+  <span class="vm-date-text">{{ text }}</span>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'vm-date-text' })
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string | number | Date | null
+    format?: string
+  }>(),
+  { format: 'YYYY-MM-DD HH:mm:ss' },
+)
+
+function pad(n: number) {
+  return String(n).padStart(2, '0')
+}
+
+const text = computed(() => {
+  if (props.modelValue == null || props.modelValue === '') return '—'
+  const d = new Date(props.modelValue)
+  if (Number.isNaN(d.getTime())) return String(props.modelValue)
+  const map: Record<string, string> = {
+    YYYY: String(d.getFullYear()),
+    MM: pad(d.getMonth() + 1),
+    DD: pad(d.getDate()),
+    HH: pad(d.getHours()),
+    mm: pad(d.getMinutes()),
+    ss: pad(d.getSeconds()),
+  }
+  return props.format.replace(/YYYY|MM|DD|HH|mm|ss/g, (k) => map[k] || k)
+})
+</script>
+
+<style lang="scss" scoped>
+.vm-date-text {
+  font-size: 13px;
+  color: var(--foreground);
+}
+</style>