vome-core 0.0.1

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

@@ -0,0 +1,128 @@
+<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 { toast } from 'vue-sonner'
+import { vmConfirm } from '../confirm'
+import { useCrud } from '../useCrud'
+
+defineOptions({ name: 'vm-switch' })
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: number | string | boolean
+    activeValue?: number | string | boolean
+    inactiveValue?: number | string | boolean
+    /** 行数据（表格内） */
+    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
+  },
+)
+
+const on = computed(
+  () => status.value === props.activeValue || status.value === true || status.value === 1,
+)
+
+async function toggle() {
+  if (loading.value || props.disabled) return
+  const next = on.value ? props.inactiveValue : props.activeValue
+  if (props.check && !(await vmConfirm('确定切换状态？'))) 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('无 update')
+    } catch (e) {
+      status.value = prev
+      emit('update:modelValue', prev as number | string | boolean)
+      toast.error(e instanceof Error ? e.message : '更新失败')
+    } 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>

package/src/admin/crud/components/vm-tree-select.vue

@@ -0,0 +1,456 @@
+<template>
+  <div ref="rootRef" class="vm-tree-select">
+    <button
+      ref="triggerRef"
+      type="button"
+      class="vm-tree-select__trigger"
+      :class="{ 'is-open': open, 'is-disabled': disabled }"
+      :disabled="disabled"
+      @click="toggle"
+    >
+      <span v-if="displayLabel" class="vm-tree-select__value">{{ displayLabel }}</span>
+      <span v-else class="vm-tree-select__ph">{{ placeholder || '请选择' }}</span>
+      <i
+        v-if="clearable && hasValue"
+        class="ri-close-circle-fill vm-tree-select__clear"
+        @click.stop="clear"
+      />
+      <i class="ri-arrow-down-s-line vm-tree-select__caret" />
+    </button>
+
+    <Teleport to="body">
+      <div
+        v-if="open"
+        ref="panelRef"
+        class="vm-tree-select__panel vm-dialog-float"
+        :style="panelStyle"
+      >
+        <div
+          v-for="row in visibleRows"
+          :key="row.key"
+          class="vm-tree-select__row"
+          :class="{ 'is-active': row.key === inner }"
+          :style="{ paddingLeft: `${10 + row.depth * 16}px` }"
+        >
+          <button
+            v-if="row.hasKids"
+            type="button"
+            class="vm-tree-select__expand"
+            :class="{ 'is-open': expanded.has(row.key) }"
+            @click.stop="toggleExpand(row.key)"
+          >
+            <i class="ri-arrow-right-s-line" />
+          </button>
+          <span v-else class="vm-tree-select__expand is-spacer" />
+          <button type="button" class="vm-tree-select__label" @click="pick(row.key)">
+            {{ row.label }}
+          </button>
+        </div>
+        <p v-if="!visibleRows.length" class="vm-tree-select__empty">暂无数据</p>
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<script setup lang="ts">
+type FlatRow = {
+  key: string
+  label: string
+  depth: number
+  hasKids: boolean
+}
+
+defineOptions({ name: 'vm-tree-select' })
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string | number | boolean | null
+    options?: TreeSelectOption[]
+    labelKey?: string
+    valueKey?: string
+    placeholder?: string
+    disabled?: boolean
+    clearable?: boolean
+    /** 默认全部展开（为 true 时忽略 defaultExpandLevel） */
+    defaultExpandAll?: boolean
+    /** 默认展开到第几级（1=仅根节点，2=展开根的下级，以此类推） */
+    defaultExpandLevel?: number
+  }>(),
+  {
+    labelKey: 'label',
+    valueKey: 'value',
+    clearable: true,
+    defaultExpandAll: false,
+    defaultExpandLevel: 2,
+  },
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [v: string]
+  change: [v: string]
+}>()
+
+const rootRef = ref<HTMLElement | null>(null)
+const triggerRef = ref<HTMLElement | null>(null)
+const panelRef = ref<HTMLElement | null>(null)
+const open = ref(false)
+const expanded = ref<Set<string>>(new Set())
+const panelStyle = ref<Record<string, string>>({})
+
+const tree = computed(() => props.options || [])
+
+const inner = computed(() =>
+  props.modelValue == null || props.modelValue === ''
+    ? ''
+    : String(props.modelValue),
+)
+
+const hasValue = computed(() => inner.value !== '')
+
+function findLabel(nodes: TreeSelectOption[], value: string): string | undefined {
+  for (const n of nodes) {
+    if (String(n[props.valueKey]) === value) {
+      return String(n[props.labelKey] ?? '')
+    }
+    const kids = n.children
+    if (kids?.length) {
+      const hit = findLabel(kids, value)
+      if (hit != null) return hit
+    }
+  }
+  return undefined
+}
+
+const displayLabel = computed(() => {
+  if (!inner.value) return ''
+  return findLabel(tree.value, inner.value) || inner.value
+})
+
+function collectExpandable(nodes: TreeSelectOption[], into: Set<string>) {
+  for (const n of nodes) {
+    const kids = n.children
+    if (kids?.length) {
+      into.add(String(n[props.valueKey]))
+      collectExpandable(kids, into)
+    }
+  }
+}
+
+/** 展开到指定层级：level=2 时根节点展开、二级可见、三级收起 */
+function collectExpandToLevel(
+  nodes: TreeSelectOption[],
+  depth: number,
+  maxLevel: number,
+  into: Set<string>,
+) {
+  if (depth >= maxLevel - 1) return
+  for (const n of nodes) {
+    const kids = n.children
+    if (!kids?.length) continue
+    into.add(String(n[props.valueKey]))
+    collectExpandToLevel(kids, depth + 1, maxLevel, into)
+  }
+}
+
+function findAncestorKeys(nodes: TreeSelectOption[], value: string, trail: string[] = []): string[] | null {
+  for (const n of nodes) {
+    const key = String(n[props.valueKey] ?? '')
+    if (key === value) return trail
+    const kids = n.children
+    if (kids?.length) {
+      const hit = findAncestorKeys(kids, value, [...trail, key])
+      if (hit) return hit
+    }
+  }
+  return null
+}
+
+function syncExpanded() {
+  const next = new Set<string>()
+  const opts = tree.value
+  if (props.defaultExpandAll) {
+    collectExpandable(opts, next)
+  } else {
+    const level = Math.max(1, props.defaultExpandLevel ?? 2)
+    collectExpandToLevel(opts, 0, level, next)
+  }
+  if (inner.value) {
+    for (const key of findAncestorKeys(opts, inner.value) || []) {
+      next.add(key)
+    }
+  }
+  expanded.value = next
+}
+
+function flatten(
+  nodes: TreeSelectOption[],
+  depth: number,
+  out: FlatRow[],
+) {
+  for (const n of nodes) {
+    const key = String(n[props.valueKey] ?? '')
+    const kids = n.children || []
+    const hasKids = kids.length > 0
+    out.push({
+      key,
+      label: String(n[props.labelKey] ?? ''),
+      depth,
+      hasKids,
+    })
+    if (hasKids && expanded.value.has(key)) {
+      flatten(kids, depth + 1, out)
+    }
+  }
+}
+
+const visibleRows = computed(() => {
+  const out: FlatRow[] = []
+  flatten(tree.value, 0, out)
+  return out
+})
+
+watch(
+  () => [props.options, props.defaultExpandAll, props.defaultExpandLevel, inner.value],
+  () => syncExpanded(),
+  { immediate: true, deep: true },
+)
+
+function syncPanelPos() {
+  const el = triggerRef.value
+  if (!el) return
+  const r = el.getBoundingClientRect()
+  const width = Math.max(r.width, 260)
+  let left = r.left
+  if (left + width > window.innerWidth - 8) {
+    left = Math.max(8, window.innerWidth - width - 8)
+  }
+  let top = r.bottom + 6
+  const maxH = Math.min(320, window.innerHeight * 0.5)
+  if (top + maxH > window.innerHeight - 8) {
+    top = Math.max(8, r.top - maxH - 6)
+  }
+  panelStyle.value = {
+    position: 'fixed',
+    top: `${top}px`,
+    left: `${left}px`,
+    width: `${width}px`,
+    zIndex: '200',
+  }
+}
+
+async function toggle() {
+  if (props.disabled) return
+  open.value = !open.value
+  if (open.value) {
+    syncExpanded()
+    await nextTick()
+    syncPanelPos()
+  }
+}
+
+function toggleExpand(key: string) {
+  const next = new Set(expanded.value)
+  if (next.has(key)) next.delete(key)
+  else next.add(key)
+  expanded.value = next
+}
+
+function pick(value: string) {
+  emit('update:modelValue', value)
+  emit('change', value)
+  open.value = false
+}
+
+function clear() {
+  emit('update:modelValue', '')
+  emit('change', '')
+}
+
+function isInside(el: Node | null) {
+  if (!el) return false
+  if (rootRef.value?.contains(el)) return true
+  if (panelRef.value?.contains(el)) return true
+  return el instanceof Element && Boolean(el.closest('.vm-tree-select__panel'))
+}
+
+function onDocPointer(e: Event) {
+  const t = e.target as Node | null
+  if (!isInside(t)) open.value = false
+}
+
+function onWinChange() {
+  if (open.value) syncPanelPos()
+}
+
+onMounted(() => {
+  document.addEventListener('pointerdown', onDocPointer, true)
+  window.addEventListener('resize', onWinChange)
+  window.addEventListener('scroll', onWinChange, true)
+})
+onUnmounted(() => {
+  document.removeEventListener('pointerdown', onDocPointer, true)
+  window.removeEventListener('resize', onWinChange)
+  window.removeEventListener('scroll', onWinChange, true)
+})
+</script>
+
+<style lang="scss">
+.vm-tree-select {
+  position: relative;
+  width: 100%;
+}
+
+.vm-tree-select__trigger {
+  display: flex;
+  width: 100%;
+  height: var(--vm-control-height);
+  min-height: var(--vm-control-height);
+  align-items: center;
+  gap: 6px;
+  padding: 0 var(--vm-control-padding-x) 0 12px;
+  border: 1px solid var(--input);
+  border-radius: var(--vm-control-radius);
+  background: var(--background);
+  color: var(--foreground);
+  font-size: var(--vm-control-font-size);
+  text-align: left;
+  cursor: pointer;
+  transition:
+    border-color 0.15s ease,
+    box-shadow 0.15s ease;
+
+  &:hover:not(.is-disabled) {
+    border-color: color-mix(in srgb, var(--brand) 45%, var(--input));
+  }
+
+  &.is-open,
+  &:focus-visible {
+    border-color: var(--focus-border);
+    box-shadow: none;
+    outline: none;
+  }
+
+  &.is-disabled {
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+}
+
+.vm-tree-select__value {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.vm-tree-select__ph {
+  flex: 1;
+  color: var(--muted-foreground);
+}
+
+.vm-tree-select__clear {
+  flex-shrink: 0;
+  color: var(--muted-foreground);
+  font-size: 14px;
+  cursor: pointer;
+
+  &:hover {
+    color: var(--foreground);
+  }
+}
+
+.vm-tree-select__caret {
+  flex-shrink: 0;
+  opacity: 0.45;
+  font-size: 16px;
+}
+
+.vm-tree-select__label {
+  flex: 1;
+  min-width: 0;
+  padding: 6px 8px 6px 2px;
+  border: none;
+  background: transparent;
+  color: var(--foreground);
+  font-size: 14px;
+  text-align: left;
+  cursor: pointer;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Teleport 到 body，不可 scoped */
+.vm-tree-select__panel {
+  max-height: min(320px, 50vh);
+  overflow: auto;
+  overscroll-behavior: contain;
+  padding: 6px;
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  background: var(--card);
+  box-shadow: var(--shadow-soft);
+}
+
+.vm-tree-select__row {
+  display: flex;
+  min-height: 28px;
+  align-items: center;
+  gap: 2px;
+  border-radius: 8px;
+
+  &.is-active {
+    background: var(--brand-soft);
+
+    .vm-tree-select__label {
+      color: var(--brand);
+      font-weight: 650;
+    }
+  }
+
+  &:hover:not(.is-active) {
+    background: var(--muted);
+  }
+}
+
+.vm-tree-select__expand {
+  display: inline-flex;
+  width: 22px;
+  height: 22px;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--muted-foreground);
+  cursor: pointer;
+
+  i {
+    font-size: 16px;
+    transition: transform 0.15s ease;
+  }
+
+  &.is-open i {
+    transform: rotate(90deg);
+  }
+
+  &.is-spacer {
+    cursor: default;
+    visibility: hidden;
+  }
+
+  &:hover:not(.is-spacer) {
+    background: color-mix(in srgb, var(--muted) 80%, var(--foreground) 8%);
+  }
+}
+
+.vm-tree-select__empty {
+  margin: 0;
+  padding: 16px;
+  color: var(--muted-foreground);
+  font-size: 14px;
+  text-align: center;
+}
+</style>