foucui 1.0.1 → 2.0.0

package/components/QiuAnchor/index.vue

@@ -1,180 +0,0 @@
-<template>
-  <div class="qiu-anchor">
-    <slot />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type { QiuAnchorContext, QiuAnchorLinkRecord } from './context'
-import { QIU_ANCHOR_KEY } from './context'
-
-defineOptions({ name: 'QiuAnchor' })
-
-const props = withDefaults(
-  defineProps<{
-    offset?: number
-    /** 滚动容器选择器 */
-    bound?: string
-  }>(),
-  {
-    offset: 0,
-    bound: '',
-  }
-)
-
-const links = ref<QiuAnchorLinkRecord[]>([])
-const activeLink = ref('')
-
-const isScrollable = (el: HTMLElement) => {
-  const style = window.getComputedStyle(el)
-  return /(auto|scroll)/.test(style.overflow + style.overflowY + style.overflowX)
-}
-
-const findScrollContainer = (el: Element): HTMLElement | Window => {
-  let node: HTMLElement | null = el.parentElement
-  while (node) {
-    if (isScrollable(node)) return node
-    node = node.parentElement
-  }
-  return window
-}
-
-const getScrollContainer = (target?: Element): HTMLElement | Window => {
-  if (props.bound) {
-    const el = document.querySelector(props.bound)
-    return (el as HTMLElement) || window
-  }
-  if (target) return findScrollContainer(target)
-  return window
-}
-
-const getScrollTop = (container: HTMLElement | Window) => {
-  if (container === window) return window.scrollY || document.documentElement.scrollTop
-  return (container as HTMLElement).scrollTop
-}
-
-const scrollToLink = (href: string) => {
-  const id = href.replace(/^#/, '')
-  const target = document.getElementById(id)
-  if (!target) return
-
-  const container = getScrollContainer(target)
-  if (container === window) {
-    const top = target.getBoundingClientRect().top + getScrollTop(window) - props.offset
-    window.scrollTo({ top, behavior: 'smooth' })
-  } else {
-    const c = container as HTMLElement
-    const cRect = c.getBoundingClientRect()
-    const tRect = target.getBoundingClientRect()
-    const top = tRect.top - cRect.top + c.scrollTop - props.offset
-    c.scrollTo({ top, behavior: 'smooth' })
-  }
-  activeLink.value = href
-}
-
-const registerLink = (link: QiuAnchorLinkRecord) => {
-  const idx = links.value.findIndex((l) => l.href === link.href)
-  if (idx >= 0) links.value[idx] = link
-  else links.value.push(link)
-  links.value.sort((a, b) => {
-    const elA = document.querySelector(a.href)
-    const elB = document.querySelector(b.href)
-    if (!elA || !elB) return 0
-    return elA.getBoundingClientRect().top - elB.getBoundingClientRect().top
-  })
-}
-
-const unregisterLink = (href: string) => {
-  links.value = links.value.filter((l) => l.href !== href)
-}
-
-const resolveContainer = (): HTMLElement | Window => {
-  if (props.bound) {
-    const el = document.querySelector(props.bound)
-    return (el as HTMLElement) || window
-  }
-  // 未指定 bound 时自动探测：以第一个锚点目标元素的可滚动祖先作为滚动容器
-  for (const link of links.value) {
-    const el = document.querySelector(link.href)
-    if (el) return findScrollContainer(el)
-  }
-  return window
-}
-
-const updateActive = () => {
-  const container = resolveContainer()
-  const scrollTop = getScrollTop(container)
-  const containerTop =
-    container === window ? 0 : (container as HTMLElement).getBoundingClientRect().top
-
-  let current = ''
-  for (const link of links.value) {
-    const id = link.href.replace(/^#/, '')
-    const el = document.getElementById(id)
-    if (!el) continue
-    const top =
-      container === window
-        ? el.getBoundingClientRect().top + scrollTop
-        : el.getBoundingClientRect().top - containerTop + scrollTop
-    if (top - props.offset <= scrollTop + 1) current = link.href
-  }
-  if (current) activeLink.value = current
-}
-
-provide<QiuAnchorContext>(QIU_ANCHOR_KEY, {
-  offset: toRef(props, 'offset'),
-  bound: toRef(props, 'bound'),
-  activeLink,
-  registerLink,
-  unregisterLink,
-  scrollToLink,
-})
-
-let containerEl: HTMLElement | Window = window
-
-const onScroll = () => updateActive()
-
-const rebindScrollContainer = () => {
-  const next = resolveContainer()
-  if (next !== containerEl) {
-    containerEl.removeEventListener('scroll', onScroll)
-    containerEl = next
-    containerEl.addEventListener('scroll', onScroll, { passive: true })
-  }
-}
-
-onMounted(() => {
-  containerEl = resolveContainer()
-  containerEl.addEventListener('scroll', onScroll, { passive: true })
-  updateActive()
-})
-
-onBeforeUnmount(() => {
-  containerEl.removeEventListener('scroll', onScroll)
-})
-
-watch(
-  () => props.bound,
-  () => {
-    rebindScrollContainer()
-    updateActive()
-  }
-)
-
-// 锚点链接注册完成后，若之前未探测到滚动容器则重新探测并切换事件监听
-watch(
-  () => links.value.map((l) => l.href).join(','),
-  () => {
-    rebindScrollContainer()
-    updateActive()
-  },
-  { flush: 'post' }
-)
-</script>
-
-<style lang="scss" scoped>
-.qiu-anchor {
-  font-size: var(--qiu-font-size, 14px);
-  line-height: 1.5;
-}
-</style>

package/components/QiuAnchorLink/index.vue

@@ -1,67 +0,0 @@
-<template>
-  <a
-    class="qiu-anchor-link"
-    :class="{ 'is-active': isActive }"
-    :href="href"
-    @click.prevent="onClick"
-  >
-    <slot>{{ title }}</slot>
-  </a>
-</template>
-
-<script lang="ts" setup>
-import { QIU_ANCHOR_KEY } from '../QiuAnchor/context'
-
-defineOptions({ name: 'QiuAnchorLink' })
-
-const props = withDefaults(
-  defineProps<{
-    href: string
-    title?: string
-  }>(),
-  {
-    title: '',
-  }
-)
-
-const anchor = inject(QIU_ANCHOR_KEY, null)
-const linkRef = ref<HTMLElement | null>(null)
-
-const isActive = computed(() => anchor?.activeLink.value === props.href)
-
-const onClick = () => {
-  anchor?.scrollToLink(props.href)
-}
-
-onMounted(() => {
-  anchor?.registerLink({
-    href: props.href,
-    title: props.title,
-    el: linkRef.value,
-  })
-})
-
-onBeforeUnmount(() => {
-  anchor?.unregisterLink(props.href)
-})
-</script>
-
-<style lang="scss" scoped>
-.qiu-anchor-link {
-  display: block;
-  padding: 4px 0 4px 12px;
-  color: var(--qiu-text-color-regular, var(--qiu-text-color-regular, #606266));
-  text-decoration: none;
-  border-left: 2px solid transparent;
-  transition: color 0.15s, border-color 0.15s;
-
-  &:hover {
-    color: var(--qiu-color-primary, var(--qiu-color-primary, #0f766e));
-  }
-
-  &.is-active {
-    color: var(--qiu-color-primary, var(--qiu-color-primary, #0f766e));
-    border-left-color: var(--qiu-color-primary, var(--qiu-color-primary, #0f766e));
-  }
-}
-</style>

package/components/QiuApp/index.vue

@@ -1,9 +0,0 @@
-<template>
-  <router-view />
-</template>
-
-<script lang="ts" setup>
-defineOptions({
-  name: 'QiuApp',
-})
-</script>

package/components/QiuAutocomplete/index.vue

@@ -1,408 +0,0 @@
-<template>
-  <div
-    class="qiu-autocomplete"
-    :class="{
-      'is-disabled': props.disabled,
-      'is-focused': focused,
-      'is-clearable': props.clearable,
-      'has-value': hasValue,
-    }"
-    :style="{ width: props.width }"
-  >
-    <input
-      ref="inputRef"
-      :autofocus="props.autofocus"
-      class="qiu-autocomplete-input"
-      :disabled="props.disabled"
-      :placeholder="props.placeholder"
-      :readonly="props.readonly"
-      :required="props.required"
-      :style="{ height: props.height }"
-      :type="props.type"
-      :value="displayValue"
-      @change="handleInput"
-      @input="handleInput"
-      @focus="onFocus"
-      @blur="focused = false"
-      @keydown.down.prevent="moveActive(1)"
-      @keydown.up.prevent="moveActive(-1)"
-      @keydown.enter.prevent="confirmActive"
-      @keydown.esc="selectshow = false"
-    />
-    <div class="qiu-autocomplete-suffix">
-      <button
-        v-show="props.clearable && hasValue"
-        type="button"
-        class="qiu-autocomplete-clear"
-        tabindex="-1"
-        :title="'清空'"
-        @mousedown.prevent
-        @click="clearvalue"
-      >
-        <qiu-icon icon="close-circle-fill" />
-      </button>
-      <button
-        type="button"
-        class="qiu-autocomplete-caret"
-        tabindex="-1"
-        :class="{ 'is-open': selectshow }"
-        @mousedown.prevent
-        @click="toggleSelect"
-      >
-        <qiu-icon icon="arrow-down-s-line" />
-      </button>
-    </div>
-    <div v-if="selectshow" class="qiu-autocomplete-list">
-      <div
-        v-for="(item, idx) in serachList"
-        :key="idx"
-        class="qiu-autocomplete-list-item"
-        :class="{ 'is-active': idx === activeIndex }"
-        :title="buildDisplayString(item)"
-        @mousedown.prevent
-        @click="handleItem(item)"
-        @mouseenter="activeIndex = idx"
-      >
-        <span class="qiu-ellipsis">{{ buildDisplayString(item) }}</span>
-      </div>
-      <div v-if="!serachList.length" class="qiu-autocomplete-empty">无匹配数据</div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-/**
- * QiuAutocomplete — 多字段模糊搜索下拉（兼容 Vite / Vue3）
- */
-defineOptions({ name: 'QiuAutocomplete' })
-
-export interface AutocompleteItem {
-  value?: string | number | boolean
-  [key: string]: unknown
-}
-
-const props = withDefaults(
-  defineProps<{
-    value?: string
-    modelValue?: string | boolean
-    placeholder?: string
-    disabled?: boolean
-    clearable?: boolean
-    autofocus?: boolean
-    required?: boolean
-    readonly?: boolean
-    type?: string
-    maxlength?: number
-    minlength?: number
-    width?: string
-    height?: string
-    list?: AutocompleteItem[]
-    searchekey?: string[]
-    showkey?: string[]
-    showline?: string
-    valueKey?: string
-  }>(),
-  {
-    value: '',
-    modelValue: '',
-    placeholder: '',
-    disabled: false,
-    clearable: false,
-    autofocus: false,
-    required: false,
-    readonly: false,
-    type: 'text',
-    maxlength: 0,
-    minlength: 1,
-    width: '100%',
-    height: '32px',
-    list: () => [],
-    searchekey: () => ['value'],
-    showkey: () => ['value'],
-    showline: ' - ',
-    valueKey: 'value',
-  }
-)
-
-const emit = defineEmits<{
-  'update:modelValue': [string]
-  change: [string]
-  itemclick: [AutocompleteItem | true]
-}>()
-
-const selectshow = ref(false)
-const focused = ref(false)
-const inputRef = ref<HTMLInputElement | null>(null)
-const serachList = ref<AutocompleteItem[]>([...props.list])
-const activeIndex = ref(-1)
-
-const displayValue = computed(() => {
-  if (props.modelValue !== '' && props.modelValue !== undefined && props.modelValue !== null) {
-    return String(props.modelValue)
-  }
-  return props.value || ''
-})
-
-const hasValue = computed(() => displayValue.value.length > 0)
-
-watch(
-  () => props.list,
-  (list) => {
-    serachList.value = [...list]
-  },
-  { deep: true }
-)
-
-const buildDisplayString = (item: AutocompleteItem) => {
-  return props.showkey
-    .map((key) => (Reflect.has(item, key) ? String(item[key] ?? '') : ''))
-    .filter(Boolean)
-    .join(props.showline)
-}
-
-const searchData = (data: AutocompleteItem[], searchText: string, searchFields: string[]) => {
-  const result: AutocompleteItem[] = []
-  if (!Array.isArray(data) || typeof searchText !== 'string') {
-    serachList.value = result
-    return result
-  }
-  const fields = Array.isArray(searchFields) ? searchFields : ['value']
-  const lower = searchText.toLowerCase()
-  for (const item of data) {
-    for (const field of fields) {
-      if (Reflect.has(item, field) && String(item[field]).toLowerCase().includes(lower)) {
-        result.push(item)
-        break
-      }
-    }
-  }
-  serachList.value = result
-  activeIndex.value = result.length ? 0 : -1
-  return result
-}
-
-const handleInput = (e: Event) => {
-  const target = e.target as HTMLInputElement
-  nextTick(() => {
-    if (!inputRef.value) return
-    if (target.value.length > 0) {
-      selectshow.value = true
-      searchData(props.list, target.value, props.searchekey)
-    } else {
-      selectshow.value = false
-      serachList.value = [...props.list]
-    }
-  })
-  emit('update:modelValue', target.value)
-  emit('change', target.value)
-}
-
-const handleItem = (item: AutocompleteItem) => {
-  const v = String(item[props.valueKey] ?? item.value ?? '')
-  if (inputRef.value) inputRef.value.value = v
-  emit('change', v)
-  emit('update:modelValue', v)
-  emit('itemclick', item)
-  selectshow.value = false
-}
-
-const toggleSelect = () => {
-  if (props.disabled || props.readonly) return
-  selectshow.value = !selectshow.value
-  if (selectshow.value) {
-    inputRef.value?.focus()
-    const q = inputRef.value?.value || ''
-    if (q) searchData(props.list, q, props.searchekey)
-    else serachList.value = [...props.list]
-  }
-}
-
-const onFocus = () => {
-  focused.value = true
-  if (!props.disabled && !props.readonly) {
-    selectshow.value = true
-    const q = inputRef.value?.value || ''
-    if (q) searchData(props.list, q, props.searchekey)
-    else serachList.value = [...props.list]
-  }
-}
-
-const clearvalue = () => {
-  if (inputRef.value) inputRef.value.value = ''
-  selectshow.value = false
-  serachList.value = [...props.list]
-  emit('change', '')
-  emit('update:modelValue', '')
-  inputRef.value?.focus()
-}
-
-const moveActive = (delta: number) => {
-  if (!selectshow.value || !serachList.value.length) return
-  const len = serachList.value.length
-  activeIndex.value = (activeIndex.value + delta + len) % len
-}
-
-const confirmActive = () => {
-  if (activeIndex.value >= 0 && serachList.value[activeIndex.value]) {
-    handleItem(serachList.value[activeIndex.value])
-  }
-}
-
-const onDocClick = (e: MouseEvent) => {
-  const root = (e.target as HTMLElement)?.closest?.('.qiu-autocomplete')
-  const self = inputRef.value?.closest('.qiu-autocomplete')
-  if (self && root !== self) selectshow.value = false
-}
-
-onMounted(() => document.addEventListener('mousedown', onDocClick))
-onUnmounted(() => document.removeEventListener('mousedown', onDocClick))
-</script>
-
-<style scoped lang="scss">
-.qiu-autocomplete {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  box-sizing: border-box;
-  width: 100%;
-  vertical-align: middle;
-
-  &.is-focused .qiu-autocomplete-input {
-    border-color: var(--qiu-color-primary);
-    box-shadow: 0 0 0 1px color-mix(in srgb, var(--qiu-color-primary) 25%, transparent);
-  }
-
-  &.is-disabled {
-    cursor: not-allowed;
-    opacity: 0.7;
-
-    .qiu-autocomplete-input {
-      cursor: not-allowed;
-      background: var(--qiu-fill-color-light, #f5f7fa);
-    }
-  }
-}
-
-.qiu-autocomplete-input {
-  box-sizing: border-box;
-  width: 100%;
-  height: 32px;
-  padding: 0 36px 0 12px;
-  font-size: 14px;
-  line-height: 1;
-  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;
-  transition: border-color 0.2s ease;
-}
-
-.qiu-autocomplete.is-clearable.has-value .qiu-autocomplete-input {
-  padding-right: 56px;
-}
-
-.qiu-autocomplete-suffix {
-  position: absolute;
-  top: 0;
-  right: 4px;
-  bottom: 0;
-  z-index: 2;
-  display: inline-flex;
-  gap: 2px;
-  align-items: center;
-  justify-content: flex-end;
-  pointer-events: none;
-}
-
-.qiu-autocomplete-clear,
-.qiu-autocomplete-caret {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 22px;
-  height: 22px;
-  padding: 0;
-  color: var(--qiu-text-color-placeholder, #a8abb2);
-  cursor: pointer;
-  pointer-events: auto;
-  background: transparent;
-  border: 0;
-  border-radius: 50%;
-  outline: none;
-  transition: color 0.15s ease, background 0.15s ease;
-
-  :deep(.qiu-icon) {
-    font-size: 14px;
-    line-height: 1;
-  }
-
-  &:hover {
-    color: var(--qiu-text-color-regular, #606266);
-    background: var(--qiu-fill-color-light, #f5f7fa);
-  }
-}
-
-.qiu-autocomplete-clear:hover {
-  color: var(--qiu-color-info);
-}
-
-.qiu-autocomplete-caret {
-  &.is-open {
-    color: var(--qiu-color-primary);
-
-    :deep(.qiu-icon) {
-      transform: rotate(180deg);
-    }
-  }
-
-  :deep(.qiu-icon) {
-    transition: transform 0.2s ease;
-  }
-}
-
-.qiu-autocomplete-list {
-  position: absolute;
-  top: calc(100% + 4px);
-  left: 0;
-  z-index: 3000;
-  width: 100%;
-  max-height: 280px;
-  overflow-y: auto;
-  background: var(--qiu-bg-color-overlay, #fff);
-  border: 1px solid var(--qiu-border-color-light, #e4e7ed);
-  border-radius: 6px;
-  box-shadow: var(--qiu-box-shadow-light, 0 4px 12px rgb(0 0 0 / 10%));
-}
-
-.qiu-autocomplete-list-item {
-  height: 34px;
-  padding: 0 12px;
-  overflow: hidden;
-  line-height: 34px;
-  text-align: left;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  cursor: pointer;
-
-  &:hover,
-  &.is-active {
-    color: var(--qiu-color-primary);
-    background: var(--qiu-fill-color-light, #f5f7fa);
-  }
-}
-
-.qiu-autocomplete-empty {
-  padding: 14px 12px;
-  font-size: 13px;
-  color: var(--qiu-text-color-secondary);
-  text-align: center;
-}
-
-.qiu-ellipsis {
-  display: block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-</style>