foucui 1.0.1 → 2.0.0

package/components/QiuLoading/types.ts

@@ -1,44 +0,0 @@
-export type QiuLoadingEffect =
-  | 'spinner'
-  | 'dual-ring'
-  | 'crescent'
-  | 'gradient'
-  | 'dash'
-  | 'dots'
-  | 'wave'
-  | 'bounce'
-  | 'bars'
-  | 'bricks'
-  | 'square'
-  | 'flip'
-  | 'pulse'
-  | 'ripple'
-  | 'orbit'
-  | 'radar'
-  | 'spiral'
-  | 'infinity'
-  | 'hourglass'
-  | 'skeleton'
-
-export const QIU_LOADING_EFFECTS: QiuLoadingEffect[] = [
-  'spinner',
-  'dual-ring',
-  'crescent',
-  'gradient',
-  'dash',
-  'dots',
-  'wave',
-  'bounce',
-  'bars',
-  'bricks',
-  'square',
-  'flip',
-  'pulse',
-  'ripple',
-  'orbit',
-  'radar',
-  'spiral',
-  'infinity',
-  'hourglass',
-  'skeleton',
-]

package/components/QiuMention/index.vue

@@ -1,299 +0,0 @@
-<template>
-  <div class="qiu-mention" :class="[`qiu-mention--${size}`, { 'is-disabled': disabled }]">
-    <textarea
-      v-if="type === 'textarea'"
-      ref="inputRef"
-      class="qiu-mention__input"
-      :value="modelValue"
-      :rows="rows"
-      :placeholder="placeholder"
-      :disabled="disabled"
-      @input="onInput"
-      @keydown="onKeydown"
-      @keyup="onKeyup"
-    />
-    <input
-      v-else
-      ref="inputRef"
-      class="qiu-mention__input"
-      :value="modelValue"
-      :placeholder="placeholder"
-      :disabled="disabled"
-      @input="onInput"
-      @keydown="onKeydown"
-      @keyup="onKeyup"
-    />
-
-    <Teleport to="body">
-      <div
-        v-if="open"
-        ref="panelRef"
-        class="qiu-mention__panel"
-        :style="panelStyle"
-      >
-        <ul class="qiu-mention__list">
-          <li
-            v-for="(opt, i) in filtered"
-            :key="opt.value"
-            class="qiu-mention__option"
-            :class="{ 'is-active': i === activeIndex }"
-            @mousedown.prevent="select(opt)"
-            @mouseenter="activeIndex = i"
-          >
-            <span v-if="opt.avatar" class="qiu-mention__avatar">{{ opt.avatar }}</span>
-            <span class="qiu-mention__label">{{ opt.label }}</span>
-          </li>
-        </ul>
-      </div>
-    </Teleport>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { computed, nextTick, ref, watch } from 'vue'
-
-defineOptions({ name: 'QiuMention' })
-
-interface MentionOption {
-  label: string
-  value: string | number
-  avatar?: string
-}
-
-const props = withDefaults(
-  defineProps<{
-    modelValue?: string
-    options?: MentionOption[]
-    triggerChar?: string
-    placeholder?: string
-    size?: 'small' | 'default' | 'large'
-    disabled?: boolean
-    type?: 'text' | 'textarea'
-    rows?: number
-  }>(),
-  {
-    modelValue: '',
-    options: () => [],
-    triggerChar: '@',
-    placeholder: '输入 @ 提及他人',
-    size: 'default',
-    disabled: false,
-    type: 'text',
-    rows: 3,
-  }
-)
-
-const emit = defineEmits<{
-  'update:modelValue': [string]
-  select: [MentionOption]
-}>()
-
-const inputRef = ref<HTMLInputElement | HTMLTextAreaElement | null>(null)
-const panelRef = ref<HTMLElement | null>(null)
-const open = ref(false)
-const activeIndex = ref(0)
-const keyword = ref('')
-const panelStyle = ref<Record<string, string>>({})
-
-const filtered = computed(() => {
-  const q = keyword.value.toLowerCase()
-  return props.options.filter((o) => o.label.toLowerCase().includes(q))
-})
-
-const onInput = (e: Event) => {
-  const val = (e.target as HTMLInputElement).value
-  emit('update:modelValue', val)
-  detectKeyword(val, (e.target as HTMLInputElement).selectionStart ?? val.length)
-}
-
-const detectKeyword = (val: string, caret: number) => {
-  const sub = val.slice(0, caret)
-  const idx = sub.lastIndexOf(props.triggerChar)
-  if (idx === -1) {
-    open.value = false
-    return
-  }
-  const seg = sub.slice(idx + 1)
-  // 关键词不得包含空格
-  if (/\s/.test(seg)) {
-    open.value = false
-    return
-  }
-  keyword.value = seg
-  activeIndex.value = 0
-  openPanel()
-}
-
-const openPanel = async () => {
-  open.value = true
-  await nextTick()
-  updatePosition()
-}
-
-const updatePosition = () => {
-  const input = inputRef.value
-  const panel = panelRef.value
-  if (!input || !panel) return
-  const rect = input.getBoundingClientRect()
-  const panelRect = panel.getBoundingClientRect()
-  const gap = 4
-  let top = rect.bottom + gap
-  if (top + panelRect.height > window.innerHeight - 4) top = rect.top - panelRect.height - gap
-  let left = Math.min(Math.max(4, rect.left), window.innerWidth - panelRect.width - 4)
-  top = Math.max(4, top)
-  panelStyle.value = {
-    position: 'fixed',
-    top: `${top}px`,
-    left: `${left}px`,
-    width: `${Math.max(rect.width, 180)}px`,
-    zIndex: '2100',
-  }
-}
-
-const insertMention = (opt: MentionOption) => {
-  const input = inputRef.value
-  if (!input) return
-  const val = props.modelValue
-  const caret = input.selectionStart ?? val.length
-  const sub = val.slice(0, caret)
-  const idx = sub.lastIndexOf(props.triggerChar)
-  const before = val.slice(0, idx)
-  const after = val.slice(caret)
-  const insert = `${props.triggerChar}${opt.label} `
-  const next = before + insert + after
-  emit('update:modelValue', next)
-  emit('select', opt)
-  open.value = false
-  nextTick(() => {
-    const pos = (before + insert).length
-    input.focus()
-    input.setSelectionRange(pos, pos)
-  })
-}
-
-const select = (opt: MentionOption) => insertMention(opt)
-
-const onKeydown = (e: KeyboardEvent) => {
-  if (!open.value) return
-  if (e.key === 'ArrowDown') {
-    e.preventDefault()
-    if (activeIndex.value < filtered.value.length - 1) activeIndex.value++
-  } else if (e.key === 'ArrowUp') {
-    e.preventDefault()
-    if (activeIndex.value > 0) activeIndex.value--
-  } else if (e.key === 'Enter') {
-    e.preventDefault()
-    const opt = filtered.value[activeIndex.value]
-    if (opt) insertMention(opt)
-  } else if (e.key === 'Escape') {
-    open.value = false
-  }
-}
-
-const onKeyup = (e: KeyboardEvent) => {
-  if (['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(e.key)) {
-    const input = e.target as HTMLInputElement
-    detectKeyword(input.value, input.selectionStart ?? 0)
-  }
-}
-
-const onDocClick = (e: MouseEvent) => {
-  if (!open.value) return
-  if (panelRef.value?.contains(e.target as Node)) return
-  open.value = false
-}
-
-watch(open, (v) => {
-  if (v) document.addEventListener('mousedown', onDocClick, true)
-  else document.removeEventListener('mousedown', onDocClick, true)
-})
-
-onBeforeUnmount(() => document.removeEventListener('mousedown', onDocClick, true))
-</script>
-
-<style lang="scss" scoped>
-.qiu-mention {
-  display: inline-flex;
-  width: 100%;
-  max-width: 100%;
-  vertical-align: middle;
-
-  &.is-disabled {
-    opacity: 0.6;
-    pointer-events: none;
-  }
-}
-
-.qiu-mention__input {
-  box-sizing: border-box;
-  width: 100%;
-  padding: 6px 10px;
-  font-size: 14px;
-  font-family: inherit;
-  line-height: 1.5;
-  color: var(--qiu-text-color-primary, #303133);
-  background: var(--qiu-bg-color, #fff);
-  border: 1px solid var(--qiu-border-color, #dcdfe6);
-  border-radius: var(--qiu-border-radius-base, 4px);
-  outline: none;
-  resize: vertical;
-  transition: border-color 0.2s ease, box-shadow 0.2s ease;
-
-  &:focus {
-    border-color: var(--qiu-color-primary, #409eff);
-    box-shadow: 0 0 0 1px color-mix(in srgb, var(--qiu-color-primary, #409eff) 25%, transparent);
-  }
-
-  &::placeholder {
-    color: var(--qiu-text-color-placeholder, #a8abb2);
-  }
-}
-
-.qiu-mention__panel {
-  box-sizing: border-box;
-  max-height: 220px;
-  overflow-y: auto;
-  background: var(--qiu-bg-color-overlay, #fff);
-  border: 1px solid var(--qiu-border-color-light, #e4e7ed);
-  border-radius: var(--qiu-border-radius-base, 4px);
-  box-shadow: var(--qiu-box-shadow-light, 0 4px 12px rgba(0, 0, 0, 0.1));
-}
-
-.qiu-mention__list {
-  margin: 0;
-  padding: 4px;
-  list-style: none;
-}
-
-.qiu-mention__option {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 7px 10px;
-  font-size: 14px;
-  color: var(--qiu-text-color-regular, #606266);
-  cursor: pointer;
-  border-radius: 4px;
-
-  &:hover,
-  &.is-active {
-    color: var(--qiu-color-primary, #409eff);
-    background: var(--qiu-color-primary-light-9, #ecf5ff);
-  }
-}
-
-.qiu-mention__avatar {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 22px;
-  height: 22px;
-  font-size: 12px;
-  color: #fff;
-  background: var(--qiu-color-primary, #409eff);
-  border-radius: 50%;
-}
-
-.qiu-mention--small .qiu-mention__input { padding: 4px 8px; font-size: 13px; }
-.qiu-mention--large .qiu-mention__input { padding: 8px 12px; font-size: 15px; }
-</style>

package/components/QiuMenu/QiuMenuRoot.vue

@@ -1,241 +0,0 @@
-<template>
-  <nav
-    class="qiu-route-menu"
-    :class="[
-      `qiu-route-menu--${mode}`,
-      {
-        'is-collapse': collapse,
-      },
-    ]"
-    role="menu"
-  >
-    <ul class="qiu-route-menu__list">
-      <slot />
-    </ul>
-  </nav>
-</template>
-
-<script lang="ts" setup>
-import type { QiuRouteMenuContext } from './context'
-import { QIU_ROUTE_MENU_KEY } from './context'
-
-defineOptions({ name: 'QiuMenuRoot' })
-
-const props = withDefaults(
-  defineProps<{
-    mode?: 'vertical' | 'horizontal'
-    defaultActive?: string
-    collapse?: boolean
-    uniqueOpened?: boolean
-    defaultOpeneds?: string[]
-    menuTrigger?: 'click' | 'hover'
-  }>(),
-  {
-    mode: 'vertical',
-    defaultActive: '',
-    collapse: false,
-    uniqueOpened: false,
-    defaultOpeneds: () => [],
-    menuTrigger: 'click',
-  }
-)
-
-const activeIndex = ref(props.defaultActive)
-const openSubs = ref<Set<string>>(new Set())
-
-watch(
-  () => props.defaultActive,
-  (val) => {
-    if (val) activeIndex.value = val
-  }
-)
-
-watch(
-  () => [...props.defaultOpeneds],
-  (paths) => {
-    paths.forEach((path) => openSub(path))
-  },
-  { immediate: true }
-)
-
-const modeRef = computed(() => props.mode)
-const collapseRef = computed(() => props.collapse)
-const uniqueOpenedRef = computed(() => props.uniqueOpened)
-const menuTriggerRef = computed(() => props.menuTrigger)
-const activeIndexRef = computed(() => activeIndex.value)
-
-const isSubOpen = (index: string) => openSubs.value.has(index)
-
-const openSub = (index: string) => {
-  // 收起/横向弹出：级联展开，仅保留祖先链 + 当前项（关闭同级其它分支）
-  if (props.collapse || props.mode === 'horizontal') {
-    const next = new Set<string>()
-    for (const p of openSubs.value) {
-      if (index === p || index.startsWith(`${p}/`)) next.add(p)
-    }
-    next.add(index)
-    openSubs.value = next
-    return
-  }
-  const next = new Set<string>()
-  // 手风琴：仅垂直非折叠，保留当前项及其祖先链，关闭同级其它分支
-  if (props.uniqueOpened && props.mode === 'vertical') {
-    for (const p of openSubs.value) {
-      if (index === p || index.startsWith(`${p}/`)) next.add(p)
-    }
-  } else {
-    for (const p of openSubs.value) next.add(p)
-  }
-  next.add(index)
-  openSubs.value = next
-}
-
-const closeSub = (index: string) => {
-  const next = new Set<string>()
-  for (const p of openSubs.value) {
-    // 关闭自身及所有子孙（path 前缀）
-    if (p === index || p.startsWith(`${index}/`)) continue
-    next.add(p)
-  }
-  openSubs.value = next
-}
-
-const closeAll = () => {
-  openSubs.value = new Set()
-}
-
-let flyoutLeaveTimer: ReturnType<typeof setTimeout> | null = null
-
-const isFlyoutHovering = () =>
-  Boolean(
-    document.querySelector('.qiu-menu-flyout-panel:hover') ||
-      document.querySelector('.qiu-route-menu-sub.is-popup > .qiu-route-menu-sub__title:hover') ||
-      document.querySelector('.qiu-route-menu.is-collapse .qiu-route-menu-sub__title:hover') ||
-      document.querySelector('.qiu-route-menu--horizontal .qiu-route-menu-sub__title:hover') ||
-      document.querySelector('.qiu-route-menu-item__tip:hover')
-  )
-
-const enterFlyout = (index: string) => {
-  if (flyoutLeaveTimer) {
-    clearTimeout(flyoutLeaveTimer)
-    flyoutLeaveTimer = null
-  }
-  openSub(index)
-}
-
-const leaveFlyout = () => {
-  if (flyoutLeaveTimer) clearTimeout(flyoutLeaveTimer)
-  // 横向向下展开时鼠标需穿过空隙，延迟略加长
-  const delay = props.mode === 'horizontal' ? 280 : 160
-  flyoutLeaveTimer = setTimeout(() => {
-    if (isFlyoutHovering()) {
-      flyoutLeaveTimer = null
-      return
-    }
-    if (props.collapse || props.mode === 'horizontal') closeAll()
-    flyoutLeaveTimer = null
-  }, delay)
-}
-
-const toggleSub = (index: string) => {
-  if (isSubOpen(index)) closeSub(index)
-  else openSub(index)
-}
-
-const selectItem = (index: string) => {
-  activeIndex.value = index
-}
-
-const isActive = (index: string) => {
-  const active = activeIndex.value
-  return active === index || active.startsWith(`${index}/`)
-}
-
-onBeforeUnmount(() => {
-  if (flyoutLeaveTimer) clearTimeout(flyoutLeaveTimer)
-})
-
-provide<QiuRouteMenuContext>(QIU_ROUTE_MENU_KEY, {
-  mode: modeRef as Ref<'vertical' | 'horizontal'>,
-  collapse: collapseRef as Ref<boolean>,
-  activeIndex: activeIndexRef as Ref<string>,
-  uniqueOpened: uniqueOpenedRef as Ref<boolean>,
-  menuTrigger: menuTriggerRef as Ref<'click' | 'hover'>,
-  isSubOpen,
-  toggleSub,
-  openSub,
-  closeSub,
-  enterFlyout,
-  leaveFlyout,
-  selectItem,
-  isActive,
-})
-
-defineExpose({
-  open: openSub,
-  close: closeSub,
-  closeAll,
-})
-</script>
-
-<style lang="scss" scoped>
-.qiu-route-menu {
-  width: 100%;
-  background: var(--qiu-menu-background-color);
-  border: 0;
-
-  &__list {
-    padding: 0;
-    margin: 0;
-    list-style: none;
-  }
-
-  &--horizontal {
-    .qiu-route-menu__list {
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-    }
-
-    /* 横向顶栏：避免 icon 容器裁切字形 */
-    :deep(.qiu-route-menu-item__icon-wrap),
-    :deep(.qiu-route-menu-sub__icon-wrap) {
-      overflow: visible;
-    }
-
-    :deep(.qiu-route-menu-item__inner),
-    :deep(.qiu-route-menu-sub__title) {
-      overflow: visible;
-    }
-  }
-
-  &.is-collapse {
-    /* 收起：只留图标；文字/角标进右侧 tips，勿藏图标 wrap */
-    :deep(.qiu-route-menu-item__text),
-    :deep(.qiu-route-menu-item__badge),
-    :deep(.qiu-route-menu-sub__text),
-    :deep(.qiu-route-menu-sub__badge),
-    :deep(.qiu-route-menu-sub__arrow),
-    :deep(.qiu-route-menu-sub__more) {
-      display: none !important;
-    }
-
-    :deep(.qiu-route-menu-item__inner),
-    :deep(.qiu-route-menu-sub__title) {
-      justify-content: center;
-      padding: 0;
-    }
-
-    :deep(.qiu-route-menu-item__icon-wrap),
-    :deep(.qiu-route-menu-sub__icon-wrap) {
-      display: inline-flex !important;
-    }
-
-    :deep(.qiu-route-menu-item__tip) {
-      /* tip 挂在侧栏外，保证不被 overflow 裁切 */
-      position: fixed;
-      /* left/top 由 JS 更稳，这里用 absolute 相对 li；侧栏需 overflow visible */
-    }
-  }
-}
-</style>