foucui 1.0.1 → 1.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "foucui",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "FouCui Vue3 组件库（原 qiuui-vue / qiuye，含 QiuCanvasKit 画布套件）",
   "type": "module",
   "main": "./dist/foucui.umd.cjs",
@@ -15,21 +15,13 @@
     "./dist/foucui.css": "./dist/foucui.css",
     "./dist/qiuye.css": "./dist/foucui.css",
     "./dist/qiuui-vue.css": "./dist/foucui.css",
-    "./styles/*": "./styles/*",
-    "./components/*": "./components/*",
-    "./plugins/*": "./plugins/*"
+    "./package.json": "./package.json"
   },
   "files": [
-    "dist",
-    "styles",
-    "components",
-    "plugins",
-    "src"
+    "dist"
   ],
   "sideEffects": [
-    "**/*.scss",
-    "**/*.css",
-    "virtual:svg-icons-register"
+    "**/*.css"
   ],
   "scripts": {
     "build": "vite build",
@@ -41,6 +33,19 @@
     "vue-router": ">=4.0.0"
   },
   "dependencies": {
+    "@iconify-json/ant-design": "^1.2.5",
+    "@iconify-json/bi": "^1.2.2",
+    "@iconify-json/carbon": "^1.2.8",
+    "@iconify-json/ep": "^1.2.2",
+    "@iconify-json/flagpack": "^1.2.1",
+    "@iconify-json/icon-park": "^1.2.2",
+    "@iconify-json/icon-park-outline": "^1.2.2",
+    "@iconify-json/logos": "^1.2.4",
+    "@iconify-json/lucide": "^1.2.45",
+    "@iconify-json/mdi": "^1.2.3",
+    "@iconify-json/ph": "^1.2.2",
+    "@iconify-json/ri": "^1.2.5",
+    "@iconify-json/tabler": "^1.2.17",
     "@iconify/vue": "^4.1.2",
     "@vueuse/head": "^2.0.0",
     "axios": "^1.6.0",
@@ -71,6 +76,7 @@
     "vue": "^3.4.0",
     "vue-router": "^4.3.0"
   },
+  "author": "qiuye <yjk150@qq.com>",
   "license": "MIT",
   "keywords": [
     "vue3",
@@ -79,5 +85,9 @@
     "qiuui",
     "canvas",
     "badge"
-  ]
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  }
 }

package/components/QiuAffix/index.vue

@@ -1,186 +0,0 @@
-<template>
-  <div ref="rootRef" class="qiu-affix">
-    <div
-      v-if="fixed && !useSticky"
-      class="qiu-affix__placeholder"
-      :style="{ height: `${placeholderHeight}px` }"
-    />
-    <div
-      ref="affixRef"
-      class="qiu-affix__content"
-      :class="{ 'is-fixed': fixed && !useSticky, 'is-sticky': useSticky }"
-      :style="contentStyle"
-    >
-      <slot />
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-defineOptions({ name: 'QiuAffix' })
-
-const props = withDefaults(
-  defineProps<{
-    offset?: number
-    position?: 'top' | 'bottom'
-    zIndex?: number
-    /** 滚动容器选择器；指定后优先用 sticky（适合 overflow 容器） */
-    target?: string
-  }>(),
-  {
-    offset: 0,
-    position: 'top',
-    zIndex: 100,
-    target: '',
-  }
-)
-
-const emit = defineEmits<{
-  change: [fixed: boolean]
-  scroll: [payload: { scrollTop: number; fixed: boolean }]
-}>()
-
-const rootRef = ref<HTMLElement | null>(null)
-const affixRef = ref<HTMLElement | null>(null)
-const fixed = ref(false)
-const placeholderHeight = ref(0)
-
-/** 有 target 时用 sticky，天然适配 overflow 滚动容器 */
-const useSticky = computed(() => !!props.target)
-
-const getScrollContainer = (): HTMLElement | Window => {
-  if (!props.target) return window
-  const el = document.querySelector(props.target)
-  return (el as HTMLElement) || window
-}
-
-const update = () => {
-  if (useSticky.value) return
-
-  const root = rootRef.value
-  const affix = affixRef.value
-  if (!root || !affix) return
-
-  const container = getScrollContainer()
-  const rootRect = root.getBoundingClientRect()
-  placeholderHeight.value = affix.offsetHeight
-
-  let next = false
-  if (props.position === 'top') {
-    // 仅判断是否滚过阈值；滚回时自动解除（勿再加与之矛盾的 bottom 条件）
-    if (container === window) {
-      next = rootRect.top <= props.offset
-    } else {
-      const cTop = (container as HTMLElement).getBoundingClientRect().top
-      next = rootRect.top <= cTop + props.offset
-    }
-  } else if (container === window) {
-    next = rootRect.bottom >= window.innerHeight - props.offset
-  } else {
-    const cBottom = (container as HTMLElement).getBoundingClientRect().bottom
-    next = rootRect.bottom >= cBottom - props.offset
-  }
-
-  if (next !== fixed.value) {
-    fixed.value = next
-    emit('change', next)
-  }
-
-  const scrollTop =
-    container === window
-      ? window.scrollY || document.documentElement.scrollTop
-      : (container as HTMLElement).scrollTop
-  emit('scroll', { scrollTop, fixed: fixed.value })
-}
-
-const contentStyle = computed(() => {
-  if (useSticky.value) {
-    return {
-      position: 'sticky',
-      zIndex: String(props.zIndex),
-      ...(props.position === 'top'
-        ? { top: `${props.offset}px` }
-        : { bottom: `${props.offset}px` }),
-    } as Record<string, string>
-  }
-
-  if (!fixed.value) return undefined
-
-  const container = getScrollContainer()
-  const style: Record<string, string> = {
-    position: 'fixed',
-    zIndex: String(props.zIndex),
-    width: `${rootRef.value?.offsetWidth ?? 0}px`,
-  }
-
-  if (props.position === 'top') {
-    const top =
-      container === window
-        ? props.offset
-        : (container as HTMLElement).getBoundingClientRect().top + props.offset
-    style.top = `${top}px`
-  } else {
-    const bottom =
-      container === window
-        ? props.offset
-        : window.innerHeight -
-          (container as HTMLElement).getBoundingClientRect().bottom +
-          props.offset
-    style.bottom = `${bottom}px`
-  }
-
-  if (container !== window) {
-    const rect = (container as HTMLElement).getBoundingClientRect()
-    style.left = `${rect.left}px`
-    style.width = `${rect.width}px`
-  } else if (rootRef.value) {
-    style.left = `${rootRef.value.getBoundingClientRect().left}px`
-  }
-
-  return style
-})
-
-let containerEl: HTMLElement | Window = window
-
-const onScroll = () => update()
-const onResize = () => update()
-
-const bind = () => {
-  containerEl.removeEventListener('scroll', onScroll)
-  window.removeEventListener('resize', onResize)
-  if (useSticky.value) return
-  containerEl = getScrollContainer()
-  containerEl.addEventListener('scroll', onScroll, { passive: true })
-  window.addEventListener('resize', onResize, { passive: true })
-  update()
-}
-
-onMounted(() => {
-  nextTick(bind)
-})
-
-onBeforeUnmount(() => {
-  containerEl.removeEventListener('scroll', onScroll)
-  window.removeEventListener('resize', onResize)
-})
-
-watch(
-  () => [props.target, props.offset, props.position],
-  () => nextTick(bind)
-)
-
-defineExpose({ update })
-</script>
-
-<style lang="scss" scoped>
-.qiu-affix {
-  &__content {
-    box-sizing: border-box;
-
-    &.is-fixed,
-    &.is-sticky {
-      z-index: 10;
-    }
-  }
-}
-</style>

package/components/QiuAlert/index.vue

@@ -1,208 +0,0 @@
-<template>
-  <div
-    v-show="visible"
-    class="qiu-alert"
-    :class="[
-      `qiu-alert--${normalizedType}`,
-      `qiu-alert--${effect}`,
-      { 'is-center': center },
-    ]"
-    role="alert"
-    v-bind="$attrs"
-  >
-    <qiu-icon v-if="showIcon" class="qiu-alert__icon" :icon="typeIcon" />
-    <div class="qiu-alert__content">
-      <div v-if="title || $slots.title" class="qiu-alert__title">
-        <slot name="title">{{ title }}</slot>
-      </div>
-      <div v-if="$slots.default || description" class="qiu-alert__description">
-        <slot>{{ description }}</slot>
-      </div>
-    </div>
-    <button
-      v-if="closable"
-      type="button"
-      class="qiu-alert__close"
-      :aria-label="closeText || 'Close'"
-      @click="handleClose"
-    >
-      <span v-if="closeText">{{ closeText }}</span>
-      <qiu-icon v-else icon="close-line" />
-    </button>
-  </div>
-</template>
-
-<script lang="ts" setup>
-defineOptions({
-  name: 'QiuAlert',
-})
-
-const props = defineProps({
-  title: {
-    type: String,
-    default: '',
-  },
-  description: {
-    type: String,
-    default: '',
-  },
-  type: {
-    type: String as () => 'success' | 'warning' | 'info' | 'error' | 'danger',
-    default: 'info',
-  },
-  closable: {
-    type: Boolean,
-    default: false,
-  },
-  closeText: {
-    type: String,
-    default: '',
-  },
-  showIcon: {
-    type: Boolean,
-    default: false,
-  },
-  center: {
-    type: Boolean,
-    default: false,
-  },
-  effect: {
-    type: String as () => 'light' | 'dark',
-    default: 'light',
-  },
-})
-
-const emit = defineEmits<{
-  close: []
-}>()
-
-const visible = ref(true)
-
-const normalizedType = computed(() => (props.type === 'danger' ? 'error' : props.type))
-
-const typeIcon = computed(() => {
-  const map: Record<string, string> = {
-    success: 'checkbox-circle-line',
-    warning: 'error-warning-line',
-    info: 'information-line',
-    error: 'close-circle-line',
-  }
-  return map[normalizedType.value] || map.info
-})
-
-const handleClose = () => {
-  visible.value = false
-  emit('close')
-}
-</script>
-
-<style lang="scss" scoped>
-.qiu-alert {
-  display: flex;
-  gap: 8px;
-  align-items: flex-start;
-  width: 100%;
-  padding: 8px 16px;
-  margin: 0;
-  overflow: hidden;
-  border-radius: var(--qiu-border-radius-base, 4px);
-  box-sizing: border-box;
-  transition: opacity 0.2s ease;
-
-  &.is-center {
-    justify-content: center;
-    text-align: center;
-
-    .qiu-alert__content {
-      flex: none;
-    }
-  }
-
-  &--light {
-    &.qiu-alert--success {
-      color: var(--qiu-color-success);
-      background-color: var(--qiu-color-success-light-9, #f0f9eb);
-    }
-
-    &.qiu-alert--warning {
-      color: var(--qiu-color-warning);
-      background-color: var(--qiu-color-warning-light-9, #fdf6ec);
-    }
-
-    &.qiu-alert--info {
-      color: var(--qiu-color-info);
-      background-color: var(--qiu-color-info-light-9, #f4f4f5);
-    }
-
-    &.qiu-alert--error {
-      color: var(--qiu-color-error);
-      background-color: var(--qiu-color-error-light-9, #fef0f0);
-    }
-  }
-
-  &--dark {
-    &.qiu-alert--success {
-      color: #fff;
-      background-color: var(--qiu-color-success);
-    }
-
-    &.qiu-alert--warning {
-      color: #fff;
-      background-color: var(--qiu-color-warning);
-    }
-
-    &.qiu-alert--info {
-      color: #fff;
-      background-color: var(--qiu-color-info);
-    }
-
-    &.qiu-alert--error {
-      color: #fff;
-      background-color: var(--qiu-color-error);
-    }
-  }
-}
-
-.qiu-alert__icon {
-  flex-shrink: 0;
-  margin-top: 2px;
-  font-size: 16px;
-}
-
-.qiu-alert__content {
-  flex: 1;
-  min-width: 0;
-}
-
-.qiu-alert__title {
-  font-size: 14px;
-  font-weight: 700;
-  line-height: 1.4;
-}
-
-.qiu-alert__description {
-  margin: 4px 0 0;
-  font-size: 13px;
-  line-height: 1.6;
-}
-
-.qiu-alert__close {
-  display: inline-flex;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  margin: 0;
-  font-size: 12px;
-  color: inherit;
-  cursor: pointer;
-  background: transparent;
-  border: none;
-  opacity: 0.7;
-  transition: opacity 0.2s ease;
-
-  &:hover {
-    opacity: 1;
-  }
-}
-</style>

package/components/QiuAnchor/context.ts

@@ -1,18 +0,0 @@
-import type { InjectionKey, Ref } from 'vue'
-
-export interface QiuAnchorLinkRecord {
-  href: string
-  title: string
-  el: HTMLElement | null
-}
-
-export interface QiuAnchorContext {
-  offset: Ref<number>
-  bound: Ref<string>
-  activeLink: Ref<string>
-  registerLink: (link: QiuAnchorLinkRecord) => void
-  unregisterLink: (href: string) => void
-  scrollToLink: (href: string) => void
-}
-
-export const QIU_ANCHOR_KEY: InjectionKey<QiuAnchorContext> = Symbol('QiuAnchor')

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>