From 8557b873175f6a604b2a59b9cb7a3c0a772edb83 Mon Sep 17 00:00:00 2001 From: Cano1997 <1978141412@qq.com> Date: Mon, 14 Aug 2023 20:30:58 +0800 Subject: [PATCH 1/2] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E4=B8=8B=E6=8B=89?= =?UTF-8?q?=E5=88=97=E8=A1=A8=E5=9B=9E=E6=98=BE=E5=BC=82=E5=B8=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/editor/dropdown-list/ibiz-dropdown/ibiz-dropdown.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/editor/dropdown-list/ibiz-dropdown/ibiz-dropdown.tsx b/src/editor/dropdown-list/ibiz-dropdown/ibiz-dropdown.tsx index 1be73b71..8936dcb1 100644 --- a/src/editor/dropdown-list/ibiz-dropdown/ibiz-dropdown.tsx +++ b/src/editor/dropdown-list/ibiz-dropdown/ibiz-dropdown.tsx @@ -67,7 +67,7 @@ export const IBizDropdown = defineComponent({ const curValue: Ref | string | undefined> = computed({ get() { if (props.value) { - return c!.multiple ? props.value?.split(',') : props.value; + return c!.multiple ? props.value?.split(',') : props.value.toString(); } return props.value; }, -- Gitee From b3725b5ff94115b263fad7f9a28c30f02ac5b66b Mon Sep 17 00:00:00 2001 From: Cano1997 <1978141412@qq.com> Date: Mon, 14 Aug 2023 20:31:40 +0800 Subject: [PATCH 2/2] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E9=A2=9C?= =?UTF-8?q?=E8=89=B2=E9=80=89=E6=8B=A9=E7=BC=96=E8=BE=91=E5=99=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../color-picker-editor.controller.ts | 13 +++ .../color-picker-editor.provider.ts | 31 +++++ .../ibiz-color-picker/ibiz-color-picker.scss | 32 ++++++ .../ibiz-color-picker/ibiz-color-picker.tsx | 106 ++++++++++++++++++ src/editor/color-picker/index.ts | 3 + src/editor/index.ts | 7 ++ 6 files changed, 192 insertions(+) create mode 100644 src/editor/color-picker/color-picker-editor.controller.ts create mode 100644 src/editor/color-picker/color-picker-editor.provider.ts create mode 100644 src/editor/color-picker/ibiz-color-picker/ibiz-color-picker.scss create mode 100644 src/editor/color-picker/ibiz-color-picker/ibiz-color-picker.tsx create mode 100644 src/editor/color-picker/index.ts diff --git a/src/editor/color-picker/color-picker-editor.controller.ts b/src/editor/color-picker/color-picker-editor.controller.ts new file mode 100644 index 00000000..aa1aaab3 --- /dev/null +++ b/src/editor/color-picker/color-picker-editor.controller.ts @@ -0,0 +1,13 @@ +import { EditorController } from '@ibiz-template/runtime'; +import { ITextBox } from '@ibiz/model-core'; + +/** + * 颜色选择器控制器 + * + * @author zzq + * @date 2323-8-14 19:42:00 + * @export + * @class ColorPickerEditorController + * @extends {EditorController} + */ +export class ColorPickerEditorController extends EditorController {} diff --git a/src/editor/color-picker/color-picker-editor.provider.ts b/src/editor/color-picker/color-picker-editor.provider.ts new file mode 100644 index 00000000..b5a93045 --- /dev/null +++ b/src/editor/color-picker/color-picker-editor.provider.ts @@ -0,0 +1,31 @@ +/* eslint-disable @typescript-eslint/no-explicit-any */ +import { + IEditorContainerController, + IEditorProvider, +} from '@ibiz-template/runtime'; +import { ITextBox } from '@ibiz/model-core'; +import { ColorPickerEditorController } from './color-picker-editor.controller'; + +/** + * 颜色选择器适配器 + * + * @author zzq + * @date 2323-8-14 19:42:00 + * @export + * @class ColorPickerEditorProvider + * @implements {EditorProvider} + */ +export class ColorPickerEditorProvider implements IEditorProvider { + formEditor: string = 'IBizColorPicker'; + + gridEditor: string = 'IBizColorPicker'; + + async createController( + editorModel: ITextBox, + parentController: IEditorContainerController, + ): Promise { + const c = new ColorPickerEditorController(editorModel, parentController); + await c.init(); + return c; + } +} diff --git a/src/editor/color-picker/ibiz-color-picker/ibiz-color-picker.scss b/src/editor/color-picker/ibiz-color-picker/ibiz-color-picker.scss new file mode 100644 index 00000000..1951c63b --- /dev/null +++ b/src/editor/color-picker/ibiz-color-picker/ibiz-color-picker.scss @@ -0,0 +1,32 @@ +@include b(color-picker) { + color: getCssVar(form-item, text-color); + // 常规样式 + .el-input .el-input__inner { + font-size: getCssVar(form-item, font-size); + color: inherit; + border-color: getCssVar(form-item, border-color); + } + + .el-input .el-input__inner::placeholder { + color: getCssVar(form-item, placeholder-color); + } + + // 禁用样式 + .el-input.is-disabled .el-input__inner { + color: getCssVar(form-item, disabled-color); + background-color: getCssVar(form-item, disabled-bg-color); + border-color: getCssVar(form-item, disabled-border-color); + } + + // 颜色选择框样式 + .el-color-picker__trigger { + border: none; + } + + // 只读模式显示 + @include m(readonly) { + color: getCssVar(form-item, readonly-color); + + @include overflow-wrap; + } +} \ No newline at end of file diff --git a/src/editor/color-picker/ibiz-color-picker/ibiz-color-picker.tsx b/src/editor/color-picker/ibiz-color-picker/ibiz-color-picker.tsx new file mode 100644 index 00000000..449c2c5c --- /dev/null +++ b/src/editor/color-picker/ibiz-color-picker/ibiz-color-picker.tsx @@ -0,0 +1,106 @@ +import { defineComponent, ref, watch } from 'vue'; +import { + getEditorEmits, + getColorPickerProps, + useNamespace, +} from '@ibiz-template/vue3-util'; +import './ibiz-color-picker.scss'; +import { ColorPickerEditorController } from '../color-picker-editor.controller'; + +export const IBizColorPicker = defineComponent({ + name: 'IBizColorPicker', + props: getColorPickerProps(), + emits: getEditorEmits(), + setup(props, { emit }) { + const ns = useNamespace('color-picker'); + + const c = props.controller; + + const currentVal = ref(''); + + watch( + () => props.value, + (newVal, oldVal) => { + if (newVal !== oldVal) { + if (!newVal) { + currentVal.value = ''; + } else { + currentVal.value = newVal; + } + } + }, + { immediate: true }, + ); + + const handleChange = (e: string | null) => { + emit('change', e); + }; + + const inputRef = ref(); + + // 聚焦 + const onFocus = () => { + emit('focus'); + }; + + // 失焦 + const onBlur = () => { + emit('blur'); + }; + + return { + ns, + c, + currentVal, + handleChange, + inputRef, + onFocus, + onBlur, + }; + }, + render() { + let content = null; + if (this.readonly) { + // 只读显示 + content = `${this.currentVal}`; + } else { + // 编辑态显示 + content = [ + + {{ + suffix: () => { + return ( + + ); + }, + }} + , + ]; + } + + return ( +
+ {content} +
+ ); + }, +}); diff --git a/src/editor/color-picker/index.ts b/src/editor/color-picker/index.ts new file mode 100644 index 00000000..cc4f533e --- /dev/null +++ b/src/editor/color-picker/index.ts @@ -0,0 +1,3 @@ +export { IBizColorPicker } from './ibiz-color-picker/ibiz-color-picker'; +export * from './color-picker-editor.controller'; +export * from './color-picker-editor.provider'; diff --git a/src/editor/index.ts b/src/editor/index.ts index 1ba5371d..f5c79117 100644 --- a/src/editor/index.ts +++ b/src/editor/index.ts @@ -45,6 +45,7 @@ import { HtmlEditorProvider } from './html'; import { MarkDownEditorProvider } from './markdown'; import { IBizArray, ArrayEditorProvider } from './array'; import { IBizCascader, CascaderEditorProvider } from './cascader'; +import { IBizColorPicker, ColorPickerEditorProvider } from './color-picker'; export const IBizEditor = { install: (v: App): void => { @@ -81,6 +82,7 @@ export const IBizEditor = { v.component(IBizCode.name, IBizCode); v.component(IBizArray.name, IBizArray); v.component(IBizCascader.name, IBizCascader); + v.component(IBizColorPicker.name, IBizColorPicker); v.component( 'IBizHtml', defineAsyncComponent(() => import('./html/wang-editor/wang-editor')), @@ -264,6 +266,11 @@ export const IBizEditor = { registerEditorProvider('ARRAY', () => new ArrayEditorProvider()); // 数组编辑器 registerEditorProvider('CASCADER', () => new CascaderEditorProvider()); + // 颜色选择器 + registerEditorProvider( + 'COLORPICKER', + () => new ColorPickerEditorProvider(), + ); }, }; -- Gitee