foucui 1.0.1 → 2.0.0

package/components/QiuDrawer/index.vue

@@ -1,350 +0,0 @@
-<template>
-  <Teleport to="body" :disabled="!appendToBody">
-    <Transition :name="transitionName">
-      <div
-        v-if="drawerVisible"
-        class="qiu-drawer-root"
-        :class="[`qiu-drawer-root--${direction}`]"
-        :style="{ zIndex: String(zIndex) }"
-      >
-        <div
-          v-if="modal"
-          class="qiu-drawer__mask"
-          @click="onMaskClick"
-        />
-
-        <div
-          class="qiu-drawer"
-          :class="[
-            `qiu-drawer--${direction}`,
-            { 'qiu-drawer--animated': animated },
-            attrs.class,
-          ]"
-          v-bind="attrsWithoutClass"
-          :style="drawerStyle"
-          role="dialog"
-          aria-modal="true"
-        >
-          <div v-if="showClose || title || $slots.header" class="qiu-drawer__header">
-            <div class="qiu-drawer__title">
-              <slot name="header">{{ title }}</slot>
-            </div>
-            <button
-              v-if="showClose"
-              type="button"
-              class="qiu-drawer__close"
-              aria-label="close"
-              @click="requestClose"
-            >
-              ×
-            </button>
-          </div>
-
-          <div class="qiu-drawer__body">
-            <slot />
-          </div>
-
-          <div v-if="$slots.footer" class="qiu-drawer__footer">
-            <slot name="footer" />
-          </div>
-        </div>
-      </div>
-    </Transition>
-  </Teleport>
-</template>
-
-<script lang="ts" setup>
-import { useBodyScrollLock } from '../useBodyScrollLock'
-defineOptions({ name: 'QiuDrawer', inheritAttrs: false })
-
-type Direction = 'rtl' | 'ltr' | 'ttb' | 'btt'
-
-const attrs = useAttrs()
-const attrsWithoutClass = computed(() => {
-  const { class: _c, style: _s, ...rest } = attrs as Record<string, unknown>
-  return rest
-})
-
-const props = withDefaults(
-  defineProps<{
-    modelValue?: boolean
-    title?: string
-    direction?: Direction
-    size?: string | number
-    modal?: boolean
-    closeOnClickModal?: boolean
-    closeOnPressEscape?: boolean
-    showClose?: boolean
-    animated?: boolean
-    zIndex?: number
-    /** 兼容 Element 风格；当前始终 Teleport 到 body，false 时禁用 Teleport */
-    appendToBody?: boolean
-    beforeClose?: (done: () => void) => void
-  }>(),
-  {
-    modelValue: false,
-    title: '',
-    direction: 'rtl',
-    size: '30%',
-    modal: true,
-    closeOnClickModal: true,
-    closeOnPressEscape: false,
-    showClose: true,
-    animated: true,
-    zIndex: 2000,
-    appendToBody: true,
-  }
-)
-
-const appendToBody = computed(() => props.appendToBody !== false)
-
-const emit = defineEmits<{
-  'update:modelValue': [boolean]
-  open: []
-  opened: []
-  close: []
-  closed: []
-}>()
-
-const drawerVisible = useVModel(props, 'modelValue', emit)
-
-const resolvedSize = computed(() =>
-  typeof props.size === 'number' ? `${props.size}px` : String(props.size)
-)
-
-const drawerStyle = computed(() => {
-  const size = resolvedSize.value
-  switch (props.direction) {
-    case 'ltr':
-      return { width: size, height: '100%' }
-    case 'ttb':
-      return { width: '100%', height: size }
-    case 'btt':
-      return { width: '100%', height: size }
-    default:
-      return { width: size, height: '100%' }
-  }
-})
-
-const transitionName = computed(() => {
-  switch (props.direction) {
-    case 'ltr':
-      return 'qiu-drawer-slide-left'
-    case 'ttb':
-      return 'qiu-drawer-slide-top'
-    case 'btt':
-      return 'qiu-drawer-slide-bottom'
-    default:
-      return 'qiu-drawer-slide-right'
-  }
-})
-
-const { lock: lockBodyScroll, unlock: unlockBodyScroll } = useBodyScrollLock()
-
-const doClose = () => {
-  emit('close')
-  drawerVisible.value = false
-}
-
-const requestClose = () => {
-  if (props.beforeClose) {
-    props.beforeClose(() => doClose())
-    return
-  }
-  doClose()
-}
-
-const onMaskClick = () => {
-  if (props.closeOnClickModal) requestClose()
-}
-
-const needLock = computed(() => props.modal && drawerVisible.value)
-
-watch(needLock, async (v) => {
-  if (v) {
-    lockBodyScroll()
-    emit('open')
-    await nextTick()
-    emit('opened')
-  } else {
-    unlockBodyScroll()
-    emit('closed')
-  }
-})
-
-const onKeydown = (e: KeyboardEvent) => {
-  if (props.closeOnPressEscape && e.key === 'Escape') requestClose()
-}
-
-watch(drawerVisible, (v) => {
-  if (v) window.addEventListener('keydown', onKeydown)
-  else window.removeEventListener('keydown', onKeydown)
-})
-
-onMounted(() => {
-  if (needLock.value) lockBodyScroll()
-})
-
-onBeforeUnmount(() => {
-  unlockBodyScroll()
-  window.removeEventListener('keydown', onKeydown)
-})
-</script>
-
-<style lang="scss" scoped>
-.qiu-drawer-root {
-  position: fixed;
-  inset: 0;
-  pointer-events: none;
-}
-
-.qiu-drawer__mask {
-  position: absolute;
-  inset: 0;
-  pointer-events: auto;
-  background: var(--qiu-drawer-mask-bg, var(--qiu-overlay-color-lighter, rgba(0, 0, 0, 0.45)));
-}
-
-.qiu-drawer {
-  position: absolute;
-  display: flex;
-  flex-direction: column;
-  pointer-events: auto;
-  background: var(--qiu-bg-color, var(--qiu-bg-color, #fff));
-  box-shadow: var(--qiu-box-shadow, 0 8px 24px rgba(0, 0, 0, 0.12));
-  box-sizing: border-box;
-  overflow: hidden;
-
-  &--rtl {
-    top: 0;
-    right: 0;
-  }
-
-  &--ltr {
-    top: 0;
-    left: 0;
-  }
-
-  &--ttb {
-    top: 0;
-    left: 0;
-  }
-
-  &--btt {
-    bottom: 0;
-    left: 0;
-  }
-}
-
-.qiu-drawer__header {
-  display: flex;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: space-between;
-  padding: 16px 20px;
-  border-bottom: 1px solid var(--qiu-border-color-lighter, var(--qiu-border-color-lighter, #ebeef5));
-}
-
-.qiu-drawer__title {
-  flex: 1;
-  min-width: 0;
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--qiu-text-color-primary, var(--qiu-text-color-primary, #303133));
-}
-
-.qiu-drawer__close {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  margin-left: 8px;
-  padding: 0;
-  font-size: 20px;
-  line-height: 1;
-  color: var(--qiu-text-color-secondary, var(--qiu-text-color-secondary, #909399));
-  cursor: pointer;
-  background: transparent;
-  border: 0;
-  border-radius: 4px;
-
-  &:hover {
-    color: var(--qiu-color-primary, var(--qiu-color-primary, #409eff));
-    background: var(--qiu-fill-color-light, var(--qiu-fill-color-light, #f5f7fa));
-  }
-}
-
-.qiu-drawer__body {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-height: 0;
-  min-width: 0;
-  padding: 16px 20px;
-  overflow: auto;
-  color: var(--qiu-text-color-regular, var(--qiu-text-color-regular, #606266));
-  font-size: 14px;
-}
-
-.qiu-drawer__footer {
-  flex-shrink: 0;
-  display: flex;
-  gap: 8px;
-  justify-content: flex-end;
-  padding: 12px 20px;
-  border-top: 1px solid var(--qiu-border-color-lighter, var(--qiu-border-color-lighter, #ebeef5));
-}
-
-/* slide transitions */
-.qiu-drawer-slide-right-enter-active,
-.qiu-drawer-slide-right-leave-active,
-.qiu-drawer-slide-left-enter-active,
-.qiu-drawer-slide-left-leave-active,
-.qiu-drawer-slide-top-enter-active,
-.qiu-drawer-slide-top-leave-active,
-.qiu-drawer-slide-bottom-enter-active,
-.qiu-drawer-slide-bottom-leave-active {
-  transition: opacity 0.25s ease;
-
-  .qiu-drawer {
-    transition: transform 0.25s ease;
-  }
-}
-
-.qiu-drawer-slide-right-enter-from,
-.qiu-drawer-slide-right-leave-to {
-  opacity: 0;
-
-  .qiu-drawer {
-    transform: translateX(100%);
-  }
-}
-
-.qiu-drawer-slide-left-enter-from,
-.qiu-drawer-slide-left-leave-to {
-  opacity: 0;
-
-  .qiu-drawer {
-    transform: translateX(-100%);
-  }
-}
-
-.qiu-drawer-slide-top-enter-from,
-.qiu-drawer-slide-top-leave-to {
-  opacity: 0;
-
-  .qiu-drawer {
-    transform: translateY(-100%);
-  }
-}
-
-.qiu-drawer-slide-bottom-enter-from,
-.qiu-drawer-slide-bottom-leave-to {
-  opacity: 0;
-
-  .qiu-drawer {
-    transform: translateY(100%);
-  }
-}
-</style>

package/components/QiuDropdown/QiuDropdownItem.vue

@@ -1,74 +0,0 @@
-<template>
-  <li
-    class="qiu-dropdown-item"
-    :class="{
-      'is-disabled': disabled,
-      'is-divided': divided,
-    }"
-    role="menuitem"
-    @click="onClick"
-  >
-    <slot />
-  </li>
-</template>
-
-<script lang="ts" setup>
-import { QIU_DROPDOWN_KEY } from './context'
-
-defineOptions({ name: 'QiuDropdownItem' })
-
-const props = withDefaults(
-  defineProps<{
-    command?: string | number
-    disabled?: boolean
-    divided?: boolean
-  }>(),
-  {
-    command: '',
-    disabled: false,
-    divided: false,
-  }
-)
-
-const emit = defineEmits<{
-  click: [MouseEvent]
-}>()
-
-const dropdown = inject(QIU_DROPDOWN_KEY, null)
-
-const onClick = (e: MouseEvent) => {
-  if (props.disabled) return
-  emit('click', e)
-  dropdown?.emitCommand(props.command)
-}
-</script>
-
-<style lang="scss" scoped>
-.qiu-dropdown-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 16px;
-  font-size: 14px;
-  line-height: 1.4;
-  color: var(--qiu-text-color-regular, var(--qiu-text-color-regular, #606266));
-  cursor: pointer;
-  white-space: nowrap;
-  transition: background 0.15s ease, color 0.15s ease;
-
-  &:hover:not(.is-disabled) {
-    color: var(--qiu-color-primary, var(--qiu-color-primary, #409eff));
-    background: var(--qiu-fill-color-light, var(--qiu-fill-color-light, #f5f7fa));
-  }
-
-  &.is-disabled {
-    color: var(--qiu-text-color-placeholder, var(--qiu-text-color-placeholder, #a8abb2));
-    cursor: not-allowed;
-  }
-
-  &.is-divided {
-    margin-top: 4px;
-    border-top: 1px solid var(--qiu-border-color-lighter, var(--qiu-border-color-lighter, #ebeef5));
-  }
-}
-</style>

package/components/QiuDropdown/QiuDropdownMenu.vue

@@ -1,22 +0,0 @@
-<template>
-  <ul class="qiu-dropdown-menu" role="menu">
-    <slot />
-  </ul>
-</template>
-
-<script lang="ts" setup>
-defineOptions({ name: 'QiuDropdownMenu' })
-</script>
-
-<style lang="scss" scoped>
-.qiu-dropdown-menu {
-  margin: 0;
-  padding: 4px 0;
-  list-style: none;
-  background: var(--qiu-bg-color, var(--qiu-bg-color, #fff));
-  border: 1px solid var(--qiu-border-color-lighter, var(--qiu-border-color-lighter, #ebeef5));
-  border-radius: 4px;
-  box-shadow: var(--qiu-box-shadow-light, 0 4px 12px rgba(0, 0, 0, 0.1));
-  box-sizing: border-box;
-}
-</style>

package/components/QiuDropdown/context.ts

@@ -1,9 +0,0 @@
-import type { InjectionKey, Ref } from 'vue'
-
-export interface QiuDropdownContext {
-  visible: Ref<boolean>
-  close: () => void
-  emitCommand: (command: string | number) => void
-}
-
-export const QIU_DROPDOWN_KEY: InjectionKey<QiuDropdownContext> = Symbol('QiuDropdown')

package/components/QiuDropdown/index.vue

@@ -1,189 +0,0 @@
-<template>
-  <span ref="triggerRef" class="qiu-dropdown">
-    <span class="qiu-dropdown__trigger" @click.stop="toggle">
-      <slot />
-    </span>
-
-    <Teleport to="body">
-      <Transition name="qiu-dropdown-fade">
-        <div
-          v-if="visible"
-          ref="menuHostRef"
-          class="qiu-dropdown__popper"
-          :class="popperClass"
-          :style="popperStyle"
-          @click.stop
-        >
-          <slot name="dropdown" />
-        </div>
-      </Transition>
-    </Teleport>
-  </span>
-</template>
-
-<script lang="ts" setup>
-import { QIU_DROPDOWN_KEY } from './context'
-
-defineOptions({ name: 'QiuDropdown' })
-
-const props = withDefaults(
-  defineProps<{
-    /** 禁用下拉 */
-    disabled?: boolean
-    /** 弹出位置 */
-    placement?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end' | 'bottom' | 'top'
-    /** 附加到弹层的 class */
-    popperClass?: string
-  }>(),
-  {
-    disabled: false,
-    placement: 'bottom-start',
-    popperClass: '',
-  }
-)
-
-const emit = defineEmits<{
-  command: [string | number]
-  visibleChange: [boolean]
-}>()
-
-const triggerRef = ref<HTMLElement | null>(null)
-const menuHostRef = ref<HTMLElement | null>(null)
-const visible = ref(false)
-const popperStyle = ref<Record<string, string>>({
-  position: 'fixed',
-  top: '-9999px',
-  left: '-9999px',
-  zIndex: '3000',
-})
-
-const close = () => {
-  if (!visible.value) return
-  visible.value = false
-  emit('visibleChange', false)
-}
-
-const open = async () => {
-  if (props.disabled) return
-  visible.value = true
-  emit('visibleChange', true)
-  await nextTick()
-  updatePosition()
-  // 再测一次：内容渲染后尺寸更准（尤其是 tabs more 面板）
-  requestAnimationFrame(() => updatePosition())
-}
-
-const toggle = () => {
-  if (props.disabled) return
-  if (visible.value) close()
-  else open()
-}
-
-const emitCommand = (command: string | number) => {
-  emit('command', command)
-  close()
-}
-
-provide(QIU_DROPDOWN_KEY, { visible, close, emitCommand })
-
-const updatePosition = () => {
-  const trigger = triggerRef.value
-  const menu = menuHostRef.value
-  if (!trigger || !menu) return
-
-  const rect = trigger.getBoundingClientRect()
-  const menuRect = menu.getBoundingClientRect()
-  const gap = 4
-  const vw = window.innerWidth
-  const vh = window.innerHeight
-  const place = props.placement
-
-  let top = place.startsWith('top') ? rect.top - menuRect.height - gap : rect.bottom + gap
-  let left = rect.left
-
-  if (place.endsWith('end')) {
-    left = rect.right - menuRect.width
-  } else if (place === 'bottom' || place === 'top') {
-    left = rect.left + (rect.width - menuRect.width) / 2
-  }
-
-  if (left + menuRect.width > vw - 4) left = vw - menuRect.width - 4
-  if (left < 4) left = 4
-  if (top + menuRect.height > vh - 4) top = rect.top - menuRect.height - gap
-  if (top < 4) top = 4
-
-  popperStyle.value = {
-    position: 'fixed',
-    top: `${Math.round(top)}px`,
-    left: `${Math.round(left)}px`,
-    zIndex: '3000',
-  }
-}
-
-const onDocClick = (e: MouseEvent) => {
-  if (!visible.value) return
-  const t = e.target as Node
-  if (triggerRef.value?.contains(t) || menuHostRef.value?.contains(t)) return
-  close()
-}
-
-const onScrollOrResize = () => {
-  if (visible.value) updatePosition()
-}
-
-watch(visible, (v) => {
-  if (v) {
-    document.addEventListener('click', onDocClick, true)
-    window.addEventListener('scroll', onScrollOrResize, true)
-    window.addEventListener('resize', onScrollOrResize)
-  } else {
-    document.removeEventListener('click', onDocClick, true)
-    window.removeEventListener('scroll', onScrollOrResize, true)
-    window.removeEventListener('resize', onScrollOrResize)
-  }
-})
-
-onBeforeUnmount(() => {
-  document.removeEventListener('click', onDocClick, true)
-  window.removeEventListener('scroll', onScrollOrResize, true)
-  window.removeEventListener('resize', onScrollOrResize)
-})
-
-defineExpose({ open, close, toggle })
-</script>
-
-<style lang="scss" scoped>
-.qiu-dropdown {
-  display: inline-flex;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
-  vertical-align: middle;
-}
-
-.qiu-dropdown__trigger {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  line-height: 1;
-  cursor: pointer;
-}
-
-.qiu-dropdown__popper {
-  position: fixed;
-  z-index: 3000;
-  min-width: 120px;
-  pointer-events: auto;
-}
-
-.qiu-dropdown-fade-enter-active,
-.qiu-dropdown-fade-leave-active {
-  transition: opacity 0.15s ease, transform 0.15s ease;
-}
-
-.qiu-dropdown-fade-enter-from,
-.qiu-dropdown-fade-leave-to {
-  opacity: 0;
-  transform: translateY(-4px);
-}
-</style>

package/components/QiuEmpty/index.vue

@@ -1,73 +0,0 @@
-<template>
-  <div class="qiu-empty">
-    <div class="qiu-empty__image">
-      <slot name="image">
-        <svg
-          class="qiu-empty__svg"
-          viewBox="0 0 120 80"
-          xmlns="http://www.w3.org/2000/svg"
-          aria-hidden="true"
-        >
-          <rect x="10" y="20" width="100" height="50" rx="4" fill="var(--qiu-fill-color, var(--qiu-fill-color, #f0f2f5))" />
-          <rect x="20" y="30" width="40" height="6" rx="2" fill="var(--qiu-border-color, var(--qiu-border-color, #dcdfe6))" />
-          <rect x="20" y="42" width="60" height="6" rx="2" fill="var(--qiu-border-color-lighter, var(--qiu-border-color-lighter, #ebeef5))" />
-          <rect x="20" y="54" width="30" height="6" rx="2" fill="var(--qiu-border-color-lighter, var(--qiu-border-color-lighter, #ebeef5))" />
-        </svg>
-      </slot>
-    </div>
-    <p v-if="description || $slots.description" class="qiu-empty__description">
-      <slot name="description">{{ description }}</slot>
-    </p>
-    <div v-if="$slots.default" class="qiu-empty__actions">
-      <slot />
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-defineOptions({ name: 'QiuEmpty' })
-
-withDefaults(
-  defineProps<{
-    description?: string
-  }>(),
-  {
-    description: '暂无数据',
-  }
-)
-</script>
-
-<style lang="scss" scoped>
-.qiu-empty {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 32px 16px;
-  text-align: center;
-}
-
-.qiu-empty__image {
-  margin-bottom: 16px;
-}
-
-.qiu-empty__svg {
-  width: 120px;
-  height: 80px;
-}
-
-.qiu-empty__description {
-  margin: 0 0 16px;
-  font-size: 14px;
-  line-height: 1.5;
-  color: var(--qiu-text-color-secondary, var(--qiu-text-color-secondary, #909399));
-}
-
-.qiu-empty__actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  align-items: center;
-  justify-content: center;
-}
-</style>