@firerian/fireui 1.0.1 → 1.0.3

package/dist/types/index.d.ts

@@ -340,8 +340,30 @@ declare const _default_2: __VLS_WithTemplateSlots_2<typeof __VLS_component_2, __
 
 declare const _default_3: __VLS_WithTemplateSlots_3<typeof __VLS_component_3, __VLS_TemplateResult_3["slots"]>;
 
+declare const _default_4: DefineComponent<RichTextProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+change: (value: string) => any;
+"update:modelValue": (value: string) => any;
+ready: (quill: any) => any;
+"image-upload": (file: File, callback: (url: string) => void) => any;
+}, string, PublicProps, Readonly<RichTextProps> & Readonly<{
+onChange?: ((value: string) => any) | undefined;
+"onUpdate:modelValue"?: ((value: string) => any) | undefined;
+onReady?: ((quill: any) => any) | undefined;
+"onImage-upload"?: ((file: File, callback: (url: string) => void) => any) | undefined;
+}>, {
+disabled: boolean;
+height: string | number;
+placeholder: string;
+modelValue: string;
+toolbar: any[];
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+
 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;
@@ -643,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;
@@ -676,6 +694,10 @@ style?: string | object;
     install: (app: App) => void;
 };
 
+export declare const FireRichText: typeof _default_4 & {
+    install: (app: App) => void;
+};
+
 export declare const FireRow: {
     new (...args: any[]): CreateComponentPublicInstanceWithMixins<Readonly<RowProps_2> & Readonly<{}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, PublicProps, {
     gutter: number | [number, number];
@@ -1240,6 +1262,37 @@ declare interface ResponsiveProps_2 {
     offset?: number;
 }
 
+declare interface RichTextProps {
+    /**
+     * 绑定的值
+     */
+    modelValue?: string;
+    /**
+     * 编辑器高度
+     */
+    height?: string | number;
+    /**
+     * 是否禁用
+     */
+    disabled?: boolean;
+    /**
+     * 占位文本
+     */
+    placeholder?: string;
+    /**
+     * 自定义工具栏配置
+     */
+    toolbar?: any[];
+    /**
+     * 自定义类名
+     */
+    class?: string;
+    /**
+     * 自定义样式
+     */
+    style?: string | object;
+}
+
 export declare interface RowProps {
     /**
      * 栅格间距

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@firerian/fireui",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "type": "module",
   "description": "A modern Vue 3 UI component library",
   "main": "./dist/fireui.cjs",
@@ -74,8 +74,10 @@
   },
   "dependencies": {
     "@floating-ui/vue": "^1.1.10",
+    "@vueup/vue-quill": "^1.2.0",
     "async-validator": "^4.2.5",
-    "lucide-vue-next": "^0.454.0"
+    "lucide-vue-next": "^0.454.0",
+    "quill": "^2.0.3"
   },
   "devDependencies": {
     "@eslint/js": "^9.13.0",

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 组件
@@ -34,3 +34,7 @@ export type { FormProps, FormEmits, FormInstance, FormItemProps, FormItemEmits,
 // Table 组件
 export { FireTable, FireTableColumn } from './table'
 export type { TableProps, TableEmits, TableInstance, TableColumnProps, TableColumnSlots } from '../types/table'
+
+// RichText 组件
+export { FireRichText } from './rich-text'
+export type { RichTextProps, RichTextEmits } from './rich-text/types'

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/index.ts

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

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

@@ -0,0 +1,210 @@
+<template>
+  <div
+    :class="[
+      ns.b.value,
+      {
+        [ns.m('disabled')]: disabled
+      }
+    ]"
+    :style="{
+      ...(typeof props.style === 'object' ? props.style : {}),
+      height
+    }"
+  >
+    <QuillEditor
+      v-model:content="localValue"
+      :disabled="disabled"
+      :placeholder="placeholder"
+      :toolbar="toolbar"
+      @ready="handleReady"
+      @update:content="handleUpdate"
+      @text-change="handleTextChange"
+      @image-upload="handleImageUpload"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import { QuillEditor } from '@vueup/vue-quill'
+import 'quill/dist/quill.snow.css'
+import { useNamespace } from '../../utils'
+import type { RichTextProps, RichTextEmits } from './types'
+
+const ns = useNamespace('rich-text')
+
+const props = withDefaults(defineProps<RichTextProps>(), {
+  modelValue: '',
+  height: '300px',
+  disabled: false,
+  placeholder: '请输入内容...',
+  toolbar: () => [
+    ['bold', 'italic', 'underline', 'strike'],
+    ['blockquote', 'code-block'],
+    [{ 'header': 1 }, { 'header': 2 }],
+    [{ 'list': 'ordered' }, { 'list': 'bullet' }],
+    [{ 'script': 'sub' }, { 'script': 'super' }],
+    [{ 'indent': '-1' }, { 'indent': '+1' }],
+    [{ 'direction': 'rtl' }],
+    [{ 'size': ['small', false, 'large', 'huge'] }],
+    [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
+    [{ 'color': [] }, { 'background': [] }],
+    [{ 'font': [] }],
+    [{ 'align': [] }],
+    ['clean'],
+    ['link', 'image', 'video']
+  ]
+})
+
+const emit = defineEmits<RichTextEmits>()
+
+const localValue = ref(props.modelValue)
+
+const height = computed(() => {
+  return typeof props.height === 'number' ? `${props.height}px` : props.height
+})
+
+
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    if (newValue !== localValue.value) {
+      localValue.value = newValue
+    }
+  }
+)
+
+const handleReady = (quill: any) => {
+  emit('ready', quill)
+}
+
+const handleUpdate = (value: string) => {
+  emit('update:modelValue', value)
+  emit('change', value)
+}
+
+const handleTextChange = (_delta: any, _oldDelta: any, source: any) => {
+  if (source === 'user') {
+    emit('change', localValue.value)
+  }
+}
+
+const handleImageUpload = (file: File, callback: (url: string) => void) => {
+  emit('image-upload', file, callback)
+}
+</script>
+
+<style scoped lang="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;
+  }
+
+  &--disabled {
+    background-color: $disabled-bg;
+    border-color: $border-color;
+    cursor: not-allowed;
+
+    .ql-container {
+      background-color: $disabled-bg;
+      cursor: not-allowed;
+    }
+  }
+
+  .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 {
+    border-bottom: 1px solid $border-color;
+  }
+
+  .ql-snow .ql-picker-label {
+    color: $text-color;
+  }
+
+  .ql-snow .ql-picker-options {
+    color: $text-color;
+    background-color: #fff;
+  }
+
+  .ql-snow .ql-picker-item:hover {
+    background-color: $primary-color-light;
+  }
+
+  .ql-snow .ql-picker-item.ql-selected {
+    color: $primary-color;
+  }
+
+  .ql-snow .ql-button:hover {
+    color: $primary-color;
+  }
+
+  .ql-snow .ql-active {
+    color: $primary-color;
+  }
+
+  .ql-snow .ql-tooltip {
+    background-color: #fff;
+    border: 1px solid $border-color;
+    border-radius: $border-radius-base;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+
+  .ql-snow .ql-tooltip input[type=text] {
+    border: 1px solid $border-color;
+    border-radius: $border-radius-base;
+  }
+
+  .ql-snow .ql-tooltip input[type=text]:focus {
+    border-color: $primary-color;
+    box-shadow: 0 0 0 2px rgba($primary-color, 0.2);
+  }
+
+  .ql-snow .ql-tooltip button {
+    background-color: $primary-color;
+    color: #fff;
+    border: none;
+    border-radius: $border-radius-base;
+    padding: 4px 8px;
+    cursor: pointer;
+
+    &:hover {
+      background-color: $primary-color-dark;
+    }
+  }
+
+  .ql-snow .ql-tooltip button.ql-action {
+    background-color: $success-color;
+
+    &:hover {
+      background-color: $success-color-dark;
+    }
+  }
+
+  .ql-snow .ql-tooltip button.ql-remove {
+    background-color: $danger-color;
+
+    &:hover {
+      background-color: $danger-color-dark;
+    }
+  }
+}
+</style>

package/src/components/rich-text/types.ts

@@ -0,0 +1,52 @@
+// 简化 Quill 类型定义
+type QuillType = any
+
+export interface RichTextProps {
+  /**
+   * 绑定的值
+   */
+  modelValue?: string
+  /**
+   * 编辑器高度
+   */
+  height?: string | number
+  /**
+   * 是否禁用
+   */
+  disabled?: boolean
+  /**
+   * 占位文本
+   */
+  placeholder?: string
+  /**
+   * 自定义工具栏配置
+   */
+  toolbar?: any[]
+  /**
+   * 自定义类名
+   */
+  class?: string
+  /**
+   * 自定义样式
+   */
+  style?: string | object
+}
+
+export interface RichTextEmits {
+  /**
+   * 值变化事件
+   */
+  (e: 'update:modelValue', value: string): void
+  /**
+   * 编辑器初始化完成事件
+   */
+  (e: 'ready', quill: QuillType): void
+  /**
+   * 内容变化事件
+   */
+  (e: 'change', value: string): void
+  /**
+   * 图片上传事件
+   */
+  (e: 'image-upload', file: File, callback: (url: string) => void): void
+}