From 715d64b093e7e1324f1724ea5d3a5ca565871f46 Mon Sep 17 00:00:00 2001 From: sakurayinfei <970412446@qq.com> Date: Mon, 8 Sep 2025 19:21:15 +0800 Subject: [PATCH 1/3] =?UTF-8?q?fix(doc):=20=E4=BF=AE=E5=A4=8D=E5=9C=A8?= =?UTF-8?q?=E5=B0=8F=E5=B1=8F=E8=AE=BE=E5=A4=87=E4=B8=ADanchor=E7=AB=96?= =?UTF-8?q?=E7=BA=BF=E6=B6=88=E5=A4=B1=E7=9A=84bug?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/docs/src/App.vue | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/docs/src/App.vue b/packages/docs/src/App.vue index a932b368..c1c19aef 100644 --- a/packages/docs/src/App.vue +++ b/packages/docs/src/App.vue @@ -142,6 +142,9 @@ watchEffect(() => { max-height: calc(100vh - var(--app-header-height) - var(--app-header-margin)); width: var(--app-anchor-width); z-index: 8; + .o-anchor-line { + flex-shrink: 0; + } @include respond-to('<=pad_v') { display: none; } -- Gitee From 948bccf5cf65ae2a8055510a9d8fbb75c65dda0c Mon Sep 17 00:00:00 2001 From: sakurayinfei <970412446@qq.com> Date: Tue, 9 Sep 2025 18:12:01 +0800 Subject: [PATCH 2/3] =?UTF-8?q?fix(doc):=20=E4=BF=AE=E5=A4=8DDemoUsage?= =?UTF-8?q?=E7=BB=84=E4=BB=B6number=E6=8E=A7=E4=BB=B6=E9=BB=98=E8=AE=A4?= =?UTF-8?q?=E5=80=BC=E6=9C=AA=E8=A2=AB=E9=92=B3=E5=88=B6=E7=9A=84bug?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/docs/src/components/DemoUsage.vue | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/docs/src/components/DemoUsage.vue b/packages/docs/src/components/DemoUsage.vue index 4d42d1ec..6551b189 100644 --- a/packages/docs/src/components/DemoUsage.vue +++ b/packages/docs/src/components/DemoUsage.vue @@ -20,6 +20,11 @@ const props = defineProps<{ ctx?: any; activeThemes?: ThemeKey[]; }>(); +const clampNumber = (num: number, boundary?: { min?: number; max?: number }) => { + const min = boundary?.min ?? -Infinity; + const max = boundary?.max ?? Infinity; + return Math.min(Math.max(Number.isFinite(num) ? num : 0, min), max); +}; /** * 通过表单控制数据，生成表单控件响应式变量的默认值 * @param schema 表单控件配置数据 @@ -44,7 +49,7 @@ function getInitialValues(schema: Record) { _state[key] = value.default ?? ''; break; case 'number': - _state[key] = value.default ?? 0; + _state[key] = clampNumber(value.default ?? 0, value); break; } }); -- Gitee From 5303d6b699b623435049aef7bd4ebfc2bb75fa83 Mon Sep 17 00:00:00 2001 From: sakurayinfei <970412446@qq.com> Date: Wed, 10 Sep 2025 17:19:04 +0800 Subject: [PATCH 3/3] =?UTF-8?q?fix(doc):=20=E6=9B=B4=E6=96=B0schema?= =?UTF-8?q?=E9=85=8D=E7=BD=AE=E9=A1=B9=E6=97=B6=E6=9B=B4=E6=96=B0=E6=A8=A1?= =?UTF-8?q?=E6=9D=BFprops=EF=BC=9Bschema=E6=94=AF=E6=8C=81disabled?= =?UTF-8?q?=E9=85=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/docs/src/components/DemoUsage.vue | 64 +++++++++++++++++--- packages/docs/src/components/OperatorView.ts | 28 ++++++--- packages/opendesign/src/_demo/types.ts | 6 ++ 3 files changed, 79 insertions(+), 19 deletions(-) diff --git a/packages/docs/src/components/DemoUsage.vue b/packages/docs/src/components/DemoUsage.vue index 6551b189..4a375615 100644 --- a/packages/docs/src/components/DemoUsage.vue +++ b/packages/docs/src/components/DemoUsage.vue @@ -4,7 +4,15 @@ import { LINENUMBER_TAG_ATTR, LINENUMBER_CSS_ATTR } from '../../plugins/markdown import CodeContainer from './CodeContainer.vue'; import { compileComponent, highlight, prettier } from '@/utils/code'; import DemoContainer, { type DemoComponent } from './DemoContainer.vue'; -import OperatorView, { type SchemeT } from './OperatorView'; +import OperatorView, { + type SchemeT, + type CheckboxScheme, + type SelectorScheme, + type InputNumberScheme, + type TextareaScheme, + type InputScheme, + type RadioScheme, +} from './OperatorView'; type ThemeKey = 'e' | 'a' | 'k' | 'd'; const props = defineProps<{ @@ -28,28 +36,57 @@ const clampNumber = (num: number, boundary?: { min?: number; max?: number }) => /** * 通过表单控制数据，生成表单控件响应式变量的默认值 * @param schema 表单控件配置数据 + * @param defaults 表单控件默认值 */ -function getInitialValues(schema: Record) { +function getInitialValues(schema: Record, defaults?: Record) { const _checkboxGroupValue: (string | number)[] = []; const _state: Record = {}; + const processBoolean = (key: string, scheme: CheckboxScheme) => { + let defaultValue = scheme.default ?? false; + if (defaults && Object.prototype.hasOwnProperty.call(defaults, key) && typeof defaults[key] === 'boolean') { + defaultValue = defaults[key]; + } + _state[key] = Boolean(defaultValue); + if (_state[key]) { + _checkboxGroupValue.push(key); + } + }; + const processSelector = (key: string, scheme: SelectorScheme | RadioScheme) => { + let defaultValue = scheme.default ?? scheme.list[0]; + if (defaults && Object.prototype.hasOwnProperty.call(defaults, key) && scheme.list.includes(defaults[key])) { + defaultValue = defaults[key]; + } + _state[key] = defaultValue; + }; + const processString = (key: string, scheme: InputScheme | TextareaScheme) => { + let defaultValue = scheme.default ?? ''; + if (defaults && Object.prototype.hasOwnProperty.call(defaults, key) && typeof defaults[key] === 'string') { + defaultValue = defaults[key]; + } + _state[key] = defaultValue; + }; + const processNumber = (key: string, scheme: InputNumberScheme) => { + let defaultValue = scheme.default ?? 0; + if (defaults && Object.prototype.hasOwnProperty.call(defaults, key) && Number.isFinite(defaults[key])) { + defaultValue = defaults[key]; + } + _state[key] = clampNumber(defaultValue, scheme); + }; Object.entries(schema).forEach(([key, value]) => { switch (value.type) { case 'boolean': - _state[key] = Boolean(value.default); - if (_state[key]) { - _checkboxGroupValue.push(key); - } + processBoolean(key, value); break; case 'radio': case 'list': - _state[key] = value.default ?? value.list[0]; + processSelector(key, value); break; case 'textarea': case 'string': - _state[key] = value.default ?? ''; + processString(key, value); break; case 'number': - _state[key] = clampNumber(value.default ?? 0, value); + processNumber(key, value); break; } }); @@ -70,6 +107,15 @@ watch(state, (newVal) => { }); checkboxGroupValue.value = newCheckboxGroupValue; }); +// 当props.schema 发生变化时，重新初始化 state 和 checkboxGroupValue +watch( + props.schema, + (newVal) => { + const newInitialValues = getInitialValues(newVal, state); + Object.assign(state, newInitialValues.state); + checkboxGroupValue.value = newInitialValues.checkboxGroupValue; + }, +); const highlightedCode = ref(''); const sourceCode = ref(''); diff --git a/packages/docs/src/components/OperatorView.ts b/packages/docs/src/components/OperatorView.ts index 8327474d..b5d4c4bf 100644 --- a/packages/docs/src/components/OperatorView.ts +++ b/packages/docs/src/components/OperatorView.ts @@ -1,54 +1,60 @@ import { defineComponent, h, Fragment, type PropType, type VNode } from 'vue'; import { OSelect, OOption, OInput, OInputNumber, OCheckbox, OCheckboxGroup, OTextarea, ORadio, ORadioGroup } from '@opensig/opendesign'; -type CheckboxScheme = { +export type CheckboxScheme = { type: 'boolean'; default?: boolean; label?: string; + disabled?: boolean; }; -type SelectorScheme = { +export type SelectorScheme = { type: 'list'; list: Array; default?: string | number; label?: string; + disabled?: boolean; }; -type InputScheme = { +export type InputScheme = { type: 'string'; default?: string; label?: string; + disabled?: boolean; }; -type TextareaScheme = { +export type TextareaScheme = { type: 'textarea'; default?: string; label?: string; row?: number; + disabled?: boolean; }; -type InputNumberScheme = { +export type InputNumberScheme = { type: 'number'; step?: number; min?: number; max?: number; default?: number; label?: string; + disabled?: boolean; }; -type RadioScheme = { +export type RadioScheme = { type: 'radio'; default?: string | number; list: Array; + disabled?: boolean; }; export type SchemeT = CheckboxScheme | SelectorScheme | InputScheme | TextareaScheme | InputNumberScheme | RadioScheme; export type State = Record; const camelcase2words = (str: string) => str.replace(/(?<=[a-z])([A-Z])|(?<=[A-Z])([A-Z][a-z])/g, ' $&').replace(/^[a-z]/, (char) => char.toUpperCase()); const createCheckboxItem = (key: string, value: CheckboxScheme) => { - return h(OCheckbox, { value: key }, { default: () => value.label || camelcase2words(key) }); + return h(OCheckbox, { value: key, disabled: value.disabled }, { default: () => value.label || camelcase2words(key) }); }; const createSelectorItem = (key: string, value: SelectorScheme, state: State) => { return h(Fragment, [ h('span', { class: 'props-playground-selector-name' }, value.label || camelcase2words(key)), h( OSelect, - { modelValue: state[key], 'onUpdate:modelValue': (val) => (state[key] = val) }, + { modelValue: state[key], disabled: value.disabled, 'onUpdate:modelValue': (val) => (state[key] = val) }, { default: () => value.list.map((item) => h(OOption, { value: item, label: `${item}` })), }, @@ -58,7 +64,7 @@ const createSelectorItem = (key: string, value: SelectorScheme, state: State) => const createInputItem = (key: string, value: InputScheme, state: State) => { return h(Fragment, [ h('span', { class: 'props-playground-selector-name' }, value.label || camelcase2words(key)), - h(OInput, { modelValue: state[key], 'onUpdate:modelValue': (val) => (state[key] = val) }), + h(OInput, { modelValue: state[key], disabled: value.disabled, 'onUpdate:modelValue': (val) => (state[key] = val) }), ]); }; const createTextareaItem = (key: string, value: TextareaScheme, state: State) => { @@ -66,6 +72,7 @@ const createTextareaItem = (key: string, value: TextareaScheme, state: State) => h('span', { class: 'props-playground-selector-name' }, value.label || camelcase2words(key)), h(OTextarea, { modelValue: state[key], + disabled: value.disabled, style: { '--row': value.row || 3 }, class: 'props-playground-textarea', 'onUpdate:modelValue': (val) => (state[key] = val), @@ -77,6 +84,7 @@ const createInputNumberItem = (key: string, value: InputNumberScheme, state: Sta h('span', { class: 'props-playground-selector-name' }, value.label || camelcase2words(key)), h(OInputNumber, { modelValue: state[key], + disabled: value.disabled, min: value.min, max: value.max, step: value.step, @@ -87,7 +95,7 @@ const createInputNumberItem = (key: string, value: InputNumberScheme, state: Sta const createRadioItem = (key: string, value: RadioScheme, state: State) => { return h( ORadioGroup, - { modelValue: state[key], class: 'radio-group', 'onUpdate:modelValue': (val) => (state[key] = val) }, + { modelValue: state[key], disabled: value.disabled, class: 'radio-group', 'onUpdate:modelValue': (val) => (state[key] = val) }, { default: () => value.list.map((item) => h(ORadio, { value: item }, { default: () => item })) }, ); }; diff --git a/packages/opendesign/src/_demo/types.ts b/packages/opendesign/src/_demo/types.ts index 4ab11dac..d647cb5a 100644 --- a/packages/opendesign/src/_demo/types.ts +++ b/packages/opendesign/src/_demo/types.ts @@ -3,23 +3,27 @@ export type DocDemoSchema = type: 'boolean'; default?: boolean; label?: string; + disabled?: boolean; } | { type: 'list'; list: Array | Readonly>; default?: string | number; label?: string; + disabled?: boolean; } | { type: 'string'; default?: string; label?: string; + disabled?: boolean; } | { type: 'textarea'; default?: string; label?: string; row?: number; + disabled?: boolean; } | { type: 'number'; @@ -28,11 +32,13 @@ export type DocDemoSchema = max?: number; default?: number; label?: string; + disabled?: boolean; } | { type: 'radio'; default?: string | number; list: Array; + disabled?: boolean; }; export type DocDemoState = T extends Record -- Gitee