foucui 1.0.1 → 2.0.0

package/components/QiuGrid/index.vue

@@ -1,408 +0,0 @@
-<template>
-  <div class="qiu-grid" :class="{ 'qiu-grid--loading': proxyLoading }">
-    <div v-if="showForm && ($slots.form || formConfig)" class="qiu-grid__form">
-      <slot name="form" :query="proxyQuery" :form="formModel" :reload="reload">
-        <div v-if="formFields.length" class="qiu-grid__form-inner">
-          <label v-for="f in formFields" :key="f.field" class="qiu-grid__form-item">
-            <span>{{ f.title || f.field }}</span>
-            <input
-              v-model="formModel[f.field]"
-              class="qiu-grid__form-input"
-              :placeholder="f.title || f.field"
-              @keydown.enter="reload()"
-            />
-          </label>
-          <button type="button" class="qiu-grid__form-btn" @click="reload()">查询</button>
-          <button type="button" class="qiu-grid__form-btn is-plain" @click="resetForm">重置</button>
-        </div>
-      </slot>
-    </div>
-
-    <qiu-table
-      ref="tableRef"
-      v-bind="tableBind"
-      :data="tableData"
-      :loading="proxyLoading || loading"
-      :pager-config="mergedPager"
-      :show-toolbar="showToolbar"
-      :show-export="toolbarConfig?.export !== false"
-      @page-change="onPageChange"
-      @refresh="reload"
-      @sort-change="onSortChange"
-      @filter-change="onFilterChange"
-    >
-      <template v-if="$slots.toolbar" #toolbar>
-        <slot name="toolbar" :reload="reload" :proxy="proxyState" />
-      </template>
-      <template v-if="$slots['toolbar-left']" #toolbar-left>
-        <slot name="toolbar-left" :reload="reload" :proxy="proxyState" />
-      </template>
-      <template v-if="$slots['toolbar-center']" #toolbar-center>
-        <slot name="toolbar-center" :reload="reload" :proxy="proxyState" />
-      </template>
-      <template v-if="$slots['toolbar-right']" #toolbar-right>
-        <slot name="toolbar-right" :reload="reload" :proxy="proxyState" />
-      </template>
-      <template v-if="$slots['toolbar-tools']" #toolbar-tools>
-        <slot name="toolbar-tools" />
-      </template>
-      <slot />
-    </qiu-table>
-  </div>
-</template>
-
-<script lang="ts" setup>
-/**
- * QiuGrid — 配置式表格（对齐 vxe-grid 开源能力子集）
- * columns + toolbar + pager + 轻量 form + proxyConfig
- */
-import type {
-  QiuTableColumnConfig,
-  QiuTablePagerConfig,
-  QiuTableToolbarConfig,
-  QiuTableToolbarTool,
-} from '../QiuTable/types'
-
-defineOptions({ name: 'QiuGrid' })
-
-export interface QiuGridFormItem {
-  field: string
-  title?: string
-  itemRender?: any
-}
-
-export interface QiuGridProxyAjax {
-  query?: (params: {
-    page: { currentPage: number; pageSize: number }
-    form: Record<string, any>
-    sorts?: { prop: string; order: string | null }[]
-    filters?: Record<string, any[]>
-  }) => Promise<
-    | { result?: any[]; page?: { total?: number }; data?: any[]; total?: number }
-    | any[]
-  >
-  delete?: (params: { body: any[] }) => Promise<any>
-}
-
-export interface QiuGridProxyConfig {
-  enabled?: boolean
-  autoLoad?: boolean
-  ajax?: QiuGridProxyAjax
-  props?: {
-    result?: string
-    total?: string
-  }
-}
-
-export interface QiuGridToolbarConfig {
-  enabled?: boolean
-  refresh?: boolean
-  export?: boolean
-  import?: boolean
-  print?: boolean
-  custom?: boolean
-  zoom?: boolean
-  /** Excel 复制按钮 */
-  copy?: boolean
-  /** 内置工具按钮位置，默认 right */
-  toolsPlacement?: 'left' | 'center' | 'right'
-  /** 自定义工具插件 */
-  customTools?: QiuTableToolbarTool[]
-}
-
-const props = withDefaults(
-  defineProps<{
-    columns?: QiuTableColumnConfig[]
-    data?: any[]
-    loading?: boolean
-    height?: string | number
-    maxHeight?: string | number
-    border?: boolean | string
-    stripe?: boolean
-    round?: boolean
-    editable?: boolean
-    editTrigger?: string
-    editConfig?: Record<string, any>
-    rowKey?: string | ((row: any) => string)
-    showIndex?: boolean
-    showSelection?: boolean
-    showFooter?: boolean
-    tree?: boolean
-    pagerConfig?: QiuTablePagerConfig | boolean
-    toolbarConfig?: QiuGridToolbarConfig | boolean
-    formConfig?: { items?: QiuGridFormItem[]; enabled?: boolean } | boolean
-    proxyConfig?: QiuGridProxyConfig
-    sortConfig?: Record<string, any>
-    filterConfig?: Record<string, any>
-    columnConfig?: Record<string, any>
-    rowConfig?: Record<string, any>
-    customConfig?: Record<string, any>
-    menuConfig?: Record<string, any>
-    editRules?: Record<string, any>
-    virtualYConfig?: Record<string, any> | boolean
-    spanMethod?: Function
-    mergeCells?: any[]
-  }>(),
-  {
-    columns: () => [],
-    data: () => [],
-    loading: false,
-    border: true,
-    proxyConfig: undefined,
-  }
-)
-
-const emit = defineEmits<{
-  'proxy-query': [payload: any]
-  'proxy-delete': [payload: any]
-}>()
-
-const tableRef = ref<any>(null)
-const proxyLoading = ref(false)
-const remoteData = ref<any[] | null>(null)
-const remoteTotal = ref<number | null>(null)
-const innerPage = ref(1)
-const innerPageSize = ref(10)
-const lastSort = ref<{ prop: string; order: string | null } | null>(null)
-const lastFilters = ref<Record<string, any[]>>({})
-const formModel = reactive<Record<string, any>>({})
-
-const toolbarConfig = computed(() => {
-  if (props.toolbarConfig === false) return { enabled: false }
-  if (props.toolbarConfig === true || props.toolbarConfig == null) {
-    return { enabled: true, refresh: true, export: true, zoom: true, custom: true }
-  }
-  return { enabled: true, ...props.toolbarConfig }
-})
-
-const showToolbar = computed(() => toolbarConfig.value.enabled !== false)
-
-const tableToolbarConfig = computed((): QiuTableToolbarConfig => {
-  const cfg = toolbarConfig.value
-  return {
-    enabled: cfg.enabled,
-    refresh: cfg.refresh,
-    export: cfg.export,
-    import: cfg.import,
-    print: cfg.print,
-    custom: cfg.custom,
-    zoom: cfg.zoom,
-    copy: cfg.copy,
-    toolsPlacement: cfg.toolsPlacement,
-    customTools: cfg.customTools,
-  }
-})
-
-const slots = useSlots()
-
-const showForm = computed(() => {
-  if (props.formConfig === false) return false
-  if (props.formConfig === true) return true
-  if (props.formConfig && typeof props.formConfig === 'object') {
-    return props.formConfig.enabled !== false
-  }
-  return !!slots.form
-})
-
-const formFields = computed(() => {
-  if (props.formConfig && typeof props.formConfig === 'object') {
-    return props.formConfig.items || []
-  }
-  return [] as QiuGridFormItem[]
-})
-
-watch(
-  formFields,
-  (items) => {
-    items.forEach((f) => {
-      if (!(f.field in formModel)) formModel[f.field] = ''
-    })
-  },
-  { immediate: true }
-)
-
-const proxyEnabled = computed(
-  () =>
-    props.proxyConfig?.enabled !== false &&
-    !!props.proxyConfig?.ajax?.query
-)
-
-const tableData = computed(() => {
-  if (proxyEnabled.value && remoteData.value) return remoteData.value
-  return props.data || []
-})
-
-const mergedPager = computed(() => {
-  const base =
-    props.pagerConfig === true
-      ? { enabled: true }
-      : props.pagerConfig && typeof props.pagerConfig === 'object'
-        ? { ...props.pagerConfig }
-        : proxyEnabled.value
-          ? { enabled: true }
-          : false
-  if (!base || base === false) return false
-  return {
-    ...base,
-    currentPage: innerPage.value,
-    pageSize: innerPageSize.value,
-    total: remoteTotal.value ?? base.total ?? tableData.value.length,
-  }
-})
-
-const tableBind = computed(() => {
-  const {
-    data: _d,
-    loading: _l,
-    pagerConfig: _p,
-    toolbarConfig: _t,
-    formConfig: _f,
-    proxyConfig: _px,
-    ...rest
-  } = props
-  return {
-    ...rest,
-    toolbarConfig: tableToolbarConfig.value,
-    showExport: toolbarConfig.value.export !== false,
-    customConfig:
-      props.customConfig ||
-      (toolbarConfig.value.custom !== false ? { enabled: true } : undefined),
-    showPrint: toolbarConfig.value.print === true,
-    showImport: toolbarConfig.value.import === true,
-    showCopy: toolbarConfig.value.copy === true,
-  }
-})
-
-const proxyState = computed(() => ({
-  loading: proxyLoading.value,
-  data: tableData.value,
-  total: remoteTotal.value,
-  form: formModel,
-}))
-
-const getByPath = (obj: any, path: string) => {
-  if (!path) return obj
-  return path.split('.').reduce((o, k) => (o == null ? o : o[k]), obj)
-}
-
-const reload = async () => {
-  if (!proxyEnabled.value || !props.proxyConfig?.ajax?.query) {
-    emit('proxy-query', { form: { ...formModel } })
-    return
-  }
-  proxyLoading.value = true
-  try {
-    const res = await props.proxyConfig.ajax.query({
-      page: { currentPage: innerPage.value, pageSize: innerPageSize.value },
-      form: { ...formModel },
-      sorts: lastSort.value ? [lastSort.value] : [],
-      filters: lastFilters.value,
-    })
-    const resultPath = props.proxyConfig.props?.result || 'result'
-    const totalPath = props.proxyConfig.props?.total || 'page.total'
-    if (Array.isArray(res)) {
-      remoteData.value = res
-      remoteTotal.value = res.length
-    } else {
-      const list = getByPath(res, resultPath) ?? (res as any).data ?? []
-      remoteData.value = Array.isArray(list) ? list : []
-      const total =
-        getByPath(res, totalPath) ??
-        (res as any).total ??
-        (res as any).page?.total ??
-        remoteData.value.length
-      remoteTotal.value = Number(total) || 0
-    }
-    emit('proxy-query', { form: { ...formModel }, result: remoteData.value })
-  } finally {
-    proxyLoading.value = false
-  }
-}
-
-const resetForm = () => {
-  Object.keys(formModel).forEach((k) => {
-    formModel[k] = ''
-  })
-  innerPage.value = 1
-  reload()
-}
-
-const proxyQuery = reload
-
-const onPageChange = (p: { currentPage: number; pageSize: number }) => {
-  innerPage.value = p.currentPage
-  innerPageSize.value = p.pageSize
-  if (proxyEnabled.value) reload()
-}
-
-const onSortChange = (p: { prop: string; order: string | null }) => {
-  lastSort.value = p
-  if (props.sortConfig?.remote && proxyEnabled.value) reload()
-}
-
-const onFilterChange = (p: Record<string, any[]>) => {
-  lastFilters.value = p
-  if (props.filterConfig?.remote && proxyEnabled.value) reload()
-}
-
-onMounted(() => {
-  if (proxyEnabled.value && props.proxyConfig?.autoLoad !== false) reload()
-})
-
-defineExpose({
-  reload,
-  getTable: () => tableRef.value,
-  commitProxy: reload,
-  formModel,
-})
-</script>
-
-<style lang="scss" scoped>
-.qiu-grid {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  width: 100%;
-  min-height: 0;
-}
-
-.qiu-grid__form-inner {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px 12px;
-  align-items: flex-end;
-  padding: 8px 0;
-}
-
-.qiu-grid__form-item {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  font-size: 12px;
-  color: #606266;
-}
-
-.qiu-grid__form-input {
-  min-width: 140px;
-  height: 28px;
-  padding: 0 8px;
-  border: 1px solid #dcdfe6;
-  border-radius: 4px;
-}
-
-.qiu-grid__form-btn {
-  height: 28px;
-  padding: 0 12px;
-  color: #fff;
-  border: 1px solid var(--qiu-color-primary, #0f766e);
-  border-radius: 4px;
-  background: var(--qiu-color-primary, #0f766e);
-  cursor: pointer;
-
-  &.is-plain {
-    color: #606266;
-    background: #fff;
-    border-color: #dcdfe6;
-  }
-}
-</style>

package/components/QiuHoverCard/index.vue

@@ -1,192 +0,0 @@
-<template>
-  <span ref="triggerRef" class="qiu-hover-card" @mouseenter="onEnter" @mouseleave="onLeave">
-    <slot name="trigger" />
-  </span>
-
-  <Teleport to="body">
-    <Transition name="qiu-hover-card-fade">
-      <div
-        v-if="visible"
-        ref="cardRef"
-        class="qiu-hover-card__panel"
-        :class="[`qiu-hover-card--${placement}`]"
-        :style="panelStyle"
-        @mouseenter="onCardEnter"
-        @mouseleave="onCardLeave"
-      >
-        <div v-if="title || $slots.title" class="qiu-hover-card__title">
-          <slot name="title">{{ title }}</slot>
-        </div>
-        <div class="qiu-hover-card__body">
-          <slot />
-        </div>
-      </div>
-    </Transition>
-  </Teleport>
-</template>
-
-<script lang="ts" setup>
-import { nextTick, ref } from 'vue'
-
-defineOptions({ name: 'QiuHoverCard' })
-
-type Placement = 'top' | 'bottom' | 'left' | 'right'
-
-const props = withDefaults(
-  defineProps<{
-    title?: string
-    placement?: Placement
-    width?: number
-    /** 悬停延迟(ms) */
-    openDelay?: number
-    closeDelay?: number
-  }>(),
-  {
-    title: '',
-    placement: 'top',
-    width: 280,
-    openDelay: 80,
-    closeDelay: 120,
-  }
-)
-
-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 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 = 0
-  let left = 0
-  switch (props.placement) {
-    case 'top':
-      top = rect.top - cardRect.height - gap
-      left = rect.left + rect.width / 2 - cardRect.width / 2
-      break
-    case 'left':
-      top = rect.top + rect.height / 2 - cardRect.height / 2
-      left = rect.left - cardRect.width - gap
-      break
-    case 'right':
-      top = rect.top + rect.height / 2 - cardRect.height / 2
-      left = rect.right + gap
-      break
-    default:
-      top = rect.bottom + gap
-      left = rect.left + rect.width / 2 - cardRect.width / 2
-  }
-  left = Math.min(Math.max(4, left), window.innerWidth - cardRect.width - 4)
-  top = Math.min(Math.max(4, top), window.innerHeight - cardRect.height - 4)
-  panelStyle.value = {
-    position: 'fixed',
-    top: `${top}px`,
-    left: `${left}px`,
-    width: `${props.width}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-hover-card {
-  display: inline-flex;
-  vertical-align: middle;
-}
-
-.qiu-hover-card__panel {
-  box-sizing: border-box;
-  background: var(--qiu-bg-color-overlay, #fff);
-  border: 1px solid var(--qiu-border-color-light, #e4e7ed);
-  border-radius: 8px;
-  box-shadow: var(--qiu-box-shadow-light, 0 6px 16px rgba(0, 0, 0, 0.12));
-}
-
-.qiu-hover-card__title {
-  padding: 12px 14px 4px;
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--qiu-text-color-primary, #303133);
-}
-
-.qiu-hover-card__body {
-  padding: 8px 14px 14px;
-  font-size: 13px;
-  line-height: 1.6;
-  color: var(--qiu-text-color-regular, #606266);
-}
-
-.qiu-hover-card-fade-enter-active,
-.qiu-hover-card-fade-leave-active {
-  transition: opacity 0.15s ease;
-}
-
-.qiu-hover-card-fade-enter-from,
-.qiu-hover-card-fade-leave-to {
-  opacity: 0;
-}
-</style>

package/components/QiuIcon/index.vue

@@ -1,117 +0,0 @@
-<template>
-  <span
-    v-if="isIconify"
-    aria-hidden="true"
-    class="qiu-icon qiu-icon--iconify"
-    @click="onClick"
-  >
-    <Icon :icon="iconifyName" width="1em" height="1em" />
-  </span>
-  <svg
-    v-else-if="isCustomSvg"
-    aria-hidden="true"
-    class="qiu-icon qiu-icon--svg"
-    :class="{ 'is-keep-color': keepColor }"
-    :viewBox="viewBox || undefined"
-    @click="onClick"
-  >
-    <use :href="symbolHref" :xlink:href="symbolHref" />
-  </svg>
-  <i
-    v-else
-    aria-hidden="true"
-    class="qiu-icon"
-    :class="riClass"
-    @click="onClick"
-  />
-</template>
-
-<script lang="ts" setup>
-/**
- * QiuIcon
- * - Remix 本地字体：home-2-line / ri-home-2-line
- * - Iconify：mdi:home / ant-design:home-outlined
- * - 自定义 SVG：isCustomSvg + vite-plugin-svg-icons
- */
-import { Icon } from '@iconify/vue'
-
-defineOptions({
-  name: 'QiuIcon',
-})
-
-const props = withDefaults(
-  defineProps<{
-    icon?: string
-    isCustomSvg?: boolean
-    /** 保留 SVG 原色（布局预览等多色图标） */
-    keepColor?: boolean
-    viewBox?: string
-  }>(),
-  {
-    icon: '',
-    isCustomSvg: false,
-    keepColor: false,
-    viewBox: '',
-  }
-)
-
-const emit = defineEmits<{ click: [MouseEvent] }>()
-
-const iconName = computed(() => String(props.icon || '').trim())
-
-const isIconify = computed(() => {
-  const name = iconName.value
-  return !!name && name.includes(':') && !name.startsWith('http') && !props.isCustomSvg
-})
-
-const iconifyName = computed(() => iconName.value)
-
-const riClass = computed(() => {
-  const name = iconName.value
-  if (!name) return ''
-  return name.startsWith('ri-') ? name : `ri-${name}`
-})
-
-const symbolHref = computed(() => `#qiu-icon-${iconName.value}`)
-
-const onClick = (e: MouseEvent) => emit('click', e)
-</script>
-
-<style scoped>
-.qiu-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 1em;
-  height: 1em;
-  font-family: remixicon !important;
-  font-size: inherit;
-  font-style: normal;
-  line-height: 1;
-  vertical-align: middle;
-  speak: never;
-}
-
-.qiu-icon--svg {
-  width: 1em;
-  height: 1em;
-  overflow: hidden;
-  /* 单色图标可用 currentColor；多色自定义 SVG 由使用方覆盖 fill */
-  fill: currentColor;
-}
-
-.qiu-icon--svg.is-keep-color,
-.qiu-icon--svg[data-keep-color] {
-  fill: unset;
-}
-
-.qiu-icon--iconify {
-  font-family: inherit !important;
-
-  :deep(svg) {
-    display: block;
-    width: 1em;
-    height: 1em;
-  }
-}
-</style>