@firerian/fireui 1.0.0

package/src/types/form.ts

@@ -0,0 +1,149 @@
+import type { RuleItem, ValidateError } from 'async-validator'
+
+export type { RuleItem, ValidateError }
+
+export type FormLabelPosition = 'left' | 'top'
+
+export interface FormProps<T = Record<string, any>> {
+  /**
+   * 表单数据模型
+   */
+  model?: T
+  /**
+   * 表单验证规则
+   */
+  rules?: Record<keyof T, RuleItem | RuleItem[]>
+  /**
+   * 标签宽度
+   */
+  labelWidth?: string | number
+  /**
+   * 标签位置
+   */
+  labelPosition?: FormLabelPosition
+  /**
+   * 是否为行内表单
+   */
+  inline?: boolean
+  /**
+   * 是否显示必填星号
+   */
+  hideRequiredAsterisk?: boolean
+  /**
+   * 必填符号
+   */
+  requiredSymbol?: string
+  /**
+   * 是否显示状态图标
+   */
+  statusIcon?: boolean
+  /**
+   * 自定义类名
+   */
+  class?: string
+  /**
+   * 自定义样式
+   */
+  style?: string | object
+}
+
+export interface FormEmits {
+  /**
+   * 表单提交事件
+   */
+  (e: 'submit', evt: Event): void
+  /**
+   * 表单重置事件
+   */
+  (e: 'reset'): void
+}
+
+export interface FormInstance<T = Record<string, any>> {
+  /**
+   * 验证表单
+   */
+  validate: (callback?: (valid: boolean, errors?: ValidateError[]) => void) => Promise<boolean>
+  /**
+   * 验证指定字段
+   */
+  validateField: (props: keyof T | Array<keyof T>, callback?: (error: ValidateError | null, fields?: Record<string, ValidateError[]>) => void) => Promise<boolean>
+  /**
+   * 重置表单
+   */
+  resetFields: () => void
+  /**
+   * 清除验证状态
+   */
+  clearValidate: (props?: keyof T | Array<keyof T>) => void
+  /**
+   * 滚动到指定字段
+   */
+  scrollToField: (prop: keyof T) => void
+}
+
+export interface FormItemProps {
+  /**
+   * 字段名
+   */
+  prop?: string
+  /**
+   * 标签文本
+   */
+  label?: string
+  /**
+   * 标签宽度
+   */
+  labelWidth?: string | number
+  /**
+   * 是否必填
+   */
+  required?: boolean
+  /**
+   * 错误信息
+   */
+  error?: string
+  /**
+   * 自定义类名
+   */
+  class?: string
+  /**
+   * 自定义样式
+   */
+  style?: string | object
+}
+
+export interface FormItemEmits {
+  /**
+   * 验证状态变化事件
+   */
+  (e: 'validate', valid: boolean, errorMessage: string): void
+}
+
+export interface FormItemInstance {
+  /**
+   * 验证字段
+   */
+  validate: (trigger?: string, callback?: (valid: boolean, errorMessage: string) => void) => Promise<boolean>
+  /**
+   * 重置字段
+   */
+  resetField: () => void
+  /**
+   * 清除验证状态
+   */
+  clearValidate: () => void
+}
+
+export interface FormContext<T = Record<string, any>> {
+  model: T
+  rules: Record<keyof T, RuleItem | RuleItem[]>
+  labelWidth: string | number
+  labelPosition: FormLabelPosition
+  inline: boolean
+  hideRequiredAsterisk: boolean
+  requiredSymbol: string
+  statusIcon: boolean
+  form: FormInstance<T>
+  addFormItem: (formItem: FormItemInstance) => void
+  removeFormItem: (formItem: FormItemInstance) => void
+}

package/src/types/global.d.ts

@@ -0,0 +1,49 @@
+import type { App } from 'vue'
+import type {
+  FButton,
+  FireRow,
+  FireCol,
+  FireContainer,
+  FireHeader,
+  FireAside,
+  FireMain,
+  FireFooter,
+  FireTooltip,
+  FireTips,
+  FireInput,
+  FireForm,
+  FireFormItem,
+  FireTable,
+  FireTableColumn
+} from '../components'
+
+// 全局组件类型声明
+declare module '@vue/runtime-core' {
+  export interface GlobalComponents {
+    // Button 组件
+    FButton: typeof FButton
+    // Grid 组件
+    FireRow: typeof FireRow
+    FireCol: typeof FireCol
+    // Layout 组件
+    FireContainer: typeof FireContainer
+    FireHeader: typeof FireHeader
+    FireAside: typeof FireAside
+    FireMain: typeof FireMain
+    FireFooter: typeof FireFooter
+    // Tooltip 组件
+    FireTooltip: typeof FireTooltip
+    // Tips 组件
+    FireTips: typeof FireTips
+    // Input 组件
+    FireInput: typeof FireInput
+    // Form 组件
+    FireForm: typeof FireForm
+    FireFormItem: typeof FireFormItem
+    // Table 组件
+    FireTable: typeof FireTable
+    FireTableColumn: typeof FireTableColumn
+  }
+}
+
+export {}

package/src/types/grid.ts

@@ -0,0 +1,76 @@
+/**
+ * @file 栅格系统类型定义
+ */
+
+export interface ResponsiveProps {
+  /**
+   * 占列数
+   */
+  span?: number
+  /**
+   * 偏移量
+   */
+  offset?: number
+}
+
+export interface RowProps {
+  /**
+   * 栅格间距
+   */
+  gutter?: number | [number, number]
+  /**
+   * 水平对齐方式
+   */
+  justify?: 'start' | 'end' | 'center' | 'space-between' | 'space-around' | 'space-evenly'
+  /**
+   * 垂直对齐方式
+   */
+  align?: 'top' | 'middle' | 'bottom'
+  /**
+   * 自定义类名
+   */
+  class?: string
+  /**
+   * 自定义样式
+   */
+  style?: string | object
+}
+
+export interface ColProps {
+  /**
+   * 占列数
+   */
+  span?: number
+  /**
+   * 偏移量
+   */
+  offset?: number
+  /**
+   * 超小屏幕响应式配置
+   */
+  xs?: number | ResponsiveProps
+  /**
+   * 小屏幕响应式配置
+   */
+  sm?: number | ResponsiveProps
+  /**
+   * 中等屏幕响应式配置
+   */
+  md?: number | ResponsiveProps
+  /**
+   * 大屏幕响应式配置
+   */
+  lg?: number | ResponsiveProps
+  /**
+   * 超大屏幕响应式配置
+   */
+  xl?: number | ResponsiveProps
+  /**
+   * 自定义类名
+   */
+  class?: string
+  /**
+   * 自定义样式
+   */
+  style?: string | object
+}

package/src/types/index.ts

@@ -0,0 +1,23 @@
+// Button 组件
+export type { ButtonProps, ButtonEmits, ButtonSlots } from '../components/button/types'
+
+// Grid 组件
+export type { RowProps, ColProps, ResponsiveProps } from '../components/grid/types'
+
+// Layout 组件
+export type { ContainerProps, HeaderProps, AsideProps, MainProps, FooterProps } from '../components/layout/types'
+
+// Tooltip 组件
+export type { TooltipProps, TooltipEmits, TooltipPlacement, TooltipTrigger } from './tooltip'
+
+// Tips 组件
+export type { TipsProps, TipsEmits, TipsSlots } from '../components/tips/types'
+
+// Input 组件
+export type { InputProps, InputEmits, InputSlots } from '../components/input/types'
+
+// Form 组件
+export type { FormProps, FormEmits, FormInstance, FormItemProps, FormItemEmits, FormItemInstance } from './form'
+
+// Table 组件
+export type { TableProps, TableEmits, TableInstance, TableColumnProps, TableColumnSlots } from './table'

package/src/types/table.ts

@@ -0,0 +1,181 @@
+export type TableColumnFixed = 'left' | 'right'
+
+export type TableColumnSortOrder = 'ascending' | 'descending' | null
+
+export interface TableColumnFilterOption {
+  text: string
+  value: string | number
+}
+
+export interface TableColumnProps {
+  /**
+   * 列字段名
+   */
+  prop?: string
+  /**
+   * 列标题
+   */
+  label?: string
+  /**
+   * 列宽度
+   */
+  width?: string | number
+  /**
+   * 是否固定列
+   */
+  fixed?: TableColumnFixed
+  /**
+   * 是否可排序
+   */
+  sortable?: boolean
+  /**
+   * 排序方法
+   */
+  sortMethod?: (a: any, b: any) => number
+  /**
+   * 排序顺序
+   */
+  sortOrder?: TableColumnSortOrder
+  /**
+   * 过滤选项
+   */
+  filters?: TableColumnFilterOption[]
+  /**
+   * 过滤方法
+   */
+  filterMethod?: (value: string | number, row: any) => boolean
+  /**
+   * 过滤值
+   */
+  filteredValue?: Array<string | number>
+  /**
+   * 自定义类名
+   */
+  class?: string
+  /**
+   * 自定义样式
+   */
+  style?: string | object
+}
+
+export interface TableColumnSlots {
+  /**
+   * 列标题
+   */
+  header?: (props: { column: TableColumnProps }) => any
+  /**
+   * 列内容
+   */
+  default?: (props: { row: any; column: TableColumnProps; $index: number }) => any
+  /**
+   * 排序图标
+   */
+  sortIcon?: (props: { sortOrder: TableColumnSortOrder }) => any
+  /**
+   * 过滤图标
+   */
+  filterIcon?: (props: { filtered: boolean }) => any
+}
+
+export interface TableProps<T = any> {
+  /**
+   * 表格数据
+   */
+  data?: T[]
+  /**
+   * 是否显示边框
+   */
+  border?: boolean
+  /**
+   * 是否显示斑马纹
+   */
+  stripe?: boolean
+  /**
+   * 是否高亮当前行
+   */
+  highlightCurrentRow?: boolean
+  /**
+   * 当前行索引
+   */
+  currentRowKey?: string | number
+  /**
+   * 表格高度
+   */
+  height?: string | number
+  /**
+   * 表格最大高度
+   */
+  maxHeight?: string | number
+  /**
+   * 自定义类名
+   */
+  class?: string
+  /**
+   * 自定义样式
+   */
+  style?: string | object
+}
+
+export interface TableEmits<T = any> {
+  /**
+   * 选择行事件
+   */
+  (e: 'row-click', row: T, event: Event): void
+  /**
+   * 排序事件
+   */
+  (e: 'sort-change', column: TableColumnProps, order: TableColumnSortOrder): void
+  /**
+   * 过滤事件
+   */
+  (e: 'filter-change', filters: Record<string, Array<string | number>>): void
+  /**
+   * 当前行变化事件
+   */
+  (e: 'current-change', currentRow: T | null, oldCurrentRow: T | null): void
+}
+
+export interface TableInstance<T = any> {
+  /**
+   * 清空排序
+   */
+  clearSort: () => void
+  /**
+   * 清空过滤
+   */
+  clearFilter: (columnKey?: string | string[]) => void
+  /**
+   * 设置当前行
+   */
+  setCurrentRow: (row: T | null) => void
+  /**
+   * 刷新表格
+   */
+  doLayout: () => void
+  /**
+   * 获取所有行
+   */
+  getRows: () => T[]
+}
+
+export interface TableColumnInstance {
+  /**
+   * 列配置
+   */
+  column: TableColumnProps
+  /**
+   * 更新列配置
+   */
+  updateColumn: (props: Partial<TableColumnProps>) => void
+}
+
+export interface TableContext<T = any> {
+  data: T[]
+  border: boolean
+  stripe: boolean
+  highlightCurrentRow: boolean
+  currentRowKey: string | number
+  table: TableInstance<T>
+  addColumn: (column: TableColumnInstance) => void
+  removeColumn: (column: TableColumnInstance) => void
+}

package/src/types/tooltip.ts

@@ -0,0 +1,44 @@
+/**
+ * @file Tooltip 组件类型定义
+ * @description 定义 Tooltip 组件的 Props、Emits 接口
+ */
+
+/**
+ * Tooltip 位置类型
+ */
+export type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right'
+
+/**
+ * Tooltip 触发方式类型
+ */
+export type TooltipTrigger = 'hover' | 'click' | 'focus'
+
+/**
+ * Tooltip 组件 Props 接口
+ */
+export interface TooltipProps {
+  /** 提示内容 */
+  content?: string
+  /** 位置 */
+  placement?: TooltipPlacement
+  /** 触发方式 */
+  trigger?: TooltipTrigger
+  /** 是否禁用 */
+  disabled?: boolean
+  /** 是否可见（受控模式） */
+  visible?: boolean
+  /** 偏移量 */
+  offset?: number
+}
+
+/**
+ * Tooltip 组件 Emits 接口
+ */
+export interface TooltipEmits {
+  /** 更新可见状态 */
+  (e: 'update:visible', value: boolean): void
+  /** 显示事件 */
+  (e: 'show'): void
+  /** 隐藏事件 */
+  (e: 'hide'): void
+}

package/src/utils/auto-import.ts

@@ -0,0 +1,41 @@
+/**
+ * @file 自动导入配置
+ * @description 用于 unplugin-vue-components 的组件自动注册
+ */
+
+// 暂时移除类型导入，避免依赖问题
+type ComponentResolver = (name: string) => { name: string; from: string } | undefined
+
+/**
+ * FireUI 组件解析器
+ * @returns 组件解析器
+ */
+export const FireUIRegistrar: ComponentResolver = (name: string) => {
+  if (name.startsWith('F') || name.startsWith('Fire')) {
+    return {
+      name,
+      from: 'fireui'
+    }
+  }
+}
+
+/**
+ * 组件列表
+ */
+export const components = [
+  'FButton',
+  'FireRow',
+  'FireCol',
+  'FireContainer',
+  'FireHeader',
+  'FireAside',
+  'FireMain',
+  'FireFooter',
+  'FireTooltip',
+  'FireTips',
+  'FireInput',
+  'FireForm',
+  'FireFormItem',
+  'FireTable',
+  'FireTableColumn'
+]

package/src/utils/index.ts

@@ -0,0 +1,2 @@
+export * from './install'
+export * from './useNamespace'

package/src/utils/install.ts

@@ -0,0 +1,20 @@
+import type { App, Component } from 'vue'
+
+export function withInstall<T>(component: T & { name?: string }) {
+  const comp = component as any
+  comp.install = (app: App) => {
+    app.component(comp.name || comp.__name, component)
+  }
+  return component as T & { install: (app: App) => void }
+}
+
+export function registerComponent(app: App, component: Component) {
+  const comp = component as any
+  app.component(comp.name || comp.__name, component)
+}
+
+export function registerComponents(app: App, components: Component[]) {
+  components.forEach((component) => {
+    registerComponent(app, component)
+  })
+}

package/src/utils/useNamespace.ts

@@ -0,0 +1,29 @@
+import { computed } from 'vue'
+
+/**
+ * 生成 BEM 命名空间
+ * @param block 组件名称
+ * @returns BEM 命名空间对象
+ */
+export function useNamespace(block: string) {
+  const b = computed(() => `fire-${block}`)
+  
+  const e = (element: string) => {
+    return element ? `${b.value}__${element}` : b.value
+  }
+  
+  const m = (modifier: string) => {
+    return modifier ? `${b.value}--${modifier}` : b.value
+  }
+  
+  const em = (element: string, modifier: string) => {
+    return `${e(element)}--${modifier}`
+  }
+  
+  return {
+    b: b.value,
+    e,
+    m,
+    em
+  }
+}