foucui 1.0.1 → 2.0.0

package/components/QiuMenuNav/QiuMenuNavSub.vue

@@ -1,120 +0,0 @@
-<template>
-  <li
-    class="qiu-menu-nav-sub"
-    :class="{
-      'is-open': isOpen,
-      'is-active': isActive,
-    }"
-    role="none"
-  >
-    <div class="qiu-menu-nav-sub__title" @click="toggle">
-      <slot name="icon" />
-      <span class="qiu-menu-nav-sub__text">
-        <slot name="title">{{ title }}</slot>
-      </span>
-      <span class="qiu-menu-nav-sub__arrow" :class="{ 'is-open': isOpen }">▾</span>
-    </div>
-    <ul v-show="isOpen && !menuCtx?.collapse.value" class="qiu-menu-nav-sub__list">
-      <slot />
-    </ul>
-  </li>
-</template>
-
-<script lang="ts" setup>
-import type { QiuMenuNavContext } from './context'
-import { QIU_MENU_NAV_KEY } from './context'
-
-defineOptions({ name: 'QiuMenuNavSub' })
-
-const props = withDefaults(
-  defineProps<{
-    index: string
-    title?: string
-  }>(),
-  {
-    title: '',
-  }
-)
-
-const menuCtx = inject<QiuMenuNavContext>(QIU_MENU_NAV_KEY, null)
-
-const isOpen = computed(() => menuCtx?.isSubOpen(props.index) ?? false)
-
-const isActive = computed(() => {
-  const active = menuCtx?.activeIndex.value ?? ''
-  return active === props.index || active.startsWith(`${props.index}/`)
-})
-
-const toggle = () => {
-  menuCtx?.toggleSub(props.index)
-}
-</script>
-
-<style lang="scss" scoped>
-.qiu-menu-nav-sub {
-  list-style: none;
-
-  &__title {
-    display: flex;
-    gap: 8px;
-    align-items: center;
-    height: var(--qiu-menu-item-height, var(--qiu-menu-item-height, 56px));
-    padding: 0 20px;
-    color: var(--qiu-menu-text-color, var(--qiu-menu-text-color, #303133));
-    cursor: pointer;
-    transition: background 0.2s ease, color 0.2s ease;
-
-    &:hover {
-      background: var(--qiu-menu-hover-bg-color, var(--qiu-menu-hover-bg-color, #ecf5ff));
-    }
-  }
-
-  &.is-active > &__title {
-    color: var(--qiu-menu-active-color, var(--qiu-menu-active-color, var(--qiu-color-primary, var(--qiu-color-primary))));
-  }
-
-  &__text {
-    flex: 1;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  &__arrow {
-    flex-shrink: 0;
-    font-size: 12px;
-    transition: transform 0.2s ease;
-
-    &.is-open {
-      transform: rotate(180deg);
-    }
-  }
-
-  &__list {
-    padding: 0;
-    margin: 0;
-    overflow: hidden;
-    background: var(--qiu-menu-bg-color, var(--qiu-menu-bg-color, #fff));
-
-    :deep(.qiu-menu-nav-item__inner) {
-      padding-left: 40px;
-    }
-
-    :deep(.qiu-menu-nav-sub > .qiu-menu-nav-sub__title) {
-      padding-left: 40px;
-    }
-
-    :deep(.qiu-menu-nav-sub__list .qiu-menu-nav-item__inner) {
-      padding-left: 60px;
-    }
-
-    :deep(.qiu-menu-nav-sub__list .qiu-menu-nav-sub > .qiu-menu-nav-sub__title) {
-      padding-left: 60px;
-    }
-
-    :deep(.qiu-menu-nav-sub__list .qiu-menu-nav-sub__list .qiu-menu-nav-item__inner) {
-      padding-left: 80px;
-    }
-  }
-}
-</style>

package/components/QiuMenuNav/context.ts

@@ -1,14 +0,0 @@
-import type { InjectionKey, Ref } from 'vue'
-
-export interface QiuMenuNavContext {
-  mode: Ref<'vertical' | 'horizontal'>
-  collapse: Ref<boolean>
-  defaultActive: Ref<string>
-  activeIndex: Ref<string>
-  router: Ref<boolean>
-  selectItem: (index: string) => void
-  isSubOpen: (index: string) => boolean
-  toggleSub: (index: string) => void
-}
-
-export const QIU_MENU_NAV_KEY: InjectionKey<QiuMenuNavContext> = Symbol('QiuMenuNav')

package/components/QiuMenuNav/index.vue

@@ -1,148 +0,0 @@
-<template>
-  <nav
-    class="qiu-menu-nav"
-    :class="[
-      `qiu-menu-nav--${mode}`,
-      {
-        'is-collapse': collapse,
-        'is-horizontal': mode === 'horizontal',
-      },
-    ]"
-    role="menu"
-  >
-    <ul class="qiu-menu-nav__list">
-      <slot />
-    </ul>
-  </nav>
-</template>
-
-<script lang="ts" setup>
-import type { QiuMenuNavContext } from './context'
-import { QIU_MENU_NAV_KEY } from './context'
-
-defineOptions({ name: 'QiuMenuNav' })
-
-const props = withDefaults(
-  defineProps<{
-    mode?: 'vertical' | 'horizontal'
-    defaultActive?: string
-    /** 默认展开的 submenu index */
-    defaultOpeneds?: string[]
-    collapse?: boolean
-    router?: boolean
-  }>(),
-  {
-    mode: 'vertical',
-    defaultActive: '',
-    defaultOpeneds: () => [],
-    collapse: false,
-    router: false,
-  }
-)
-
-const emit = defineEmits<{
-  select: [index: string]
-}>()
-
-const activeIndex = ref(props.defaultActive)
-const openSubs = ref<Set<string>>(new Set(props.defaultOpeneds))
-
-watch(
-  () => props.defaultActive,
-  (val) => {
-    if (val) activeIndex.value = val
-  }
-)
-
-watch(
-  () => props.defaultOpeneds,
-  (val) => {
-    openSubs.value = new Set(val || [])
-  }
-)
-
-const modeRef = computed(() => props.mode)
-const collapseRef = computed(() => props.collapse)
-const defaultActiveRef = computed(() => props.defaultActive)
-const activeIndexRef = computed(() => activeIndex.value)
-const routerRef = computed(() => props.router)
-
-const isSubOpen = (index: string) => openSubs.value.has(index)
-
-const toggleSub = (index: string) => {
-  const next = new Set(openSubs.value)
-  if (next.has(index)) next.delete(index)
-  else next.add(index)
-  openSubs.value = next
-}
-
-const selectItem = (index: string) => {
-  activeIndex.value = index
-  emit('select', index)
-}
-
-provide<QiuMenuNavContext>(QIU_MENU_NAV_KEY, {
-  mode: modeRef as Ref<'vertical' | 'horizontal'>,
-  collapse: collapseRef as Ref<boolean>,
-  defaultActive: defaultActiveRef as Ref<string>,
-  activeIndex: activeIndexRef as Ref<string>,
-  router: routerRef as Ref<boolean>,
-  selectItem,
-  isSubOpen,
-  toggleSub,
-})
-</script>
-
-<style lang="scss" scoped>
-.qiu-menu-nav {
-  --qiu-menu-bg: var(--qiu-menu-bg-color, var(--qiu-menu-bg-color, #fff));
-  --qiu-menu-border: var(--qiu-menu-border-color, var(--qiu-menu-border-color, #e6e6e6));
-
-  width: 100%;
-  background: var(--qiu-menu-bg);
-  border-right: 1px solid var(--qiu-menu-border);
-
-  &__list {
-    padding: 0;
-    margin: 0;
-    list-style: none;
-  }
-
-  &--horizontal {
-    border-right: 0;
-    border-bottom: 1px solid var(--qiu-menu-border);
-
-    .qiu-menu-nav__list {
-      display: flex;
-      flex-wrap: wrap;
-    }
-
-    :deep(.qiu-menu-nav-sub__list) {
-      position: absolute;
-      z-index: 100;
-      min-width: 180px;
-      border: 1px solid var(--qiu-menu-border);
-      border-radius: var(--qiu-border-radius-base, var(--qiu-border-radius-base, 4px));
-      box-shadow: var(--qiu-box-shadow-light, var(--qiu-box-shadow-light, 0 4px 12px rgb(0 0 0 / 10%)));
-    }
-
-    :deep(.qiu-menu-nav-sub) {
-      position: relative;
-    }
-  }
-
-  &.is-collapse {
-    :deep(.qiu-menu-nav-item__title),
-    :deep(.qiu-menu-nav-sub__text),
-    :deep(.qiu-menu-nav-sub__arrow) {
-      display: none;
-    }
-
-    :deep(.qiu-menu-nav-item__inner),
-    :deep(.qiu-menu-nav-sub__title) {
-      justify-content: center;
-      padding: 0;
-    }
-  }
-}
-</style>

package/components/QiuMsg/QiuMsgItem.vue

@@ -1,180 +0,0 @@
-<template>
-  <transition name="qiu-msg-fade">
-    <div v-show="visible" class="qiu-msg" :class="[`qiu-msg--${type}`, `qiu-msg--${position}`]">
-      <i class="qiu-msg__icon" :class="iconClass" />
-      <div class="qiu-msg__content">
-        <span v-if="typeof message === 'string'">{{ message }}</span>
-        <component :is="message" v-else />
-      </div>
-      <i v-if="showClose" class="qiu-msg__close ri-close-line" @click="$emit('close')" />
-    </div>
-  </transition>
-</template>
-
-<script lang="ts" setup>
-import { computed } from 'vue'
-import type { QiuMsgPosition, QiuMsgType } from './types'
-
-defineOptions({ name: 'QiuMsgItem' })
-
-const props = defineProps<{
-  id: string
-  type: QiuMsgType
-  position: QiuMsgPosition
-  message: any
-  showClose: boolean
-  visible: boolean
-}>()
-
-defineEmits<{ close: [] }>()
-
-const iconClass = computed(() => {
-  const map: Record<QiuMsgType, string> = {
-    success: 'ri-checkbox-circle-line',
-    warning: 'ri-alert-line',
-    info: 'ri-information-line',
-    error: 'ri-close-circle-line',
-  }
-  return map[props.type]
-})
-</script>
-
-<style lang="scss">
-.qiu-msg-host {
-  position: fixed;
-  z-index: 5000;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  pointer-events: none;
-
-  &--center {
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    align-items: center;
-  }
-
-  &--left-top {
-    top: var(--qiu-msg-offset, 20px);
-    left: var(--qiu-msg-offset, 20px);
-    align-items: flex-start;
-  }
-
-  &--left-center {
-    top: 50%;
-    left: var(--qiu-msg-offset, 20px);
-    transform: translateY(-50%);
-    align-items: flex-start;
-  }
-
-  &--left-bottom {
-    bottom: var(--qiu-msg-offset, 20px);
-    left: var(--qiu-msg-offset, 20px);
-    align-items: flex-start;
-  }
-
-  &--top-center {
-    top: var(--qiu-msg-offset, 20px);
-    left: 50%;
-    transform: translateX(-50%);
-    align-items: center;
-  }
-
-  &--bottom-center {
-    bottom: var(--qiu-msg-offset, 20px);
-    left: 50%;
-    transform: translateX(-50%);
-    align-items: center;
-  }
-
-  &--right-top {
-    top: var(--qiu-msg-offset, 20px);
-    right: var(--qiu-msg-offset, 20px);
-    align-items: flex-end;
-  }
-
-  &--right-center {
-    top: 50%;
-    right: var(--qiu-msg-offset, 20px);
-    transform: translateY(-50%);
-    align-items: flex-end;
-  }
-
-  &--right-bottom {
-    right: var(--qiu-msg-offset, 20px);
-    bottom: var(--qiu-msg-offset, 20px);
-    align-items: flex-end;
-  }
-}
-
-.qiu-msg-wrap {
-  pointer-events: auto;
-}
-
-.qiu-msg {
-  display: inline-flex;
-  align-items: flex-start;
-  min-width: 220px;
-  max-width: min(480px, 90vw);
-  padding: 12px 14px;
-  background: var(--qiu-bg-color-overlay, #fff);
-  border: 1px solid var(--qiu-border-color-light);
-  border-radius: var(--qiu-border-radius-base);
-  box-shadow: var(--qiu-box-shadow-light);
-
-  &__icon {
-    margin-right: 8px;
-    font-size: 18px;
-    line-height: 1.4;
-  }
-
-  &__content {
-    flex: 1;
-    font-size: 14px;
-    line-height: 1.5;
-    color: var(--qiu-text-color-primary);
-    word-break: break-word;
-  }
-
-  &__close {
-    margin-left: 8px;
-    font-size: 16px;
-    color: var(--qiu-text-color-secondary);
-    cursor: pointer;
-
-    &:hover {
-      color: var(--qiu-text-color-primary);
-    }
-  }
-
-  &--success .qiu-msg__icon {
-    color: var(--qiu-color-success);
-  }
-
-  &--warning .qiu-msg__icon {
-    color: var(--qiu-color-warning);
-  }
-
-  &--info .qiu-msg__icon {
-    color: var(--qiu-color-info);
-  }
-
-  &--error .qiu-msg__icon {
-    color: var(--qiu-color-danger);
-  }
-}
-
-.qiu-msg-fade-enter-active,
-.qiu-msg-fade-leave-active {
-  transition:
-    opacity 0.2s ease,
-    transform 0.2s ease;
-}
-
-.qiu-msg-fade-enter-from,
-.qiu-msg-fade-leave-to {
-  opacity: 0;
-  transform: translateY(-6px);
-}
-</style>

package/components/QiuMsg/index.ts

@@ -1,158 +0,0 @@
-/**
- * QiuMsg — 多位置、可叠加的消息提示
- */
-import { createApp, h, ref, type App } from 'vue'
-import QiuMsgItem from './QiuMsgItem.vue'
-import type { QiuMsgOptions, QiuMsgPosition, QiuMsgType } from './types'
-
-export type { QiuMsgOptions, QiuMsgPosition, QiuMsgType } from './types'
-
-interface MsgRecord {
-  id: string
-  app: App
-  el: HTMLElement
-  position: QiuMsgPosition
-  timer?: ReturnType<typeof setTimeout>
-}
-
-const stacks: Record<QiuMsgPosition, MsgRecord[]> = {
-  center: [],
-  'left-top': [],
-  'left-center': [],
-  'left-bottom': [],
-  'top-center': [],
-  'bottom-center': [],
-  'right-top': [],
-  'right-center': [],
-  'right-bottom': [],
-}
-
-let seed = 0
-
-const ensureHost = (position: QiuMsgPosition, offset = 20) => {
-  const id = `qiu-msg-host-${position}`
-  let host = document.getElementById(id)
-  if (!host) {
-    host = document.createElement('div')
-    host.id = id
-    host.className = `qiu-msg-host qiu-msg-host--${position}`
-    document.body.appendChild(host)
-  }
-  host.style.setProperty('--qiu-msg-offset', `${offset}px`)
-  return host
-}
-
-const layoutStack = (position: QiuMsgPosition) => {
-  stacks[position].forEach((item, index) => {
-    item.el.style.setProperty('--qiu-msg-index', String(index))
-  })
-}
-
-const closeById = (id: string) => {
-  ;(Object.keys(stacks) as QiuMsgPosition[]).forEach((pos) => {
-    const idx = stacks[pos].findIndex((x) => x.id === id)
-    if (idx >= 0) {
-      const [rec] = stacks[pos].splice(idx, 1)
-      if (rec.timer) clearTimeout(rec.timer)
-      rec.app.unmount()
-      rec.el.remove()
-      layoutStack(pos)
-    }
-  })
-}
-
-const closeAll = (position?: QiuMsgPosition) => {
-  const positions = position ? [position] : (Object.keys(stacks) as QiuMsgPosition[])
-  positions.forEach((pos) => {
-    ;[...stacks[pos]].forEach((rec) => closeById(rec.id))
-  })
-}
-
-export const qiuMsg = Object.assign(
-  (options: QiuMsgOptions | string) => {
-    const opts: QiuMsgOptions = typeof options === 'string' ? { message: options } : { ...options }
-    const position = opts.position || 'center'
-    const type = opts.type || 'info'
-    const duration = opts.duration ?? 3000
-    const id = opts.id || `qiu-msg-${++seed}`
-    const offset = opts.offset ?? 20
-
-    closeById(id)
-
-    const host = ensureHost(position, offset)
-    const el = document.createElement('div')
-    el.className = 'qiu-msg-wrap'
-    host.appendChild(el)
-
-    const visible = ref(true)
-    const rec: MsgRecord = { id, app: null as unknown as App, el, position }
-
-    const handleClose = () => {
-      if (rec.timer) {
-        clearTimeout(rec.timer)
-        rec.timer = undefined
-      }
-      visible.value = false
-      setTimeout(() => {
-        closeById(id)
-        opts.onClose?.()
-      }, 200)
-    }
-
-    const app = createApp({
-      setup() {
-        return () =>
-          h(QiuMsgItem, {
-            id,
-            type,
-            position,
-            message: opts.message,
-            showClose: opts.showClose ?? true,
-            visible: visible.value,
-            onClose: handleClose,
-          })
-      },
-    })
-
-    if (duration > 0) {
-      rec.timer = setTimeout(handleClose, duration)
-    }
-
-    app.mount(el)
-    rec.app = app
-    stacks[position].push(rec)
-    layoutStack(position)
-
-    return { close: () => closeById(id), id }
-  },
-  {
-    success(message: string | QiuMsgOptions, position?: QiuMsgPosition) {
-      return typeof message === 'string' ? qiuMsg({ message, type: 'success', position }) : qiuMsg({ ...message, type: 'success' })
-    },
-    warning(message: string | QiuMsgOptions, position?: QiuMsgPosition) {
-      return typeof message === 'string' ? qiuMsg({ message, type: 'warning', position }) : qiuMsg({ ...message, type: 'warning' })
-    },
-    info(message: string | QiuMsgOptions, position?: QiuMsgPosition) {
-      return typeof message === 'string' ? qiuMsg({ message, type: 'info', position }) : qiuMsg({ ...message, type: 'info' })
-    },
-    error(message: string | QiuMsgOptions, position?: QiuMsgPosition) {
-      return typeof message === 'string' ? qiuMsg({ message, type: 'error', position }) : qiuMsg({ ...message, type: 'error' })
-    },
-    closeAll,
-  }
-) as QiuMsgFn
-
-export default {
-  install(app: App) {
-    app.config.globalProperties.$qiuMsg = qiuMsg
-    app.provide('$qiuMsg', qiuMsg)
-  },
-}
-
-export type QiuMsgFn = ((options: QiuMsgOptions | string) => { close: () => void; id: string }) & {
-  success: (message: string | QiuMsgOptions, position?: QiuMsgPosition) => { close: () => void; id: string }
-  warning: (message: string | QiuMsgOptions, position?: QiuMsgPosition) => { close: () => void; id: string }
-  info: (message: string | QiuMsgOptions, position?: QiuMsgPosition) => { close: () => void; id: string }
-  error: (message: string | QiuMsgOptions, position?: QiuMsgPosition) => { close: () => void; id: string }
-  closeAll: (position?: QiuMsgPosition) => void
-}

package/components/QiuMsg/types.ts

@@ -1,23 +0,0 @@
-export type QiuMsgPosition =
-  | 'center'
-  | 'left-top'
-  | 'left-center'
-  | 'left-bottom'
-  | 'top-center'
-  | 'bottom-center'
-  | 'right-top'
-  | 'right-center'
-  | 'right-bottom'
-
-export type QiuMsgType = 'success' | 'warning' | 'info' | 'error'
-
-export interface QiuMsgOptions {
-  message: string | import('vue').VNode
-  type?: QiuMsgType
-  position?: QiuMsgPosition
-  duration?: number
-  showClose?: boolean
-  offset?: number
-  id?: string
-  onClose?: () => void
-}