@firerian/fireui 1.0.1 → 1.0.2

package/dist/types/index.d.ts

@@ -340,6 +340,24 @@ 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 FireAside: {
@@ -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.2",
   "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

@@ -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/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,205 @@
+<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">
+@import '../../styles/variables.scss';
+
+.#{$namespace}-rich-text {
+  border: 1px solid $border-color;
+  border-radius: $border-radius-base;
+  transition: all 0.2s ease;
+
+  &: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;
+  }
+
+  .ql-editor {
+    min-height: calc(100% - 42px);
+    line-height: 1.5;
+  }
+
+  .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
+}

package/src/index.ts

@@ -17,10 +17,10 @@
  */
 
 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, FireInput, FireForm, FireFormItem, FireTable, FireTableColumn, FireRichText } from './components'
 
 // 所有组件列表
-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, FireInput, FireForm, FireFormItem, FireTable, FireTableColumn, FireRichText]
 
 /**
  * 安装函数 - 自动注册所有组件
@@ -35,7 +35,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, FireInput, FireForm, FireFormItem, FireTable, FireTableColumn, FireRichText }
 
 // 导出组件库插件
 export default {

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;
 
 // 字体