@firerian/fireui 1.0.1 → 1.0.3

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 } 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]
+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 }
+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/styles/variables.scss

@@ -4,9 +4,13 @@ $namespace: fire;
 // 颜色变量
 $primary-color: #3b82f6;
 $primary-color-hover: #2563eb;
+$primary-color-light: rgba(59, 130, 246, 0.1);
+$primary-color-dark: #1d4ed8;
 $success-color: #22c55e;
-$warning-color: #f59e0b;
+$success-color-dark: #16a34a;
 $danger-color: #ef4444;
+$danger-color-dark: #dc2626;
+$warning-color: #f59e0b;
 $info-color: #6b7280;
 
 // 字体

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[]) {