@firerian/fireui 1.0.2 → 1.0.3

package/dist/types/index.d.ts

@@ -360,6 +360,10 @@ toolbar: any[];
 
 export declare const FButton: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 
+export declare const FInput: typeof _default_3 & {
+    install: (app: App) => void;
+};
+
 export declare const FireAside: {
     new (...args: any[]): CreateComponentPublicInstanceWithMixins<Readonly<{
     width?: string | number;
@@ -661,10 +665,6 @@ height: string | number;
     install: (app: App) => void;
 };
 
-export declare const FireInput: typeof _default_3 & {
-    install: (app: App) => void;
-};
-
 export declare const FireMain: {
     new (...args: any[]): CreateComponentPublicInstanceWithMixins<Readonly<{
     class?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@firerian/fireui",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "type": "module",
   "description": "A modern Vue 3 UI component library",
   "main": "./dist/fireui.cjs",

package/src/components/index.ts

@@ -24,7 +24,7 @@ export { FireTips } from './tips'
 export type { TipsProps, TipsEmits, TipsSlots } from './tips/types'
 
 // Input 组件
-export { FireInput } from './input'
+export { FInput } from './input'
 export type { InputProps, InputEmits, InputSlots } from './input/types'
 
 // Form 组件

package/src/components/input/index.ts

@@ -2,7 +2,7 @@ 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 }
+const FInput = withInstall(Input as any) as typeof Input & { install: (app: App) => void }
 
-export { FireInput }
-export default FireInput
+export { FInput }
+export default FInput

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

@@ -1,10 +1,10 @@
 import { describe, it, expect } from 'vitest'
 import { mount } from '@vue/test-utils'
-import { FireInput } from './index'
+import { FInput } from './index'
 
-describe('FireInput', () => {
+describe('FInput', () => {
   it('should render correctly', () => {
-    const wrapper = mount(FireInput, {
+    const wrapper = mount(FInput, {
       props: {
         modelValue: 'test'
       }
@@ -15,7 +15,7 @@ describe('FireInput', () => {
   })
 
   it('should update modelValue when input', async () => {
-    const wrapper = mount(FireInput, {
+    const wrapper = mount(FInput, {
       props: {
         modelValue: ''
       }
@@ -30,7 +30,7 @@ describe('FireInput', () => {
   })
 
   it('should emit focus and blur events', async () => {
-    const wrapper = mount(FireInput)
+    const wrapper = mount(FInput)
 
     const input = wrapper.find('input')
     await input.trigger('focus')
@@ -41,7 +41,7 @@ describe('FireInput', () => {
   })
 
   it('should emit enter event', async () => {
-    const wrapper = mount(FireInput)
+    const wrapper = mount(FInput)
 
     const input = wrapper.find('input')
     await input.trigger('keydown.enter')
@@ -49,7 +49,7 @@ describe('FireInput', () => {
   })
 
   it('should be disabled', () => {
-    const wrapper = mount(FireInput, {
+    const wrapper = mount(FInput, {
       props: {
         disabled: true
       }
@@ -61,7 +61,7 @@ describe('FireInput', () => {
   })
 
   it('should be readonly', () => {
-    const wrapper = mount(FireInput, {
+    const wrapper = mount(FInput, {
       props: {
         readonly: true
       }
@@ -72,7 +72,7 @@ describe('FireInput', () => {
   })
 
   it('should show word limit', () => {
-    const wrapper = mount(FireInput, {
+    const wrapper = mount(FInput, {
       props: {
         modelValue: 'test',
         maxlength: 10,
@@ -84,7 +84,7 @@ describe('FireInput', () => {
   })
 
   it('should toggle password visibility', async () => {
-    const wrapper = mount(FireInput, {
+    const wrapper = mount(FInput, {
       props: {
         password: true
       }
@@ -105,7 +105,7 @@ describe('FireInput', () => {
     const sizes = ['large', 'medium', 'small']
     
     sizes.forEach((size) => {
-      const wrapper = mount(FireInput, {
+      const wrapper = mount(FInput, {
         props: {
           size: size as 'large' | 'medium' | 'small'
         }
@@ -116,7 +116,7 @@ describe('FireInput', () => {
   })
 
   it('should render prefix and suffix slots', () => {
-    const wrapper = mount(FireInput, {
+    const wrapper = mount(FInput, {
       slots: {
         prefix: '<span class="prefix">P</span>',
         suffix: '<span class="suffix">S</span>'

package/src/components/input/input.vue

@@ -10,7 +10,7 @@
       }
     ]"
   >
-    <div v-if="$slots.prefix || prefixIcon" class="fire-input__prefix">
+    <div v-if="$slots.prefix || prefixIcon" :class="ns.e('prefix')">
       <slot name="prefix">
         <component :is="prefixIcon" v-if="prefixIcon" />
       </slot>
@@ -28,15 +28,15 @@
       @focus="handleFocus"
       @blur="handleBlur"
       @keydown.enter="handleEnter"
-      class="fire-input__inner"
+      :class="ns.e('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">
+    <div v-if="$slots.suffix || suffixIcon || showWordLimit || (password && !disabled)" :class="ns.e('suffix')">
+      <span v-if="showWordLimit" :class="ns.e('word-limit')">{{ (modelValue || '').toString().length }}/{{ maxlength }}</span>
+      <div v-if="password && !disabled" :class="ns.e('password-toggle')">
         <button
           type="button"
           @click="togglePassword"
-          class="fire-input__password-icon"
+          :class="ns.e('password-icon')"
           aria-label="Toggle password visibility"
         >
           <Eye v-if="!showPassword" :size="16" />
@@ -58,6 +58,11 @@ import { useNamespace } from '../../utils'
 // 初始化命名空间
 const ns = useNamespace('input')
 
+// 组件名称
+defineOptions({
+  name: 'FInput'
+})
+
 // Props 定义 - 使用 export 导出
 export interface InputProps {
   type?: string
@@ -127,47 +132,45 @@ const togglePassword = () => {
 }
 </script>
 
-<style scoped lang="scss">
-@import '../../styles/variables.scss';
-
-.#{$namespace}-input {
+<style lang="scss">
+.fire-input {
   position: relative;
   display: inline-flex;
   align-items: center;
   width: 100%;
-  border: 1px solid $border-color;
-  border-radius: $border-radius-base;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
   transition: all 0.2s ease;
   background-color: #fff;
 
   &:hover {
-    border-color: $primary-color;
+    border-color: #3b82f6;
   }
 
   &:focus-within {
-    border-color: $primary-color;
-    box-shadow: 0 0 0 2px rgba($primary-color, 0.2);
+    border-color: #3b82f6;
+    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
   }
 
   &--disabled {
-    background-color: $disabled-bg;
-    border-color: $border-color;
+    background-color: #f5f5f5;
+    border-color: #d9d9d9;
     cursor: not-allowed;
 
-    .#{$namespace}-input__inner {
-      background-color: $disabled-bg;
+    .fire-input__inner {
+      background-color: #f5f5f5;
       cursor: not-allowed;
     }
   }
 
   &--prefix {
-    .#{$namespace}-input__inner {
+    .fire-input__inner {
       padding-left: 8px;
     }
   }
 
   &--suffix {
-    .#{$namespace}-input__inner {
+    .fire-input__inner {
       padding-right: 8px;
     }
   }
@@ -175,7 +178,7 @@ const togglePassword = () => {
   &--large {
     height: 40px;
 
-    .#{$namespace}-input__inner {
+    .fire-input__inner {
       height: 40px;
       font-size: 14px;
       padding: 0 12px;
@@ -185,7 +188,7 @@ const togglePassword = () => {
   &--medium {
     height: 32px;
 
-    .#{$namespace}-input__inner {
+    .fire-input__inner {
       height: 32px;
       font-size: 14px;
       padding: 0 12px;
@@ -195,7 +198,7 @@ const togglePassword = () => {
   &--small {
     height: 24px;
 
-    .#{$namespace}-input__inner {
+    .fire-input__inner {
       height: 24px;
       font-size: 12px;
       padding: 0 8px;
@@ -208,17 +211,17 @@ const togglePassword = () => {
     outline: none;
     background: transparent;
     font-size: 14px;
-    color: $text-color;
+    color: #333333;
     transition: all 0.2s ease;
 
     &::placeholder {
-      color: $text-color-secondary;
+      color: #666666;
     }
   }
 
   &__prefix {
     padding: 0 8px;
-    color: $text-color-secondary;
+    color: #666666;
     font-size: 14px;
   }
 
@@ -226,13 +229,13 @@ const togglePassword = () => {
     display: flex;
     align-items: center;
     padding: 0 8px;
-    color: $text-color-secondary;
+    color: #666666;
     font-size: 14px;
   }
 
   &__word-limit {
     font-size: 12px;
-    color: $text-color-secondary;
+    color: #666666;
     margin-right: 8px;
   }
 
@@ -245,11 +248,11 @@ const togglePassword = () => {
     border: none;
     cursor: pointer;
     padding: 0;
-    color: $text-color-secondary;
+    color: #666666;
     transition: color 0.2s ease;
 
     &:hover {
-      color: $primary-color;
+      color: #3b82f6;
     }
   }
 }

package/src/components/rich-text/rich-text.vue

@@ -96,12 +96,13 @@ const handleImageUpload = (file: File, callback: (url: string) => void) => {
 </script>
 
 <style scoped lang="scss">
-@import '../../styles/variables.scss';
+@use '../../styles/variables' as *;
 
 .#{$namespace}-rich-text {
   border: 1px solid $border-color;
   border-radius: $border-radius-base;
   transition: all 0.2s ease;
+  overflow: hidden;
 
   &:hover {
     border-color: $primary-color;
@@ -120,11 +121,15 @@ const handleImageUpload = (file: File, callback: (url: string) => void) => {
 
   .ql-container {
     font-size: 14px;
+    height: 100%;
   }
 
   .ql-editor {
     min-height: calc(100% - 42px);
     line-height: 1.5;
+    max-height: calc(100% - 42px);
+    overflow-y: auto;
+    padding-bottom: 40px;
   }
 
   .ql-toolbar.ql-snow {

package/src/index.ts

@@ -17,10 +17,28 @@
  */
 
 import type { App, Plugin, Component } from 'vue'
-import { FButton, FireRow, FireCol, FireContainer, FireHeader, FireAside, FireMain, FireFooter, FireTooltip, FireTips, FireInput, FireForm, FireFormItem, FireTable, FireTableColumn, FireRichText } from './components'
+import { FButton, FireRow, FireCol, FireContainer, FireHeader, FireAside, FireMain, FireFooter, FireTooltip, FireTips, FInput, FireForm, FireFormItem, FireTable, FireTableColumn, FireRichText } from './components'
+
+// 导入组件样式
+import './components/button/button.vue'
+import './components/input/input.vue'
+import './components/rich-text/rich-text.vue'
+import './components/grid/row.vue'
+import './components/grid/col.vue'
+import './components/layout/container.vue'
+import './components/layout/header.vue'
+import './components/layout/aside.vue'
+import './components/layout/main.vue'
+import './components/layout/footer.vue'
+import './components/tooltip/tooltip.vue'
+import './components/tips/tips.vue'
+import './components/form/form.vue'
+import './components/form/form-item.vue'
+import './components/table/table.vue'
+import './components/table/table-column.vue'
 
 // 所有组件列表
-const components = [FButton, FireRow, FireCol, FireContainer, FireHeader, FireAside, FireMain, FireFooter, FireTooltip, FireTips, FireInput, FireForm, FireFormItem, FireTable, FireTableColumn, FireRichText]
+const components = [FButton, FireRow, FireCol, FireContainer, FireHeader, FireAside, FireMain, FireFooter, FireTooltip, FireTips, FInput, FireForm, FireFormItem, FireTable, FireTableColumn, FireRichText]
 
 /**
  * 安装函数 - 自动注册所有组件
@@ -35,7 +53,7 @@ const install = (app: App): void => {
 }
 
 // 导出所有组件
-export { FButton, FireRow, FireCol, FireContainer, FireHeader, FireAside, FireMain, FireFooter, FireTooltip, FireTips, FireInput, FireForm, FireFormItem, FireTable, FireTableColumn, FireRichText }
+export { FButton, FireRow, FireCol, FireContainer, FireHeader, FireAside, FireMain, FireFooter, FireTooltip, FireTips, FInput, FireForm, FireFormItem, FireTable, FireTableColumn, FireRichText }
 
 // 导出组件库插件
 export default {

package/src/styles/components.scss

@@ -0,0 +1,230 @@
+/* Input 组件样式 */
+.fire-input {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  width: 100%;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  transition: all 0.2s ease;
+  background-color: #fff;
+
+  &:hover {
+    border-color: #3b82f6;
+  }
+
+  &:focus-within {
+    border-color: #3b82f6;
+    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
+  }
+
+  &--disabled {
+    background-color: #f5f5f5;
+    border-color: #d9d9d9;
+    cursor: not-allowed;
+
+    .fire-input__inner {
+      background-color: #f5f5f5;
+      cursor: not-allowed;
+    }
+  }
+
+  &--prefix {
+    .fire-input__inner {
+      padding-left: 8px;
+    }
+  }
+
+  &--suffix {
+    .fire-input__inner {
+      padding-right: 8px;
+    }
+  }
+
+  &--large {
+    height: 40px;
+
+    .fire-input__inner {
+      height: 40px;
+      font-size: 14px;
+      padding: 0 12px;
+    }
+  }
+
+  &--medium {
+    height: 32px;
+
+    .fire-input__inner {
+      height: 32px;
+      font-size: 14px;
+      padding: 0 12px;
+    }
+  }
+
+  &--small {
+    height: 24px;
+
+    .fire-input__inner {
+      height: 24px;
+      font-size: 12px;
+      padding: 0 8px;
+    }
+  }
+
+  &__inner {
+    flex: 1;
+    border: none;
+    outline: none;
+    background: transparent;
+    font-size: 14px;
+    color: #333333;
+    transition: all 0.2s ease;
+
+    &::placeholder {
+      color: #666666;
+    }
+  }
+
+  &__prefix {
+    padding: 0 8px;
+    color: #666666;
+    font-size: 14px;
+  }
+
+  &__suffix {
+    display: flex;
+    align-items: center;
+    padding: 0 8px;
+    color: #666666;
+    font-size: 14px;
+  }
+
+  &__word-limit {
+    font-size: 12px;
+    color: #666666;
+    margin-right: 8px;
+  }
+
+  &__password-toggle {
+    margin-right: 4px;
+  }
+
+  &__password-icon {
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    padding: 0;
+    color: #666666;
+    transition: color 0.2s ease;
+
+    &:hover {
+      color: #3b82f6;
+    }
+  }
+}
+
+/* RichText 组件样式 */
+.fire-rich-text {
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  transition: all 0.2s ease;
+
+  &:hover {
+    border-color: #3b82f6;
+  }
+
+  &--disabled {
+    background-color: #f5f5f5;
+    border-color: #d9d9d9;
+    cursor: not-allowed;
+
+    .ql-container {
+      background-color: #f5f5f5;
+      cursor: not-allowed;
+    }
+  }
+
+  .ql-container {
+    font-size: 14px;
+  }
+
+  .ql-editor {
+    min-height: calc(100% - 42px);
+    line-height: 1.5;
+  }
+
+  .ql-toolbar.ql-snow {
+    border-bottom: 1px solid #d9d9d9;
+  }
+
+  .ql-snow .ql-picker-label {
+    color: #333333;
+  }
+
+  .ql-snow .ql-picker-options {
+    color: #333333;
+    background-color: #fff;
+  }
+
+  .ql-snow .ql-picker-item:hover {
+    background-color: rgba(59, 130, 246, 0.1);
+  }
+
+  .ql-snow .ql-picker-item.ql-selected {
+    color: #3b82f6;
+  }
+
+  .ql-snow .ql-button:hover {
+    color: #3b82f6;
+  }
+
+  .ql-snow .ql-active {
+    color: #3b82f6;
+  }
+
+  .ql-snow .ql-tooltip {
+    background-color: #fff;
+    border: 1px solid #d9d9d9;
+    border-radius: 4px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+
+  .ql-snow .ql-tooltip input[type=text] {
+    border: 1px solid #d9d9d9;
+    border-radius: 4px;
+  }
+
+  .ql-snow .ql-tooltip input[type=text]:focus {
+    border-color: #3b82f6;
+    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
+  }
+
+  .ql-snow .ql-tooltip button {
+    background-color: #3b82f6;
+    color: #fff;
+    border: none;
+    border-radius: 4px;
+    padding: 4px 8px;
+    cursor: pointer;
+
+    &:hover {
+      background-color: #1d4ed8;
+    }
+  }
+
+  .ql-snow .ql-tooltip button.ql-action {
+    background-color: #22c55e;
+
+    &:hover {
+      background-color: #16a34a;
+    }
+  }
+
+  .ql-snow .ql-tooltip button.ql-remove {
+    background-color: #ef4444;
+
+    &:hover {
+      background-color: #dc2626;
+    }
+  }
+}

package/src/utils/install.ts

@@ -3,14 +3,17 @@ 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)
+    // 优先使用组件的 name 属性，然后是 __name，最后使用组件的文件名
+    const componentName = comp.name || comp.__name || (typeof comp === 'object' ? 'UnnamedComponent' : 'Unknown')
+    app.component(componentName, 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)
+  const componentName = comp.name || comp.__name || (typeof comp === 'object' ? 'UnnamedComponent' : 'Unknown')
+  app.component(componentName, component)
 }
 
 export function registerComponents(app: App, components: Component[]) {