From d61561394501d975b9e9e02bc3107d16379be768 Mon Sep 17 00:00:00 2001 From: Carrotzpc Date: Thu, 14 Mar 2024 16:53:04 +0800 Subject: [PATCH] feat(yunti-ui): add SliderInput --- .../lowcode/MonacoEditor/meta.ts | 2 +- .../lowcode/SliderInput/meta.ts | 162 ++++++++++++++++++ .../lowcode/SliderInput/snippets.ts | 36 ++++ .../lowcode/meta.ts | 3 +- .../yunti-ui-lowcode-materials/package.json | 2 +- pnpm-lock.yaml | 16 +- 6 files changed, 210 insertions(+), 11 deletions(-) create mode 100644 packages/yunti-ui-lowcode-materials/lowcode/SliderInput/meta.ts create mode 100644 packages/yunti-ui-lowcode-materials/lowcode/SliderInput/snippets.ts diff --git a/packages/yunti-ui-lowcode-materials/lowcode/MonacoEditor/meta.ts b/packages/yunti-ui-lowcode-materials/lowcode/MonacoEditor/meta.ts index 35e62cf..13230ea 100644 --- a/packages/yunti-ui-lowcode-materials/lowcode/MonacoEditor/meta.ts +++ b/packages/yunti-ui-lowcode-materials/lowcode/MonacoEditor/meta.ts @@ -184,7 +184,7 @@ export const MonacoEditorMeta: IPublicTypeComponentMetadata = { title: { label: 'options', }, - setter: Setters.VariableSetter, + setter: Setters.MixedSetter, }, ], }, diff --git a/packages/yunti-ui-lowcode-materials/lowcode/SliderInput/meta.ts b/packages/yunti-ui-lowcode-materials/lowcode/SliderInput/meta.ts new file mode 100644 index 0000000..88c3dfe --- /dev/null +++ b/packages/yunti-ui-lowcode-materials/lowcode/SliderInput/meta.ts @@ -0,0 +1,162 @@ +import { IPublicTypeComponentMetadata } from '@alilc/lowcode-types'; + +import { Setters } from '../../../shared/src/setters'; +import { COMMON_CONFIGURE_PROPS, getPriority } from '../utils'; +import { SliderInputSnippets } from './snippets'; + +export const SliderInputMeta: IPublicTypeComponentMetadata = { + title: 'SliderInput', + componentName: 'SliderInput', + category: '数据输入', + snippets: SliderInputSnippets, + priority: getPriority('SliderInput'), + devMode: 'proCode', + npm: { + package: '@yuntijs/ui-lowcode-materials', + version: '{{version}}', + exportName: 'SliderInput', + destructuring: true, + subName: '', + }, + configure: { + props: [ + ...COMMON_CONFIGURE_PROPS, + { + title: '常用配置', + display: 'block', + type: 'group', + items: [ + { + name: 'min', + title: { + label: '最小值', + }, + defaultValue: 0, + setter: Setters.NumberSetter, + }, + { + name: 'max', + title: { + label: '最大值', + }, + defaultValue: 100, + setter: Setters.NumberSetter, + }, + { + name: 'step', + title: { + label: '步长', + tip: '每次改变步数，可以为小数', + }, + defaultValue: 1, + setter: Setters.NumberSetter, + }, + { + name: 'addonAfter', + title: { + label: '后置标签', + tip: '带标签的 input，设置后置标签', + }, + setter: Setters.StringSetter, + }, + { + name: 'addonBefore', + title: { + label: '前置标签', + tip: '带标签的 input，设置前置标签', + }, + setter: Setters.StringSetter, + }, + { + name: 'placeholder', + title: { + label: '占位符', + }, + setter: Setters.StringSetter, + }, + { + name: 'defaultValue', + title: { + label: '默认值', + }, + setter: Setters.NumberSetter, + }, + { + name: 'value', + title: { + label: 'value 值', + }, + setter: Setters.NumberSetter, + }, + ], + }, + { + title: '高级配置', + display: 'block', + type: 'group', + items: [ + { + name: 'gutter', + title: { + label: '栅格间隔', + tip: '栅格间隔，可以写成像素值或支持响应式的对象写法来设置水平间隔 { xs: 8, sm: 16, md: 24}。或者使用数组形式同时设置 [水平间距, 垂直间距]', + }, + setter: Setters.NumberSetter, + }, + { + name: 'sliderCol', + title: { + label: '滑动条布局', + tip: 'label 标签布局，同 组件，设置 span offset 值，如 {span: 3, offset: 12} 或 sm: {span: 3, offset: 12}', + docUrl: 'https://ant.design/components/grid#row', + }, + setter: Setters.MixedSetter, + }, + { + name: 'inputCol', + title: { + label: '输入框布局', + tip: '需要为输入框设置布局样式时，使用该属性，用法同 sliderCol', + docUrl: 'https://ant.design/components/grid#row', + }, + setter: Setters.MixedSetter, + }, + { + name: 'sliderProps', + title: { + label: '滑动条属性', + tip: '这里可以指定滑动条的所有属性', + docUrl: 'https://ant.design/components/slider#api', + }, + setter: Setters.MixedSetter, + }, + { + name: 'inputProps', + title: { + label: '输入框属性', + tip: '这里可以指定输入框的所有属性', + docUrl: 'https://ant.design/components/input-number#api', + }, + setter: Setters.MixedSetter, + }, + ], + }, + ], + supports: { + loop: true, + condition: true, + style: true, + events: [ + { + name: 'onChange', + description: '输入时触发', + template: ` + onChange(input, event) { + console.log(input, event); + } +`, + }, + ], + }, + }, +}; diff --git a/packages/yunti-ui-lowcode-materials/lowcode/SliderInput/snippets.ts b/packages/yunti-ui-lowcode-materials/lowcode/SliderInput/snippets.ts new file mode 100644 index 0000000..c53d43f --- /dev/null +++ b/packages/yunti-ui-lowcode-materials/lowcode/SliderInput/snippets.ts @@ -0,0 +1,36 @@ +import { IPublicTypeSnippet } from '@alilc/lowcode-types'; + +export const SliderInputSnippets: IPublicTypeSnippet[] = [ + { + title: 'SliderInput', + screenshot: '', + schema: { + componentName: 'SliderInput', + props: { + __component_name: 'SliderInput', + addonAfter: '核', + min: 1, + max: 16, + gutter: 16, + placeholder: 'CPU', + step: 1, + sliderCol: { + type: 'JSExpression', + value: '{ span: 12 }', + }, + inputCol: { + type: 'JSExpression', + value: '{ span: 5 }', + }, + sliderProps: { + type: 'JSExpression', + value: '{}', + }, + inputProps: { + type: 'JSExpression', + value: '{}', + }, + }, + }, + }, +]; diff --git a/packages/yunti-ui-lowcode-materials/lowcode/meta.ts b/packages/yunti-ui-lowcode-materials/lowcode/meta.ts index 596360a..7536349 100644 --- a/packages/yunti-ui-lowcode-materials/lowcode/meta.ts +++ b/packages/yunti-ui-lowcode-materials/lowcode/meta.ts @@ -1,8 +1,9 @@ import pkgJson from '../package.json'; import { MonacoDiffEditorMeta, MonacoEditorMeta } from './MonacoEditor/meta'; +import { SliderInputMeta } from './SliderInput/meta'; import { TreeMeta } from './Tree/meta'; -const components = [TreeMeta, MonacoEditorMeta, MonacoDiffEditorMeta].map(c => { +const components = [TreeMeta, MonacoEditorMeta, MonacoDiffEditorMeta, SliderInputMeta].map(c => { if (c.npm) { c.npm.version = pkgJson.version; } diff --git a/packages/yunti-ui-lowcode-materials/package.json b/packages/yunti-ui-lowcode-materials/package.json index d7f4c66..8205595 100644 --- a/packages/yunti-ui-lowcode-materials/package.json +++ b/packages/yunti-ui-lowcode-materials/package.json @@ -23,7 +23,7 @@ "dependencies": { "@alilc/lowcode-types": "^1.2.1", "@babel/runtime": "^7.0.0", - "@yuntijs/ui": "1.0.0-beta.7" + "@yuntijs/ui": "1.0.0-beta.8" }, "peerDependencies": { "lodash": "^4.17.21", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ba0b0a9..3f2131d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -186,8 +186,8 @@ importers: specifier: ^7.0.0 version: 7.23.2 '@yuntijs/ui': - specifier: 1.0.0-beta.7 - version: 1.0.0-beta.7(@types/react-dom@17.0.22)(@types/react@17.0.69)(antd-style@3.6.1)(antd@5.12.6)(monaco-editor@0.44.0)(react-dom@17.0.2)(react@17.0.2) + specifier: 1.0.0-beta.8 + version: 1.0.0-beta.8(@types/react-dom@17.0.22)(@types/react@17.0.69)(antd-style@3.6.1)(antd@5.12.6)(monaco-editor@0.44.0)(react-dom@17.0.2)(react@17.0.2) lodash: specifier: ^4.17.21 version: 4.17.21 @@ -4026,7 +4026,7 @@ packages: immer: 10.0.3 leva: 0.9.35(@types/react-dom@17.0.22)(@types/react@17.0.69)(react-dom@17.0.2)(react@17.0.2) lodash-es: 4.17.21 - lucide-react: 0.349.0(react@17.0.2) + lucide-react: 0.357.0(react@17.0.2) polished: 4.2.2 prism-react-renderer: 2.3.1(react@17.0.2) query-string: 8.1.0 @@ -7506,8 +7506,8 @@ packages: - typescript dev: true - /@yuntijs/ui@1.0.0-beta.7(@types/react-dom@17.0.22)(@types/react@17.0.69)(antd-style@3.6.1)(antd@5.12.6)(monaco-editor@0.44.0)(react-dom@17.0.2)(react@17.0.2): - resolution: {integrity: sha512-w2PJd4Wpy/OLvrHyOImKESbxMAnFBsj5271vWm0SFTznU1NKd3BMDDMMCxovyrr3ucvfmDP35s6EyfdZa5tw+g==} + /@yuntijs/ui@1.0.0-beta.8(@types/react-dom@17.0.22)(@types/react@17.0.69)(antd-style@3.6.1)(antd@5.12.6)(monaco-editor@0.44.0)(react-dom@17.0.2)(react@17.0.2): + resolution: {integrity: sha512-TrbYkOG4i0KWp+4PjZFBni91iAJJZ+RO9ldtHTHnOTBrDPapzHWG1Cw4YlSHPWIu/1CIub3DcEvZJCvwVDcH+Q==} peerDependencies: antd: '>=5' antd-style: '>=3' @@ -7522,7 +7522,7 @@ packages: antd-style: 3.6.1(@types/react@17.0.69)(antd@5.12.6)(react-dom@17.0.2)(react@17.0.2) leva: 0.9.35(@types/react-dom@17.0.22)(@types/react@17.0.69)(react-dom@17.0.2)(react@17.0.2) lodash-es: 4.17.21 - lucide-react: 0.349.0(react@17.0.2) + lucide-react: 0.357.0(react@17.0.2) query-string: 8.1.0 react: 17.0.2 react-dom: 17.0.2(react@17.0.2) @@ -15080,8 +15080,8 @@ packages: engines: {node: '>=12'} dev: true - /lucide-react@0.349.0(react@17.0.2): - resolution: {integrity: sha512-Sa+5bRi0RYcyOUU2ifTtNXNiHs87JvdE78DbSfcqWk7JmGsomnFnvzmAhyPjfaCZf3HJMAqHCJOMXGRbB89Q1g==} + /lucide-react@0.357.0(react@17.0.2): + resolution: {integrity: sha512-ILK6Ye6BMFyXyIHqG8FwMit1XKrj4KocLLLW4fDAAwsFjt6gSL9U6e3sZlbARIOqv0oP5XzLVacHEcb2SxuWkw==} peerDependencies: react: ^16.5.1 || ^17.0.0 || ^18.0.0 dependencies: