@firerian/fireui 1.0.0

package/src/hooks/useForm.ts

@@ -0,0 +1,233 @@
+import { ref, reactive, readonly, provide, inject } from 'vue'
+import Schema from 'async-validator'
+import type {
+  FormProps,
+  FormContext,
+  FormInstance,
+  FormItemInstance,
+  RuleItem,
+  ValidateError
+} from '../types/form'
+
+const formContextKey = Symbol('formContext')
+
+export function useForm<T extends Record<string, any>>() {
+  const formItems = ref<FormItemInstance[]>([])
+  
+  const formInstance = reactive<FormInstance<T>>({
+    validate: async (callback) => {
+      const errors: ValidateError[] = []
+      const validatePromises = formItems.value.map(formItem => {
+        return formItem.validate('submit').catch(errorMessage => {
+          errors.push({ message: errorMessage, field: '' } as ValidateError)
+        })
+      })
+      
+      await Promise.all(validatePromises)
+      
+      const valid = errors.length === 0
+      if (callback) {
+        callback(valid, errors)
+      }
+      return valid
+    },
+    
+    validateField: async (props, callback) => {
+      const propsArray = Array.isArray(props) ? props : [props]
+      const errors: ValidateError[] = []
+      const fields: Record<string, ValidateError[]> = {}
+      
+      const validatePromises = formItems.value
+        .filter(item => {
+          const itemProp = (item as any).prop
+          return itemProp && propsArray.includes(itemProp as keyof T)
+        })
+        .map(formItem => {
+          return formItem.validate('blur').catch(errorMessage => {
+            const field = (formItem as any).prop
+            errors.push({ message: errorMessage, field } as ValidateError)
+            if (field) {
+              if (!fields[field]) {
+                fields[field] = []
+              }
+              fields[field].push({ message: errorMessage, field } as ValidateError)
+            }
+          })
+        })
+      
+      await Promise.all(validatePromises)
+      
+      const valid = errors.length === 0
+      if (callback) {
+        callback(valid ? null : errors[0], fields)
+      }
+      return valid
+    },
+    
+    resetFields: () => {
+      formItems.value.forEach(formItem => {
+        formItem.resetField()
+      })
+    },
+    
+    clearValidate: (props) => {
+      if (props) {
+        const propsArray = Array.isArray(props) ? props : [props]
+        formItems.value
+          .filter(item => {
+            const itemProp = (item as any).prop
+            return itemProp && propsArray.includes(itemProp as keyof T)
+          })
+          .forEach(formItem => {
+            formItem.clearValidate()
+          })
+      } else {
+        formItems.value.forEach(formItem => {
+          formItem.clearValidate()
+        })
+      }
+    },
+    
+    scrollToField: (prop) => {
+      const formItem = formItems.value.find(item => (item as any).prop === prop)
+      if (formItem) {
+        const el = (formItem as any).$el
+        if (el) {
+          el.scrollIntoView({ behavior: 'smooth', block: 'center' })
+        }
+      }
+    }
+  })
+  
+  const addFormItem = (formItem: FormItemInstance) => {
+    formItems.value.push(formItem)
+  }
+  
+  const removeFormItem = (formItem: FormItemInstance) => {
+    const index = formItems.value.indexOf(formItem)
+    if (index > -1) {
+      formItems.value.splice(index, 1)
+    }
+  }
+  
+  return {
+    formInstance,
+    addFormItem,
+    removeFormItem
+  }
+}
+
+export function provideForm<T extends Record<string, any>>(props: FormProps<T>) {
+  const { formInstance, addFormItem, removeFormItem } = useForm<T>()
+  
+  const formContext = reactive({
+    model: props.model || {} as T,
+    rules: props.rules || {} as Record<keyof T, RuleItem | RuleItem[]>,
+    labelWidth: props.labelWidth || '',
+    labelPosition: props.labelPosition || 'left',
+    requiredSymbol: props.requiredSymbol || '*',
+    statusIcon: props.statusIcon || false,
+    inline: props.inline || false,
+    hideRequiredAsterisk: props.hideRequiredAsterisk || false,
+    form: formInstance,
+    addFormItem,
+    removeFormItem
+  }) as FormContext<T>
+  
+  provide(formContextKey, readonly(formContext))
+  
+  return formContext
+}
+
+export function useFormContext<T extends Record<string, any>>() {
+  const formContext = inject<FormContext<T>>(formContextKey)
+  if (!formContext) {
+    throw new Error('FormItem must be used within Form')
+  }
+  return formContext
+}
+
+export function useFormItem(prop?: string) {
+  const formContext = useFormContext()
+  const error = ref('')
+  const validated = ref(false)
+  
+  const validate = async (_trigger: string = 'blur', callback?: (valid: boolean, errorMessage: string) => void) => {
+    if (!prop || !formContext.model || !formContext.rules[prop as keyof typeof formContext.model]) {
+      const valid = true
+      if (callback) {
+        callback(valid, '')
+      }
+      return valid
+    }
+    
+    const rules = formContext.rules[prop as keyof typeof formContext.model]
+    const value = getFieldValue(formContext.model, prop)
+    
+    const schema = new Schema({
+      [prop]: rules
+    })
+    
+    try {
+      await schema.validate({
+        [prop]: value
+      }, {
+        first: true
+      })
+      
+      error.value = ''
+      validated.value = true
+      if (callback) {
+        callback(true, '')
+      }
+      return true
+    } catch (err: any) {
+      error.value = err.errors[0]
+      validated.value = false
+      if (callback) {
+        callback(false, err.errors[0])
+      }
+      return false
+    }
+  }
+  
+  const resetField = () => {
+    if (!prop || !formContext.model) return
+    setFieldValue(formContext.model, prop, '')
+    error.value = ''
+    validated.value = false
+  }
+  
+  const clearValidate = () => {
+    error.value = ''
+    validated.value = false
+  }
+  
+  return {
+    formContext,
+    error,
+    validated,
+    validate,
+    resetField,
+    clearValidate
+  }
+}
+
+function getFieldValue(obj: any, path: string): any {
+  return path.split('.').reduce((prev, curr) => prev && prev[curr], obj)
+}
+
+function setFieldValue(obj: any, path: string, value: any): void {
+  const keys = path.split('.')
+  const lastKey = keys.pop()
+  if (!lastKey) return
+  
+  const target = keys.reduce((prev, curr) => {
+    if (!prev[curr]) {
+      prev[curr] = {}
+    }
+    return prev[curr]
+  }, obj)
+  
+  target[lastKey] = value
+}

package/src/hooks/useTable.ts

@@ -0,0 +1,153 @@
+import { ref, reactive, readonly, provide, inject, computed } from 'vue'
+import type { Ref } from 'vue'
+import type {
+  TableProps,
+  TableContext,
+  TableInstance,
+  TableColumnInstance,
+  TableColumnProps,
+  TableColumnSortOrder
+} from '../types/table'
+
+const tableContextKey = Symbol('tableContext')
+
+export function useTable<T = any>() {
+  const columns = ref<TableColumnInstance[]>([])
+  const currentRow = ref<T | null>(null)
+  const oldCurrentRow = ref<T | null>(null)
+  
+  const tableInstance = reactive<TableInstance<T>>({
+    clearSort: () => {
+      columns.value.forEach(column => {
+        if (column.column.sortable) {
+          column.updateColumn({ sortOrder: null })
+        }
+      })
+    },
+    
+    clearFilter: (columnKey) => {
+      if (columnKey) {
+        const keys = Array.isArray(columnKey) ? columnKey : [columnKey]
+        columns.value
+          .filter(column => keys.includes(column.column.prop || ''))
+          .forEach(column => {
+            column.updateColumn({ filteredValue: [] })
+          })
+      } else {
+        columns.value.forEach(column => {
+          if (column.column.filters) {
+            column.updateColumn({ filteredValue: [] })
+          }
+        })
+      }
+    },
+    
+    setCurrentRow: (row) => {
+      oldCurrentRow.value = currentRow.value
+      currentRow.value = row
+    },
+    
+    doLayout: () => {
+      // 触发重排
+    },
+    
+    getRows: () => {
+      return []
+    }
+  })
+  
+  const addColumn = (column: TableColumnInstance) => {
+    columns.value.push(column)
+  }
+  
+  const removeColumn = (column: TableColumnInstance) => {
+    const index = columns.value.indexOf(column)
+    if (index > -1) {
+      columns.value.splice(index, 1)
+    }
+  }
+  
+  return {
+    tableInstance,
+    columns,
+    currentRow,
+    oldCurrentRow,
+    addColumn,
+    removeColumn
+  }
+}
+
+export function provideTable<T = any>(props: TableProps<T>) {
+  const { tableInstance, currentRow, oldCurrentRow, addColumn, removeColumn } = useTable<T>()
+  
+  const tableContext = reactive({
+    data: props.data || [] as T[],
+    border: props.border || false,
+    stripe: props.stripe || false,
+    highlightCurrentRow: props.highlightCurrentRow || false,
+    currentRowKey: props.currentRowKey || '',
+    table: tableInstance,
+    addColumn,
+    removeColumn
+  }) as TableContext<T>
+  
+  provide(tableContextKey, readonly(tableContext))
+  
+  return {
+    tableContext,
+    currentRow,
+    oldCurrentRow
+  }
+}
+
+export function useTableContext<T = any>() {
+  const tableContext = inject<TableContext<T>>(tableContextKey)
+  if (!tableContext) {
+    throw new Error('TableColumn must be used within Table')
+  }
+  return tableContext
+}
+
+export function useTableColumn(props: TableColumnProps) {
+  const tableContext = useTableContext()
+  
+  const columnInstance = reactive<TableColumnInstance>({
+    column: props,
+    updateColumn: (newProps) => {
+      Object.assign(columnInstance.column, newProps)
+    }
+  })
+  
+  return {
+    tableContext,
+    columnInstance
+  }
+}
+
+export function useSortable<T = any>(data: Ref<T[]>, sortOrder: Ref<TableColumnSortOrder>, prop: string, sortMethod?: (a: T, b: T) => number) {
+  const sortedData = computed(() => {
+    if (!sortOrder.value) {
+      return data.value
+    }
+    
+    return [...data.value].sort((a, b) => {
+      if (sortMethod) {
+        return sortMethod(a, b)
+      }
+      
+      // 默认排序方法
+      const aValue = a[prop as keyof T]
+      const bValue = b[prop as keyof T]
+      
+      if (aValue < bValue) {
+        return sortOrder.value === 'ascending' ? -1 : 1
+      }
+      if (aValue > bValue) {
+        return sortOrder.value === 'ascending' ? 1 : -1
+      }
+      return 0
+    })
+  })
+  
+  return sortedData
+}

package/src/index.ts

@@ -0,0 +1,48 @@
+/**
+ * @file FireUI 组件库入口文件
+ * @description 自动注册所有组件并导出
+ * @example
+ * ```ts
+ * // 全局注册
+ * import { createApp } from 'vue'
+ * import FireUI from 'fireui'
+ * import 'fireui/dist/style.css'
+ * 
+ * const app = createApp(App)
+ * app.use(FireUI)
+ * 
+ * // 按需引入
+ * import { FButton } from 'fireui'
+ * ```
+ */
+
+import type { App, Plugin, Component } from 'vue'
+import { FButton, FireRow, FireCol, FireContainer, FireHeader, FireAside, FireMain, FireFooter, FireTooltip, FireTips, FireInput, FireForm, FireFormItem, FireTable, FireTableColumn } from './components'
+
+// 所有组件列表
+const components = [FButton, FireRow, FireCol, FireContainer, FireHeader, FireAside, FireMain, FireFooter, FireTooltip, FireTips, FireInput, FireForm, FireFormItem, FireTable, FireTableColumn]
+
+/**
+ * 安装函数 - 自动注册所有组件
+ * @param app - Vue 应用实例
+ */
+const install = (app: App): void => {
+  components.forEach((component: Component & { name?: string }) => {
+    if (component && component.name) {
+      app.component(component.name, component)
+    }
+  })
+}
+
+// 导出所有组件
+export { FButton, FireRow, FireCol, FireContainer, FireHeader, FireAside, FireMain, FireFooter, FireTooltip, FireTips, FireInput, FireForm, FireFormItem, FireTable, FireTableColumn }
+
+// 导出组件库插件
+export default {
+  install,
+  version: '0.1.0',
+} as Plugin
+
+// 导出类型
+export * from './types'
+export * from './utils'

package/src/styles/main.scss

@@ -0,0 +1,6 @@
+@use './reset.scss';
+@use './variables.scss';
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/src/styles/mixins.scss

@@ -0,0 +1,48 @@
+@use 'variables' as *;
+
+@mixin button-base {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-family: $font-family;
+  font-weight: 500;
+  border-radius: $border-radius-base;
+  border: 1px solid transparent;
+  cursor: pointer;
+  transition: $transition-base;
+  outline: none;
+
+  &:focus {
+    box-shadow: 0 0 0 2px rgba($primary-color, 0.2);
+  }
+
+  &:active {
+    transform: scale(0.98);
+  }
+}
+
+@mixin button-variant($bg-color, $border-color, $text-color) {
+  background-color: $bg-color;
+  border-color: $border-color;
+  color: $text-color;
+
+  &:hover:not(&--disabled) {
+    opacity: 0.9;
+  }
+
+  &:active:not(&--disabled) {
+    opacity: 0.8;
+  }
+}
+
+@mixin flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@mixin text-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/src/styles/reset.scss

@@ -0,0 +1,49 @@
+@use 'variables' as *;
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  font-family: $font-family;
+  font-size: 16px;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  color: #333;
+  background-color: #fff;
+}
+
+button,
+input,
+textarea,
+select {
+  font-family: inherit;
+  font-size: inherit;
+}
+
+a {
+  color: $primary-color;
+  text-decoration: none;
+
+  &:hover {
+    color: $primary-color-hover;
+  }
+}
+
+ul,
+ol {
+  list-style: none;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+}

package/src/styles/variables.scss

@@ -0,0 +1,137 @@
+// 命名空间
+$namespace: fire;
+
+// 颜色变量
+$primary-color: #3b82f6;
+$primary-color-hover: #2563eb;
+$success-color: #22c55e;
+$warning-color: #f59e0b;
+$danger-color: #ef4444;
+$info-color: #6b7280;
+
+// 字体
+$font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
+  'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+$font-size-base: 14px;
+$font-size-small: 12px;
+$font-size-large: 16px;
+
+// 间距
+$spacing-xs: 4px;
+$spacing-sm: 8px;
+$spacing-md: 16px;
+$spacing-lg: 24px;
+$spacing-xl: 32px;
+
+// 圆角
+$border-radius-base: 4px;
+$border-radius-round: 20px;
+
+// 阴影
+$shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+$shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+$shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+
+// 过渡
+$transition-base: all 0.2s ease-in-out;
+
+// Button 组件变量
+// 默认按钮
+$button-default-bg: #ffffff;
+$button-default-border: #d9d9d9;
+$button-default-text: #333333;
+
+// 主要按钮
+$button-primary-bg: #3b82f6;
+$button-primary-border: #3b82f6;
+$button-primary-text: #ffffff;
+$button-primary-hover: #2563eb;
+
+// 成功按钮
+$button-success-bg: #22c55e;
+$button-success-border: #22c55e;
+$button-success-text: #ffffff;
+$button-success-hover: #16a34a;
+
+// 警告按钮
+$button-warning-bg: #f59e0b;
+$button-warning-border: #f59e0b;
+$button-warning-text: #ffffff;
+$button-warning-hover: #d97706;
+
+// 危险按钮
+$button-danger-bg: #ef4444;
+$button-danger-border: #ef4444;
+$button-danger-text: #ffffff;
+$button-danger-hover: #dc2626;
+
+// 信息按钮
+$button-info-bg: #6b7280;
+$button-info-border: #6b7280;
+$button-info-text: #ffffff;
+$button-info-hover: #4b5563;
+
+// Button 尺寸
+$button-font-size-sm: 12px;
+$button-font-size: 14px;
+$button-font-size-lg: 16px;
+
+$button-padding-vertical-sm: 4px;
+$button-padding-horizontal-sm: 12px;
+
+$button-padding-vertical: 8px;
+$button-padding-horizontal: 16px;
+
+$button-padding-vertical-lg: 12px;
+$button-padding-horizontal-lg: 24px;
+
+$button-border-radius: 4px;
+
+// Input 组件变量
+$input-bg: #ffffff;
+$input-border: #d9d9d9;
+$input-border-focus: #3b82f6;
+$input-text: #333333;
+$input-placeholder: #999999;
+$input-disabled-bg: #f5f5f5;
+
+$input-height-sm: 24px;
+$input-height: 32px;
+$input-height-lg: 40px;
+
+$input-padding-sm: 0 8px;
+$input-padding: 0 12px;
+$input-padding-lg: 0 12px;
+
+// Form 组件变量
+$form-item-margin-bottom: 16px;
+$form-label-width: 120px;
+$form-label-color: #333333;
+$form-error-color: #ef4444;
+
+// Table 组件变量
+$table-border: #e8e8e8;
+$table-header-bg: #fafafa;
+$table-header-text: #333333;
+$table-row-hover: rgba(59, 130, 246, 0.1);
+$table-stripe-bg: #f9f9f9;
+
+// Tooltip 组件变量
+$tooltip-bg: rgba(0, 0, 0, 0.75);
+$tooltip-text: #ffffff;
+$tooltip-padding: 8px 12px;
+$tooltip-border-radius: 4px;
+
+// Tips 组件变量
+$tips-padding: 16px;
+$tips-border-radius: 4px;
+$tips-margin-bottom: 16px;
+
+// 通用变量
+$border-color: #d9d9d9;
+$text-color: #333333;
+$text-color-secondary: #666666;
+$text-color-light: #999999;
+$bg-color: #fafafa;
+$bg-color-light: #f9f9f9;
+$disabled-bg: #f5f5f5;

package/src/types/component.ts

@@ -0,0 +1,9 @@
+export interface FireUIComponent {
+  name?: string
+  install?: (app: any) => void
+}
+
+export interface FireUIPlugin {
+  install: (app: any) => void
+  version: string
+}