vome-core 0.0.24 → 0.0.25

package/dist/admin/crud/components/vm-copy-btn.vue

@@ -0,0 +1,101 @@
+<template>
+  <button
+    type="button"
+    class="vm-copy-btn"
+    :class="[`is-${size}`]"
+    :disabled="disabled || copying || !text"
+    @click="copy"
+  >
+    <i :class="copying ? 'ri-loader-4-line is-spin' : icon" aria-hidden="true" />
+    <span>{{ copying ? copyingText : label }}</span>
+  </button>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+defineOptions({ name: 'vm-copy-btn' })
+
+const props = withDefaults(
+  defineProps<{
+    text?: string
+    label?: string
+    copyingText?: string
+    icon?: string
+    size?: 'sm' | 'md'
+    disabled?: boolean
+  }>(),
+  {
+    label: '复制',
+    copyingText: '复制中…',
+    icon: 'ri-file-copy-line',
+    size: 'md',
+    disabled: false,
+  },
+)
+
+const emit = defineEmits<{
+  copied: []
+  error: [e: unknown]
+}>()
+
+const copying = ref(false)
+
+async function copy() {
+  if (!props.text || copying.value) return
+  copying.value = true
+  try {
+    await navigator.clipboard.writeText(props.text)
+    emit('copied')
+  } catch (e) {
+    emit('error', e)
+  } finally {
+    copying.value = false
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.vm-copy-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  border: none;
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--brand) 10%, var(--card));
+  color: var(--brand);
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+
+  &:hover:not(:disabled) {
+    background: color-mix(in srgb, var(--brand) 18%, var(--card));
+  }
+
+  &:disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+  }
+
+  &.is-md {
+    height: 32px;
+    padding: 0 12px;
+  }
+
+  &.is-sm {
+    height: 28px;
+    padding: 0 10px;
+    font-size: 11px;
+  }
+
+  i.is-spin {
+    animation: vm-copy-spin 0.8s linear infinite;
+  }
+}
+
+@keyframes vm-copy-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>

package/dist/admin/crud/components/vm-datetime-picker.vue

@@ -0,0 +1,9 @@
+<template>
+  <vm-date-picker v-bind="$attrs" type="datetime" />
+</template>
+
+<script setup lang="ts">
+import VmDatePicker from './vm-date-picker.vue'
+
+defineOptions({ name: 'vm-datetime-picker', inheritAttrs: false })
+</script>

package/dist/admin/crud/components/vm-ellipsis-text.vue

@@ -0,0 +1,34 @@
+<template>
+  <span class="vm-ellipsis-text" :title="titleText">{{ text }}</span>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+defineOptions({ name: 'vm-ellipsis-text' })
+
+const props = defineProps<{
+  modelValue?: unknown
+  title?: string
+}>()
+
+const text = computed(() => {
+  const v = props.modelValue
+  if (v == null || v === '') return '—'
+  return String(v)
+})
+
+const titleText = computed(() => props.title ?? (text.value === '—' ? undefined : text.value))
+</script>
+
+<style lang="scss" scoped>
+.vm-ellipsis-text {
+  display: inline-block;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 12px;
+  color: var(--muted-foreground);
+}
+</style>

package/dist/admin/crud/components/vm-form-hint.vue

@@ -0,0 +1,63 @@
+<template>
+  <p class="vm-form-hint" :class="[`is-${variant}`]">
+    <i v-if="icon" :class="icon" aria-hidden="true" />
+    <slot>{{ text }}</slot>
+  </p>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'vm-form-hint' })
+
+withDefaults(
+  defineProps<{
+    text?: string
+    variant?: 'info' | 'warn' | 'success'
+    icon?: string
+  }>(),
+  {
+    text: '',
+    variant: 'info',
+    icon: 'ri-information-line',
+  },
+)
+</script>
+
+<style lang="scss" scoped>
+.vm-form-hint {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  margin: 0;
+  padding: 10px 12px;
+  border-radius: 10px;
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--muted-foreground);
+  background: color-mix(in srgb, var(--brand) 8%, var(--card));
+
+  i {
+    flex-shrink: 0;
+    margin-top: 2px;
+    font-size: 15px;
+    color: var(--brand);
+  }
+
+  &.is-warn {
+    background: color-mix(in srgb, #f59e0b 10%, var(--card));
+    color: color-mix(in srgb, var(--foreground) 72%, #d97706);
+
+    i {
+      color: #d97706;
+    }
+  }
+
+  &.is-success {
+    background: var(--success-soft);
+    color: var(--success);
+
+    i {
+      color: var(--success);
+    }
+  }
+}
+</style>

package/dist/admin/crud/components/vm-json-code.vue

@@ -0,0 +1,40 @@
+<template>
+  <pre class="vm-json-code vm-scroll">{{ body }}</pre>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { prettyJson } from '../../lib/json'
+
+defineOptions({ name: 'vm-json-code' })
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: unknown
+    empty?: string
+  }>(),
+  {
+    empty: '（空）',
+  },
+)
+
+const body = computed(() => prettyJson(props.modelValue, props.empty))
+</script>
+
+<style lang="scss" scoped>
+.vm-json-code {
+  flex: 1;
+  margin: 0;
+  min-height: 0;
+  overflow: auto;
+  padding: 16px 22px;
+  border-radius: var(--radius);
+  background: var(--muted);
+  color: var(--foreground);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 12px;
+  line-height: 1.55;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+</style>

package/dist/admin/crud/components/vm-json-editor.vue

@@ -0,0 +1,128 @@
+<template>
+  <div class="vm-json-editor">
+    <textarea
+      class="vm-json-editor__input vm-scroll"
+      :class="{ 'is-error': Boolean(error) }"
+      :value="inner"
+      :disabled="disabled"
+      :placeholder="placeholder"
+      :rows="rows"
+      @input="onInput"
+      @blur="validate"
+    />
+    <p v-if="error" class="vm-json-editor__error">{{ error }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { parseJsonInput, prettyJson, textOfJson } from '../../lib/json'
+
+defineOptions({ name: 'vm-json-editor' })
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: unknown
+    placeholder?: string
+    rows?: number
+    disabled?: boolean
+    /** blur 时自动格式化 */
+    formatOnBlur?: boolean
+  }>(),
+  {
+    placeholder: '请输入 JSON',
+    rows: 8,
+    formatOnBlur: true,
+  },
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [v: unknown]
+  change: [v: unknown]
+  error: [msg: string]
+}>()
+
+const inner = ref('')
+const error = ref('')
+
+function syncFromModel() {
+  inner.value = prettyJson(props.modelValue, '')
+  error.value = ''
+}
+
+watch(
+  () => props.modelValue,
+  () => syncFromModel(),
+  { immediate: true },
+)
+
+function onInput(e: Event) {
+  inner.value = (e.target as HTMLTextAreaElement).value
+  error.value = ''
+}
+
+function validate() {
+  const parsed = parseJsonInput(inner.value)
+  if (!parsed.ok) {
+    error.value = parsed.error
+    emit('error', parsed.error)
+    return
+  }
+  if (props.formatOnBlur) {
+    inner.value = prettyJson(parsed.value, '')
+  }
+  error.value = ''
+  emit('update:modelValue', parsed.value)
+  emit('change', parsed.value)
+}
+
+defineExpose({
+  validate,
+  getText: () => inner.value,
+  setText: (v: unknown) => {
+    inner.value = textOfJson(v)
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+.vm-json-editor {
+  display: grid;
+  gap: 6px;
+  min-width: 0;
+}
+
+.vm-json-editor__input {
+  width: 100%;
+  min-height: 120px;
+  padding: 10px 12px;
+  border: 1px solid var(--border);
+  border-radius: var(--vm-control-radius);
+  background: var(--muted);
+  color: var(--foreground);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 12px;
+  line-height: 1.55;
+  resize: vertical;
+  outline: none;
+
+  &:focus {
+    border-color: var(--focus-border, var(--brand));
+  }
+
+  &.is-error {
+    border-color: var(--danger);
+  }
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+}
+
+.vm-json-editor__error {
+  margin: 0;
+  font-size: 12px;
+  color: var(--danger);
+}
+</style>

package/dist/admin/crud/components/vm-json-viewer.vue

@@ -0,0 +1,147 @@
+<template>
+  <template v-if="mode === 'code'">
+    <vm-json-code :model-value="modelValue" :empty="empty" />
+  </template>
+  <template v-else>
+    <vm-text-link
+      v-if="hasContent"
+      :label="label"
+      @click="open = true"
+    />
+    <span v-else class="vm-json-viewer is-empty">—</span>
+  </template>
+
+  <Teleport to="body">
+    <div
+      v-if="open"
+      class="vm-json-viewer__dialog"
+      role="dialog"
+      aria-modal="true"
+      @click.self="open = false"
+    >
+      <header class="vm-json-viewer__head">
+        <span class="vm-json-viewer__title">{{ title }}</span>
+        <div class="vm-json-viewer__actions">
+          <vm-copy-btn :text="body" size="sm" label="复制" />
+          <button type="button" class="vm-json-viewer__close" title="关闭" @click="open = false">
+            <i class="ri-close-line" />
+          </button>
+        </div>
+      </header>
+      <div class="vm-json-viewer__body vm-scroll">
+        <vm-json-code :model-value="modelValue" :empty="empty" />
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { hasJsonContent, prettyJson } from '../../lib/json'
+import VmJsonCode from './vm-json-code.vue'
+import VmTextLink from './vm-text-link.vue'
+import VmCopyBtn from './vm-copy-btn.vue'
+
+defineOptions({ name: 'vm-json-viewer' })
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: unknown
+    title?: string
+    label?: string
+    /** button 打开浮层；code 仅渲染代码块（upsert fill） */
+    mode?: 'button' | 'code'
+    empty?: string
+  }>(),
+  {
+    title: 'JSON',
+    label: '查看',
+    mode: 'button',
+    empty: '（空）',
+  },
+)
+
+const open = ref(false)
+const hasContent = computed(() => hasJsonContent(props.modelValue))
+const body = computed(() => prettyJson(props.modelValue, props.empty))
+</script>
+
+<style lang="scss" scoped>
+.vm-json-viewer.is-empty {
+  color: var(--muted-foreground);
+}
+
+.vm-json-viewer__dialog {
+  position: fixed;
+  inset: 0;
+  z-index: 5200;
+  display: flex;
+  flex-direction: column;
+  padding: 24px;
+  background: color-mix(in srgb, var(--foreground) 42%, transparent);
+}
+
+.vm-json-viewer__head {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin: 0 auto;
+  width: min(960px, 100%);
+  padding: 12px 16px;
+  border-radius: 14px 14px 0 0;
+  background: var(--card);
+  border: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
+  border-bottom: none;
+}
+
+.vm-json-viewer__title {
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--foreground);
+}
+
+.vm-json-viewer__actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.vm-json-viewer__close {
+  display: inline-flex;
+  width: 32px;
+  height: 32px;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--muted-foreground);
+  cursor: pointer;
+
+  &:hover {
+    background: var(--muted);
+    color: var(--foreground);
+  }
+}
+
+.vm-json-viewer__body {
+  flex: 1;
+  min-height: 0;
+  margin: 0 auto;
+  width: min(960px, 100%);
+  display: flex;
+  flex-direction: column;
+  border-radius: 0 0 14px 14px;
+  background: var(--card);
+  border: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
+  border-top: none;
+  overflow: hidden;
+
+  :deep(.vm-json-code) {
+    border-radius: 0;
+    background: var(--muted);
+  }
+}
+</style>

package/dist/admin/crud/components/vm-status-tag.vue

@@ -0,0 +1,157 @@
+<template>
+  <button
+    v-if="clickable"
+    type="button"
+    class="vm-status-tag"
+    :class="[resolved.variant, { 'is-clickable': clickable }]"
+    :disabled="disabled"
+    @click="emit('click', $event)"
+  >
+    {{ resolved.label }}
+  </button>
+  <span v-else class="vm-status-tag" :class="resolved.variant">
+    {{ resolved.label }}
+  </span>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+defineOptions({ name: 'vm-status-tag' })
+
+type Variant = 'success' | 'warning' | 'danger' | 'info' | 'brand' | 'neutral'
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: unknown
+    label?: string
+    variant?: Variant
+    /** http | queue | task 内置语义映射 */
+    preset?: 'http' | 'queue' | 'task'
+    /** 表格列传入的行数据，配合 labelProp 取展示文案 */
+    scope?: Record<string, unknown>
+    labelProp?: string
+    clickable?: boolean
+    disabled?: boolean
+  }>(),
+  {
+    clickable: false,
+    disabled: false,
+  },
+)
+
+const emit = defineEmits<{
+  click: [e: MouseEvent]
+}>()
+
+function resolveHttp(v: unknown): { variant: Variant; label: string } {
+  const n = Number(v)
+  const label = props.label ?? (v == null || v === '' ? '—' : String(v))
+  if (!Number.isFinite(n)) return { variant: 'neutral', label }
+  if (n >= 500) return { variant: 'danger', label }
+  if (n >= 400) return { variant: 'warning', label }
+  if (n >= 200 && n < 300) return { variant: 'success', label }
+  return { variant: 'neutral', label }
+}
+
+function resolveQueue(v: unknown): { variant: Variant; label: string } {
+  const key = String(v ?? '')
+  const label = props.label ?? (key || '—')
+  if (key === 'failed') return { variant: 'danger', label }
+  if (key === 'completed') return { variant: 'success', label }
+  if (key === 'active') return { variant: 'brand', label }
+  if (key === 'waiting' || key === 'delayed') return { variant: 'warning', label }
+  return { variant: 'neutral', label }
+}
+
+function resolveTask(v: unknown): { variant: Variant; label: string } {
+  const on = Number(v) === 1
+  const label = props.label ?? (on ? '运行中' : '已停止')
+  return { variant: on ? 'success' : 'neutral', label }
+}
+
+const resolved = computed(() => {
+  const scopeLabel =
+    props.labelProp && props.scope ? props.scope[props.labelProp] : undefined
+  const fallbackLabel =
+    props.label ??
+    (scopeLabel != null && scopeLabel !== '' ? String(scopeLabel) : undefined)
+
+  if (props.variant) {
+    return {
+      variant: props.variant,
+      label: fallbackLabel ?? (props.modelValue == null ? '—' : String(props.modelValue)),
+    }
+  }
+  if (props.preset === 'http') {
+    const r = resolveHttp(props.modelValue)
+    return { ...r, label: fallbackLabel ?? r.label }
+  }
+  if (props.preset === 'queue') {
+    const r = resolveQueue(props.modelValue)
+    return { ...r, label: fallbackLabel ?? r.label }
+  }
+  if (props.preset === 'task') {
+    const r = resolveTask(props.modelValue)
+    return { ...r, label: fallbackLabel ?? r.label }
+  }
+  return {
+    variant: 'neutral' as Variant,
+    label: fallbackLabel ?? (props.modelValue == null ? '—' : String(props.modelValue)),
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.vm-status-tag {
+  display: inline-flex;
+  min-width: 40px;
+  justify-content: center;
+  padding: 2px 8px;
+  border: none;
+  border-radius: 8px;
+  font-size: 12px;
+  font-weight: 650;
+  line-height: 1.4;
+  background: color-mix(in srgb, var(--foreground) 8%, transparent);
+  color: var(--muted-foreground);
+
+  &.is-success {
+    background: var(--success-soft);
+    color: var(--success);
+  }
+
+  &.is-warning {
+    background: color-mix(in srgb, #f59e0b 16%, transparent);
+    color: #d97706;
+  }
+
+  &.is-danger {
+    background: var(--danger-soft);
+    color: var(--danger);
+  }
+
+  &.is-info {
+    background: color-mix(in srgb, var(--brand) 12%, transparent);
+    color: var(--brand);
+  }
+
+  &.is-brand {
+    background: color-mix(in srgb, var(--brand) 14%, transparent);
+    color: var(--brand);
+  }
+
+  &.is-clickable {
+    cursor: pointer;
+
+    &:hover:not(:disabled) {
+      filter: brightness(0.96);
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  }
+}
+</style>