@firerian/fireui 1.0.0

package/src/components/grid/col.vue

@@ -0,0 +1,99 @@
+<template>
+  <div
+    :class="[
+      ns.b,
+      {
+        [ns.m(`span-${span}`)]: span,
+        [ns.m(`offset-${offset}`)]: offset
+      },
+      ...responsiveClasses
+    ]"
+    :style="colStyle"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useNamespace } from '../../utils'
+import type { ColProps } from '../../types/grid'
+
+const ns = useNamespace('col')
+
+const props = withDefaults(defineProps<ColProps>(), {
+  span: 24,
+  offset: 0
+})
+
+const responsiveClasses = computed(() => {
+  const classes: string[] = []
+  const breakpoints = ['xs', 'sm', 'md', 'lg', 'xl'] as const
+  
+  breakpoints.forEach((breakpoint) => {
+    const value = props[breakpoint]
+    if (value) {
+      if (typeof value === 'number') {
+        classes.push(ns.m(`${breakpoint}-span-${value}`))
+      } else {
+        if (value.span) {
+          classes.push(ns.m(`${breakpoint}-span-${value.span}`))
+        }
+        if (value.offset) {
+          classes.push(ns.m(`${breakpoint}-offset-${value.offset}`))
+        }
+      }
+    }
+  })
+  
+  return classes
+})
+
+const colStyle = computed(() => {
+  return {
+    padding: `calc(var(--fire-row-gutter-vertical, 0) * 0.5) calc(var(--fire-row-gutter-horizontal, 0) * 0.5)`
+  }
+})
+</script>
+
+<style scoped lang="scss">
+@import '../../styles/variables.scss';
+
+.#{$namespace}-col {
+  box-sizing: border-box;
+  flex-shrink: 0;
+  min-width: 0;
+  max-width: 100%;
+
+  @for $i from 1 through 24 {
+    &--span-#{$i} {
+      flex: 0 0 calc(#{$i} / 24 * 100%);
+      max-width: calc(#{$i} / 24 * 100%);
+    }
+
+    &--offset-#{$i} {
+      margin-left: calc(#{$i} / 24 * 100%);
+    }
+
+    // 响应式断点
+    @each $breakpoint, $value in (
+      xs: 0,
+      sm: 576px,
+      md: 768px,
+      lg: 992px,
+      xl: 1200px
+    ) {
+      @media (min-width: $value) {
+        &--#{$breakpoint}-span-#{$i} {
+          flex: 0 0 calc(#{$i} / 24 * 100%);
+          max-width: calc(#{$i} / 24 * 100%);
+        }
+
+        &--#{$breakpoint}-offset-#{$i} {
+          margin-left: calc(#{$i} / 24 * 100%);
+        }
+      }
+    }
+  }
+}
+</style>

package/src/components/grid/index.ts

@@ -0,0 +1,16 @@
+import Row from './row.vue'
+import Col from './col.vue'
+import { withInstall } from '../../utils'
+
+const FireRow = withInstall(Row)
+const FireCol = withInstall(Col)
+
+export {
+  FireRow,
+  FireCol
+}
+
+export default {
+  FireRow,
+  FireCol
+}

package/src/components/grid/row.vue

@@ -0,0 +1,85 @@
+<template>
+  <div
+    :class="[
+      ns.b,
+      {
+        [ns.m(`justify-${justify}`)]: justify,
+        [ns.m(`align-${align}`)]: align
+      }
+    ]"
+    :style="rowStyle"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useNamespace } from '../../utils'
+import type { RowProps } from '../../types/grid'
+
+const ns = useNamespace('row')
+
+const props = withDefaults(defineProps<RowProps>(), {
+  gutter: 0,
+  justify: 'start',
+  align: 'top'
+})
+
+const rowStyle = computed(() => {
+  const style: Record<string, string> = {}
+  if (props.gutter) {
+    const [horizontal, vertical] = Array.isArray(props.gutter) ? props.gutter : [props.gutter, props.gutter]
+    style['--fire-row-gutter-horizontal'] = `${horizontal}px`
+    style['--fire-row-gutter-vertical'] = `${vertical}px`
+  }
+  return style
+})
+</script>
+
+<style scoped lang="scss">
+@import '../../styles/variables.scss';
+
+.#{$namespace}-row {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0 calc(var(--fire-row-gutter-horizontal, 0) * -0.5);
+  margin-top: calc(var(--fire-row-gutter-vertical, 0) * -0.5);
+
+  &--justify-start {
+    justify-content: flex-start;
+  }
+
+  &--justify-end {
+    justify-content: flex-end;
+  }
+
+  &--justify-center {
+    justify-content: center;
+  }
+
+  &--justify-space-between {
+    justify-content: space-between;
+  }
+
+  &--justify-space-around {
+    justify-content: space-around;
+  }
+
+  &--justify-space-evenly {
+    justify-content: space-evenly;
+  }
+
+  &--align-top {
+    align-items: flex-start;
+  }
+
+  &--align-middle {
+    align-items: center;
+  }
+
+  &--align-bottom {
+    align-items: flex-end;
+  }
+}
+</style>

package/src/components/grid/types.ts

@@ -0,0 +1,66 @@
+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/components/index.ts

@@ -0,0 +1,36 @@
+/**
+ * @file 组件统一导出
+ * @description 导出所有 UI 组件
+ */
+
+// Button 组件
+export { FButton } from './button'
+export type { ButtonInstance, ButtonProps, ButtonEmits, ButtonSlots } from './button'
+
+// Grid 组件
+export { FireRow, FireCol } from './grid'
+export type { RowProps, ColProps, ResponsiveProps } from './grid/types'
+
+// Layout 组件
+export { FireContainer, FireHeader, FireAside, FireMain, FireFooter } from './layout'
+export type { ContainerProps, HeaderProps, AsideProps, MainProps, FooterProps } from './layout/types'
+
+// Tooltip 组件
+export { FireTooltip } from './tooltip'
+export type { TooltipProps, TooltipEmits, TooltipSlots } from './tooltip/types'
+
+// Tips 组件
+export { FireTips } from './tips'
+export type { TipsProps, TipsEmits, TipsSlots } from './tips/types'
+
+// Input 组件
+export { FireInput } from './input'
+export type { InputProps, InputEmits, InputSlots } from './input/types'
+
+// Form 组件
+export { FireForm, FireFormItem } from './form'
+export type { FormProps, FormEmits, FormInstance, FormItemProps, FormItemEmits, FormItemInstance } from '../types/form'
+
+// Table 组件
+export { FireTable, FireTableColumn } from './table'
+export type { TableProps, TableEmits, TableInstance, TableColumnProps, TableColumnSlots } from '../types/table'

package/src/components/input/index.ts

@@ -0,0 +1,8 @@
+import Input from './input.vue'
+import { withInstall } from '../../utils'
+import type { App } from 'vue'
+
+const FireInput = withInstall(Input as any) as typeof Input & { install: (app: App) => void }
+
+export { FireInput }
+export default FireInput

package/src/components/input/input.test.ts

@@ -0,0 +1,129 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { FireInput } from './index'
+
+describe('FireInput', () => {
+  it('should render correctly', () => {
+    const wrapper = mount(FireInput, {
+      props: {
+        modelValue: 'test'
+      }
+    })
+
+    expect(wrapper.exists()).toBe(true)
+    expect(wrapper.find('input').element.value).toBe('test')
+  })
+
+  it('should update modelValue when input', async () => {
+    const wrapper = mount(FireInput, {
+      props: {
+        modelValue: ''
+      }
+    })
+
+    const input = wrapper.find('input')
+    await input.setValue('new value')
+    await input.trigger('input')
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['new value'])
+    expect(wrapper.emitted('input')?.[0]).toEqual(['new value'])
+  })
+
+  it('should emit focus and blur events', async () => {
+    const wrapper = mount(FireInput)
+
+    const input = wrapper.find('input')
+    await input.trigger('focus')
+    expect(wrapper.emitted('focus')).toBeTruthy()
+
+    await input.trigger('blur')
+    expect(wrapper.emitted('blur')).toBeTruthy()
+  })
+
+  it('should emit enter event', async () => {
+    const wrapper = mount(FireInput)
+
+    const input = wrapper.find('input')
+    await input.trigger('keydown.enter')
+    expect(wrapper.emitted('enter')).toBeTruthy()
+  })
+
+  it('should be disabled', () => {
+    const wrapper = mount(FireInput, {
+      props: {
+        disabled: true
+      }
+    })
+
+    const input = wrapper.find('input')
+    expect(input.element.disabled).toBe(true)
+    expect(wrapper.classes()).toContain('fire-input--disabled')
+  })
+
+  it('should be readonly', () => {
+    const wrapper = mount(FireInput, {
+      props: {
+        readonly: true
+      }
+    })
+
+    const input = wrapper.find('input')
+    expect(input.element.readOnly).toBe(true)
+  })
+
+  it('should show word limit', () => {
+    const wrapper = mount(FireInput, {
+      props: {
+        modelValue: 'test',
+        maxlength: 10,
+        showWordLimit: true
+      }
+    })
+
+    expect(wrapper.find('.fire-input__word-limit').text()).toBe('4/10')
+  })
+
+  it('should toggle password visibility', async () => {
+    const wrapper = mount(FireInput, {
+      props: {
+        password: true
+      }
+    })
+
+    const input = wrapper.find('input')
+    expect(input.element.type).toBe('password')
+
+    const toggleButton = wrapper.find('.fire-input__password-icon')
+    await toggleButton.trigger('click')
+    expect(input.element.type).toBe('text')
+
+    await toggleButton.trigger('click')
+    expect(input.element.type).toBe('password')
+  })
+
+  it('should render different sizes', () => {
+    const sizes = ['large', 'medium', 'small']
+    
+    sizes.forEach((size) => {
+      const wrapper = mount(FireInput, {
+        props: {
+          size: size as 'large' | 'medium' | 'small'
+        }
+      })
+      
+      expect(wrapper.classes()).toContain(`fire-input--${size}`)
+    })
+  })
+
+  it('should render prefix and suffix slots', () => {
+    const wrapper = mount(FireInput, {
+      slots: {
+        prefix: '<span class="prefix">P</span>',
+        suffix: '<span class="suffix">S</span>'
+      }
+    })
+
+    expect(wrapper.find('.prefix').exists()).toBe(true)
+    expect(wrapper.find('.suffix').exists()).toBe(true)
+  })
+})

package/src/components/input/input.vue

@@ -0,0 +1,256 @@
+<template>
+  <div
+    :class="[
+      ns.b,
+      ns.m(size),
+      {
+        [ns.m('disabled')]: disabled,
+        [ns.m('prefix')]: $slots.prefix || prefixIcon,
+        [ns.m('suffix')]: $slots.suffix || suffixIcon || showWordLimit
+      }
+    ]"
+  >
+    <div v-if="$slots.prefix || prefixIcon" class="fire-input__prefix">
+      <slot name="prefix">
+        <component :is="prefixIcon" v-if="prefixIcon" />
+      </slot>
+    </div>
+    <input
+      ref="inputRef"
+      :type="password ? (showPassword ? 'text' : 'password') : type"
+      :value="modelValue"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :readonly="readonly"
+      :maxlength="maxlength"
+      :minlength="minlength"
+      @input="handleInput"
+      @focus="handleFocus"
+      @blur="handleBlur"
+      @keydown.enter="handleEnter"
+      class="fire-input__inner"
+    />
+    <div v-if="$slots.suffix || suffixIcon || showWordLimit || (password && !disabled)" class="fire-input__suffix">
+      <span v-if="showWordLimit" class="fire-input__word-limit">{{ (modelValue || '').toString().length }}/{{ maxlength }}</span>
+      <div v-if="password && !disabled" class="fire-input__password-toggle">
+        <button
+          type="button"
+          @click="togglePassword"
+          class="fire-input__password-icon"
+          aria-label="Toggle password visibility"
+        >
+          <Eye v-if="!showPassword" :size="16" />
+          <EyeOff v-else :size="16" />
+        </button>
+      </div>
+      <slot name="suffix">
+        <component :is="suffixIcon" v-if="suffixIcon" />
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Eye, EyeOff } from 'lucide-vue-next'
+import { useNamespace } from '../../utils'
+
+// 初始化命名空间
+const ns = useNamespace('input')
+
+// Props 定义 - 使用 export 导出
+export interface InputProps {
+  type?: string
+  modelValue?: string | number
+  placeholder?: string
+  disabled?: boolean
+  readonly?: boolean
+  password?: boolean
+  maxlength?: number
+  minlength?: number
+  showWordLimit?: boolean
+  size?: 'large' | 'medium' | 'small'
+  prefixIcon?: string | object
+  suffixIcon?: string | object
+  class?: string
+  style?: string | object
+}
+
+withDefaults(defineProps<InputProps>(), {
+  type: 'text',
+  modelValue: '',
+  placeholder: '',
+  disabled: false,
+  readonly: false,
+  password: false,
+  maxlength: undefined,
+  minlength: undefined,
+  showWordLimit: false,
+  size: 'medium',
+  prefixIcon: undefined,
+  suffixIcon: undefined
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string | number): void
+  (e: 'input', value: string | number): void
+  (e: 'focus', event: FocusEvent): void
+  (e: 'blur', event: FocusEvent): void
+  (e: 'enter', event: KeyboardEvent): void
+  (e: 'clear'): void
+}>()
+
+const inputRef = ref<HTMLInputElement>()
+const showPassword = ref(false)
+
+const handleInput = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  const value = target.value
+  emit('update:modelValue', value)
+  emit('input', value)
+}
+
+const handleFocus = (event: FocusEvent) => {
+  emit('focus', event)
+}
+
+const handleBlur = (event: FocusEvent) => {
+  emit('blur', event)
+}
+
+const handleEnter = (event: KeyboardEvent) => {
+  emit('enter', event)
+}
+
+const togglePassword = () => {
+  showPassword.value = !showPassword.value
+}
+</script>
+
+<style scoped lang="scss">
+@import '../../styles/variables.scss';
+
+.#{$namespace}-input {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  width: 100%;
+  border: 1px solid $border-color;
+  border-radius: $border-radius-base;
+  transition: all 0.2s ease;
+  background-color: #fff;
+
+  &:hover {
+    border-color: $primary-color;
+  }
+
+  &:focus-within {
+    border-color: $primary-color;
+    box-shadow: 0 0 0 2px rgba($primary-color, 0.2);
+  }
+
+  &--disabled {
+    background-color: $disabled-bg;
+    border-color: $border-color;
+    cursor: not-allowed;
+
+    .#{$namespace}-input__inner {
+      background-color: $disabled-bg;
+      cursor: not-allowed;
+    }
+  }
+
+  &--prefix {
+    .#{$namespace}-input__inner {
+      padding-left: 8px;
+    }
+  }
+
+  &--suffix {
+    .#{$namespace}-input__inner {
+      padding-right: 8px;
+    }
+  }
+
+  &--large {
+    height: 40px;
+
+    .#{$namespace}-input__inner {
+      height: 40px;
+      font-size: 14px;
+      padding: 0 12px;
+    }
+  }
+
+  &--medium {
+    height: 32px;
+
+    .#{$namespace}-input__inner {
+      height: 32px;
+      font-size: 14px;
+      padding: 0 12px;
+    }
+  }
+
+  &--small {
+    height: 24px;
+
+    .#{$namespace}-input__inner {
+      height: 24px;
+      font-size: 12px;
+      padding: 0 8px;
+    }
+  }
+
+  &__inner {
+    flex: 1;
+    border: none;
+    outline: none;
+    background: transparent;
+    font-size: 14px;
+    color: $text-color;
+    transition: all 0.2s ease;
+
+    &::placeholder {
+      color: $text-color-secondary;
+    }
+  }
+
+  &__prefix {
+    padding: 0 8px;
+    color: $text-color-secondary;
+    font-size: 14px;
+  }
+
+  &__suffix {
+    display: flex;
+    align-items: center;
+    padding: 0 8px;
+    color: $text-color-secondary;
+    font-size: 14px;
+  }
+
+  &__word-limit {
+    font-size: 12px;
+    color: $text-color-secondary;
+    margin-right: 8px;
+  }
+
+  &__password-toggle {
+    margin-right: 4px;
+  }
+
+  &__password-icon {
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    padding: 0;
+    color: $text-color-secondary;
+    transition: color 0.2s ease;
+
+    &:hover {
+      color: $primary-color;
+    }
+  }
+}
+</style>