vome-core 0.3.65 → 0.3.66

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

@@ -1,158 +1,158 @@
-<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 { crudLabel } from '../style'
-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 ? crudLabel('running') : crudLabel('stopped'))
-  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>
+<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 { crudLabel } from '../style'
+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 ? crudLabel('running') : crudLabel('stopped'))
+  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>

package/dist/admin/crud/components/vm-switch.vue

@@ -1,158 +1,158 @@
-<template>
-  <button
-    type="button"
-    class="vm-switch"
-    :class="{ 'is-on': on, 'is-loading': loading }"
-    :disabled="loading || disabled"
-    role="switch"
-    :aria-checked="on"
-    @click="toggle"
-  >
-    <span class="vm-switch__knob" />
-  </button>
-</template>
-
-<script setup lang="ts">
-import { crudLabel } from '../style'
-import { ref, computed, watch } from 'vue'
-import { toast } from 'vue-sonner'
-import { vmConfirm } from '../confirm'
-import { useCrud } from '../useCrud'
-
-defineOptions({ name: 'vm-switch' })
-
-type DictOpt = { label?: string; value?: number | string | boolean }
-
-const props = withDefaults(
-  defineProps<{
-    modelValue?: number | string | boolean
-    activeValue?: number | string | boolean
-    inactiveValue?: number | string | boolean
-    /** 二值字典（dict.get），优先于 active/inactive */
-    options?: DictOpt[]
-    /** 行数据（表格内） */
-    scope?: Record<string, unknown>
-    column?: { property?: string; prop?: string }
-    check?: boolean
-    disabled?: boolean
-    api?: (data: Record<string, unknown>) => Promise<unknown>
-  }>(),
-  {
-    activeValue: true,
-    inactiveValue: false,
-    check: false,
-  },
-)
-
-const emit = defineEmits<{
-  'update:modelValue': [v: number | string | boolean]
-  change: [v: number | string | boolean]
-}>()
-
-const crud = useCrud()
-const loading = ref(false)
-const status = ref(props.modelValue)
-
-watch(
-  () => props.modelValue,
-  (v) => {
-    status.value = v
-  },
-)
-
-/** options 按 value 排序：小=关、大=开（status/yes_no_number 0|1、yes_no_boolean false|true） */
-const pair = computed(() => {
-  const opts = props.options
-  if (opts && opts.length >= 2) {
-    const sorted = [...opts].sort((a, b) => {
-      const na = Number(a.value)
-      const nb = Number(b.value)
-      if (Number.isFinite(na) && Number.isFinite(nb)) return na - nb
-      return String(a.value).localeCompare(String(b.value))
-    })
-    return {
-      inactive: sorted[0]!.value as number | string | boolean,
-      active: sorted[sorted.length - 1]!.value as number | string | boolean,
-    }
-  }
-  return {
-    inactive: props.inactiveValue as number | string | boolean,
-    active: props.activeValue as number | string | boolean,
-  }
-})
-
-const on = computed(
-  () =>
-    status.value === pair.value.active ||
-    status.value === true ||
-    status.value === 1,
-)
-
-async function toggle() {
-  if (loading.value || props.disabled) return
-  const next = on.value ? pair.value.inactive : pair.value.active
-  if (props.check && !(await vmConfirm(crudLabel('switchConfirm')))) return
-
-  const prev = status.value
-  status.value = next
-  emit('update:modelValue', next!)
-  emit('change', next!)
-
-  const prop = props.column?.property || props.column?.prop
-  if (props.scope && prop) {
-    loading.value = true
-    try {
-      const params = { id: props.scope.id, [prop]: next }
-      if (props.api) await props.api(params)
-      else if (crud.service.update) await crud.service.update(params)
-      else throw new Error(crudLabel('noUpdateApi'))
-    } catch (e) {
-      status.value = prev
-      emit('update:modelValue', prev as number | string | boolean)
-      toast.error(e instanceof Error ? e.message : crudLabel('updateFailed'))
-    } finally {
-      loading.value = false
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.vm-switch {
-  position: relative;
-  width: 40px;
-  height: 22px;
-  padding: 0;
-  border: none;
-  border-radius: 999px;
-  background: var(--muted);
-  cursor: pointer;
-  transition: background 0.15s ease;
-
-  &.is-on {
-    background: var(--brand);
-  }
-
-  &.is-loading,
-  &:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-  }
-}
-
-.vm-switch__knob {
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  width: 18px;
-  height: 18px;
-  border-radius: 50%;
-  background: #fff;
-  transition: transform 0.15s ease;
-  box-shadow: 0 1px 2px rgb(0 0 0 / 12%);
-
-  .is-on & {
-    transform: translateX(18px);
-  }
-}
-</style>
+<template>
+  <button
+    type="button"
+    class="vm-switch"
+    :class="{ 'is-on': on, 'is-loading': loading }"
+    :disabled="loading || disabled"
+    role="switch"
+    :aria-checked="on"
+    @click="toggle"
+  >
+    <span class="vm-switch__knob" />
+  </button>
+</template>
+
+<script setup lang="ts">
+import { crudLabel } from '../style'
+import { ref, computed, watch } from 'vue'
+import { toast } from 'vue-sonner'
+import { vmConfirm } from '../confirm'
+import { useCrudOptional } from '../useCrud'
+
+defineOptions({ name: 'vm-switch' })
+
+type DictOpt = { label?: string; value?: number | string | boolean }
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: number | string | boolean
+    activeValue?: number | string | boolean
+    inactiveValue?: number | string | boolean
+    /** 二值字典（dict.get），优先于 active/inactive */
+    options?: DictOpt[]
+    /** 行数据（表格内） */
+    scope?: Record<string, unknown>
+    column?: { property?: string; prop?: string }
+    check?: boolean
+    disabled?: boolean
+    api?: (data: Record<string, unknown>) => Promise<unknown>
+  }>(),
+  {
+    activeValue: true,
+    inactiveValue: false,
+    check: false,
+  },
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [v: number | string | boolean]
+  change: [v: number | string | boolean]
+}>()
+
+const crud = useCrudOptional()
+const loading = ref(false)
+const status = ref(props.modelValue)
+
+watch(
+  () => props.modelValue,
+  (v) => {
+    status.value = v
+  },
+)
+
+/** options 按 value 排序：小=关、大=开（status/yes_no_number 0|1、yes_no_boolean false|true） */
+const pair = computed(() => {
+  const opts = props.options
+  if (opts && opts.length >= 2) {
+    const sorted = [...opts].sort((a, b) => {
+      const na = Number(a.value)
+      const nb = Number(b.value)
+      if (Number.isFinite(na) && Number.isFinite(nb)) return na - nb
+      return String(a.value).localeCompare(String(b.value))
+    })
+    return {
+      inactive: sorted[0]!.value as number | string | boolean,
+      active: sorted[sorted.length - 1]!.value as number | string | boolean,
+    }
+  }
+  return {
+    inactive: props.inactiveValue as number | string | boolean,
+    active: props.activeValue as number | string | boolean,
+  }
+})
+
+const on = computed(
+  () =>
+    status.value === pair.value.active ||
+    status.value === true ||
+    status.value === 1,
+)
+
+async function toggle() {
+  if (loading.value || props.disabled) return
+  const next = on.value ? pair.value.inactive : pair.value.active
+  if (props.check && !(await vmConfirm(crudLabel('switchConfirm')))) return
+
+  const prev = status.value
+  status.value = next
+  emit('update:modelValue', next!)
+  emit('change', next!)
+
+  const prop = props.column?.property || props.column?.prop
+  if (props.scope && prop) {
+    loading.value = true
+    try {
+      const params = { id: props.scope.id, [prop]: next }
+      if (props.api) await props.api(params)
+      else if (crud?.service.update) await crud.service.update(params)
+      else throw new Error(crudLabel('noUpdateApi'))
+    } catch (e) {
+      status.value = prev
+      emit('update:modelValue', prev as number | string | boolean)
+      toast.error(e instanceof Error ? e.message : crudLabel('updateFailed'))
+    } finally {
+      loading.value = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.vm-switch {
+  position: relative;
+  width: 40px;
+  height: 22px;
+  padding: 0;
+  border: none;
+  border-radius: 999px;
+  background: var(--muted);
+  cursor: pointer;
+  transition: background 0.15s ease;
+
+  &.is-on {
+    background: var(--brand);
+  }
+
+  &.is-loading,
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+}
+
+.vm-switch__knob {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: #fff;
+  transition: transform 0.15s ease;
+  box-shadow: 0 1px 2px rgb(0 0 0 / 12%);
+
+  .is-on & {
+    transform: translateX(18px);
+  }
+}
+</style>