foucui 1.0.1 → 2.0.0

package/components/QiuInputOtp/index.vue

@@ -1,190 +0,0 @@
-<template>
-  <div
-    ref="rootRef"
-    class="qiu-otp"
-    :class="[`qiu-otp--${size}`, { 'is-disabled': disabled }]"
-    @paste="onPaste"
-  >
-    <input
-      v-for="(cell, i) in cells"
-      :key="i"
-      :ref="(el) => setInputRef(el, i)"
-      class="qiu-otp__input"
-      :class="{ 'is-filled': !!cell }"
-      :value="cell"
-      :disabled="disabled"
-      :type="mask ? 'password' : 'text'"
-      inputmode="numeric"
-      maxlength="1"
-      :aria-label="`验证码第 ${i + 1} 位`"
-      @input="onInput($event, i)"
-      @keydown="onKeydown($event, i)"
-      @focus="onFocus($event, i)"
-    />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { computed, nextTick, ref, watch } from 'vue'
-
-defineOptions({ name: 'QiuOtp' })
-
-const props = withDefaults(
-  defineProps<{
-    modelValue?: string
-    length?: number
-    size?: 'small' | 'default' | 'large'
-    disabled?: boolean
-    mask?: boolean
-    /** 仅允许数字 */
-    numeric?: boolean
-  }>(),
-  {
-    modelValue: '',
-    length: 6,
-    size: 'default',
-    disabled: false,
-    mask: false,
-    numeric: true,
-  }
-)
-
-const emit = defineEmits<{
-  'update:modelValue': [string]
-  change: [string]
-  complete: [string]
-}>()
-
-const rootRef = ref<HTMLElement | null>(null)
-const inputRefs = ref<(HTMLInputElement | null)[]>([])
-
-const cells = computed(() => {
-  const arr = String(props.modelValue || '')
-    .slice(0, props.length)
-    .split('')
-  const out: string[] = []
-  for (let i = 0; i < props.length; i++) out.push(arr[i] ?? '')
-  return out
-})
-
-const setInputRef = (el: any, i: number) => {
-  inputRefs.value[i] = el as HTMLInputElement | null
-}
-
-const emitValue = (next: string[]) => {
-  const str = next.join('')
-  emit('update:modelValue', str)
-  emit('change', str)
-  if (str.length === props.length && !next.includes('')) emit('complete', str)
-}
-
-const focusAt = (i: number) => {
-  nextTick(() => inputRefs.value[i]?.focus())
-}
-
-const onInput = (e: Event, i: number) => {
-  const target = e.target as HTMLInputElement
-  let v = target.value
-  if (props.numeric) v = v.replace(/\D/g, '')
-  v = v.slice(-1)
-  const next = [...cells.value]
-  next[i] = v
-  // 自动跳到下一个
-  if (v && i < props.length - 1) focusAt(i + 1)
-  emitValue(next)
-}
-
-const onKeydown = (e: KeyboardEvent, i: number) => {
-  if (e.key === 'Backspace') {
-    const next = [...cells.value]
-    if (next[i]) {
-      next[i] = ''
-      emitValue(next)
-    } else if (i > 0) {
-      next[i - 1] = ''
-      emitValue(next)
-      focusAt(i - 1)
-    }
-    e.preventDefault()
-  } else if (e.key === 'ArrowLeft' && i > 0) {
-    focusAt(i - 1)
-  } else if (e.key === 'ArrowRight' && i < props.length - 1) {
-    focusAt(i + 1)
-  }
-}
-
-const onFocus = (e: FocusEvent, i: number) => {
-  const target = e.target as HTMLInputElement
-  target.select()
-}
-
-const onPaste = (e: ClipboardEvent) => {
-  e.preventDefault()
-  let text = e.clipboardData?.getData('text') ?? ''
-  if (props.numeric) text = text.replace(/\D/g, '')
-  const chars = text.slice(0, props.length).split('')
-  const next = [...cells.value]
-  chars.forEach((c, i) => (next[i] = c))
-  emitValue(next)
-  focusAt(Math.min(chars.length, props.length - 1))
-}
-
-watch(
-  () => props.length,
-  () => (inputRefs.value = [])
-)
-</script>
-
-<style lang="scss" scoped>
-.qiu-otp {
-  display: inline-flex;
-  gap: 8px;
-  vertical-align: middle;
-
-  &.is-disabled {
-    opacity: 0.6;
-    pointer-events: none;
-  }
-}
-
-.qiu-otp__input {
-  box-sizing: border-box;
-  width: 40px;
-  height: 40px;
-  padding: 0;
-  font-size: 18px;
-  font-weight: 600;
-  text-align: center;
-  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, box-shadow 0.2s ease;
-
-  &:hover {
-    border-color: var(--qiu-border-color-hover, #c0c4cc);
-  }
-
-  &: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);
-  }
-
-  &.is-filled {
-    border-color: var(--qiu-color-primary, #409eff);
-  }
-}
-
-.qiu-otp--small .qiu-otp__input {
-  width: 32px;
-  height: 32px;
-  font-size: 15px;
-}
-
-.qiu-otp--large .qiu-otp__input {
-  width: 48px;
-  height: 48px;
-  font-size: 20px;
-}
-</style>

package/components/QiuKbd/index.vue

@@ -1,57 +0,0 @@
-<template>
-  <kbd class="qiu-kbd" :class="[`qiu-kbd--${size}`]">
-    <slot />
-  </kbd>
-</template>
-
-<script lang="ts" setup>
-defineOptions({ name: 'QiuKbd' })
-
-withDefaults(
-  defineProps<{
-    size?: 'small' | 'default' | 'large'
-  }>(),
-  {
-    size: 'default',
-  }
-)
-</script>
-
-<style lang="scss" scoped>
-.qiu-kbd {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  font-family: var(--qiu-font-family-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
-  line-height: 1;
-  color: var(--qiu-text-color-regular, #606266);
-  white-space: nowrap;
-  background: var(--qiu-fill-color-blank, #fff);
-  border: 1px solid var(--qiu-border-color, #dcdfe6);
-  border-bottom-width: 2px;
-  border-radius: 6px;
-  box-shadow: 0 1px 0 var(--qiu-border-color-lighter, #ebeef5);
-}
-
-.qiu-kbd--small {
-  min-width: 18px;
-  height: 18px;
-  padding: 0 5px;
-  font-size: 11px;
-}
-
-.qiu-kbd--default {
-  min-width: 22px;
-  height: 22px;
-  padding: 0 6px;
-  font-size: 12px;
-}
-
-.qiu-kbd--large {
-  min-width: 26px;
-  height: 26px;
-  padding: 0 8px;
-  font-size: 13px;
-}
-</style>

package/components/QiuLayoutContainer/index.vue

@@ -1,50 +0,0 @@
-<template>
-  <div class="qiu-layout" :class="[`qiu-layout--${direction}`]">
-    <slot />
-  </div>
-</template>
-
-<script lang="ts" setup>
-defineOptions({ name: 'QiuLayoutContainer' })
-
-withDefaults(
-  defineProps<{
-    /** 主轴方向 */
-    direction?: 'horizontal' | 'vertical'
-    /** 子项是否均分 */
-    fit?: boolean
-    /** 间距(px) */
-    gap?: number
-  }>(),
-  {
-    direction: 'horizontal',
-    fit: false,
-    gap: 12,
-  }
-)
-</script>
-
-<style lang="scss" scoped>
-.qiu-layout {
-  display: flex;
-  width: 100%;
-  box-sizing: border-box;
-
-  &--horizontal {
-    flex-direction: row;
-  }
-
-  &--vertical {
-    flex-direction: column;
-  }
-
-  &--vertical > :deep(*) {
-    width: 100%;
-  }
-
-  &--horizontal.qiu-layout--fit > :deep(*) {
-    flex: 1 1 0;
-    min-width: 0;
-  }
-}
-</style>

package/components/QiuLinkPreview/index.vue

@@ -1,224 +0,0 @@
-<template>
-  <a
-    ref="triggerRef"
-    class="qiu-link-preview"
-    :href="href"
-    :target="target"
-    rel="noopener noreferrer"
-    @mouseenter="onEnter"
-    @mouseleave="onLeave"
-  >
-    <slot>{{ href }}</slot>
-  </a>
-
-  <Teleport to="body">
-    <Transition name="qiu-link-preview-fade">
-      <div
-        v-if="visible"
-        ref="cardRef"
-        class="qiu-link-preview__panel"
-        :style="panelStyle"
-        @mouseenter="onCardEnter"
-        @mouseleave="onCardLeave"
-      >
-        <div v-if="image" class="qiu-link-preview__image" :style="{ backgroundImage: `url(${image})` }" />
-        <div class="qiu-link-preview__content">
-          <div class="qiu-link-preview__host">
-            <qiu-icon icon="links-line" />
-            <span>{{ host }}</span>
-          </div>
-          <div v-if="title" class="qiu-link-preview__title">{{ title }}</div>
-          <div v-if="description" class="qiu-link-preview__desc">{{ description }}</div>
-        </div>
-      </div>
-    </Transition>
-  </Teleport>
-</template>
-
-<script lang="ts" setup>
-import { computed, nextTick, ref } from 'vue'
-
-defineOptions({ name: 'QiuLinkPreview' })
-
-const props = withDefaults(
-  defineProps<{
-    href: string
-    title?: string
-    description?: string
-    image?: string
-    target?: string
-    openDelay?: number
-    closeDelay?: number
-  }>(),
-  {
-    title: '',
-    description: '',
-    image: '',
-    target: '_blank',
-    openDelay: 200,
-    closeDelay: 150,
-  }
-)
-
-const emit = defineEmits<{ visibleChange: [boolean] }>()
-
-const triggerRef = ref<HTMLElement | null>(null)
-const cardRef = ref<HTMLElement | null>(null)
-const visible = ref(false)
-const panelStyle = ref<Record<string, string>>({})
-let openTimer: ReturnType<typeof setTimeout> | undefined
-let closeTimer: ReturnType<typeof setTimeout> | undefined
-let inCard = false
-
-const host = computed(() => {
-  try {
-    return new URL(props.href).hostname
-  } catch {
-    return props.href
-  }
-})
-
-const clearTimers = () => {
-  if (openTimer) clearTimeout(openTimer)
-  if (closeTimer) clearTimeout(closeTimer)
-}
-
-const open = async () => {
-  clearTimers()
-  openTimer = setTimeout(async () => {
-    visible.value = true
-    emit('visibleChange', true)
-    await nextTick()
-    updatePosition()
-  }, props.openDelay)
-}
-
-const scheduleClose = () => {
-  clearTimers()
-  closeTimer = setTimeout(() => {
-    if (!inCard) {
-      visible.value = false
-      emit('visibleChange', false)
-    }
-  }, props.closeDelay)
-}
-
-const onEnter = () => open()
-const onLeave = () => scheduleClose()
-const onCardEnter = () => {
-  inCard = true
-  clearTimers()
-}
-const onCardLeave = () => {
-  inCard = false
-  scheduleClose()
-}
-
-const updatePosition = () => {
-  const trigger = triggerRef.value
-  const card = cardRef.value
-  if (!trigger || !card) return
-  const rect = trigger.getBoundingClientRect()
-  const cardRect = card.getBoundingClientRect()
-  const gap = 10
-  let top = rect.bottom + gap
-  if (top + cardRect.height > window.innerHeight - 4) top = rect.top - cardRect.height - gap
-  let left = rect.left
-  left = Math.min(Math.max(4, left), window.innerWidth - cardRect.width - 4)
-  top = Math.max(4, top)
-  panelStyle.value = {
-    position: 'fixed',
-    top: `${top}px`,
-    left: `${left}px`,
-    width: `${Math.min(320, window.innerWidth - 8)}px`,
-    zIndex: '2100',
-  }
-}
-
-const onScrollOrResize = () => visible.value && updatePosition()
-
-watch(visible, (v) => {
-  if (v) {
-    window.addEventListener('scroll', onScrollOrResize, true)
-    window.addEventListener('resize', onScrollOrResize)
-  } else {
-    window.removeEventListener('scroll', onScrollOrResize, true)
-    window.removeEventListener('resize', onScrollOrResize)
-  }
-})
-
-onBeforeUnmount(() => {
-  clearTimers()
-  window.removeEventListener('scroll', onScrollOrResize, true)
-  window.removeEventListener('resize', onScrollOrResize)
-})
-</script>
-
-<style lang="scss" scoped>
-.qiu-link-preview {
-  color: var(--qiu-color-primary, #409eff);
-  text-decoration: none;
-  cursor: pointer;
-
-  &:hover {
-    text-decoration: underline;
-  }
-}
-
-.qiu-link-preview__panel {
-  box-sizing: border-box;
-  overflow: hidden;
-  background: var(--qiu-bg-color-overlay, #fff);
-  border: 1px solid var(--qiu-border-color-light, #e4e7ed);
-  border-radius: 10px;
-  box-shadow: var(--qiu-box-shadow-light, 0 6px 16px rgba(0, 0, 0, 0.12));
-}
-
-.qiu-link-preview__image {
-  height: 120px;
-  background-color: var(--qiu-fill-color-light, #f5f7fa);
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: cover;
-}
-
-.qiu-link-preview__content {
-  padding: 12px 14px;
-}
-
-.qiu-link-preview__host {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  margin-bottom: 6px;
-  font-size: 12px;
-  color: var(--qiu-text-color-secondary, #909399);
-}
-
-.qiu-link-preview__title {
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--qiu-text-color-primary, #303133);
-}
-
-.qiu-link-preview__desc {
-  margin-top: 4px;
-  font-size: 13px;
-  line-height: 1.5;
-  color: var(--qiu-text-color-regular, #606266);
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-.qiu-link-preview-fade-enter-active,
-.qiu-link-preview-fade-leave-active {
-  transition: opacity 0.15s ease;
-}
-
-.qiu-link-preview-fade-enter-from,
-.qiu-link-preview-fade-leave-to {
-  opacity: 0;
-}
-</style>

package/components/QiuLoading/index.ts

@@ -1,176 +0,0 @@
-/**
- * QiuLoading — 指令 vQiuLoading + 服务 qiuLoading.service
- *
- * 使用：
- *   import { vQiuLoading, qiuLoading } from '.../QiuLoading'
- *   app.directive('qiu-loading', vQiuLoading)
- *
- *   v-qiu-loading="true"
- *   v-qiu-loading="{ loading: true, text: '加载中', effect: 'dots' }"
- *   qiuLoading.service({ target: el, text: '...', effect: 'bars' })
- */
-import { createApp, h, type App, type Directive, type DirectiveBinding } from 'vue'
-import QiuLoadingSpinner from './spinner.vue'
-import { QIU_LOADING_EFFECTS, type QiuLoadingEffect } from './types'
-
-export type { QiuLoadingEffect }
-export { QIU_LOADING_EFFECTS }
-
-export interface QiuLoadingOptions {
-  target?: HTMLElement | string
-  text?: string
-  fullscreen?: boolean
-  transparent?: boolean
-  /** 动画效果，见 QIU_LOADING_EFFECTS */
-  effect?: QiuLoadingEffect
-  /** directive 绑定值 */
-  loading?: boolean
-}
-
-interface LoadingInstance {
-  app: App
-  el: HTMLElement
-  host: HTMLElement
-  text: string
-  effect: QiuLoadingEffect
-  transparent: boolean
-}
-
-const instanceMap = new WeakMap<HTMLElement, LoadingInstance>()
-
-const resolveTarget = (target?: HTMLElement | string): HTMLElement => {
-  if (target instanceof HTMLElement) return target
-  if (typeof target === 'string') {
-    const el = document.querySelector(target)
-    if (el instanceof HTMLElement) return el
-  }
-  return document.body
-}
-
-const ensureRelative = (el: HTMLElement) => {
-  const pos = getComputedStyle(el).position
-  if (pos === 'static' || !pos) {
-    el.dataset.qiuLoadingPrevPosition = el.style.position || ''
-    el.style.position = 'relative'
-  }
-}
-
-const restorePosition = (el: HTMLElement) => {
-  if ('qiuLoadingPrevPosition' in el.dataset) {
-    el.style.position = el.dataset.qiuLoadingPrevPosition || ''
-    delete el.dataset.qiuLoadingPrevPosition
-  }
-}
-
-const parseBinding = (binding: DirectiveBinding<boolean | QiuLoadingOptions>): QiuLoadingOptions => {
-  if (typeof binding.value === 'object' && binding.value !== null) {
-    return { ...binding.value }
-  }
-  return { loading: !!binding.value }
-}
-
-const getLoadingState = (binding: DirectiveBinding<boolean | QiuLoadingOptions>): boolean => {
-  if (typeof binding.value === 'object' && binding.value !== null) {
-    if ((binding.value as QiuLoadingOptions).loading === undefined) return true
-    return !!(binding.value as QiuLoadingOptions).loading
-  }
-  return !!binding.value
-}
-
-const mountLoading = (host: HTMLElement, options: QiuLoadingOptions) => {
-  const text = options.text || ''
-  const effect: QiuLoadingEffect = options.effect || 'spinner'
-  const transparent = !!options.transparent
-  const existing = instanceMap.get(host)
-  // 已在 loading 且参数未变：勿重复挂载
-  if (
-    existing &&
-    existing.text === text &&
-    existing.effect === effect &&
-    existing.transparent === transparent
-  ) {
-    return existing
-  }
-  if (existing) {
-    existing.app.unmount()
-    existing.el.remove()
-    instanceMap.delete(host)
-  }
-
-  const isFullscreen = options.fullscreen ?? host === document.body
-  if (!isFullscreen) ensureRelative(host)
-
-  const el = document.createElement('div')
-  el.className = 'qiu-loading-host'
-  host.appendChild(el)
-
-  const app = createApp({
-    setup() {
-      return () =>
-        h(QiuLoadingSpinner, {
-          text,
-          fullscreen: isFullscreen,
-          transparent,
-          effect,
-        })
-    },
-  })
-
-  app.mount(el)
-  const inst: LoadingInstance = { app, el, host, text, effect, transparent }
-  instanceMap.set(host, inst)
-  return inst
-}
-
-const unmountLoading = (host: HTMLElement) => {
-  const inst = instanceMap.get(host)
-  if (!inst) return
-  inst.app.unmount()
-  inst.el.remove()
-  instanceMap.delete(host)
-  if (host !== document.body) restorePosition(host)
-}
-
-export const vQiuLoading: Directive<HTMLElement, boolean | QiuLoadingOptions> = {
-  mounted(el, binding) {
-    if (getLoadingState(binding)) {
-      const opts = parseBinding(binding)
-      mountLoading(el, { ...opts, loading: true })
-    }
-  },
-  updated(el, binding) {
-    const opts = parseBinding(binding)
-    if (getLoadingState(binding)) {
-      mountLoading(el, { ...opts, loading: true })
-    } else {
-      unmountLoading(el)
-    }
-  },
-  unmounted(el) {
-    unmountLoading(el)
-  },
-}
-
-export const qiuLoading = {
-  service(options: QiuLoadingOptions = {}) {
-    const host = resolveTarget(options.target)
-    const isBody = host === document.body
-    mountLoading(host, {
-      ...options,
-      loading: true,
-      fullscreen: options.fullscreen ?? isBody,
-    })
-
-    return {
-      close: () => unmountLoading(host),
-    }
-  },
-}
-
-export default {
-  install(app: App) {
-    app.directive('qiu-loading', vQiuLoading)
-  },
-}
-
-export { QiuLoadingSpinner }