From d9c71a541598366e0e96da9854c8a6cbda2c2127 Mon Sep 17 00:00:00 2001 From: cy <15990550+langchaocy@user.noreply.gitee.com> Date: Fri, 4 Jul 2025 11:11:43 +0800 Subject: [PATCH 01/23] =?UTF-8?q?fix:=20=E8=A7=A3=E5=86=B3=E4=BA=86?= =?UTF-8?q?=E5=9C=A8=E7=A7=BB=E5=8A=A8=E8=AE=BE=E8=AE=A1=E5=99=A8=E4=B8=AD?= =?UTF-8?q?=E6=97=A0=E6=B3=95=E5=BC=95=E5=85=A5=E5=9B=BE=E8=A1=A8=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/designer/farris.config.mjs | 5 ++++- packages/designer/package.json | 1 + .../designer-context/use-mobile-designer-context.ts | 4 ++-- packages/designer/vite.config.dev.ts | 2 ++ 4 files changed, 9 insertions(+), 3 deletions(-) diff --git a/packages/designer/farris.config.mjs b/packages/designer/farris.config.mjs index 0a6a9141f95..bc9e0ff32b6 100644 --- a/packages/designer/farris.config.mjs +++ b/packages/designer/farris.config.mjs @@ -13,6 +13,8 @@ const replaceUIVueComponentsPath = function () { if (chunk.type === 'chunk') { chunk.code = chunk.code.replace(/@farris\/ui-vue\/components/g, '@farris/ui-vue'); chunk.code = chunk.code.replace(/@farris\/mobile-ui-vue\/components/g, '@farris/mobile-ui-vue'); + chunk.code = chunk.code.replace(/@farris\/mobile-ui-vue\/components/g, '@farris/charts-vue'); + } } } @@ -24,7 +26,7 @@ export default { // outDir: fileURLToPath(new URL('./dist', import.meta.url)), // 外部依赖排除项 默认值 { include: [], exclude: [] } externals: { - include: ['jsonp', 'echarts', 'lodash-es', 'lodash', 'axios', '@farris/ui-vue', '@farris/mobile-ui-vue', 'vue','rxjs','rxjs/operators'], + include: ['jsonp', 'echarts', 'lodash-es', 'lodash', 'axios', '@farris/ui-vue', '@farris/mobile-ui-vue', '@farris/charts-vue', 'vue','rxjs','rxjs/operators'], filter: (externals) => { return (id) => { return externals.find((item) => { @@ -40,6 +42,7 @@ export default { { find: '@', replacement: fileURLToPath(new URL('./src', import.meta.url)) }, { find: '@farris/ui-vue/components', replacement: fileURLToPath(new URL('../ui-vue/components', import.meta.url)) }, { find: '@farris/mobile-ui-vue', replacement: fileURLToPath(new URL('../mobile-ui-vue/components', import.meta.url)) }, + { find: '@farris/charts-vue', replacement: fileURLToPath(new URL('../mobile-ui-vue/components', import.meta.url)) }, { find: '@farris/code-editor-vue/components', replacement: fileURLToPath(new URL('../code-editor/components', import.meta.url)) } ], // 插件 默认值 [vue(), vueJsx()] 不要重复添加 diff --git a/packages/designer/package.json b/packages/designer/package.json index 55b1cc00c24..2590165301f 100644 --- a/packages/designer/package.json +++ b/packages/designer/package.json @@ -12,6 +12,7 @@ "dependencies": { "@farris/ui-vue": "workspace:^", "@farris/mobile-ui-vue": "workspace:^", + "@farris/charts-vue": "workspace:^", "@farris/code-editor-vue":"workspace:^", "@monaco-editor/loader": "^1.4.0", "monaco-editor": "^0.52.2", diff --git a/packages/designer/src/components/composition/designer-context/use-mobile-designer-context.ts b/packages/designer/src/components/composition/designer-context/use-mobile-designer-context.ts index ca3121935cc..8a5a178789f 100644 --- a/packages/designer/src/components/composition/designer-context/use-mobile-designer-context.ts +++ b/packages/designer/src/components/composition/designer-context/use-mobile-designer-context.ts @@ -10,7 +10,7 @@ import { import { useMobileControlCreator } from "../control-creator/use-mobile-control-creator"; import { PageComponent, UsePageSchema } from "../../../components/types"; import ControllCategories from '../schema-repository/controller/mobile-categories'; - +import { FChartsRadar } from '@farris/charts-vue/components'; export function useMobileDesignerContext(): UseDesignerContext { /** 设计器模式 */ @@ -25,7 +25,7 @@ export function useMobileDesignerContext(): UseDesignerContext { ContentContainer, Card, FloatContainer, Textarea, DatePicker, DateTimePicker, Lookup, Navbar, ListView, Picker, NumberInput, Switch, CheckboxGroup, RadioGroup, Form, FormItem, InputGroup, - Button, ButtonGroup, + Button, ButtonGroup,FChartsRadar ]; registerDesignerComponents(componentsToRegister); diff --git a/packages/designer/vite.config.dev.ts b/packages/designer/vite.config.dev.ts index d6be077ad10..bbf9e0f98fb 100644 --- a/packages/designer/vite.config.dev.ts +++ b/packages/designer/vite.config.dev.ts @@ -20,6 +20,8 @@ export default defineConfig({ '@farris/ui-vue': resolve(__dirname, '../ui-vue'), '@farris/code-editor-vue': resolve(__dirname, '../code-editor'), '@farris/mobile-ui-vue': resolve(__dirname, '../mobile-ui-vue/components'), + '@farris/charts-vue': resolve(__dirname, '../charts-vue'), + } } }); -- Gitee From a631fb7675706504cf8e95a3741f63ea4810f0e3 Mon Sep 17 00:00:00 2001 From: cy <15990550+langchaocy@user.noreply.gitee.com> Date: Fri, 4 Jul 2025 16:38:53 +0800 Subject: [PATCH 02/23] =?UTF-8?q?fix:=20=E5=9C=A8charts-vue=E4=B8=AD?= =?UTF-8?q?=E6=96=B0=E5=A2=9Ecomment=E4=BB=A5=E5=8F=8Adynamic-resolver?= =?UTF-8?q?=E4=BD=BF=E5=85=B6=E4=B8=AD=E7=9A=84=E7=BB=84=E4=BB=B6=E5=8F=AF?= =?UTF-8?q?=E4=BB=A5=E6=B3=A8=E5=86=8C=E5=85=A5=E8=AE=BE=E8=AE=A1=E5=99=A8?= =?UTF-8?q?=EF=BC=8C=E5=B9=B6=E5=B0=9D=E8=AF=95=E5=B0=86=E6=9F=B1=E7=8A=B6?= =?UTF-8?q?=E5=9B=BE=E6=B3=A8=E5=86=8C=E5=85=A5=E4=BA=86=E8=AE=BE=E8=AE=A1?= =?UTF-8?q?=E5=99=A8=EF=BC=8C=E4=BD=86=E6=9F=B1=E7=8A=B6=E5=9B=BE=E5=B1=9E?= =?UTF-8?q?=E6=80=A7=E5=B9=B6=E6=9C=AA=E5=AE=8C=E6=88=90=E9=85=8D=E7=BD=AE?= =?UTF-8?q?=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../charts-vue/components/charts-bar/index.ts | 15 +- .../charts-bar/src/charts-bar.component.tsx | 9 +- .../charts-bar/src/charts-bar.props.ts | 31 +- .../designer/charts-bar.design.component.tsx | 41 ++ .../src/designer/use-designer-rules.ts | 57 ++ .../charts-bar.property-config.ts | 39 ++ .../src/schema/charts-bar.schema.json | 2 +- .../charts-bar/src/schema/schema-mapper.ts | 17 + .../charts-bar/src/schema/schema-resolver.ts | 5 + .../components/charts-common/index.ts | 7 +- .../compositions/use-designer-component.ts | 229 +++++++ .../charts-common/src/props/base-property.ts | 400 +++++++++++++ .../src/props/container-base-property.ts | 382 ++++++++++++ .../charts-common/src/props/dg-control.ts | 54 ++ .../src/props/expression-property.ts | 385 ++++++++++++ .../charts-common/src/props/index.ts | 6 + .../src/props/input-base-property.ts | 563 ++++++++++++++++++ .../src/props/schema-dom-mapping.ts | 81 +++ .../src/props/toolbar-item.property.ts | 182 ++++++ .../src/props/use-property-editor.ts | 73 +++ .../src/types/designer-component.ts | 107 ++++ .../charts-common/src/types/designer-rule.ts | 150 +++++ .../charts-common/src/types/entity-schema.ts | 274 +++++++++ .../charts-common/src/types/index.ts | 5 + .../src/types/property-config.ts | 266 +++++++++ .../charts-common/src/types/types.ts | 139 +++++ .../charts-common/src/utils/index.ts | 15 + .../charts-common/src/utils/src/common.ts | 99 +++ .../charts-common/src/utils/src/date.ts | 134 +++++ .../charts-common/src/utils/src/dom/event.ts | 14 + .../charts-common/src/utils/src/hook.ts | 18 + .../charts-common/src/utils/src/number.ts | 26 + .../src/utils/src/query-filter.ts | 40 ++ .../src/utils/src/resove-asset.ts | 33 + .../charts-common/src/utils/src/string.ts | 18 + .../charts-common/src/utils/src/throttle.ts | 41 ++ .../charts-common/src/utils/src/transition.ts | 14 + .../charts-common/src/utils/src/type.ts | 105 ++++ .../src/utils/src/use-appearance.ts | 33 + .../src/utils/src/with-install.ts | 16 + .../src/utils/src/with-register-designer.ts | 22 + .../src/utils/src/with-register.ts | 23 + .../components/dynamic-resolver/index.ts | 21 + .../dynamic-resolver/src/binding-resolver.ts | 68 +++ .../src/common/appearance-resolver.ts | 3 + .../src/common/data-resolver.ts | 52 ++ .../src/common/margin-resolver.ts | 6 + .../src/common/padding-resolver.ts | 6 + .../src/common/position-resolver.ts | 6 + .../src/common/size-resolver.ts | 6 + .../src/common/toolbar-resolver.ts | 36 ++ .../dynamic-resolver/src/common/utils.ts | 59 ++ .../src/converter/appearance.converter.ts | 1 + .../src/converter/buttons.converter.ts | 8 + .../src/converter/cascade.converter.ts | 27 + .../src/converter/change-editor.converter.ts | 15 + .../src/converter/enum-data.converter.ts | 11 + .../src/converter/field-selector.converter.ts | 24 + .../converter/form-group-label.converter.ts | 10 + .../src/converter/grid-selection.converter.ts | 13 + .../dynamic-resolver/src/converter/index.ts | 1 + .../src/converter/items-count.converter.ts | 8 + .../src/converter/pagination.converter.ts | 16 + .../converter/property-editor.converter.ts | 14 + .../src/converter/right-toolbar.converter.ts | 14 + .../src/converter/row-number.converter.ts | 13 + .../dynamic-resolver/src/editor-resolver.ts | 10 + .../src/event-handler-resolver.ts | 90 +++ .../dynamic-resolver/src/events-resolver.ts | 20 + .../dynamic-resolver/src/object-expression.ts | 169 ++++++ .../src/property-config-resolver.ts | 247 ++++++++ .../dynamic-resolver/src/props-resolver.ts | 52 ++ .../property-config-resolver-design.ts | 13 + .../property-config-resolver.ts | 10 + .../use-property-config-resolver.ts | 247 ++++++++ .../resolver/schema/schema-resolver-design.ts | 14 + .../src/resolver/schema/schema-resolver.ts | 10 + .../resolver/schema/use-schema-resolver.ts | 138 +++++ .../src/selection-item-resolver.ts | 19 + .../components/dynamic-resolver/src/types.ts | 83 +++ .../src/update-columns-resolver.ts | 11 + .../src/visible-prop-resolver.ts | 8 + .../public/designer-canvas/empty1.json | 269 +-------- .../use-mobile-designer-context.ts | 5 +- .../types/toolbox/mobile-toolbox.json | 20 + .../mobile-ui-vue/components/button/index.ts | 1 - 86 files changed, 5759 insertions(+), 285 deletions(-) create mode 100644 packages/charts-vue/components/charts-bar/src/designer/charts-bar.design.component.tsx create mode 100644 packages/charts-vue/components/charts-bar/src/designer/use-designer-rules.ts create mode 100644 packages/charts-vue/components/charts-bar/src/property-config/charts-bar.property-config.ts create mode 100644 packages/charts-vue/components/charts-bar/src/schema/schema-mapper.ts create mode 100644 packages/charts-vue/components/charts-bar/src/schema/schema-resolver.ts create mode 100644 packages/charts-vue/components/charts-common/src/compositions/use-designer-component.ts create mode 100644 packages/charts-vue/components/charts-common/src/props/base-property.ts create mode 100644 packages/charts-vue/components/charts-common/src/props/container-base-property.ts create mode 100644 packages/charts-vue/components/charts-common/src/props/dg-control.ts create mode 100644 packages/charts-vue/components/charts-common/src/props/expression-property.ts create mode 100644 packages/charts-vue/components/charts-common/src/props/index.ts create mode 100644 packages/charts-vue/components/charts-common/src/props/input-base-property.ts create mode 100644 packages/charts-vue/components/charts-common/src/props/schema-dom-mapping.ts create mode 100644 packages/charts-vue/components/charts-common/src/props/toolbar-item.property.ts create mode 100644 packages/charts-vue/components/charts-common/src/props/use-property-editor.ts create mode 100644 packages/charts-vue/components/charts-common/src/types/designer-component.ts create mode 100644 packages/charts-vue/components/charts-common/src/types/designer-rule.ts create mode 100644 packages/charts-vue/components/charts-common/src/types/entity-schema.ts create mode 100644 packages/charts-vue/components/charts-common/src/types/index.ts create mode 100644 packages/charts-vue/components/charts-common/src/types/property-config.ts create mode 100644 packages/charts-vue/components/charts-common/src/types/types.ts create mode 100644 packages/charts-vue/components/charts-common/src/utils/index.ts create mode 100644 packages/charts-vue/components/charts-common/src/utils/src/common.ts create mode 100644 packages/charts-vue/components/charts-common/src/utils/src/date.ts create mode 100644 packages/charts-vue/components/charts-common/src/utils/src/dom/event.ts create mode 100644 packages/charts-vue/components/charts-common/src/utils/src/hook.ts create mode 100644 packages/charts-vue/components/charts-common/src/utils/src/number.ts create mode 100644 packages/charts-vue/components/charts-common/src/utils/src/query-filter.ts create mode 100644 packages/charts-vue/components/charts-common/src/utils/src/resove-asset.ts create mode 100644 packages/charts-vue/components/charts-common/src/utils/src/string.ts create mode 100644 packages/charts-vue/components/charts-common/src/utils/src/throttle.ts create mode 100644 packages/charts-vue/components/charts-common/src/utils/src/transition.ts create mode 100644 packages/charts-vue/components/charts-common/src/utils/src/type.ts create mode 100644 packages/charts-vue/components/charts-common/src/utils/src/use-appearance.ts create mode 100644 packages/charts-vue/components/charts-common/src/utils/src/with-install.ts create mode 100644 packages/charts-vue/components/charts-common/src/utils/src/with-register-designer.ts create mode 100644 packages/charts-vue/components/charts-common/src/utils/src/with-register.ts create mode 100644 packages/charts-vue/components/dynamic-resolver/index.ts create mode 100644 packages/charts-vue/components/dynamic-resolver/src/binding-resolver.ts create mode 100644 packages/charts-vue/components/dynamic-resolver/src/common/appearance-resolver.ts create mode 100644 packages/charts-vue/components/dynamic-resolver/src/common/data-resolver.ts create mode 100644 packages/charts-vue/components/dynamic-resolver/src/common/margin-resolver.ts create mode 100644 packages/charts-vue/components/dynamic-resolver/src/common/padding-resolver.ts create mode 100644 packages/charts-vue/components/dynamic-resolver/src/common/position-resolver.ts create mode 100644 packages/charts-vue/components/dynamic-resolver/src/common/size-resolver.ts create mode 100644 packages/charts-vue/components/dynamic-resolver/src/common/toolbar-resolver.ts create mode 100644 packages/charts-vue/components/dynamic-resolver/src/common/utils.ts create mode 100644 packages/charts-vue/components/dynamic-resolver/src/converter/appearance.converter.ts create mode 100644 packages/charts-vue/components/dynamic-resolver/src/converter/buttons.converter.ts create mode 100644 packages/charts-vue/components/dynamic-resolver/src/converter/cascade.converter.ts create mode 100644 packages/charts-vue/components/dynamic-resolver/src/converter/change-editor.converter.ts create mode 100644 packages/charts-vue/components/dynamic-resolver/src/converter/enum-data.converter.ts create mode 100644 packages/charts-vue/components/dynamic-resolver/src/converter/field-selector.converter.ts create mode 100644 packages/charts-vue/components/dynamic-resolver/src/converter/form-group-label.converter.ts create mode 100644 packages/charts-vue/components/dynamic-resolver/src/converter/grid-selection.converter.ts create mode 100644 packages/charts-vue/components/dynamic-resolver/src/converter/index.ts create mode 100644 packages/charts-vue/components/dynamic-resolver/src/converter/items-count.converter.ts create mode 100644 packages/charts-vue/components/dynamic-resolver/src/converter/pagination.converter.ts create mode 100644 packages/charts-vue/components/dynamic-resolver/src/converter/property-editor.converter.ts create mode 100644 packages/charts-vue/components/dynamic-resolver/src/converter/right-toolbar.converter.ts create mode 100644 packages/charts-vue/components/dynamic-resolver/src/converter/row-number.converter.ts create mode 100644 packages/charts-vue/components/dynamic-resolver/src/editor-resolver.ts create mode 100644 packages/charts-vue/components/dynamic-resolver/src/event-handler-resolver.ts create mode 100644 packages/charts-vue/components/dynamic-resolver/src/events-resolver.ts create mode 100644 packages/charts-vue/components/dynamic-resolver/src/object-expression.ts create mode 100644 packages/charts-vue/components/dynamic-resolver/src/property-config-resolver.ts create mode 100644 packages/charts-vue/components/dynamic-resolver/src/props-resolver.ts create mode 100644 packages/charts-vue/components/dynamic-resolver/src/resolver/property-config/property-config-resolver-design.ts create mode 100644 packages/charts-vue/components/dynamic-resolver/src/resolver/property-config/property-config-resolver.ts create mode 100644 packages/charts-vue/components/dynamic-resolver/src/resolver/property-config/use-property-config-resolver.ts create mode 100644 packages/charts-vue/components/dynamic-resolver/src/resolver/schema/schema-resolver-design.ts create mode 100644 packages/charts-vue/components/dynamic-resolver/src/resolver/schema/schema-resolver.ts create mode 100644 packages/charts-vue/components/dynamic-resolver/src/resolver/schema/use-schema-resolver.ts create mode 100644 packages/charts-vue/components/dynamic-resolver/src/selection-item-resolver.ts create mode 100644 packages/charts-vue/components/dynamic-resolver/src/types.ts create mode 100644 packages/charts-vue/components/dynamic-resolver/src/update-columns-resolver.ts create mode 100644 packages/charts-vue/components/dynamic-resolver/src/visible-prop-resolver.ts diff --git a/packages/charts-vue/components/charts-bar/index.ts b/packages/charts-vue/components/charts-bar/index.ts index a489598686f..84327bb5076 100644 --- a/packages/charts-vue/components/charts-bar/index.ts +++ b/packages/charts-vue/components/charts-bar/index.ts @@ -1,13 +1,20 @@ -import FChartsBar from './src/charts-bar.component'; -// import { propsResolver } from './src/charts-bar.props'; -import { withInstall } from '@farris/charts-vue/components/charts-common'; +import FChartsBarInstallless from './src/charts-bar.component'; +import { propsResolverGenerator } from './src/charts-bar.props'; +import { withInstall, withRegister, withRegisterDesigner } from '@farris/charts-vue/components/charts-common'; +import ChartsBarDesign from './src/designer/charts-bar.design.component'; export * from './src/charts-bar.props'; +const CHARTS_BAR_REGISTERED_NAME = 'charts-bar'; // FChartsBar.register = (componentMap: Record, propsResolverMap: Record, configResolverMap: Record, resolverMap: Record) => { // componentMap['charts-bar'] = FChartsBar; // propsResolverMap['charts-bar'] = propsResolver; // }; +const FChartsBar = withInstall(FChartsBarInstallless) + +withRegister(FChartsBar, {name: CHARTS_BAR_REGISTERED_NAME, propsResolverGenerator}) +withRegisterDesigner(FChartsBar, { name: CHARTS_BAR_REGISTERED_NAME, propsResolverGenerator, designerComponent: ChartsBarDesign }); + export { FChartsBar }; -export default withInstall(FChartsBar); +export default FChartsBar diff --git a/packages/charts-vue/components/charts-bar/src/charts-bar.component.tsx b/packages/charts-vue/components/charts-bar/src/charts-bar.component.tsx index c67badb15a8..c3ea0758e3f 100644 --- a/packages/charts-vue/components/charts-bar/src/charts-bar.component.tsx +++ b/packages/charts-vue/components/charts-bar/src/charts-bar.component.tsx @@ -60,11 +60,13 @@ export default defineComponent({ } const theme = getTheme(); - chartInstance = echarts.init(chartRef.value, theme, {}); + updateChart(); - + console.log("aaaaa") + console.log(props) + console.log(chartInstance) const { onClick, onDbClick, onMousedown, onMousemove, onMouseup, onMouseover, onMouseout, onGlobalout, onContextmenu } = useMouseEvent(chartInstance, context); onClick(), onDbClick(), onMousedown(), onMousemove(), onMouseup(), onMouseover(), onMouseout(), onGlobalout(), onContextmenu(); @@ -117,6 +119,7 @@ export default defineComponent({ }); return () => ( + <>
+ + ); } }); diff --git a/packages/charts-vue/components/charts-bar/src/charts-bar.props.ts b/packages/charts-vue/components/charts-bar/src/charts-bar.props.ts index bb0ff26eab2..76b312775b3 100644 --- a/packages/charts-vue/components/charts-bar/src/charts-bar.props.ts +++ b/packages/charts-vue/components/charts-bar/src/charts-bar.props.ts @@ -5,6 +5,10 @@ import { SelectProps, TooltipProps, SelectedModeType, SamplingType, TextStyleProps, LegendProps, TitleProps, GridProps, DataZoomProps, EmphasisProps } from '@farris/charts-vue/components/charts-common'; +import { getPropsResolverGenerator } from '@farris/charts-vue/components/dynamic-resolver'; +import chartsBarSchema from './schema/charts-bar.schema.json'; +import { schemaMapper } from './schema/schema-mapper'; +import { schemaResolver } from './schema/schema-resolver'; export const barSeriesProps = { @@ -112,14 +116,14 @@ export type BarSeriesProps = ExtractPropTypes; // Bar组件的属性 export const chartsBarProps = { - // /** - // * 组件标识 - // */ - // id: { type: String as PropType, default: 'charts-bar', required: true }, - // /** - // * 组件类型，默认是 'bar' - // */ - // type: { type: String as PropType, default: 'bar', required: true }, + /** + * 组件标识 + */ + id: { type: String as PropType, default: 'charts-bar', required: true }, + /** + * 组件类型，默认是 'bar' + */ + type: { type: String as PropType, default: 'bar', required: true }, title: { type: Object as PropType }, @@ -137,9 +141,9 @@ export const chartsBarProps = { backgroundColor: { type: String }, - width: { type: [String, Number] }, + width: { type: [String, Number]}, - height: { type: [String, Number] }, + height: { type: [String, Number]}, textStyle: { type: Object as PropType }, @@ -158,3 +162,10 @@ export const chartsBarProps = { } as Record; export type ChartsBarProps = ExtractPropTypes; + +export const propsResolverGenerator = getPropsResolverGenerator( + chartsBarProps, + chartsBarSchema, + schemaMapper, + schemaResolver +); \ No newline at end of file diff --git a/packages/charts-vue/components/charts-bar/src/designer/charts-bar.design.component.tsx b/packages/charts-vue/components/charts-bar/src/designer/charts-bar.design.component.tsx new file mode 100644 index 00000000000..79d862ef05c --- /dev/null +++ b/packages/charts-vue/components/charts-bar/src/designer/charts-bar.design.component.tsx @@ -0,0 +1,41 @@ +import { computed, defineComponent, inject, onMounted, ref, SetupContext } from 'vue'; +import { DesignerHostService, DesignerItemContext } from '@farris/charts-vue/components/charts-common/src/types'; +import { useDesignerComponent } from '@farris/charts-vue/components/charts-common/src/compositions/use-designer-component'; + +import { ChartsBarProps, chartsBarProps } from '../charts-bar.props'; +import FChartsBar from '../charts-bar.component'; +import { useDesignerRules } from './use-designer-rules'; + +export default defineComponent({ + name: 'FmChartsBarDesign', + props: chartsBarProps, + emits: ['click'], + setup(props: ChartsBarProps, context: SetupContext) { + const elementRef = ref(); + const designerHostService = inject('designer-host-service'); + const designItemContext = inject('design-item-context') as DesignerItemContext; + const designerRulesComposition = useDesignerRules(designItemContext, designerHostService); + const componentInstance = useDesignerComponent(elementRef, designItemContext, designerRulesComposition); + + onMounted(() => { + elementRef.value.componentInstance = componentInstance; + console.log('FmChartsBarDesign') + }); + + context.expose(componentInstance.value); + + const chartsBarProps = computed(() => ({ + title: props.title + })); + + return () => { + return ( + <> +
nnnnn
+ + + + ); + }; + } +}); diff --git a/packages/charts-vue/components/charts-bar/src/designer/use-designer-rules.ts b/packages/charts-vue/components/charts-bar/src/designer/use-designer-rules.ts new file mode 100644 index 00000000000..c967e21117e --- /dev/null +++ b/packages/charts-vue/components/charts-bar/src/designer/use-designer-rules.ts @@ -0,0 +1,57 @@ +import { ref } from "vue"; +import { DraggingResolveContext } from "@farris/charts-vue/components/charts-common/src/types"; +import { DesignerHostService, DesignerItemContext, UseDesignerRules } from "@farris/charts-vue/components/charts-common/src/types"; +import { ChartsBarProperty } from "../property-config/charts-bar.property-config"; + +export function useDesignerRules(designItemContext: DesignerItemContext, designerHostService?: DesignerHostService): UseDesignerRules { + + const triggerBelongedComponentToMoveWhenMoved = ref(false); + + const triggerBelongedComponentToDeleteWhenDeleted = ref(false); + + function canAccepts(draggingContext: DraggingResolveContext): boolean { + + return false; + } + + + function checkCanMoveComponent() { + return true; + } + function checkCanDeleteComponent() { + return true; + } + + function hideNestedPaddingInDesginerView() { + return true; + } + + function getStyles(): string { + return ' '; + } + + function getDesignerClass(): string { + return ' '; + } + + /** + * 获取属性配置 + */ + function getPropsConfig(componentId: string) { + const componentProp = new ChartsBarProperty(componentId, designerHostService); + const { schema } = designItemContext; + return componentProp.getPropertyConfig(schema); + } + + return { + canAccepts, + // triggerBelongedComponentToMoveWhenMoved, + // triggerBelongedComponentToDeleteWhenDeleted, + // checkCanMoveComponent, + // checkCanDeleteComponent, + hideNestedPaddingInDesginerView, + // getStyles, + // getDesignerClass, + getPropsConfig + }; +} diff --git a/packages/charts-vue/components/charts-bar/src/property-config/charts-bar.property-config.ts b/packages/charts-vue/components/charts-bar/src/property-config/charts-bar.property-config.ts new file mode 100644 index 00000000000..0ee252956ef --- /dev/null +++ b/packages/charts-vue/components/charts-bar/src/property-config/charts-bar.property-config.ts @@ -0,0 +1,39 @@ +import { BaseControlProperty } from "@farris/charts-vue/components/charts-common/src/props"; + +export class ChartsBarProperty extends BaseControlProperty { + constructor(componentId: string, designerHostService: any) { + super(componentId, designerHostService); + } + public getPropertyConfig(propertyData: any) { + this.propertyConfig.categories['appearance'] = this.getChartsBarBehaviorConfig(propertyData); + + return this.propertyConfig; + } + + private getChartsBarBehaviorConfig(propertyData) { + return { + description: "基本信息", + title: "行为", + properties: { + color: { + title: "颜色", + type: 'select', + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'primary' , name: '主要按钮' }, + { value:'secondary' , name: '次要按钮' }, + { value:'success' , name: '成功按钮' }, + { value:'warning' , name: '警告按钮' }, + { value:'danger' , name: '危险按钮' } + ] + } + } + } + }; + } + +} diff --git a/packages/charts-vue/components/charts-bar/src/schema/charts-bar.schema.json b/packages/charts-vue/components/charts-bar/src/schema/charts-bar.schema.json index 4650e6a7580..03be4c6bc63 100644 --- a/packages/charts-vue/components/charts-bar/src/schema/charts-bar.schema.json +++ b/packages/charts-vue/components/charts-bar/src/schema/charts-bar.schema.json @@ -12,7 +12,7 @@ "type": { "description": "The type string of Input Group component", "type": "string", - "default": "bar" + "default": "charts-bar" }, "name": { "type": "string" diff --git a/packages/charts-vue/components/charts-bar/src/schema/schema-mapper.ts b/packages/charts-vue/components/charts-bar/src/schema/schema-mapper.ts new file mode 100644 index 00000000000..04d7b384ed9 --- /dev/null +++ b/packages/charts-vue/components/charts-bar/src/schema/schema-mapper.ts @@ -0,0 +1,17 @@ +import { resolveAppearance, MapperFunction } from '@farris/charts-vue/components/dynamic-resolver'; + + +function createTemplatePropResolver(name: string): MapperFunction { + return (key: string, content: string) => { + if (!content) { + return {}; + } + const templateInfo = { name, content }; + + return { text: templateInfo }; + }; +} + +export const schemaMapper = new Map([ + ['appearance', resolveAppearance] +]); diff --git a/packages/charts-vue/components/charts-bar/src/schema/schema-resolver.ts b/packages/charts-vue/components/charts-bar/src/schema/schema-resolver.ts new file mode 100644 index 00000000000..6fb4684c3dd --- /dev/null +++ b/packages/charts-vue/components/charts-bar/src/schema/schema-resolver.ts @@ -0,0 +1,5 @@ +import { DynamicResolver } from '@farris/charts-vue/components/dynamic-resolver'; + +export function schemaResolver(resolver: DynamicResolver, schema: Record, context: Record): Record { + return schema; +} diff --git a/packages/charts-vue/components/charts-common/index.ts b/packages/charts-vue/components/charts-common/index.ts index a3091d74020..32a8ffcd81f 100644 --- a/packages/charts-vue/components/charts-common/index.ts +++ b/packages/charts-vue/components/charts-common/index.ts @@ -30,4 +30,9 @@ export * from './src/compositions/use-parallel-event'; export * from './src/compositions/use-render-event'; export * from './src/compositions/use-timeline-event'; export * from './src/compositions/use-theme'; -export * from './src/utils/with-install'; +export * from './src/utils'; + +// export * from './src/utils/with-install'; +// export * from './src/utils/src/with-register'; +// export * from './src/utils/src/with-register-designer'; + diff --git a/packages/charts-vue/components/charts-common/src/compositions/use-designer-component.ts b/packages/charts-vue/components/charts-common/src/compositions/use-designer-component.ts new file mode 100644 index 00000000000..27e458d96d9 --- /dev/null +++ b/packages/charts-vue/components/charts-common/src/compositions/use-designer-component.ts @@ -0,0 +1,229 @@ +import { Ref, ref } from "vue"; +import { DesignerHostService, DesignerHTMLElement, DraggingResolveContext, UseDesignerRules } from "../types/designer-rule"; +import { ComponentSchema, DesignerComponentInstance, DesignerItemContext } from "../types/designer-component"; +import { getSchemaByTypeForDesigner } from '@farris/charts-vue/components/dynamic-resolver/src/resolver/schema/schema-resolver-design'; + +export function useDesignerComponent( + elementRef: Ref, + designItemContext?: DesignerItemContext, + designerRules?: UseDesignerRules +): Ref { + + const styles = (designerRules && designerRules.getStyles && designerRules.getStyles()) || ''; + const designerClass = (designerRules && designerRules.getDesignerClass && designerRules.getDesignerClass()) || ''; + const componentInstance = ref(); + /** + * 校验组件是否支持移动 + */ + function checkCanMoveComponent(): boolean { + if (designItemContext?.schema.componentType === 'frame') { + return false; + } + if (designerRules && designerRules.checkCanMoveComponent) { + return designerRules.checkCanMoveComponent(); + } + return true; + } + + /** + * 校验组件是否支持选中父级 + */ + function checkCanSelectParentComponent(): boolean { + return false; + } + + /** + * 校验组件是否支持删除 + */ + function checkCanDeleteComponent() { + if (designItemContext?.schema.componentType === 'frame') { + return false; + } + if (designerRules && designerRules.checkCanDeleteComponent) { + return designerRules.checkCanDeleteComponent(); + } + return true; + } + + /** + * 判断在可视化区域中是否隐藏容器间距和线条 + */ + function hideNestedPaddingInDesginerView() { + if (designItemContext?.schema.componentType === 'frame') { + return true; + } + if (designerRules && designerRules.hideNestedPaddingInDesginerView) { + return designerRules.hideNestedPaddingInDesginerView(); + } + return false; + } + + /** + * 获取组件在表单DOM中所属的Component的实例 + * @param componentInstance 组件实例 + */ + function getBelongedComponentInstance(currentComponentInstance?: Ref): DesignerComponentInstance | null { + if (!currentComponentInstance || !currentComponentInstance.value) { + return null; + } + if (currentComponentInstance.value.schema && currentComponentInstance.value.schema.type === 'component') { + return currentComponentInstance.value; + } + const parent = ref(currentComponentInstance?.value.parent) as Ref; + const grandParent = getBelongedComponentInstance(parent); + if (grandParent) { + return grandParent; + } + return null; + } + + function getDraggableDesignItemElement(context: DesignerItemContext = designItemContext as DesignerItemContext): Ref | null { + if (designerRules?.getDraggableDesignItemElement) { + return designerRules.getDraggableDesignItemElement(context); + } + const { componentInstance, designerItemElementRef } = context; + if (!componentInstance || !componentInstance.value) { + return null; + } + const { getCustomButtons } = componentInstance.value; + if (componentInstance.value.canMove || (getCustomButtons && getCustomButtons()?.length)) { + return designerItemElementRef; + } + return getDraggableDesignItemElement(context.parent); + } + + /** + * 判断是否可以接收拖拽新增的子级控件 + * @param data 新控件的类型、所属分类 + * @returns boolean + */ + function canAccepts(draggingContext: DraggingResolveContext) { + return !!designerRules && designerRules.canAccepts(draggingContext); + } + + function getDraggingDisplayText() { + return designItemContext?.schema.label || designItemContext?.schema.title || designItemContext?.schema.name; + } + + /** + * 控件可以拖拽到的最外层容器，用于限制控件向外层容器拖拽的范围。不写则不限制 + */ + function getDragScopeElement(): HTMLElement | undefined { + return undefined; + } + + /** + * 移动控件后事件：在可视化设计器中，将现有的控件移动到容器中 + * @param element 移动的源DOM结构 + */ + function onAcceptMovedChildElement(element: DesignerHTMLElement, sourceContainer?: DesignerHTMLElement) { + if (!element || !sourceContainer) { + return; + } + if (designerRules?.onAcceptMovedChildElement) { + designerRules.onAcceptMovedChildElement(element, sourceContainer); + } + } + /** + * 当前容器接收新创建的子控件，返回子控件schema结构 + */ + function addNewChildComponentSchema(resolveContext: DraggingResolveContext, designerHostService: DesignerHostService) { + const { componentType } = resolveContext; + let componentSchema = getSchemaByTypeForDesigner(componentType, resolveContext, designerHostService) as ComponentSchema; + if (designerRules && designerRules.onResolveNewComponentSchema) { + componentSchema = designerRules.onResolveNewComponentSchema(resolveContext, componentSchema); + } + + const typePrefix = componentType.toLowerCase().replace(/-/g, '_'); + if (componentSchema && !componentSchema.id && componentSchema.type === componentType) { + componentSchema.id = `${typePrefix}_${Math.random().toString().slice(2, 6)}`; + } + return componentSchema; + } + + /** + * 移动内部控件后事件：在可视化设计器中，将现有的控件移动到容器中 + * @param element 移动的源DOM结构 + */ + function onChildElementMovedOut(element: HTMLElement) { + + } + + /** + * 获取控件属性配置 + */ + function getPropConfig(...args) { + if (designerRules && designerRules.getPropsConfig) { + return designerRules.getPropsConfig(...args); + } + } + /** + * 控件删除后事件 + */ + function onRemoveComponent() { + // 调用当前控件的删除后事件 + if (designerRules && designerRules.onRemoveComponent) { + designerRules.onRemoveComponent(); + } + // 递归触发子级控件的删除后事件 + if (designItemContext?.schema.contents) { + designItemContext.schema.contents.map(content => { + let contentSchemaId = content.id; + if (content.type === 'component-ref') { + contentSchemaId = content.component; + } + const contentElement: any = elementRef.value.querySelector(`#${contentSchemaId}-design-item`); + if (contentElement?.componentInstance?.value.onRemoveComponent) { + contentElement.componentInstance.value.onRemoveComponent(); + } + }); + } + } + /** + * 校验组件是否支持删除 + */ + function getCustomButtons() { + if (designerRules && designerRules.getCustomButtons) { + return designerRules.getCustomButtons(); + } + + } + + /** + * 控件属性变更后事件 + */ + function onPropertyChanged(event: any) { + if (designerRules && designerRules.onPropertyChanged) { + return designerRules.onPropertyChanged(event); + } + } + componentInstance.value = { + canMove: checkCanMoveComponent(), + canSelectParent: checkCanSelectParentComponent(), + canDelete: checkCanDeleteComponent(), + canNested: !hideNestedPaddingInDesginerView(), + contents: designItemContext?.schema.contents, + elementRef, + parent: designItemContext?.parent?.componentInstance, + schema: designItemContext?.schema, + styles, + designerClass, + canAccepts, + getBelongedComponentInstance, + getDraggableDesignItemElement, + getDraggingDisplayText, + getPropConfig, + getDragScopeElement, + onAcceptMovedChildElement, + onChildElementMovedOut, + addNewChildComponentSchema, + triggerBelongedComponentToMoveWhenMoved: !!designerRules && designerRules.triggerBelongedComponentToMoveWhenMoved || ref(false), + triggerBelongedComponentToDeleteWhenDeleted: !!designerRules && designerRules.triggerBelongedComponentToDeleteWhenDeleted || ref(false), + onRemoveComponent, + getCustomButtons, + onPropertyChanged + } as DesignerComponentInstance; + + return componentInstance as any; + +} diff --git a/packages/charts-vue/components/charts-common/src/props/base-property.ts b/packages/charts-vue/components/charts-common/src/props/base-property.ts new file mode 100644 index 00000000000..ce8c8017928 --- /dev/null +++ b/packages/charts-vue/components/charts-common/src/props/base-property.ts @@ -0,0 +1,400 @@ +import { cloneDeep } from "lodash-es"; +import { ExpressionProperty } from "./expression-property"; +import { usePropertyEditor } from "./use-property-editor"; +import { DgControl } from "./dg-control"; +import { DesignerComponentInstance, PropertyChangeObject } from "../types"; +import { FormSchemaEntity } from "../types"; + +/** + * 控件属性基类 + */ +export class BaseControlProperty { + public componentId: string; + + public viewModelId: string; + + public eventsEditorUtils: any; + + public formSchemaUtils: any; + public formMetadataConverter: any; + public designViewModelUtils: any; + public designViewModelField: any; + public controlCreatorUtils: any; + public designerHostService: any; + + schemaService: any = null; + + metadataService: any = null; + + protected propertyConfig = { + type: 'object', + categories: {} + }; + + constructor(componentId: string, designerHostService: any) { + this.componentId = componentId; + this.designerHostService = designerHostService; + this.eventsEditorUtils = designerHostService['eventsEditorUtils']; + this.formSchemaUtils = designerHostService['formSchemaUtils']; + this.formMetadataConverter = designerHostService['formMetadataConverter']; + this.viewModelId = this.formSchemaUtils?.getViewModelIdByComponentId(componentId) || ''; + this.designViewModelUtils = designerHostService['designViewModelUtils']; + this.controlCreatorUtils = designerHostService['controlCreatorUtils']; + this.metadataService = designerHostService['metadataService']; + this.schemaService = designerHostService['schemaService']; + } + + getTableInfo() { + return this.schemaService?.getTableInfoByViewModelId(this.viewModelId); + } + + setDesignViewModelField(propertyData: any) { + const bindingFieldId = propertyData.binding && propertyData.binding.type === 'Form' && propertyData.binding.field; + // 视图模型中[字段更新时机]属性现在要在控件上维护，所以在控件上复制一份属性值 + if (bindingFieldId) { + if (!this.designViewModelField) { + const dgViewModel = this.designViewModelUtils.getDgViewModel(this.viewModelId); + this.designViewModelField = dgViewModel.fields.find(f => f.id === bindingFieldId); + } + propertyData.updateOn = this.designViewModelField?.updateOn; + } + } + + getBasicPropConfig(propertyData: any): any { + return { + description: 'Basic Information', + title: '基本信息', + properties: { + id: { + description: '组件标识', + title: '标识', + type: 'string', + readonly: true + }, + type: { + description: '组件类型', + title: '控件类型', + type: 'select', + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + idField: 'value', + editable: false, + data: [{ value: propertyData.type, name: DgControl[propertyData.type] && DgControl[propertyData.type].name }] + } + } + } + }; + + } + + + protected getAppearanceConfig(propertyData = null, properties = {}, setPropertyRelates?: (changeObject, propertyData, parameters) => any): any { + const appearanceBasic = { + title: "外观", + description: "Appearance", + }; + const appearancePoperties = { + class: { + title: "class样式", + type: "string", + description: "组件的CSS样式", + $converter: "/converter/appearance.converter" + }, + style: { + title: "style样式", + type: "string", + description: "组件的样式", + $converter: "/converter/appearance.converter" + } + + }; + for (const key in properties) { + // 合并属性，保留原属性值 + appearancePoperties[key] = Object.assign(appearancePoperties[key] || {}, properties[key]); + } + return { + ...appearanceBasic, properties: { ...appearancePoperties }, setPropertyRelates(changeObject, parameters: any) { + if (!changeObject) { + return; + } + if (!changeObject) { + return; + } + switch (changeObject && changeObject.propertyID) { + case 'class': case 'style': { + changeObject.needChangeCanvas = true; + break; + } + } + if (setPropertyRelates) { + setPropertyRelates(changeObject, propertyData, parameters); + } + } + + }; + } + protected getPropertyEditorParams(propertyData, propertyTypes: any = [], propertyName = 'visible', constInfos = {}, variableInfos = {}) { + const { getVariables, getControlName, getStateMachines } = usePropertyEditor(this.designerHostService); + const targetType = this.getRealTargetType(propertyData); + const newPropertyTypes = propertyTypes && propertyTypes.length > 0 ? propertyTypes : ['Const', 'Variable', 'Custom', 'StateMachine', 'Expression']; + const resultProperty = { + type: "property-editor", + propertyTypes: newPropertyTypes + }; + newPropertyTypes.map(item => { + switch (item) { + case 'Const': + Object.assign(resultProperty, { + constType: 'enum', + constEnums: [{ id: true, name: '是' }, { id: false, name: '否' }] + }, constInfos); + break; + case 'Expression': + resultProperty['expressionConfig'] = this.getExpressionOptions(propertyData, targetType, propertyName); + break; + case 'StateMachine': + resultProperty['stateMachines'] = getStateMachines(this.viewModelId); + break; + case 'Variable': + Object.assign(resultProperty, { + controlName: getControlName(propertyData), + newVariablePrefix: 'is', + newVariableType: 'Boolean', + variables: getVariables(this.viewModelId) + }, variableInfos); + break; + } + }); + return resultProperty; + } + + protected getVisibleProperty(propertyData, position = '') { + const editor = this.getPropertyEditorParams(propertyData, position === 'gridFieldEditor' ? ['Const', 'Expression'] : ['Const', 'Variable', 'Custom', 'StateMachine', 'Expression'], 'visible'); + return { + visible: { + title: "是否可见", + type: "boolean", + description: "运行时组件是否可见", + editor + } + }; + } + /** + * 获取行为 + * @param propertyData + * @param viewModelId + * @returns + */ + public getBehaviorConfig(propertyData: any, position = '', properties = {}, setPropertyRelates?: any): any { + const behaviorBasic = { + title: "行为", + description: "" + }; + const behaviorPoperties = this.getVisibleProperty(propertyData, position); + for (const key in properties) { + // 合并属性，保留原属性值 + behaviorPoperties[key] = Object.assign(behaviorPoperties[key] || {}, properties[key]); + } + const self = this; + + return { + ...behaviorBasic, properties: { ...behaviorPoperties }, setPropertyRelates(changeObject, parameters: any) { + if (!changeObject) { + return; + } + switch (changeObject.propertyID) { + case 'disabled': + case 'readonly': + case 'visible': + self.afterMutilEditorChanged(propertyData, changeObject); + break; + } + if (setPropertyRelates) { + setPropertyRelates(changeObject, parameters); + } + } + + }; + } + /** + * 当多值编辑器变更时 + * @param propertyData + * @param changeObject + */ + public afterMutilEditorChanged(propertyData, changeObject) { + // 变量 + this.addNewVariableToViewModel(changeObject, this.viewModelId); + // 更新表达式 + this.updateExpressionValue(changeObject); + // 清空表达式 + this.clearExpression(changeObject, propertyData); + } + /** + * 更新element + * @param propertyId + * @param componentInstance + * @returns + */ + public updateElementByParentContainer(propertyId: string, componentInstance: DesignerComponentInstance) { + // 1、定位控件父容器 + const parentContainer = componentInstance && componentInstance.parent && componentInstance.parent['schema']; + if (!parentContainer) { + return; + } + const index = parentContainer.contents.findIndex(c => c.id === propertyId); + // 通过cloneDeep方式的触发更新 + const controlSchema = cloneDeep(parentContainer.contents[index]); + // 5、替换控件 + parentContainer.contents.splice(index, 1); + parentContainer.contents.splice(index, 0, controlSchema); + // refreshCanvas(); + } + + /** + * 属性编辑器，在编辑过程中会新增变量，此处需要将新增的变量追加到ViewModel中 + * @param changeObject + * @param viewModelId + * @returns + */ + public addNewVariableToViewModel(changeObject: PropertyChangeObject, viewModelId: string) { + const newPropertyValue = changeObject.propertyValue; + // 1、判断当前属性值是否为对象 + const isObject = newPropertyValue && typeof newPropertyValue === 'object'; + if (!isObject) { + return; + } + + // 2、判断是否为新变量 + const isNewVariable = newPropertyValue.type === 'Variable' && newPropertyValue.isNewVariable; + if (!isNewVariable) { + return; + } + + // 3、构造变量结构 + const newVariable = { + id: newPropertyValue.field, + category: 'locale', + code: newPropertyValue.fullPath, + name: newPropertyValue.fullPath, + type: newPropertyValue.newVariableType || 'String' + }; + delete newPropertyValue.newVariableType; + delete newPropertyValue.isNewVariable; + + // 4、把新变量添加到ViewModel中 + const existedVariable = this.formSchemaUtils.getVariableByCode(newVariable.code); + if (!existedVariable) { + const viewModel = this.formSchemaUtils.getViewModelById(viewModelId); + viewModel.states.push(newVariable); + } + } + + /** + * 更新表达式到expressions节点 + * @param changeObject + */ + public updateExpressionValue(changeObject: PropertyChangeObject) { + const newPropertyValue = changeObject.propertyValue; + const newValueType = newPropertyValue && newPropertyValue.type; + + // 1、判断是否需要更新表达式 + const needUpdateExpression = newValueType === 'Expression' && newPropertyValue.expressionInfo; + if (!needUpdateExpression) { + return; + } + + const { expressionId, expressionInfo } = newPropertyValue; + const { targetId, targetType, expressionType, value, message } = expressionInfo; + const module = this.formSchemaUtils.getModule(); + module.expressions ??= []; + const { expressions } = module; + + // 2、获取目标表达式，如果不存在，则创建一个空的目标表达式 + let targetExpression = expressions.find(expression => expression.target === targetId); + if (!targetExpression) { + targetExpression = { target: targetId, rules: [], targetType }; + expressions.push(targetExpression); + } + + // 3、更新表达式 + const expressionItem = targetExpression.rules.find(rule => rule.type === expressionType); + if (expressionItem) { + expressionItem.value = value; + expressionItem.message = message; + } else { + const newExpressionRule = { id: expressionId, type: expressionType, value, message }; + targetExpression.rules.push(newExpressionRule); + } + delete newPropertyValue.expressionInfo; + } + + /** + * 属性类型切换为非表达式后，清除原表达式 + * @param changeObject + * @param propertyData + * @returns + */ + clearExpression(changeObject: PropertyChangeObject, propertyData: any) { + const newPropertyValue = changeObject.propertyValue; + const isExpression = newPropertyValue && newPropertyValue.type === 'Expression'; + // 1、如果为当前属性为表达式，则不需要清空 + if (isExpression) { + return; + } + + // 2、属性值不是表达式后，需要清空表达式 + const expressionType = changeObject.propertyID; + const expressions = this.formSchemaUtils.getExpressions(); + + const targetId = propertyData.binding ? propertyData.binding.field : propertyData.id; + const targetExpression = expressions.find(expression => expression.target === targetId); + if (!targetExpression || !targetExpression.rules) { + return; + } + targetExpression.rules = targetExpression.rules.filter(rule => rule.type !== expressionType); + } + + getExpressionOptions(propertyData: any, targetType: 'Field' | 'Button' | 'Container', expressionType: string) { + return new ExpressionProperty(this.formSchemaUtils).getExpressionOptions(propertyData, targetType, expressionType); + } + + getRealTargetType(propertyData: any,) { + if (['response-toolbar-item', 'tab-toolbar-item', 'section-toolbar-item'].indexOf(propertyData.type) > -1) { + return 'Button'; + } + if (propertyData.binding && propertyData.binding.field) { + return 'Field'; + } + return 'Container'; + } + + public getSchemaEntityTreeData(): any[] { + const mainEntity = this.formSchemaUtils.getFormSchema()?.module?.entity[0]?.entities[0]; + const entityTreeData = this.assembleSchemaEntityToTree(mainEntity, 0); + return entityTreeData; + } + + private assembleSchemaEntityToTree( + schemaEntity: FormSchemaEntity, + layer: number, + parent?: FormSchemaEntity, + bindToPath = '', + treeData: any[] = [], + ) { + const bindTo = bindToPath ? `${bindToPath}/${schemaEntity.label}` : '/'; + treeData.push({ + id: schemaEntity.id, + name: schemaEntity.name, + label: schemaEntity.label, + layer, + parent: parent && parent.id, + bindTo: bindTo.replace('//', '/') + }); + if (schemaEntity.type.entities && schemaEntity.type.entities.length) { + schemaEntity.type.entities.map(ele => this.assembleSchemaEntityToTree(ele, layer + 1, schemaEntity, bindTo, treeData)); + } + return treeData; + } +} diff --git a/packages/charts-vue/components/charts-common/src/props/container-base-property.ts b/packages/charts-vue/components/charts-common/src/props/container-base-property.ts new file mode 100644 index 00000000000..4a0cf9ea520 --- /dev/null +++ b/packages/charts-vue/components/charts-common/src/props/container-base-property.ts @@ -0,0 +1,382 @@ +import { BaseControlProperty } from "./base-property"; +import { DgControl } from "./dg-control"; +import { sizeConverter, paddingConverter, marginConverter, positionConverter, borderRadiusConverter } from "@farris/charts-vue/components/dynamic-resolver/src/converter"; +import { PropertyChangeObject } from "../types"; + +interface BasicPropOptions { + showTitle?: boolean; +} + +export class ContainerBaseProperty extends BaseControlProperty { + + constructor(componentId: string, designerHostService: any) { + super(componentId, designerHostService); + } + + protected getAppearanceProperties( + propertyNames: string[] = ["style"], + propertyData?: any, + ) { + const propertyName2PropertyGetter = { + style: this.getStyleProperties, + size: this.getSizeProperties, + padding: this.getPaddingProperties, + margin: this.getMarginProperties, + borderRadius: this.getBorderRadiusProperties, + position: this.getPositionProperties, + }; + const properties: any[] = []; + propertyNames.forEach((propertyName) => { + const propertyGetter = propertyName2PropertyGetter[propertyName]; + if (propertyGetter) { + properties.push(propertyGetter(propertyData)); + } + }); + return Object.assign({}, ...properties); + } + + private getStyleProperties(propertyData?: any) { + return { + class: { + title: "class样式", + type: "string", + description: "组件的CSS样式", + $converter: "/converter/appearance.converter" + }, + style: { + title: "style样式", + type: "string", + description: "组件的样式", + $converter: "/converter/appearance.converter" + }, + }; + } + + private getSizeProperties(propertyData?: any) { + return { + size: { + title: "尺寸", + type: "cascade", + description: "组件的尺寸", + isExpand: true, + properties: { + width: { + title: "宽度（px）", + type: "number", + description: "组件的宽度", + editor: { + min: 0, + decimals: 0, + nullable: true, + }, + $converter: sizeConverter, + }, + height: { + title: "高度（px）", + type: "number", + description: "组件的高度", + editor: { + min: 0, + decimals: 0, + nullable: true, + }, + $converter: sizeConverter, + } + } + }, + }; + } + + private getPaddingProperties(propertyData?: any) { + return { + padding: { + title: "内边距", + type: "cascade", + description: "组件的内边距", + isExpand: true, + properties: { + top: { + title: "上侧（px）", + type: "number", + description: "组件的上侧内边距", + editor: { + min: 0, + decimals: 0, + nullable: true, + }, + $converter: paddingConverter, + }, + right: { + title: "右侧（px）", + type: "number", + description: "组件的右侧内边距", + editor: { + min: 0, + decimals: 0, + nullable: true, + }, + $converter: paddingConverter, + }, + bottom: { + title: "下侧（px）", + type: "number", + description: "组件的下侧内边距", + editor: { + min: 0, + decimals: 0, + nullable: true, + }, + $converter: paddingConverter, + }, + left: { + title: "左侧（px）", + type: "number", + description: "组件的左侧内边距", + editor: { + min: 0, + decimals: 0, + nullable: true, + }, + $converter: paddingConverter, + }, + } + }, + }; + } + + private getMarginProperties(propertyData?: any) { + return { + margin: { + title: "外边距", + type: "cascade", + description: "组件的外边距", + isExpand: true, + properties: { + top: { + title: "上侧（px）", + type: "number", + description: "组件的上侧外边距", + editor: { + min: 0, + decimals: 0, + nullable: true, + }, + $converter: marginConverter, + }, + right: { + title: "右侧（px）", + type: "number", + description: "组件的右侧外边距", + editor: { + min: 0, + decimals: 0, + nullable: true, + }, + $converter: marginConverter, + }, + bottom: { + title: "下侧（px）", + type: "number", + description: "组件的下侧外边距", + editor: { + min: 0, + decimals: 0, + nullable: true, + }, + $converter: marginConverter, + }, + left: { + title: "左侧（px）", + type: "number", + description: "组件的左侧外边距", + editor: { + min: 0, + decimals: 0, + nullable: true, + }, + $converter: marginConverter, + }, + } + }, + }; + } + + private getBorderRadiusProperties(propertyData?: any) { + return { + borderRadius: { + title: "圆角", + type: "cascade", + description: "组件的圆角", + isExpand: true, + properties: { + topLeft: { + title: "左上角（px）", + type: "number", + description: "组件的左上圆角大小", + editor: { + min: 0, + decimals: 0, + nullable: true, + }, + $converter: borderRadiusConverter, + }, + topRight: { + title: "右上角（px）", + type: "number", + description: "组件的右上圆角大小", + editor: { + min: 0, + decimals: 0, + nullable: true, + }, + $converter: borderRadiusConverter, + }, + bottomRight: { + title: "右下角（px）", + type: "number", + description: "组件的右下圆角大小", + editor: { + min: 0, + decimals: 0, + nullable: true, + }, + $converter: borderRadiusConverter, + }, + bottomLeft: { + title: "左下角（px）", + type: "number", + description: "组件的左下圆角大小", + editor: { + min: 0, + decimals: 0, + nullable: true, + }, + $converter: borderRadiusConverter, + }, + } + }, + }; + } + + private getPositionProperties(propertyData?: any) { + return { + position: { + title: "位置", + type: "cascade", + description: "组件的位置", + isExpand: true, + properties: { + top: { + title: "上侧偏移（px）", + type: "number", + description: "组件相对于最近的非 static 定位祖先元素的上侧偏移", + editor: { + decimals: 0, + nullable: true, + }, + $converter: positionConverter, + }, + right: { + title: "右侧偏移（px）", + type: "number", + description: "组件相对于最近的非 static 定位祖先元素的右侧偏移", + editor: { + decimals: 0, + nullable: true, + }, + $converter: positionConverter, + }, + bottom: { + title: "下侧偏移（px）", + type: "number", + description: "组件相对于最近的非 static 定位祖先元素的下侧偏移", + editor: { + decimals: 0, + nullable: true, + }, + $converter: positionConverter, + }, + left: { + title: "左侧偏移（px）", + type: "number", + description: "组件相对于最近的非 static 定位祖先元素的左侧偏移", + editor: { + decimals: 0, + nullable: true, + }, + $converter: positionConverter, + }, + } + }, + }; + } + + public getBasicPropConfig( + propertyData: any, + options?: BasicPropOptions, + additionalProperties = {}, + setPropertyRelates?: (changeObject: PropertyChangeObject, propertyData: any, parameters: any) => any, + ) { + const optionalProperties = [ + { + id: { + description: '组件标识', + title: '标识', + type: 'string', + readonly: true + } + }, + options?.showTitle && { + title: { + description: '组件名称', + title: "名称", + type: "string", + } + }, + { + type: { + description: '组件类型', + title: '控件类型', + type: 'select', + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + idField: 'value', + editable: false, + data: [{ + value: propertyData.type, + name: DgControl[propertyData.type] && DgControl[propertyData.type].name + }], + } + } + }, + ]; + const properties = optionalProperties.filter((property) => { + return typeof property === 'object' && !!property; + }).reduce((result, newProperty) => { + return Object.assign(result, newProperty); + }, {}); + Object.keys(additionalProperties).forEach((key) => { + properties[key] = Object.assign(properties[key] || {}, additionalProperties[key]); + }); + return { + description: 'Basic Information', + title: '基本信息', + properties, + setPropertyRelates(changeObject: any, parameters: any) { + const propertyID = changeObject?.propertyID; + if (!propertyID) { + return; + } + if (propertyID === 'title') { + changeObject.needRefreshControlTree = true; + } + if (setPropertyRelates) { + setPropertyRelates(changeObject, propertyData, parameters); + } + }, + }; + } + +} diff --git a/packages/charts-vue/components/charts-common/src/props/dg-control.ts b/packages/charts-vue/components/charts-common/src/props/dg-control.ts new file mode 100644 index 00000000000..7686b232834 --- /dev/null +++ b/packages/charts-vue/components/charts-common/src/props/dg-control.ts @@ -0,0 +1,54 @@ +export const DgControl = { + + 'module': { type: 'Module', name: '模块', icon: 'Module' }, + + 'component': { type: 'component', name: '组件', icon: 'Component' }, + + 'content-container': { type: 'content-container', name: '容器', icon: 'ContentContainer' }, + + 'page-container': { type: 'page-container', name: '页面容器', icon: 'ContentContainer' }, + + 'page-header-container': { type: 'page-header-container', name: '页头容器', icon: 'ContentContainer' }, + + 'page-body-container': { type: 'page-body-container', name: '页面主体容器', icon: 'ContentContainer' }, + + 'page-footer-container': { type: 'page-footer-container', name: '页尾容器', icon: 'ContentContainer' }, + + 'float-container': { type: 'float-container', name: '浮动容器', icon: 'ContentContainer' }, + + 'card': { type: 'card', name: '卡片', icon: 'section' }, + + 'list-view': { type: 'list-view', name: '列表', icon: 'ListView' }, + + 'button': { type: 'button', name: '按钮', icon: 'Button' }, + + 'button-group': { type: 'button-group', name: '按钮组', icon: 'ButtonGroup' }, + + 'input-group': { type: 'input-group', name: '文本', icon: 'TextBox' }, + + 'textarea': { type: 'textarea', name: '多行文本', icon: 'MultiTextBox' }, + + 'lookup': { type: 'lookup', name: '帮助', icon: 'LookupEdit' }, + + 'number-input': { type: 'number-input', name: '数值', icon: 'NumericBox' }, + + 'date-picker': { type: 'date-picker', name: '日期', icon: 'DateBox' }, + + 'datetime-picker': { type: 'datetime-picker', name: '日期时间', icon: 'DateBox' }, + + 'switch': { type: 'switch', name: '开关', icon: 'SwitchField' }, + + 'radio-group': { type: 'radio-group', name: '单选组', icon: 'RadioGroup' }, + + 'check-group': { type: 'check-group', name: '多选组', icon: 'CheckGroup' }, + + 'check-box': { type: 'check-box', name: '复选框', icon: 'CheckBox' }, + + 'combo-list': { type: 'combo-list', name: '下拉列表', icon: 'EnumField' }, + + 'form': { type: 'form', name: '卡片面板', icon: 'Form' }, + + 'navbar': { type: 'navbar', name: '导航栏', icon: 'NavBar' }, + + 'picker': { type: 'picker', name: '选择器', icon: 'EnumField' }, +}; diff --git a/packages/charts-vue/components/charts-common/src/props/expression-property.ts b/packages/charts-vue/components/charts-common/src/props/expression-property.ts new file mode 100644 index 00000000000..24b91f61777 --- /dev/null +++ b/packages/charts-vue/components/charts-common/src/props/expression-property.ts @@ -0,0 +1,385 @@ +export interface RuleModel { + id: string; + type: 'compute' | 'dependency' | 'validate' | 'visible' | 'readonly' | 'required' | 'dataPicking' | string; + value: string; + message?: string; + elementId?: string; + messageType?: string; +} + +export interface ExpressionModel { + target: string; + rules: Array; + targetType: string; +} + + +export class ExpressionProperty { + + private sessionVariables = [ + { + key: "CurrentSysOrgName", + name: "当前组织Name", + description: "当前组织Name" + }, + // { + // key: "CurrentSysOrgCode", + // name: "当前组织Code", + // description: "当前组织Code" + // }, + { + key: "CurrentSysOrgId", + name: "当前组织Id", + description: "当前组织Id" + }, + { + key: "CurrentUserName", + name: "当前用户Name", + description: "当前用户Name" + }, + { + key: "CurrentUserCode", + name: "当前用户Code", + description: "当前用户Code" + }, + { + key: "CurrentUserId", + name: "当前用户Id", + description: "当前用户Id" + }, + { + key: "CurrentLanguage", + name: "当前语言编号", + description: "当前登录的语言编号，例如简体中文返回'zh-CHS'，英文返回'en'，繁体中文'zh-CHT'" + } + ]; + + constructor(private formSchemaService: any) { + } + + private getExpressionRule(expressionId: any, rultType: string) { + const expressions = this.formSchemaService.getExpressions(); + if (!expressions) { + return ''; + } + const expressionItem = expressions.find(item => item.target === expressionId); + if (!expressionItem) { + return ''; + } + + const ruleItem = expressionItem.rules.find(item => item.type === rultType); + if (!ruleItem) { + return ''; + } + + return ruleItem; + } + + // 获取上下文表单变量 + private getContextFormVariables() { + const { module } = this.formSchemaService.getFormSchema(); + if (!module.viewmodels || module.viewmodels.length === 0) { + return []; + } + + const rootViewModelId = this.formSchemaService.getRootViewModelId(); + const viewModel = this.formSchemaService.getViewModelById(rootViewModelId); + + if (!viewModel || !viewModel.states || viewModel.states.length === 0) { + return []; + } + + const contextEntities: any = []; + viewModel.states.forEach(variable => { + if (variable.category === 'remote') { + contextEntities.push({ + key: variable.code, + name: variable.name, + description: variable.name + }); + } + }); + return contextEntities; + } + + private createTreeNode(element: any, parentCodes: string[], fieldName = 'label') { + return { + id: element.id, + name: element.name, + bindingPath: element[fieldName], + parents: parentCodes + }; + } + + + private buildEntityFieldsTreeData(fields: any[] | null = null, parentCodes: string[]): any[] { + const treeData: any[] = []; + fields?.forEach(element => { + const nodeData = this.createTreeNode(element, parentCodes); + + let children: any[] = []; + if (element.type?.fields) { + children = this.buildEntityFieldsTreeData(element.type.fields, [...parentCodes, element.label]); + } + + treeData.push({ + data: nodeData, + children, + expanded: true + }); + }); + return treeData; + } + + private buildChildEntityTreeData(entities: any[] | null = null, parentCodes: string[]): any[] { + const treeData: any[] = []; + entities?.forEach(element => { + const nodeData = this.createTreeNode(element, parentCodes); + + const children = this.buildEntityFieldsTreeData(element.type?.fields, [...parentCodes, element.label]); // 可选链 + const childEntities = this.buildChildEntityTreeData(element.type?.entities, [...parentCodes, element.label]); // 可选链 + + if (childEntities?.length) { // 空值检查 + children?.push(...childEntities); + } + + treeData.push({ + data: nodeData, + children: children || [], // 空值回退 + expanded: true + }); + }); + return treeData; + } + + private getEntitiesTreeData() { + const entities = this.formSchemaService.getSchemaEntities(); + if (!entities?.length) { // 空值检查 + return []; + } + + const mainTable = entities[0]; + if (!mainTable?.type) { return []; } // 空值检查 + + const childFields = this.buildEntityFieldsTreeData(mainTable.type.fields, [mainTable.code]); + const childEntities = this.buildChildEntityTreeData(mainTable.type.entities, [mainTable.code]); + + if (childEntities?.length) { // 空值检查 + childFields?.push(...childEntities); + } + + return { + entityCode: mainTable.code, + fields: [{ + data: this.createTreeNode(mainTable, [], 'code'), + children: childFields || [] + }] + }; + } + + + getEntitiesAndVariables() { + return { + entities: this.getEntitiesTreeData(), + variables: { + session: { + name: '系统变量', + items: this.sessionVariables + }, + forms: { + name: '表单变量', + items: this.getContextFormVariables() + } + } + }; + } + + private onBeforeOpenExpression(propertyData: any, expressionType: string, targetType: string) { + const expressionId = targetType === 'Field' ? propertyData.binding.field : propertyData.id; + const rule = this.getExpressionRule(expressionId, expressionType); + const entitiesAndVariables = this.getEntitiesAndVariables(); + const data: any = { + message: ['validate', 'required','dataPicking'].includes(expressionType) && rule ? rule.message : '', + ...entitiesAndVariables + }; + + if (rule.messageType != null) { + data.messageType = rule.messageType; + } + + return data; + } + + private buildRule(targetId, expressionObject: Record, ruleType: string, controlId?: string) { + const { expression: expressionValue, message, messageType } = expressionObject; + const rule: RuleModel = { + id: `${targetId}_${ruleType}`, + type: ruleType, + value: expressionValue, + message, + messageType + }; + + if (ruleType === 'validate' && controlId) { + rule.elementId = controlId; + } + + return rule; + } + + private getExpressionData(): Array { + const { expressions } = this.formSchemaService.getFormSchema().module; + return expressions || []; + } + + private updateExpression(propertyData: any, + targetType: 'Field' | 'Button' | 'Container', + expressionObject: Record, ruleType: string) { + const targetId = targetType === 'Field' ? propertyData.binding.field : propertyData.id; + const newRule = this.buildRule(targetId, expressionObject, ruleType, propertyData.type === 'form-group' ?propertyData.id: ''); + + const currentExpressiones = this.getExpressionData(); + let expressionItem = currentExpressiones.find((item: ExpressionModel) => { + return item.targetType === targetType && item.target === targetId; + }); + + // 提取重复逻辑：判断 value 是否为空 + const isValueEmpty = (rule: RuleModel): boolean => rule.value.trim() === ''; + + if (expressionItem) { + const ruleItem = expressionItem.rules.find((rule) => rule.id === newRule.id); + if (ruleItem) { + if (isValueEmpty(newRule)) { + expressionItem.rules = expressionItem.rules.filter((rule) => rule.id !== newRule.id); + } else { + ruleItem.value = newRule.value; + ruleItem.message = newRule.message; + + if (ruleType === 'dataPicking') { + ruleItem.messageType = newRule.messageType; + } + + if (ruleType === 'validate' && propertyData.type === 'form-group') { + ruleItem.elementId = propertyData.id; + } + } + } else { + if (isValueEmpty(newRule)) { + return null; + } + + expressionItem.rules = expressionItem.rules || []; + expressionItem.rules.push(newRule); + } + } else { + + if (isValueEmpty(newRule)) { + return null; + } + + expressionItem = { + target: `${targetId}`, + rules: [newRule], + targetType: targetType + }; + + } + return expressionItem; + } + + private expressionNames = { + compute: '计算表达式', + dependency: '依赖表达式', + validate: '验证表达式', + dataPicking: '帮助前表达式', + visible: '可见表达式', + readonly: '只读表达式', + required: '必填表达式' + }; + + private getExpressionConverter = (expressionId: string, ruleType?: string) => { + return { + convertFrom: (schema: Record, propertyKey: string, schemaService, componentId) => { + const rule = schemaService.getExpressionRuleValue(expressionId, ruleType || propertyKey); + return rule && rule.value || ''; + }, + convertTo: (schema: Record, propertyKey: string, propertyValue: any[], + schemaService, componentId + ) => { + schemaService.updateExpression(propertyValue); + } + }; + }; + + private getExpressionEditorOptions(propertyData, targetType: 'Field' | 'Button' | 'Container', + expressionTypes: string[], callback?: (rule: Record) => void) { + return expressionTypes.reduce((expressions: Record, name: string) => { + const expressionId = targetType === 'Field' ? propertyData?.binding?.field : propertyData.id; + expressions[name] = { + hide: targetType === 'Field' ? !!propertyData?.binding?.field : false, + description: "", + title: this.expressionNames[name], + type: "string", + $converter: this.getExpressionConverter(expressionId), + editor: { + type: "expression-editor", + singleExpand: false, + dialogTitle: `${this.expressionNames[name]}编辑器`, + showMessage: name === 'validate' || name === 'dataPicking', + showMessageType: name === 'dataPicking', + beforeOpen: () => { + return this.onBeforeOpenExpression(propertyData, name, targetType); + }, + onSubmitModal: (expressionObject: any) => { + const expressionData: any = this.updateExpression(propertyData, targetType, expressionObject, name); + if (callback) { + const rule = this.buildRule(expressionId, expressionObject, name); + callback(rule); + } + return expressionData; + } + } + }; + + return expressions; + }, {}); + } + + private getExpressionInfo(propertyData: any, targetType: 'Field' | 'Button' | 'Container', expressionType: string) { + const targetId = targetType === 'Field' ? propertyData.binding.field : propertyData.id; + const expressionRule = this.getExpressionRule(targetId, expressionType); + const expressionInfo = { + value: expressionRule && expressionRule.value, + message: expressionRule && expressionRule.message, + targetId, + targetType, + expressionType + }; + return expressionInfo; + } + + getExpressionConfig(propertyData: any, type: 'Field' | 'Button' | 'Container', + expressionTypes: string[] = ['compute', 'dependency', 'validate'], + callback?: (rule: Record) => void) { + return { + description: "表达式", + title: "表达式", + properties: { + ...this.getExpressionEditorOptions(propertyData, type, expressionTypes, callback) + } + }; + } + + getExpressionOptions(propertyData: any, targetType: 'Field' | 'Button' | 'Container', expressionType: string) { + const expressionInfo = this.getExpressionInfo(propertyData, targetType, expressionType); + return { + dialogTitle: `${this.expressionNames[expressionType]}编辑器`, + singleExpand: false, + showMessage: expressionType === 'require', + beforeOpen: () => { + return this.onBeforeOpenExpression(propertyData, expressionType, targetType); + }, + expressionInfo + }; + } +} diff --git a/packages/charts-vue/components/charts-common/src/props/index.ts b/packages/charts-vue/components/charts-common/src/props/index.ts new file mode 100644 index 00000000000..2f505773be9 --- /dev/null +++ b/packages/charts-vue/components/charts-common/src/props/index.ts @@ -0,0 +1,6 @@ +export * from './dg-control'; +export { SchemaDOMMapping } from './schema-dom-mapping'; +export { BaseControlProperty } from './base-property'; +export { InputBaseProperty } from './input-base-property'; +export { ContainerBaseProperty } from './container-base-property'; +export { ToolbarItemProperty } from './toolbar-item.property'; diff --git a/packages/charts-vue/components/charts-common/src/props/input-base-property.ts b/packages/charts-vue/components/charts-common/src/props/input-base-property.ts new file mode 100644 index 00000000000..44a5dc3a657 --- /dev/null +++ b/packages/charts-vue/components/charts-common/src/props/input-base-property.ts @@ -0,0 +1,563 @@ + +import { BaseControlProperty } from "./base-property"; +import { SchemaDOMMapping } from './schema-dom-mapping'; +import { ExpressionProperty } from "./expression-property"; +import { FormSchemaEntityField$Type, FormSchemaEntityFieldType$Type, FormVariable } from "../types/entity-schema"; +import { DesignerComponentInstance, FormBindingType, FormPropertyChangeObject } from "../types"; +import { DgControl } from "./dg-control"; + +export class InputBaseProperty extends BaseControlProperty { + /** 控件绑定的变量 */ + public bindingVarible?: FormVariable; + + public labelAlignVisible = true; + public labelAlignReadonly = false; + + constructor(componentId: string, designerHostService: any) { + super(componentId, designerHostService); + } + private getCommonPropertyConfig(propertyData: any, componentInstance: DesignerComponentInstance | null) { + // 基本信息 + this.propertyConfig.categories['basic'] = this.getBasicProperties(propertyData, componentInstance); + // 外观 + this.propertyConfig.categories['appearance'] = this.getAppearanceProperties(propertyData, componentInstance); + this.propertyConfig.categories['behavior'] = this.getBehaviorConfig(propertyData); + // 编辑器 + this.propertyConfig.categories['editor'] = this.getEditorProperties(propertyData); + // 表达式编辑器 + this.propertyConfig.categories['expressons'] = this.getExpressionConfig(propertyData, 'Field'); + } + public getPropertyConfig(propertyData: any, componentInstance: DesignerComponentInstance) { + this.getCommonPropertyConfig(propertyData, componentInstance); + // 事件 暂不支持 + // this.propertyConfig.categories['eventsEditor'] = this.getEventPropertyConfig(propertyData); + return this.propertyConfig; + } + + public getBasicProperties(propertyData, componentInstance): any { + const self = this; + this.setDesignViewModelField(propertyData); + const { canChangeControlType, editorTypeList } = this.getAvailableEditorType(propertyData); + return { + description: 'Basic Information', + title: '基本信息', + properties: { + id: { + description: '组件标识', + title: '标识', + type: 'string', + readonly: true + }, + type: { + description: '编辑器类型', + title: '编辑器类型', + type: 'string', + $converter: '/converter/change-editor.converter', + editor: { + type: 'combo-list', + textField: 'value', + valueField: 'key', + idField: 'key', + editable: false, + data: editorTypeList, + readonly: !canChangeControlType + }, + }, + binding: { + description: "绑定的表单字段", + title: "绑定", + editor: { + type: "binding-selector", + bindingType: { "enable": false }, + editorParams: { + componentSchema: propertyData, + needSyncToViewModel: true, + viewModelId: this.viewModelId, + designerHostService: this.designerHostService, + disableOccupiedFields: true + }, + textField: 'bindingField' + }, + refreshPanelAfterChanged: true + }, + label: { + title: "标签", + type: "string", + $converter: '/converter/form-group-label.converter' + }, + labelAlign: { + title: "标签排列方式", + type: "string", + $converter: '/converter/form-group-label.converter', + visible: this.labelAlignVisible, + editor: { + type: 'combo-list', + data: [{ id: 'left', name: '左侧' }, { id: 'top', name: '上侧' }], + readonly: this.labelAlignReadonly + }, + refreshPanelAfterChanged: true + }, + labelWidth: { + title: "标签宽度", + type: "string", + $converter: '/converter/form-group-label.converter', + visible: propertyData.labelAlign !== 'top' + } + }, + setPropertyRelates(changeObject, prop, paramters: any) { + if (!changeObject) { + return; + } + switch (changeObject && changeObject.propertyID) { + case 'type': { + self.changeControlType(propertyData, changeObject, componentInstance); + break; + } + case 'label': { + changeObject.needRefreshControlTree = true; + break; + } + case 'binding': { + self.changeBindingField(propertyData, changeObject, paramters); + break; + } + } + } + }; + } + + /** + * 校验控件是否支持切换类型 + * @param control 控件 + */ + private checkCanChangeControlType(propertyData: any, viewModelId: string): boolean { + // 没有绑定信息的控件 + if (!propertyData.binding) { + return false; + } + + if (propertyData.binding.type === 'Variable') { + this.bindingVarible = this.formSchemaUtils.getVariableById(propertyData.binding.field); + // vm中已移除的变量 + if (!this.bindingVarible) { + return false; + } + } else { + // schema中已移除的字段 或者绑定复杂类型的字段 + if (!this.designViewModelField || this.designViewModelField.$type !== FormSchemaEntityField$Type.SimpleField) { + return false; + } + } + return true; + + } + /** + * 获取可选的编辑器类型 + */ + private getAvailableEditorType(propertyData: any) { + const canChangeControlType = this.checkCanChangeControlType(propertyData, this.viewModelId); + if (!canChangeControlType) { + return { + canChangeControlType: false, + editorTypeList: [{ + key: propertyData.editor.type, + value: DgControl[propertyData.editor.type]?.name || propertyData.editor.type + }] + }; + } + + let editorTypeList: any = []; + if (this.designViewModelField && this.designViewModelField.$type === FormSchemaEntityField$Type.SimpleField) { + // 绑定字段 + editorTypeList = SchemaDOMMapping.getEditorTypesByMDataType(this.designViewModelField.type.name); + } else if (this.bindingVarible) { + // 绑定变量 + editorTypeList = SchemaDOMMapping.getEditorTypesByMDataType(this.bindingVarible.type); + } + return { canChangeControlType, editorTypeList }; + } + + public changeBindingField(propertyData: any, changeObject: FormPropertyChangeObject, paramters?: any): any { + // 刷新实体树 + // changeObject.needRefreshEntityTree = true; + } + + + public getAppearanceProperties(propertyData, componentInstance): any { + + const self = this; + return { + title: "外观", + description: "Appearance", + properties: { + class: { + title: "class样式", + type: "string", + description: "组件的CSS样式", + $converter: "/converter/appearance.converter" + }, + style: { + title: "style样式", + type: "string", + description: "组件的内联样式", + $converter: "/converter/appearance.converter" + } + + }, + setPropertyRelates(changeObject, prop) { + if (!changeObject) { + return; + } + switch (changeObject && changeObject.propertyID) { + case 'class': + self.updateUnifiedLayoutAfterControlChanged(changeObject.propertyValue, propertyData.id, this.componentId); + // canvasChanged.value++; + break; + case 'style': { + // canvasChanged.value++; + break; + } + } + + } + }; + }; + + public getEditorProperties(propertyData): any { + return this.getComponentConfig(propertyData); + } + + + /** + * 卡片控件：切换控件类型后事件 + * @param propertyData 控件DOM属性 + * @param newControlType 新控件类型 + */ + private changeControlType(propertyData, changeObject, componentInstance: DesignerComponentInstance | null) { + const newControlType = changeObject.propertyValue; + + // 1、定位控件父容器 + const parentContainer = componentInstance && componentInstance.parent && componentInstance.parent['schema']; + if (!parentContainer) { + return; + } + + const index = parentContainer.contents.findIndex(c => c.id === propertyData.id); + if (index === -1) { + return; + } + const oldControl = parentContainer.contents[index]; + + let newControl; + + if (this.designViewModelField) { + // 2、记录绑定字段viewModel的变更 + const viewModel = this.formSchemaUtils.getViewModelById(this.viewModelId); + const viewModelField = viewModel.fields.find(field => field.id === this.designViewModelField.id); + const viewModelFieldSchema = viewModelField.fieldSchema || {}; + if (!viewModelFieldSchema.editor) { viewModelFieldSchema.editor = {}; } + viewModelFieldSchema.editor.$type = newControlType; + + const dgViewModel = this.designViewModelUtils.getDgViewModel(this.viewModelId); + dgViewModel.changeField(this.designViewModelField.id, viewModelFieldSchema, false); + + // 3、创建新控件 + newControl = this.controlCreatorUtils.setFormFieldProperty(this.designViewModelField, newControlType); + } + if (!newControl) { + newControl = this.controlCreatorUtils.createFormGroupWithoutField(newControlType); + } + // 4、保留原id样式等属性 + Object.assign(newControl, { + id: oldControl.id, + appearance: oldControl.appearance, + size: oldControl.size, + label: oldControl.label, + binding: oldControl.binding + }); + // 解决undefined下默认值问题 + if (Object.prototype.hasOwnProperty.call(oldControl, 'visible')) { + Object.assign(newControl, { visible: oldControl.visible }); + } + if (oldControl.editor) { + ['readonly', 'required', 'placeholder'].map((item) => { + if (Object.prototype.hasOwnProperty.call(oldControl.editor, item)) { + newControl.editor[item] = oldControl.editor[item]; + } + }); + } + // 5、替换控件 + parentContainer.contents.splice(index, 1); + parentContainer.contents.splice(index, 0, newControl); + componentInstance.schema = Object.assign(oldControl, newControl); + // 重组VM + // this.designViewModelUtils.assembleDesignViewModel(); + Object.assign(propertyData, newControl); + + // 6、暂时移除旧控件的选中样式（后续考虑更好的方式） + Array.from(document.getElementsByClassName('dgComponentSelected') as HTMLCollectionOf).forEach( + (element: HTMLElement) => element.classList.remove('dgComponentSelected') + ); + + Array.from(document.getElementsByClassName('dgComponentFocused') as HTMLCollectionOf).forEach( + (element: HTMLElement) => element.classList.remove('dgComponentFocused') + ); + // 7、触发刷新 + // canvasChanged.value++; + + } + + public getComponentConfig(propertyData, info = {}, properties = {}, setPropertyRelates?: (changeObject, propertyData, parameters) => any) { + const editorBasic = Object.assign({ + description: "编辑器", + title: "编辑器", + type: "input-group", + $converter: "/converter/property-editor.converter" + }, info); + + const readonlyEditor = this.getPropertyEditorParams(propertyData, [], 'readonly'); + const requiredEditor = this.getPropertyEditorParams(propertyData, [], 'required'); + const editorProperties = { + readonly: { + description: "", + title: "只读", + editor: readonlyEditor + }, + required: { + description: "", + title: "必填", + type: "boolean", + editor: requiredEditor + }, + placeholder: { + description: "当控件没有值时在输入框中显示的文本", + title: "提示文本", + type: "string" + } + }; + for (const key in properties) { + // 合并属性，保留原属性值 + editorProperties[key] = Object.assign(editorProperties[key] || {}, properties[key]); + } + const self = this; + + return { + ...editorBasic, properties: { ...editorProperties }, setPropertyRelates(changeObject, parameters: any) { + if (!changeObject) { + return; + } + switch (changeObject.propertyID) { + case 'readonly': + case 'required': + self.afterMutilEditorChanged(propertyData, changeObject); + break; + } + if (setPropertyRelates) { + setPropertyRelates(changeObject, propertyData, parameters); + } + } + }; + + } + + + /** + * 修改某一输入控件的样式后更新Form的统一布局配置 + * @param controlClass 控件样式 + * @param controlId 控件Id + * @param componentId 控件所在组件id + */ + private updateUnifiedLayoutAfterControlChanged(controlClass: string, controlId: string, componentId: string) { + const controlClassArray = controlClass.split(' '); + + let colClass = controlClassArray.find(item => /^col-([1-9]|10|11|12)$/.test(item)); + let colMDClass = controlClassArray.find(item => /^col-md-([1-9]|10|11|12)$/.test(item)); + let colXLClass = controlClassArray.find(item => /^col-xl-([1-9]|10|11|12)$/.test(item)); + let colELClass = controlClassArray.find(item => /^col-el-([1-9]|10|11|12)$/.test(item)); + + colClass = colClass || 'col-12'; + colMDClass = colMDClass || 'col-md-' + colClass.replace('col-', ''); + colXLClass = colXLClass || 'col-xl-' + colMDClass.replace('col-md-', ''); + colELClass = colELClass || 'col-el-' + colXLClass.replace('col-xl-', ''); + + const latestControlLayoutConfig = { + id: controlId, + columnInSM: parseInt(colClass.replace('col-', ''), 10), + columnInMD: parseInt(colMDClass.replace('col-md-', ''), 10), + columnInLG: parseInt(colXLClass.replace('col-xl-', ''), 10), + columnInEL: parseInt(colELClass.replace('col-el-', ''), 10), + }; + + } + + /** + * 枚举项编辑器 + * @param propertyData + * @param valueField + * @param textField + * @returns + */ + protected getItemCollectionEditor(propertyData, valueField, textField) { + valueField = valueField || 'value'; + textField = textField || 'name'; + console.log('input-base-property--403 \n', 'propertyData:', propertyData); + return { + editor: { + columns: [ + { field: valueField, title: '值', dataType: 'string' }, + { field: textField, title: '名称', dataType: 'string' }, + { field: 'disabled', title: '禁用', dataType: 'boolean', editor: { type: 'switch' } }, + ], + type: "item-collection-editor", + valueField: valueField, + nameField: textField, + requiredFields: [valueField, textField], + uniqueFields: [valueField, textField], + readonly: this.checkEnumDataReadonly(propertyData) + } + }; + } + /** + * 判断枚举数据是否只读 + * 1、没有绑定信息或者绑定变量，可以新增、删除、修改 + * 2、绑定类型为字段，且字段为枚举字段，则不可新增、删除、修改枚举值。只能从be修改然后同步到表单上。 + * @param propertyData 下拉框控件属性值 + */ + protected checkEnumDataReadonly(propertyData: any): boolean { + // 没有绑定信息或者绑定变量 + if (!propertyData.binding || propertyData.binding.type !== 'Form') { + return false; + } + if (this.designViewModelField && this.designViewModelField.type && + this.designViewModelField.type.$type === FormSchemaEntityFieldType$Type.EnumType) { + // 低代码、零代码，枚举字段均不可以改 + return true; + } + return false; + } + /** + * 将字段值变化前事件、变化后事件追加到交互面板 + * 注意：因为绑定字段值变化后事件与下拉框的值变化事件(valueChanged)重名，所以这里将事件label都重命名下 + */ + appendFieldValueChangeEvents(propertyData: any, eventList: any[]) { + // 若绑定了字段，则需要显示字段变更前后事件 + if (propertyData.binding && propertyData.binding.type === FormBindingType.Form && propertyData.binding.field) { + const valueChangingExist = eventList.find(eventListItem => eventListItem.label === 'fieldValueChanging'); + if (!valueChangingExist) { + eventList.push( + { + label: 'fieldValueChanging', + name: '绑定字段值变化前事件' + } + ); + } + const valueChangedExist = eventList.find(eventListItem => eventListItem.label === 'fieldValueChanged'); + if (!valueChangedExist) { + eventList.push( + { + label: 'fieldValueChanged', + name: '绑定字段值变化后事件' + } + ); + } + if (this.designViewModelField) { + // 因为字段变更属性是存到VM中的，但是这里需要在控件上编辑，所以复制一份数据 + propertyData.fieldValueChanging = this.designViewModelField.valueChanging; + propertyData.fieldValueChanged = this.designViewModelField.valueChanged; + } + } else { + // 未绑定字段，则移除值变化事件 + eventList = eventList.filter(eventListItem => eventListItem.label !== 'fieldValueChanging' && eventListItem.label !== 'fieldValueChanged'); + } + } + private getControlMethodType(propertyData: any) { + if (!propertyData.binding) { + return propertyData.type; + } + switch (propertyData.binding.type) { + case FormBindingType.Form: { + return propertyData.binding.path || propertyData.type; + } + case FormBindingType.Variable: { + return propertyData.binding.fullPath || propertyData.type; + } + } + + return propertyData.type; + } + /** + * 组装输入类控件的交互面板：包含标签超链、绑定字段值变化前后事件等。 + * @param propertyData 属性值 + * @param viewModelId 视图模型id + * @param showPosition 面板展示位置 + * @param customEvent 输入控件特有的事件配置 + */ + public getEventPropertyConfig(propertyData: any, showPosition = 'card', customEventList?: { label: string, name: string }[], setPropertyRelates?: (changeObject, data, parameters) => void) { + const self = this; + // 静态事件 + let eventList = [] as any; + if (customEventList) { + eventList = eventList.concat(customEventList); + } + // 追加值变化 + this.appendFieldValueChangeEvents(propertyData, eventList); + + const initialData = self.eventsEditorUtils['formProperties'](propertyData, self.viewModelId, eventList); + const properties = {}; + properties[self.viewModelId] = { + type: 'events-editor', + editor: { + initialData + } + }; + const eventsEditorConfig = { + title: '事件', + hideTitle: true, + properties, + tabId: 'commands', + tabName: '交互', + setPropertyRelates(changeObject: FormPropertyChangeObject, data: any) { + const parameters = changeObject.propertyValue; + delete propertyData[self.viewModelId]; + if (parameters) { + parameters.setPropertyRelates = this.setPropertyRelates; // 添加自定义方法后，调用此回调方法，用于处理联动属性 + parameters.controlInfo = { type: self.getControlMethodType(propertyData), name: propertyData.title }; // 暂存控件信息，用于自动创建新方法的方法编号和名称 + + self.eventsEditorUtils.saveRelatedParameters(propertyData, self.viewModelId, parameters['events'], parameters); + } + + if (setPropertyRelates) { + setPropertyRelates(changeObject, data, parameters); + } + + // 同步视图模型值变化事件 + const designVM = self.designViewModelUtils.getDgViewModel(self.viewModelId); + if (designVM && self.designViewModelField) { + designVM.changeField(self.designViewModelField.id, { valueChanging: propertyData.fieldValueChanging, valueChanged: propertyData.fieldValueChanged }); + } + } + }; + + return eventsEditorConfig; + } + + getExpressionConfig(propertyData: any, type: 'Field' | 'Button' | 'Container', + expressionTypes: string[] = ['compute', 'dependency', 'validate'], + associationCallBack?: (rule: Record) => void + ) { + return new ExpressionProperty(this.formSchemaUtils).getExpressionConfig( + propertyData, type, expressionTypes, associationCallBack); + } + + getFieldType(propertyData: any) { + let fieldType = ''; + if (propertyData?.binding?.type === 'Form') { + const fieldInfo = this.schemaService.getFieldByIDAndVMID(propertyData.binding.field, this.viewModelId); + if (fieldInfo?.schemaField?.type) { + fieldType = fieldInfo.schemaField.type.$type; + } + } + return fieldType; + } + +} diff --git a/packages/charts-vue/components/charts-common/src/props/schema-dom-mapping.ts b/packages/charts-vue/components/charts-common/src/props/schema-dom-mapping.ts new file mode 100644 index 00000000000..71f7291318c --- /dev/null +++ b/packages/charts-vue/components/charts-common/src/props/schema-dom-mapping.ts @@ -0,0 +1,81 @@ + +import { DgControl } from "./dg-control"; + +export class SchemaDOMMapping { + + /** + * <字段类型,可配置的控件类型列表>的映射 + */ + static fieldControlTypeMapping = { + String: [ + { key: DgControl['input-group'].type, value: DgControl['input-group'].name }, + { key: DgControl['textarea'].type, value: DgControl['textarea'].name }, + { key: DgControl['lookup'].type, value: DgControl['lookup'].name }, + { key: DgControl['date-picker'].type, value: DgControl['date-picker'].name }, + { key: DgControl['datetime-picker'].type, value: DgControl['datetime-picker'].name }, + { key: DgControl['radio-group'].type, value: DgControl['radio-group'].name }, + { key: DgControl['check-group'].type, value: DgControl['check-group'].name }, + { key: DgControl['picker'].type, value: DgControl['picker'].name }, + ], + Text: [ + { key: DgControl['textarea'].type, value: DgControl['textarea'].name }, + { key: DgControl['lookup'].type, value: DgControl['lookup'].name } + ], + Decimal: [ + { key: DgControl['number-input'].type, value: DgControl['number-input'].name } + ], + Integer: [ + { key: DgControl['number-input'].type, value: DgControl['number-input'].name } + ], + Number: [ + { key: DgControl['number-input'].type, value: DgControl['number-input'].name } + ], + BigNumber: [ + { key: DgControl['number-input'].type, value: DgControl['number-input'].name } + ], + Date: [ + { key: DgControl['date-picker'].type, value: DgControl['date-picker'].name } + ], + DateTime: [ + { key: DgControl['date-picker'].type, value: DgControl['date-picker'].name }, + { key: DgControl['datetime-picker'].type, value: DgControl['datetime-picker'].name } + ], + Boolean: [ + { key: DgControl['switch'].type, value: DgControl['switch'].name }, + { key: DgControl['check-box'].type, value: DgControl['check-box'].name }, + ], + Enum: [ + { key: DgControl['picker'].type, value: DgControl['picker'].name }, + { key: DgControl['radio-group'].type, value: DgControl['radio-group'].name }, + ], + Object: [ + { key: DgControl['lookup'].type, value: DgControl['lookup'].name }, + { key: DgControl['picker'].type, value: DgControl['picker'].name }, + { key: DgControl['radio-group'].type, value: DgControl['radio-group'].name }, + ] + }; + /** + * 根据绑定字段类型获取可用的输入类控件 + */ + static getEditorTypesByMDataType(fieldType: string) { + const foundTypes = SchemaDOMMapping.fieldControlTypeMapping[fieldType]; + return foundTypes ? foundTypes : [{ key: "", value: "" }]; + + } + /** + * 获取所有输入类控件 + */ + static getAllInputTypes() { + const allControlTypes: Array<{ key: string, value: string }> = []; + for (const fieldType in SchemaDOMMapping.fieldControlTypeMapping) { + SchemaDOMMapping.fieldControlTypeMapping[fieldType].forEach(control => { + if (!allControlTypes.find(controlKeyValue => controlKeyValue.key === control.key && controlKeyValue.value === control.value)) { + allControlTypes.push({ key: control.key, value: control.value }); + } + }); + } + + return allControlTypes; + } + +} diff --git a/packages/charts-vue/components/charts-common/src/props/toolbar-item.property.ts b/packages/charts-vue/components/charts-common/src/props/toolbar-item.property.ts new file mode 100644 index 00000000000..16d97a2ee1c --- /dev/null +++ b/packages/charts-vue/components/charts-common/src/props/toolbar-item.property.ts @@ -0,0 +1,182 @@ +import { BaseControlProperty } from "./base-property"; + +export interface ToolbarItemPropOptions { + showAppearance?: boolean; + showButtonType?: boolean; + showIcon?: boolean; + showRound?: boolean; + showPlain?: boolean; + showVariant?: boolean; +} + +export class ToolbarItemProperty extends BaseControlProperty { + + private options: ToolbarItemPropOptions | undefined; + + constructor(componentId: string, designerHostService: any) { + super(componentId, designerHostService); + } + + public getPropertyConfig(propertyData: any, options?: ToolbarItemPropOptions) { + this.options = options; + // 基本信息 + this.propertyConfig.categories['basic'] = this.getBasicPropConfig(propertyData); + // 外观 + if (this.shouldShowAppearanceConfig()) { + this.propertyConfig.categories['appearance'] = this.getAppearanceConfig(propertyData); + } + // 行为 + this.propertyConfig.categories['behavior'] = this.getBehaviorConfig(propertyData); + // 事件 + this.getEventPropConfig(propertyData); + + return this.propertyConfig; + } + + private shouldShowAppearanceConfig(): boolean { + return !!this.options?.showAppearance; + } + + protected getAppearanceConfig(propertyData: any) { + const buttonTypeData = [ + { text: '主要按钮', value: 'primary' }, + { text: '危险按钮', value: 'danger' }, + { text: '警告按钮', value: 'warning' }, + { text: '成功按钮', value: 'success' }, + { text: '次要按钮', value: 'secondary' }, + { text: '提示按钮', value: 'info' }, + ]; + const additionalProperties: any = {}; + if (this.options?.showButtonType) { + additionalProperties.displayType = { + description: '按钮的主题风格', + title: '按钮类型', + editor: { + type: 'combo-tree', + textField: 'text', + valueField: 'value', + data: buttonTypeData, + }, + }; + } + if (this.options?.showIcon) { + additionalProperties.icon = { + description: '显示在按钮文本左侧的图标', + title: '按钮图标', + type: 'string', + }; + } + if (this.options?.showRound) { + additionalProperties.round = { + description: '是否为按钮启用圆角', + title: '是否圆角', + type: 'boolean', + }; + } + if (this.options?.showPlain) { + additionalProperties.plain = { + description: '是否朴素按钮', + title: '是否朴素按钮', + type: 'boolean', + }; + } + if (this.options?.showVariant) { + additionalProperties.variant = { + description: '按钮的变体', + title: '变体', + editor: { + type: 'combo-tree', + textField: 'text', + valueField: 'value', + data: [ + { text: '无', value: 'default' }, + { text: '图标在上', value: 'bare-vertical' }, + ], + }, + }; + } + return super.getAppearanceConfig(propertyData, additionalProperties); + } + + getBasicPropConfig(propertyData: any): any { + return { + description: 'Basic Information', + title: '基本信息', + properties: { + id: { + description: '工具栏按钮的标识', + title: '标识', + type: 'string', + readonly: true + }, + text: { + description: '工具栏按钮的标签', + title: '标签', + type: 'string', + readonly: false + } + } + }; + } + + public getBehaviorConfig(propertyData: any) { + const visibleProperty = this.getVisibleProperty(propertyData); + const self = this; + return { + description: "基本信息", + title: "行为", + properties: { + ...visibleProperty, + disabled: { + title: "是否禁用", + type: "boolean", + } + }, + setPropertyRelates(changeObject: any, data: any) { + if (!changeObject) { + return; + } + switch (changeObject.propertyID) { + case 'visible': + self.afterMutilEditorChanged(propertyData, changeObject); + break; + } + } + }; + } + + private getEventPropConfig(propertyData: any) { + const events = [ + { + label: "onClick", + name: "点击事件", + } + ]; + const self = this; + const initialData = self.eventsEditorUtils['formProperties'](propertyData, self.viewModelId, events); + const properties = {}; + properties[self.viewModelId] = { + type: 'events-editor', + editor: { + initialData + } + }; + this.propertyConfig.categories['eventsEditor'] = { + title: '事件', + hideTitle: true, + properties, + refreshPanelAfterChanged: true, + tabId: 'commands', + tabName: '交互', + setPropertyRelates(changeObject: any, data: any) { + const parameters = changeObject.propertyValue; + delete propertyData[self.viewModelId]; + if (parameters) { + parameters.setPropertyRelates = this.setPropertyRelates; + self.eventsEditorUtils.saveRelatedParameters(propertyData, self.viewModelId, parameters['events'], parameters); + } + } + }; + } + +} diff --git a/packages/charts-vue/components/charts-common/src/props/use-property-editor.ts b/packages/charts-vue/components/charts-common/src/props/use-property-editor.ts new file mode 100644 index 00000000000..edc1e1d5101 --- /dev/null +++ b/packages/charts-vue/components/charts-common/src/props/use-property-editor.ts @@ -0,0 +1,73 @@ +import { DesignerHostService } from "../types"; + +/** + * PropertyEditor对外提供的接口 + * @param designerHostService + * @returns + */ +export function usePropertyEditor(designerHostService: DesignerHostService): any { + const { formSchemaUtils, formStateMachineUtils } = designerHostService; + + /** + * 把变量视图模型的变量转化为PropertyEditor的变量格式 + * @param variable + * @returns + */ + function convertToEditorVariable(variable: any, pathPrefix: string = ''): any { + return { + path: pathPrefix + variable.code, + field: variable.id, + fullPath: variable.code + }; + } + + /** + * 获取视图模型上的变量 + * @param viewModelId + * @returns + */ + function getVariablesByViewModelId(viewModelId: string, pathPrefix: string = ''): any[] { + const viewModel = formSchemaUtils.getViewModelById(viewModelId); + return viewModel.states.map(state => convertToEditorVariable(state, pathPrefix)); + } + + /** + * 获取PropertyEditor需要的变量数据 + */ + function getVariables(viewModelId: string): any[] { + const rootViewModelId = formSchemaUtils.getRootViewModelId(); + // 1、当前组件的组件变量 + const currentViewModelVariables = getVariablesByViewModelId(viewModelId); + if (viewModelId === rootViewModelId) { + return currentViewModelVariables; + } + + // 2、根组件的组件变量 + const rootViewModelVariables = getVariablesByViewModelId(rootViewModelId, 'root-component.'); + return [...currentViewModelVariables, ...rootViewModelVariables]; + } + + /** + * 获取控件名称 + * @param propertyData + * @returns + */ + function getControlName(propertyData: any): string { + const controlName = propertyData.binding && propertyData.binding.path || propertyData.id || ''; + return controlName; + } + + /** + * 获取PropertyEditor需要的状态机数据 + */ + function getStateMachines(viewModelId:string): any[] { + const renderStates = formStateMachineUtils && formStateMachineUtils.getRenderStates(); + if(renderStates){ + const viewModel = formSchemaUtils.getViewModelById(viewModelId); + return renderStates.filter(renderState => renderState.stateMachineId === viewModel.stateMachine); + } + return renderStates || []; + } + + return { getVariables, getControlName, getStateMachines }; +} diff --git a/packages/charts-vue/components/charts-common/src/types/designer-component.ts b/packages/charts-vue/components/charts-common/src/types/designer-component.ts new file mode 100644 index 00000000000..f30ca3c44d4 --- /dev/null +++ b/packages/charts-vue/components/charts-common/src/types/designer-component.ts @@ -0,0 +1,107 @@ +/* eslint-disable no-use-before-define */ +import { Ref, SetupContext } from "vue"; +import { DesignerHostService, DesignerHTMLElement, DraggingResolveContext } from "./designer-rule"; + +export interface ComponentSchema { + + /** 设计时使用 */ + key?: string; + + id: string; + + type: string; + + contents?: ComponentSchema[]; + + // 其他属性 + [propName: string]: any; +} + +export interface DesignerComponentInstance { + + canAdd?: boolean; + + canMove: boolean; + + canSelectParent: boolean; + + canDelete: boolean; + + canNested: boolean; + + contents?: ComponentSchema[]; + + elementRef: Ref; + + parent: Ref | undefined; + + schema: ComponentSchema; + + styles?: string; + + designerClass?: string; + + canAccepts: (draggingContext: DraggingResolveContext) => boolean; + + getBelongedComponentInstance: (componentInstance: Ref) => DesignerComponentInstance | null; + + /** 获取可拖拽的上层容器 */ + getDraggableDesignItemElement: (context: DesignerItemContext) => Ref | null; + + getDraggingDisplayText: () => string; + + getDragScopeElement: () => HTMLElement | undefined; + + /** 移动内部控件后事件：在可视化设计器中，容器接收控件后事件 */ + onAcceptMovedChildElement: (element: DesignerHTMLElement, soureElement?: DesignerHTMLElement) => void; + + onChildElementMovedOut: (element: HTMLElement) => void; + + addNewChildComponentSchema: (resolveContext: DraggingResolveContext, designerHostService?: DesignerHostService) => ComponentSchema; + + /** 组件在拖拽时是否需要将所属的Component一起拖拽，用于form、data-grid等控件的拖拽 */ + triggerBelongedComponentToMoveWhenMoved?: Ref; + + /** 组件在被移除时是否需要将所属的Component一起移除，用于form、data-grid等控件的拖拽 */ + triggerBelongedComponentToDeleteWhenDeleted?: Ref; + + /** 获取属性配置 */ + getPropConfig: (...args) => any; + + /** 控件所属Component的标识*/ + belongedComponentId?: string; + + /** 控件删除后事件 */ + onRemoveComponent: () => void; + + /** 获取控件自定义操作按钮 */ + getCustomButtons?: () => DesignerComponentButton[]; + + /** 控件属性变更后事件 */ + onPropertyChanged?: (event: any) => void; +} + +export interface DesignerItemContext { + + designerItemElementRef: Ref; + + componentInstance: Ref; + + schema: ComponentSchema; + + parent?: DesignerItemContext; + + setupContext?: SetupContext; + +} + +/** + * 控件自定义操作按钮 + */ +export interface DesignerComponentButton { + id: string; + title: string; + icon: string; + class?: string; + onClick: (payload: MouseEvent) => void; +} diff --git a/packages/charts-vue/components/charts-common/src/types/designer-rule.ts b/packages/charts-vue/components/charts-common/src/types/designer-rule.ts new file mode 100644 index 00000000000..6375578d0fb --- /dev/null +++ b/packages/charts-vue/components/charts-common/src/types/designer-rule.ts @@ -0,0 +1,150 @@ +import { Ref } from "vue"; +import { ComponentSchema, DesignerComponentButton, DesignerComponentInstance, DesignerItemContext } from "./designer-component"; +import { DesignFormVariable, DesignViewModelField, FormSchemaEntity, FormSchemaEntityField } from "./entity-schema"; + +export interface DesignerHTMLElement extends HTMLElement { + /** 记录各子元素对应的控件schema json的集合，用于container类dom节点 */ + contents?: ComponentSchema[]; + + /** 记录element对应的component实例，用于单个component节点 */ + componentInstance: Ref; + + schema: ComponentSchema; +} + +export interface DesignerHostService { + eventsEditorUtils: any; + formSchemaUtils: any; + formMetadataConverter: any; + designViewModelUtils: any; + controlCreatorUtils: any; + metadataService?: any; + formStateMachineUtils: any; + uiProviderService?: any; + [key: string]: any; +} +/** + * 绑定上下文 + */ +export interface ComponentBindingSourceContext { + /** 控件绑定类型：字段|实体 */ + bindingType: 'field' | 'entity'; + /** 控件绑定的实体schema字段 */ + entityFieldNode?: FormSchemaEntityField; + /** 控件绑定的实体schema字段若是关联带出字段，此属性记录关联字段所属的根字段 */ + entityRootFieldNode?: FormSchemaEntityField; + /** 实体schema字段对应的DesignViewModel结构 */ + designViewModelField?: DesignViewModelField; + /** 变量字段节点 */ + variableFieldNode?: DesignFormVariable; + /** 要绑定的实体 */ + bindingEntity?: FormSchemaEntity; + /** 要绑定的字段集合 */ + bindingEntityFields?: FormSchemaEntityField[]; + /** 实体在视图模型中的绑定信息 */ + bindTo?: string +} + +/** + * 拖拽上下文 + */ +export interface DraggingResolveContext { + + /** 拖拽的源元素 */ + sourceElement: DesignerHTMLElement; + /** 拖拽的源元素父容器 */ + sourceContainer: DesignerHTMLElement; + /** 拖拽的目标容器 */ + targetContainer: DesignerHTMLElement; + + /** 拖拽的控件类型 */ + componentType: string; + /** 拖拽的控件名称 */ + label: string; + /** 拖拽目标区域的组件实例 */ + parentComponentInstance: DesignerComponentInstance; + /** 拖拽位置在目标区域的索引值 */ + targetPosition?: number; + /** 拖拽控件的类别 */ + componentCategory?: string; + /** 拖拽来源:控件工具箱control / 实体树字段field / 实体树实体entity / 现有控件移动位置move */ + sourceType: string; + /** 工具箱中的控件，启用的特性 */ + componentFeature?: string; + /** 要添加的控件Schema */ + componentSchema?: any; + + /** 绑定信息 */ + bindingSourceContext?: ComponentBindingSourceContext | null; + + // [propName: string]: any; +} + +export interface UseDesignerRules { + /** + * 判断是否可以接收拖拽新增的子级控件 + */ + canAccepts(draggingContext: DraggingResolveContext): boolean; + + /** + * 判断当前容器是否是固定的上下文的中间层级 + */ + checkIsInFixedContextRules?(): boolean; + + getStyles?(): string; + + getDesignerClass?(): string; + /** + * 容器接收新创建的子控件 + */ + onResolveNewComponentSchema?: (resolveContext: DraggingResolveContext, componentSchema: ComponentSchema) => ComponentSchema; + + /** + * 移动控件后事件：在可视化设计器中，容器接收控件后调用此事件 + */ + onAcceptMovedChildElement?: (sourceElement: DesignerHTMLElement, sourceContainer: DesignerHTMLElement) => void; + + /** + * 判断是否支持移动组件 + */ + checkCanMoveComponent?(): boolean; + + /** + * 判断是否支持删除组件 + */ + checkCanDeleteComponent?(): boolean; + + /** + * 判断是否支持增加组件 + */ + checkCanAddComponent?(): boolean; + + /** + * 判断是否隐藏组件间距和线条 + */ + hideNestedPaddingInDesginerView?(): boolean; + + /** 接收控件属性信息 */ + getPropsConfig?(schema?: any, componentInstance?: any): any; + + /** + * 组件在拖拽时是否需要将所属的Component一起拖拽，用于form、data-grid等控件的拖拽 + */ + triggerBelongedComponentToMoveWhenMoved?: Ref; + /** + * 组件在被移除时是否需要将所属的Component一起移除，用于form、data-grid等控件的拖拽 + */ + triggerBelongedComponentToDeleteWhenDeleted?: Ref; + + /** 组件删除后事件 */ + onRemoveComponent?(): void; + + /** 获取控件自定义操作按钮 */ + getCustomButtons?: () => DesignerComponentButton[]; + + /** 控件属性变更后事件 */ + onPropertyChanged?: (event: any) => void; + + /** 获取可拖拽的上层容器 */ + getDraggableDesignItemElement?: (context: DesignerItemContext) => Ref | null; +} diff --git a/packages/charts-vue/components/charts-common/src/types/entity-schema.ts b/packages/charts-vue/components/charts-common/src/types/entity-schema.ts new file mode 100644 index 00000000000..30e62037ec6 --- /dev/null +++ b/packages/charts-vue/components/charts-common/src/types/entity-schema.ts @@ -0,0 +1,274 @@ +/* eslint-disable no-use-before-define */ +export interface FormSchema { + sourceUri: string; + id: string; + code: string; + name: string; + entities: FormSchemaEntity[]; + variables: FormSchemaEntityField[]; + eapiId: string; + extendProperties: { enableStdTimeFormat: boolean }; + eapiCode?: string; + eapiName?: string; + eapiNameSpace?: string; + voPath?: string; + voNameSpace?: string; +} + +/** + * 实体 + */ +export interface FormSchemaEntity { + id: string; + code: string; + name: string; + label: string; + type: FormSchemaEntityType; +} + +/** + * 字段类型枚举 + */ +export enum FormSchemaEntityField$Type { + /** + * 简单类型字段 + */ + SimpleField = "SimpleField", + /** + * 关联/UDT类型字段 + */ + ComplexField = "ComplexField" +} +/** + * 字段编辑器对象 + */ +export interface FormSchemaEntityFieldEditor { + $type: string; + [propName: string]: any; +} +export interface DesignViewModelField extends FormSchemaEntityField { + valueChanging: string; + valueChanged: string; + groupId: string; + groupName: string; + isSchemaRemoved?: boolean; + updateOn?: string; +} +/** + * 字段 + */ +export interface FormSchemaEntityField { + $type: FormSchemaEntityField$Type; + id: string; + originalId: string; + code: string; + label: string; + bindingField: string; + name: string; + defaultValue?: any; + require?: boolean; + readonly?: boolean; + type: FormSchemaEntityFieldType; + editor?: FormSchemaEntityFieldEditor; + path?: string; + bindingPath?: string; + multiLanguage?: boolean; + expression?: any; +} +/** + * 字段类型对象中的类型枚举 + */ +export enum FormSchemaEntityFieldType$Type { + /** + * 字符串 + */ + StringType = "StringType", + /** + * 备注 + */ + TextType = "TextType", + /** + * 数字（整数、浮点数） + */ + NumericType = "NumericType", + /** + * 布尔 + */ + BooleanType = "BooleanType", + /** + * 日期 + */ + DateType = "DateType", + /** + * 日期时间 + */ + DateTimeType = "DateTimeType", + /** + * 枚举 + */ + EnumType = "EnumType", + /** + * 实体类 + */ + EntityType = "EntityType", + /** + * 分级码 + */ + HierarchyType = "HierarchyType", + /** + * 对象 + */ + ObjectType = "ObjectType", + /** + * 数字（大数据） + */ + BigNumericType = "BigNumericType" +} +/** + * 字段类型中的名称 + */ +export enum FormSchemaEntityFieldTypeName { + /** + * 简单类型字段 + */ + String = "String", + /** + * 日期时间 + */ + DateTime = "DateTime", + /** + * 日期 + */ + Date = "Date", + /** + * 枚举 + */ + Enum = "Enum", + /** + * 布尔 + */ + Boolean = "Boolean", + /** + * 数字 + */ + Number = "Number", + /** + * 备注 + */ + Text = "Text", + /** + * 大数字 + */ + BigNumber = "BigNumber" + /** + * 人员 + */ +} +/** + * 枚举类型 + */ +export interface EnumData { + value: string; + name: string; +} +/** + * 实体 + */ +export interface FormSchemaEntity { + id: string; + code: string; + name: string; + label: string; + type: FormSchemaEntityType; +} +/** + * 实体类型对象 + */ +export interface FormSchemaEntityType { + $type: string; + name: string; + primary: string; + fields: FormSchemaEntityField[]; + entities?: FormSchemaEntity[]; + displayName?: string; +} +/** + * 字段类型对象 + */ +export interface FormSchemaEntityFieldType { + $type: FormSchemaEntityFieldType$Type; + name: FormSchemaEntityFieldTypeName | any; + length?: number; + precision?: number; + valueType?: FormSchemaEntityFieldType; + enumValues?: EnumData[]; + fields?: FormSchemaEntityField[]; + displayName?: string; + primary?: string; + entities?: FormSchemaEntity[]; + elementType?: GSPElementDataType; + extendProperty?: any; +} +/** + * 字段数据类型 + */ +export enum GSPElementDataType { + /** + * 文本 + */ + String = "String", + /** + * 备注 + */ + Text = "Text", + /** + * 整数 + */ + Integer = "Integer", + /** + * 浮点数 + */ + Decimal = "Decimal", + /** + * 布尔型 + */ + Boolean = "Boolean", + /** + * 日期型 + */ + Date = "Date", + /** + * 日期时间型 + */ + DateTime = "DateTime", + /** + * 二进制 + */ + Binary = "Binary" +} +/** + * dom Json ViewModel 节点中states实体 + */ +export interface FormVariable { + id: string; + code: string; + name: string; + value?: any; + type: string; + category: string; + fields?: any[]; + defaultValue?: any; +} +/** + * 表单变量 + */ +export interface DesignFormVariable extends FormVariable { + /** + * 分组ID + */ + groupId: string; + /** + * 分组名称 + */ + groupName: string; +} diff --git a/packages/charts-vue/components/charts-common/src/types/index.ts b/packages/charts-vue/components/charts-common/src/types/index.ts new file mode 100644 index 00000000000..195bea74cd3 --- /dev/null +++ b/packages/charts-vue/components/charts-common/src/types/index.ts @@ -0,0 +1,5 @@ +export * from './types'; +export * from './designer-component'; +export * from './designer-rule'; +export * from './entity-schema'; +export * from './property-config'; diff --git a/packages/charts-vue/components/charts-common/src/types/property-config.ts b/packages/charts-vue/components/charts-common/src/types/property-config.ts new file mode 100644 index 00000000000..0b525f2bea3 --- /dev/null +++ b/packages/charts-vue/components/charts-common/src/types/property-config.ts @@ -0,0 +1,266 @@ +import { Ref } from "vue"; + +export interface KeyMap { + key: any; + value: any; +} + +export type EditorType = 'button-edit' | 'check-box' | 'check-group' | 'combo-list' | 'combo-lookup' | 'combo-tree' | + 'date-picker' | 'date-range' | 'datetime-picker' | 'datetime-range' | 'events-editor' | 'month-picker' | 'month-range' | + 'year-picker' | 'year-range' | 'input-group' | 'lookup' | 'number-range' | 'number-spinner' | 'radio-group' | 'text' | + 'response-layout-editor-setting' | 'switch' | 'grid-field-editor' | 'field-selector' | 'schema-selector' | 'mapping-editor' | + 'textarea' | 'response-form-layout-setting'|'binding-selector' | 'query-solution-config' | 'solution-preset' | 'item-collection-editor'; + +export interface EditorConfig { + /** 编辑器类型 */ + type: EditorType; + /** 自定义样式 */ + customClass?: string; + /** 禁用 */ + disabled?: boolean; + /** 只读 */ + readonly?: boolean; + /** 必填 */ + required?: boolean; + /** 提示文本 */ + placeholder?: string; + /** 其他属性 */ + [key: string]: any; +} + +/** 属性实体 */ +export interface PropertyEntity { + /** + * 属性ID + */ + propertyID: string; + + /** + * 属性显示的名称 + */ + propertyName?: string; + + /** + * 属性的类型 + */ + propertyType: any; + + /** + * 属性描述 + */ + description?: string; + + /** + * 属性的默认值 + */ + defaultValue?: any; + + propertyValue?: Ref; + + /** + * 是否只读，默认false + */ + readonly?: () => boolean; + + /** + * 是否可见，默认true + */ + visible: boolean | (() => boolean); + + /** + * 最小值 + */ + min?: any; + + /** + * 最大值 + */ + max?: any; + + /** + * 数字类型属性的小数位数 + */ + decimals?: number; + + /** + * 是否大数字 + */ + isBigNumber?: boolean; + + /** + * 属性改变后是否需要刷新整个面板：用于属性有联动修改的场景 + */ + refreshPanelAfterChanged?: boolean; + + /** + * 下拉框的枚举值 + */ + iterator?: KeyMap[]; + + /** + * 下拉多选类型：属性值的类型：string(多值以逗号分隔)/array(多值组装成数组) + */ + multiSelectDataType?: string; + + /** + * 文本控件限制输入的字符，支持字符和正则表达式 + */ + notAllowedChars?: any[]; + + /** + * 级联属性配置 + */ + cascadeConfig?: PropertyEntity[]; + + /** + * 级联属性是否默认收起 + */ + isExpand?: boolean; + + /** + * 是否隐藏级联属性的头部 + */ + hideCascadeTitle?: boolean; + + /** + * 模态框属性自定义编辑器参数 + */ + editorParams?: any; + + /** 模态框属性是否展示清除图标 */ + showClearButton?: boolean; + + /** 点击清除按钮后的方法，参数为清除前的属性值 */ + afterClickClearButton?(value: any): void; + + /** 点击清除按钮时是否需要弹窗确认 */ + showQuestionBeforeClear?: boolean; + + /** 点击清除按钮时弹窗确认的文案 */ + questionMessage?: string; + + editor?: EditorConfig; +} + +export interface ElementPropertyConfig { + /** + * 分类ID + */ + categoryId: string; + + /** + * 分类显示的名称 + */ + categoryName: string; + + /** + * 分类是否隐藏，默认false + */ + hide?: boolean; + + /** + * 是否隐藏分类标题 + */ + hideTitle?: boolean; + + /** + * 分类下的属性配置 + */ + properties: PropertyEntity[]; + + /** + * 是否启用级联特性，默认false + */ + enableCascade?: boolean; + + /** + * 属性值：分类启用级联特性时必填 + */ + propertyData?: any; + + /** + * 父级属性ID：分类启用级联特性时必填 + */ + parentPropertyID?: string; + + /** + * 属性关联关系，用于属性变更后修改其他属性配置或属性值 + */ + setPropertyRelates?: (changeObject: any, propertyData: any, parameters?: any) => void; + + /** + * 分类以标签页展示时，标签页的ID。若只需平铺展示，则不需要传入。 + */ + tabId?: string; + + /** + * 分类以标签页展示时，标签页的名称。若只需平铺展示，则不需要传入。 + */ + tabName?: string; + + status?: string; +} + +/** + * 属性变更集 + */ +export interface PropertyChangeObject { + /** + * 属性ID + */ + propertyID: string; + + /** + * 变更后的属性值 + */ + propertyValue: any; + + /** + * 属性所在分类ID + */ + categoryId?: string; + + /** + * 级联属性的父路径，以.分隔 + */ + propertyPath?: string; + + /** + * 级联属性的父属性ID + */ + parentPropertyID?: string; + +}; +/** + * 属性变更实体类 + */ +export interface FormPropertyChangeObject extends PropertyChangeObject { + + /** 属性变更后是否需要整体刷新表单 */ + needRefreshForm?: boolean; + + /** 属性变更后需要局部刷新的组件id */ + needRefreshedComponentId?: string; + + /** 是否需要刷新控件树 */ + needRefreshControlTree?: boolean; + + /** 是否需要刷新控件树 */ + needRefreshEntityTree?: boolean; + + /** 关联变更的属性集合，用于更新表单DOM属性 */ + relateChangeProps?: Array<{ + propertyID: string, + propertyValue: any + }>; + + /** 强关联的属性id：在当前属性变更后，页面自动定位到强关联的属性 */ + autoLocatedPropertyId?: string; +} + + +export enum FormBindingType { + Form = "Form", + Variable = "Variable" +} + diff --git a/packages/charts-vue/components/charts-common/src/types/types.ts b/packages/charts-vue/components/charts-common/src/types/types.ts new file mode 100644 index 00000000000..17190011729 --- /dev/null +++ b/packages/charts-vue/components/charts-common/src/types/types.ts @@ -0,0 +1,139 @@ +import { ComputedRef, Ref } from "vue"; +import { EffectFunction, SchemaResolverFunction } from "@farris/charts-vue/components/dynamic-resolver/src/types"; + +export interface TextBoxProps { + + customClass: string; + + disabled: boolean; + + editable: boolean; + + enableClear: boolean; + + enableTitle: boolean; + + forcePlaceholder: boolean; + + modelValue: string; + + placeholder: string; + + readonly: boolean; + + textAlign: string; + + showBorder: boolean; + + updateOn: 'blur' | 'change'; +} + +export interface UseClear { + + clearButtonClass: ComputedRef>; + + clearButtonStyle: ComputedRef>; + + hasShownClearButton: Ref; + + onClearValue: ($event: MouseEvent) => void; + + onMouseEnter: ($event: MouseEvent) => void; + + onMouseLeave: ($event: MouseEvent) => void; + + shouldShowClearButton: ComputedRef; +} + +export interface UseTextBox { + + changeTextBoxValue: (newValue: string, shouldEmitChangeEvent: boolean) => void; + + disabled?: Ref; + + displayText?: Ref; + + editable?: Ref; + + hasFocused?: ComputedRef; + + inputGroupClass: ComputedRef>; + + inputType: Ref; + + isEmpty: ComputedRef; + + modelValue?: Ref; + + readonly?: ComputedRef; + + onBlur?: (payload: FocusEvent) => boolean; + + onClick?: (payload: MouseEvent) => void; + + onFocus?: (payload: FocusEvent) => void; + + onInput?: (payload: Event) => void; + + onKeydown?: (payload: KeyboardEvent) => void; + + onKeyup?: (payload: KeyboardEvent) => void; + + onMousedown?: (payload: MouseEvent) => void; + + onTextBoxValueChange?: (payload: Event) => void; + + placeholder: ComputedRef; + + textBoxClass: ComputedRef>; + + textBoxTitle: ComputedRef; + + inputGroupStyle: ComputedRef; +} + +export interface UseDateFormat { + formatTo: (date: string | Date, format: string) => string; +} +export type NumberType = string | number; +export interface NumberOption { + prefix?: string; + suffix?: string; + decimalSeparator?: string; + groupSeparator?: string; + [key: string]: any; +} +export interface UseNumberFormat { + formatTo: (value: NumberType, opts: any) => string; + removeFormat: (value: NumberType | null | undefined, opts: any) => string; + convertCurrency: (money: string) => string; + toFixed: (value: string, precision: number) => string; + toNumber: (value: string) => number; + greaterThan: (firstValue: NumberType, secondValue: NumberType) => boolean; + lessThan: (firstValue: NumberType, secondValue: NumberType) => boolean; + equal: (firstValue: NumberType, secondValue: NumberType) => boolean; + minus: (firstValue: NumberType, secondValue: NumberType) => string; + multiplied: (firstValue: NumberType, secondValue: NumberType) => string; + plus: (firstValue: NumberType, secondValue: NumberType) => string; + average: (total: NumberType, len: number) => string; + sum: (numberArray: NumberType[]) => string; + min: (firstValue: Array | NumberType, secondValue: NumberType | null) => string; + max: (firstValue: Array | NumberType, secondValue: NumberType | null) => string; +} + +export type TimeAgoDate = Date | string | number; +export type TimeAgoOptions = { + // 可能后期有其他属性 + /** 相对的日期 */ + readonly relativeDate?: TimeAgoDate; +}; +export interface UseTimeAgoFormat { + formatTo(date: TimeAgoDate, opts?: TimeAgoOptions): string +} + +export interface RegisterContext { + schemaMap: Record; + schemaResolverMap: Record; + propertyConfigSchemaMap: Record; + propertyEffectMap: Record; +} diff --git a/packages/charts-vue/components/charts-common/src/utils/index.ts b/packages/charts-vue/components/charts-common/src/utils/index.ts new file mode 100644 index 00000000000..0954f8cc6fc --- /dev/null +++ b/packages/charts-vue/components/charts-common/src/utils/index.ts @@ -0,0 +1,15 @@ +export * from './src/dom/event'; +export * from './src/common'; +export * from './src/hook'; +export * from './src/number'; +export * from './src/resove-asset'; +export * from './src/throttle'; +export * from './src/transition'; +export * from './src/type'; +export * from './src/date'; +export * from './src/string'; +export * from './src/use-appearance'; +export * from './src/query-filter'; +export * from './src/with-install'; +export * from './src/with-register'; +export * from './src/with-register-designer'; diff --git a/packages/charts-vue/components/charts-common/src/utils/src/common.ts b/packages/charts-vue/components/charts-common/src/utils/src/common.ts new file mode 100644 index 00000000000..d258ec7627a --- /dev/null +++ b/packages/charts-vue/components/charts-common/src/utils/src/common.ts @@ -0,0 +1,99 @@ +import { isDef, isNumeric, isObject } from './type'; + +export function noop() { } + +export const omitProperty = >(obj: T, key: keyof T): Omit => { + const { [key]: omitted, ...rest } = obj; + return rest as Omit; +}; + +export function addUnit(value: string | number) { + if (!isDef(value)) { + return undefined; + } + value = String(value); + return isNumeric(value) ? `${value}px` : value; +} + +export const escapeHtml = (str: string) => { + if (str === null || str === undefined || str === '') { + return ''; + } + return str + .replace(/&/g, '&') + .replace(//g, '>') + .replace(/"/g, '"') + .replace(/'/g, ''') + .replace(/\//g, '/'); +}; + +export const unescapeHtml = (str: string) => { + if (str === null || str === undefined || str === '') { + return ''; + } + return str + .replace(/&/g, '&') + .replace(/</g, '<') + .replace(/>/g, '>') + .replace(/"/g, '"') + .replace(/'/g, "'") + .replace(///g, '/'); +}; + +export const getValue = (field: string, data: any, safe = false) => { + if (!data) { + return ''; + } + let resultVal = ''; + if (field.indexOf('.') === -1) { + resultVal = data[field]; + } else { + resultVal = field.split('.').reduce((obj, key) => { + if (obj) { + return obj[key]; + } + return null; + }, data); + } + + if (safe) { + return escapeHtml(resultVal); + } + return resultVal; +}; + +export const setValue = (obj: Record, field: string, val: any) => { + if(!obj || !field){ + return; + } + if (field.indexOf('.') > 0) { + const fieldMap = field.split('.'); + const target = fieldMap.slice(0, -1).reduce((record, fieldItem) => { + if(!isObject(record[fieldItem])) { + record[fieldItem] = {}; + } + return record[fieldItem]; + }, obj); + + if (target) { + const targetField = fieldMap.pop(); + if (targetField) { + target[targetField] = val; + } + } + } else { + obj[field] = val; + } +}; +export function extractProperties( + obj: T, + props: K[] +): Pick { + return props.reduce((result, prop) => { + if (prop in obj) { + result[prop] = obj[prop]; + } + return result; + }, {} as Pick); +} diff --git a/packages/charts-vue/components/charts-common/src/utils/src/date.ts b/packages/charts-vue/components/charts-common/src/utils/src/date.ts new file mode 100644 index 00000000000..14fbaec4b97 --- /dev/null +++ b/packages/charts-vue/components/charts-common/src/utils/src/date.ts @@ -0,0 +1,134 @@ +import { isArray, isString } from './type'; + +export const getDateRecord = (target: Date) => { + const year = target.getFullYear(); + const month = target.getMonth() + 1; + const day = target.getDate(); + const hours = target.getHours(); + const minutes = target.getMinutes(); + const seconds = target.getSeconds(); + + return { + year, + month, + day, + hours, + minutes, + seconds + }; +}; + +export const getTimeRecord = (value: string | number[]) => { + const [hours, minutes, seconds] = isString(value) + ? value.split(':').map((item) => Number(item)) + : isArray(value) + ? value + : [0, 0, 0]; + + return { + hours, + minutes, + seconds + }; +}; + +export const isLeap = (year: number) => { + return year % 400 === 0 || (year % 100 !== 0 && year % 4 === 0); +}; + +export const formatTime = ( + value: { hours: number; minutes: number; seconds: number }, + format: string +) => { + const { hours, minutes, seconds } = value; + return format + .replace('HH', String(hours).padStart(2, '0')) + .replace('mm', String(minutes).padStart(2, '0')) + .replace('ss', String(seconds).padStart(2, '0')); +}; + +export const parseTime = (value: string) => { + const timeRegex = /^(\d{2}):(\d{2}):(\d{2})$/; + const match = value.match(timeRegex); + + if (!match) { + throw new Error('Invalid time format'); + } + + const [_, hours, minutes, seconds] = match; + + return new Date(0, 0, 0, parseInt(hours, 10), parseInt(minutes, 10), parseInt(seconds, 10)); +}; + +export const formatDate = (value: Date, format: string) => { + const { year, month, day, hours, minutes, seconds } = getDateRecord(value); + return format + .replace('yyyy', String(year)) + .replace('MM', String(month).padStart(2, '0')) + .replace('dd', String(day).padStart(2, '0')) + .replace('HH', String(hours).padStart(2, '0')) + .replace('mm', String(minutes).padStart(2, '0')) + .replace('ss', String(seconds).padStart(2, '0')); +}; + +export const parseDate = (value: string, format: string) => { + const [dateValue, timeValue] = value.split(' '); + const [dateFormat, timeFormat] = format.split(' '); + + const dateRegex = /年|月|日|-|\//g; + + const formatParts = dateFormat.replace(dateRegex, '-').split('-'); + const formatMap = formatParts.reduce((map, part, index) => { + map[part] = index; + return map; + }, {} as Record); + + const dateValueParts = dateValue + .replace(dateRegex, '-') + .split('-') + .map((item) => Number(item)); + + const year = dateValueParts[formatMap.yyyy]; + const month = dateValueParts[formatMap.MM] ? dateValueParts[formatMap.MM] - 1 : 0; + const day = dateValueParts[formatMap.dd] || 1; + + const { hours, minutes, seconds } = getTimeRecord(timeValue); + + // 创建Date对象 + const parsedDate = new Date(year, month, day, hours, minutes, seconds); + + // 检查是否有效日期 + if (isNaN(parsedDate as any)) { + throw new Error('Invalid date format'); + } + + return parsedDate; +}; + +export const compareDate = (firstDate: Date, secondDate: Date) => { + return firstDate.getTime() - secondDate.getTime(); +}; + +export const isEqualDate = (firstDate: Date, secondDate: Date) => { + const { + year: firstDateYear, + month: firstDateMonth, + day: firstDateDay + } = getDateRecord(firstDate); + const { + year: secondDateYear, + month: secondDateMonth, + day: secondDateDay + } = getDateRecord(secondDate); + + return ( + compareDate( + new Date(firstDateYear, firstDateMonth, firstDateDay), + new Date(secondDateYear, secondDateMonth, secondDateDay) + ) === 0 + ); +}; + +export const isEqualDateTime = (firstDate: Date, secondDate: Date) => { + return compareDate(firstDate, secondDate) === 0; +}; diff --git a/packages/charts-vue/components/charts-common/src/utils/src/dom/event.ts b/packages/charts-vue/components/charts-common/src/utils/src/dom/event.ts new file mode 100644 index 00000000000..07e07fc6add --- /dev/null +++ b/packages/charts-vue/components/charts-common/src/utils/src/dom/event.ts @@ -0,0 +1,14 @@ +export function stopPropagation(event: Event) { + event.stopPropagation(); +} + +export function preventDefault(event: Event, isStopPropagation?: boolean) { + /* istanbul ignore else */ + if (typeof event.cancelable !== 'boolean' || event.cancelable) { + event.preventDefault(); + } + + if (isStopPropagation) { + stopPropagation(event); + } +} diff --git a/packages/charts-vue/components/charts-common/src/utils/src/hook.ts b/packages/charts-vue/components/charts-common/src/utils/src/hook.ts new file mode 100644 index 00000000000..4b748aaa8d7 --- /dev/null +++ b/packages/charts-vue/components/charts-common/src/utils/src/hook.ts @@ -0,0 +1,18 @@ +import { nextTick, onMounted, onActivated } from 'vue'; + +export function onMountedOrActivated(hook: () => any) { + let mounted: boolean; + + onMounted(() => { + hook(); + nextTick(() => { + mounted = true; + }); + }); + + onActivated(() => { + if (mounted) { + hook(); + } + }); +} diff --git a/packages/charts-vue/components/charts-common/src/utils/src/number.ts b/packages/charts-vue/components/charts-common/src/utils/src/number.ts new file mode 100644 index 00000000000..dab735dafe4 --- /dev/null +++ b/packages/charts-vue/components/charts-common/src/utils/src/number.ts @@ -0,0 +1,26 @@ +import { trimExtraChar } from './string'; +import { isDef } from './type'; + +export function formatToNumber(value: string, allowDot: boolean) { + value = isDef(value) ? value : ''; + let regExp = /[^-0-9]/g; + value = trimExtraChar(value, '-', /-/g); + if (allowDot) { + value = trimExtraChar(value, '.', /\./g); + regExp = /[^-0-9.]/g; + } else { + value = value.split('.')[0]; + } + return value.replace(regExp, ''); +} + +export function parseFloat(value: string | number, precision = 0) { + return Number.parseFloat(value ? String(value) : '0').toFixed(precision); +} + +export function range(num: number, min: number, max: number): number { + return Math.min(Math.max(num, min), max); +} +export function random(min: number, max: number) { + return Math.round(Math.random() * (max - min) + min); +} diff --git a/packages/charts-vue/components/charts-common/src/utils/src/query-filter.ts b/packages/charts-vue/components/charts-common/src/utils/src/query-filter.ts new file mode 100644 index 00000000000..90717af9bf9 --- /dev/null +++ b/packages/charts-vue/components/charts-common/src/utils/src/query-filter.ts @@ -0,0 +1,40 @@ + +export enum FilterCompareType { + Equal = 0, + NotEqual = 1, + Greater = 2, + GreaterOrEqual = 3, + Less = 4, + LessOrEqual = 5, + Like = 6, + LikeStartWith = 7, + LikeEndWith = 8, + NotLike = 9, + NotLikeStartWith = 10, + NotLikeEndWith = 11, + Is = 12, + IsNot = 13, + In = 14, + NotIn = 15, +} + +export enum FilterRelation { + Empty, + And, + Or, +} + +export enum FilterExpressType { + Value = 0, + Expression = 1, +} + +export interface FilterCondition { + FilterField: string + Compare: FilterCompareType + Value: string + Relation: FilterRelation + Expresstype: FilterExpressType + Lbracket: string + Rbracket: string +} diff --git a/packages/charts-vue/components/charts-common/src/utils/src/resove-asset.ts b/packages/charts-vue/components/charts-common/src/utils/src/resove-asset.ts new file mode 100644 index 00000000000..63a8585c23a --- /dev/null +++ b/packages/charts-vue/components/charts-common/src/utils/src/resove-asset.ts @@ -0,0 +1,33 @@ +const getKebabCase = (str: string) => { + return str.replace(/[A-Z]/g, function (i) { + return "-" + i.toLowerCase(); + }); +}; +const getCamelCase = (str: string) => { + return str.replace(/-([a-z])/g, function (all, i) { + return i.toUpperCase(); + }); +}; + +const hasOwn = (v: object, s: string)=> Object.prototype.hasOwnProperty.call(v, s); + +export function resolveAsset ( + assets: Record, + id: string +): any { + /* istanbul ignore if */ + if (typeof id !== 'string') { + return; + } + // check local registration variations first + if (hasOwn(assets, id)) {return assets[id];} + const camelizedId = getKebabCase(id); + if (hasOwn(assets, camelizedId)) {return assets[camelizedId];} + const PascalCaseId = getCamelCase(camelizedId); + if (hasOwn(assets, PascalCaseId)) {return assets[PascalCaseId];} + + // fallback to prototype chain + const res = assets[id] || assets[camelizedId] || assets[PascalCaseId]; + + return res; +} diff --git a/packages/charts-vue/components/charts-common/src/utils/src/string.ts b/packages/charts-vue/components/charts-common/src/utils/src/string.ts new file mode 100644 index 00000000000..7d2519bfed6 --- /dev/null +++ b/packages/charts-vue/components/charts-common/src/utils/src/string.ts @@ -0,0 +1,18 @@ +export function trimExtraChar(value: string, char: string, regExp: RegExp) { + const index = value.indexOf(char); + + if (index === -1) { + return value; + } + + if (char === '-' && index !== 0) { + return value.slice(0, index); + } + + return value.slice(0, index + 1) + value.slice(index).replace(regExp, ''); +}; + +export function camelToKebabCase(camelStr: string) { + // 首字母转小写，其余每个大写字母前加下划线并转小写 + return camelStr.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase(); +} diff --git a/packages/charts-vue/components/charts-common/src/utils/src/throttle.ts b/packages/charts-vue/components/charts-common/src/utils/src/throttle.ts new file mode 100644 index 00000000000..b10e67cb439 --- /dev/null +++ b/packages/charts-vue/components/charts-common/src/utils/src/throttle.ts @@ -0,0 +1,41 @@ +export const throttle = ( + fn: (...args: any)=> any, + wait: number, + options: { leading?: boolean; trailing?: boolean } = {} +) => { + let timeout: any = null; + let previous = 0; + + const throttled = (...args: any) => { + const nowDate = +new Date(); + + if (!previous && options.leading === false) { + previous = nowDate; + } + + const remaining = wait - (nowDate - previous); + + if (remaining <= 0 || remaining > wait) { + if (timeout) { + clearTimeout(timeout); + timeout = null; + } + previous = nowDate; + fn(...args); + } else if (!timeout && options.trailing !== false) { + timeout = setTimeout(() => { + previous = options.leading === false ? 0 : +new Date(); + timeout = null; + fn(...args); + }, remaining); + } + }; + + // 手动取消 + throttled.cancel = function () { + clearTimeout(timeout); + previous = 0; + timeout = null; + }; + return throttled; +}; diff --git a/packages/charts-vue/components/charts-common/src/utils/src/transition.ts b/packages/charts-vue/components/charts-common/src/utils/src/transition.ts new file mode 100644 index 00000000000..9faa49dec92 --- /dev/null +++ b/packages/charts-vue/components/charts-common/src/utils/src/transition.ts @@ -0,0 +1,14 @@ +export const getSlideTransitionName = (position: string | undefined) => { + switch (position) { + case 'bottom': + return 'fm-slide-up'; + case 'top': + return 'fm-slide-down'; + case 'left': + return 'fm-slide-left'; + case 'right': + return 'fm-slide-right'; + default: + return 'fm-fade'; + } +}; diff --git a/packages/charts-vue/components/charts-common/src/utils/src/type.ts b/packages/charts-vue/components/charts-common/src/utils/src/type.ts new file mode 100644 index 00000000000..93805dd9eac --- /dev/null +++ b/packages/charts-vue/components/charts-common/src/utils/src/type.ts @@ -0,0 +1,105 @@ +export const inBrowser = typeof window !== 'undefined'; + +export const inIOS = () => /(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent); + +export const inAndroid = () => /(Android|Adr)/i.test(navigator.userAgent); + +export function isDef(val: T): val is NonNullable { + return val !== undefined && val !== null; +} + +export function isNull(val: unknown): val is null { + return val === null; +} + +export function isUndefined(val: unknown): val is undefined { + return val === undefined; +} + +export function isString(val: unknown): val is string { + return typeof val === 'string'; +} + +export function isNumber(val: unknown): val is number { + return typeof val === 'number'; +} + +export function isBoolean(val: unknown): val is null { + return typeof val === 'boolean'; +} + +export const { isArray } = Array; + +export function isSymbol(val: unknown): val is symbol { + return typeof val === 'symbol'; +} + +export function isFunction(val: unknown): val is FunctionConstructor { + return typeof val === 'function'; +} + +export function isObject(val: unknown): val is Record { + return val !== null && typeof val === 'object'; +} + +export function isPromise(val: unknown): val is Promise { + return isObject(val) && isFunction(val.then) && isFunction(val.catch); +} + +export function isNumeric(val: string) { + return /^-?\d+(\.\d+)?$/.test(val); +} + +export function isDate(val: unknown): val is Date { + return typeof val === 'object' && val instanceof Date; +} + +export function getType(val: unknown) { + let type: string; + switch (val) { + case isString(val):{ + type = 'string'; + break; + } + case isNumber(val):{ + type = 'number'; + break; + } + case isDate(val):{ + type = 'date'; + break; + } + case isNull(val):{ + type = 'null'; + break; + } + case isUndefined(val):{ + type = 'undefined'; + break; + } + case isArray(val):{ + type = 'array'; + break; + } + case isSymbol(val):{ + type = 'symbol'; + break; + } + case isFunction(val):{ + type = 'function'; + break; + } + case isPromise(val):{ + type = 'promise'; + break; + } + case isObject(val):{ + type = 'object'; + break; + } + default: + type = typeof val; + break; + } + return type; +} diff --git a/packages/charts-vue/components/charts-common/src/utils/src/use-appearance.ts b/packages/charts-vue/components/charts-common/src/utils/src/use-appearance.ts new file mode 100644 index 00000000000..74038b3cfa0 --- /dev/null +++ b/packages/charts-vue/components/charts-common/src/utils/src/use-appearance.ts @@ -0,0 +1,33 @@ +/** + * 根据传递过来已有的类对象和自定义类名，构造新的样式对象 + * @param classObject + * @param customClass + * @returns + */ +export function getCustomClass(classObject: Record, customClass: string) { + const customClassArray = customClass?.split(' ') || []; + customClassArray.reduce((result: Record, classString: string) => { + if (classString) { + result[classString] = true; + } + return result; + }, classObject); + return classObject; +} +/** + * 根据传递过来已有的style对象和自定义style，构造新的style对象 + * @param styleObject + * @param customStyle + * @returns + */ +export function getCustomStyle(styleObject: Record, customStyle: string) { + const styleArray = customStyle?.split(';') || []; + styleArray.reduce((result: Record, styleString: string) => { + if (styleString) { + const styles = styleString.split(':'); + result[styles[0]] = styles[1]; + } + return result; + }, styleObject); + return styleObject; +} diff --git a/packages/charts-vue/components/charts-common/src/utils/src/with-install.ts b/packages/charts-vue/components/charts-common/src/utils/src/with-install.ts new file mode 100644 index 00000000000..86c10695488 --- /dev/null +++ b/packages/charts-vue/components/charts-common/src/utils/src/with-install.ts @@ -0,0 +1,16 @@ +import type { App, Component } from 'vue'; + +export type WithInstall = T & { + install(app: App): void; +}; + +export function withInstall(options: T) { + (options as Record).install = (app: App) => { + const { name } = options; + if (name) { + app.component(name, options); + } + }; + + return options as WithInstall; +} diff --git a/packages/charts-vue/components/charts-common/src/utils/src/with-register-designer.ts b/packages/charts-vue/components/charts-common/src/utils/src/with-register-designer.ts new file mode 100644 index 00000000000..6b4460284bc --- /dev/null +++ b/packages/charts-vue/components/charts-common/src/utils/src/with-register-designer.ts @@ -0,0 +1,22 @@ +import { RegisterContext } from '@farris/charts-vue/components/charts-common/src/types'; +import type { App, Component } from 'vue'; + +export type WithRegisterDesigner = T & { + registerDesigner(app: App): void; +}; + +export function withRegisterDesigner(component: T, options: { name: string, designerComponent: Component, propsResolverGenerator: (registerContext: RegisterContext) => (schemaValue?: Record) => Record }) { + const { name, designerComponent, propsResolverGenerator } = options; + + (component as Record).registerDesigner = ( + componentMap: Record, + propsResolverMap: Record, + configResolverMap: Record, + registerContext: RegisterContext + ) => { + componentMap[name] = designerComponent; + propsResolverMap[name] = propsResolverGenerator(registerContext); + }; + + return component as WithRegisterDesigner; +} diff --git a/packages/charts-vue/components/charts-common/src/utils/src/with-register.ts b/packages/charts-vue/components/charts-common/src/utils/src/with-register.ts new file mode 100644 index 00000000000..5420647935e --- /dev/null +++ b/packages/charts-vue/components/charts-common/src/utils/src/with-register.ts @@ -0,0 +1,23 @@ +import { RegisterContext } from '@farris/charts-vue/components/charts-common/src/types'; +import type { App, Component } from 'vue'; + +export type WithRegister = T & { + register(app: App): void; +}; + +export function withRegister(component: T, options: { name: string, propsResolverGenerator: (registerContext: RegisterContext) => (schemaValue?: Record) => Record }) { + const { name, propsResolverGenerator } = options; + + (component as Record).register = ( + componentMap: Record, + propsResolverMap: Record, + configResolverMap: Record, + resolverMap: Record, + registerContext: RegisterContext + ) => { + componentMap[name] = component; + propsResolverMap[name] = propsResolverGenerator(registerContext); + }; + + return component as WithRegister; +} diff --git a/packages/charts-vue/components/dynamic-resolver/index.ts b/packages/charts-vue/components/dynamic-resolver/index.ts new file mode 100644 index 00000000000..75573a8aa90 --- /dev/null +++ b/packages/charts-vue/components/dynamic-resolver/index.ts @@ -0,0 +1,21 @@ +export * from './src/types'; +export * from './src/props-resolver'; +export * from './src/common/appearance-resolver'; +export * from './src/common/toolbar-resolver'; +export * from './src/common/data-resolver'; +export * from './src/common/position-resolver'; +export * from './src/common/padding-resolver'; +export * from './src/common/margin-resolver'; +export * from './src/common/size-resolver'; +export * from './src/binding-resolver'; +export * from './src/events-resolver'; +export * from './src/selection-item-resolver'; +export * from './src/editor-resolver'; +export * from './src/visible-prop-resolver'; +export * from './src/event-handler-resolver'; +export * from './src/resolver/schema/schema-resolver'; +export * from './src/resolver/schema/schema-resolver-design'; +export * from './src/update-columns-resolver'; + +export { propertyConfigSchemaMap, getPropertyConfigBySchema } from './src/resolver/property-config/property-config-resolver'; +export { propertyConfigSchemaMapForDesigner, getPropertyConfigBySchemaForDesigner } from './src/resolver/property-config/property-config-resolver-design'; diff --git a/packages/charts-vue/components/dynamic-resolver/src/binding-resolver.ts b/packages/charts-vue/components/dynamic-resolver/src/binding-resolver.ts new file mode 100644 index 00000000000..9428dca63fb --- /dev/null +++ b/packages/charts-vue/components/dynamic-resolver/src/binding-resolver.ts @@ -0,0 +1,68 @@ +import { BindingData, BindingResolver } from "./types"; + +export function createFormBindingResolver(): BindingResolver { + function resolve(schema: Record, bindingData: BindingData) { + const { id } = schema || {}; + const { field } = schema.binding || {}; + return { + 'modelValue': bindingData.getValue(id), + 'onUpdate:modelValue': (value: any) => { + bindingData.setValue(id, field, value); + } + }; + }; + return { + resolve + }; +} + +export function createCollectionBindingResolver(): BindingResolver { + function resolve(schema: Record, bindingData: BindingData) { + const { id } = schema || {}; + const { dataSource } = schema || {}; + if (dataSource === undefined) { + return {}; + } + return { + 'data': bindingData.getValue(id), + 'onUpdate:data': (...payload: any[]) => { + // bindingData.updateData(...payload); + } + }; + }; + return { + resolve + }; +} + +export function createTreeGridBindingResolver(): BindingResolver{ + function resolve(schema: Record, bindingData: BindingData) { + const { id } = schema || {}; + const { dataSource } = schema || {}; + if (dataSource === undefined) { + return {}; + } + return { + }; + }; + return { + resolve + }; +} + +export function createDataMappingBindingResolver(): BindingResolver { + function resolve(schema: Record, bindingData: BindingData) { + const { path } = schema.binding || {}; + if (!path) { + return {}; + } + return { + 'onUpdate:dataMapping': (...payloads: any[]) => { + // bindingModel.dataMapping(...payloads); + } + }; + }; + return { + resolve + }; +} diff --git a/packages/charts-vue/components/dynamic-resolver/src/common/appearance-resolver.ts b/packages/charts-vue/components/dynamic-resolver/src/common/appearance-resolver.ts new file mode 100644 index 00000000000..4392ca2d6cc --- /dev/null +++ b/packages/charts-vue/components/dynamic-resolver/src/common/appearance-resolver.ts @@ -0,0 +1,3 @@ +export function resolveAppearance(key: string, appearanceObject: { class: string; style: string }) { + return { customClass: appearanceObject?.class, customStyle: appearanceObject?.style }; +} diff --git a/packages/charts-vue/components/dynamic-resolver/src/common/data-resolver.ts b/packages/charts-vue/components/dynamic-resolver/src/common/data-resolver.ts new file mode 100644 index 00000000000..e7481164927 --- /dev/null +++ b/packages/charts-vue/components/dynamic-resolver/src/common/data-resolver.ts @@ -0,0 +1,52 @@ + +export function resolveData(key: string, datas: { name: string; value: string }[]) { + const result:{ text: string; value: string }[] = []; + + if(datas && datas.length > 0){ + datas.forEach((data) => { + const newData: { text: string; value: string } = { + text: '', + value: '' + }; + Object.keys(data).map(key => { + if (key === 'name') { + newData['text'] = data[key]; + }else{ + newData[key] = data[key]; + } + }); + + result.push(newData); + }); + } + + return { + options:result + }; +} + +export function resolveDataPicker(key: string, datas: { name: string; value: string }[]) { + const result:{ text: string; value: string }[] = []; + + if(datas && datas.length > 0){ + datas.forEach((data) => { + const newData: { text: string; value: string } = { + text: '', + value: '' + }; + Object.keys(data).map(key => { + if (key === 'name') { + newData['text'] = data[key]; + }else{ + newData[key] = data[key]; + } + }); + + result.push(newData); + }); + } + + return { + columns:result + }; +} diff --git a/packages/charts-vue/components/dynamic-resolver/src/common/margin-resolver.ts b/packages/charts-vue/components/dynamic-resolver/src/common/margin-resolver.ts new file mode 100644 index 00000000000..485fb4ea3e9 --- /dev/null +++ b/packages/charts-vue/components/dynamic-resolver/src/common/margin-resolver.ts @@ -0,0 +1,6 @@ +import { DirectionalStyleObject, getMarginStyle, concatCustomStyle } from './utils'; + +export function resolveMargin(key: string, marginObject: DirectionalStyleObject, resolvedSchema: any) { + const marginStyle = getMarginStyle(marginObject); + return concatCustomStyle(marginStyle, resolvedSchema); +} diff --git a/packages/charts-vue/components/dynamic-resolver/src/common/padding-resolver.ts b/packages/charts-vue/components/dynamic-resolver/src/common/padding-resolver.ts new file mode 100644 index 00000000000..f1a42dadc86 --- /dev/null +++ b/packages/charts-vue/components/dynamic-resolver/src/common/padding-resolver.ts @@ -0,0 +1,6 @@ +import { DirectionalStyleObject, getPaddingStyle, concatCustomStyle } from './utils'; + +export function resolvePadding(key: string, paddingObject: DirectionalStyleObject, resolvedSchema: any) { + const paddingStyle = getPaddingStyle(paddingObject); + return concatCustomStyle(paddingStyle, resolvedSchema); +} diff --git a/packages/charts-vue/components/dynamic-resolver/src/common/position-resolver.ts b/packages/charts-vue/components/dynamic-resolver/src/common/position-resolver.ts new file mode 100644 index 00000000000..7fdb8bdc427 --- /dev/null +++ b/packages/charts-vue/components/dynamic-resolver/src/common/position-resolver.ts @@ -0,0 +1,6 @@ +import { DirectionalStyleObject, getPositionStyle, concatCustomStyle } from './utils'; + +export function resolvePosition(key: string, positionObject: DirectionalStyleObject, resolvedSchema: any) { + const positionStyle = getPositionStyle(positionObject); + return concatCustomStyle(positionStyle, resolvedSchema); +} diff --git a/packages/charts-vue/components/dynamic-resolver/src/common/size-resolver.ts b/packages/charts-vue/components/dynamic-resolver/src/common/size-resolver.ts new file mode 100644 index 00000000000..9bea291713c --- /dev/null +++ b/packages/charts-vue/components/dynamic-resolver/src/common/size-resolver.ts @@ -0,0 +1,6 @@ +import { SizeStyleObject, getSizeStyle, concatCustomStyle } from './utils'; + +export function resolveSize(key: string, sizeObject: SizeStyleObject, resolvedSchema: any) { + const sizeStyle = getSizeStyle(sizeObject); + return concatCustomStyle(sizeStyle, resolvedSchema); +} diff --git a/packages/charts-vue/components/dynamic-resolver/src/common/toolbar-resolver.ts b/packages/charts-vue/components/dynamic-resolver/src/common/toolbar-resolver.ts new file mode 100644 index 00000000000..0a3221cdf4f --- /dev/null +++ b/packages/charts-vue/components/dynamic-resolver/src/common/toolbar-resolver.ts @@ -0,0 +1,36 @@ +function generateResolveToolbarFunction(toolbarPropertyName = "toolbarItems", options?: { defaultButtonType: string }) { + return (key: string, toolbarObject: { items: any[] }) => { + const toolbarItems: any[] = []; + const result = { [toolbarPropertyName]: toolbarItems }; + if (typeof toolbarObject !== 'object' || !toolbarObject) { + return result; + } + const items: any[] = toolbarObject?.items || []; + if (!Array.isArray(items)) { + return result; + } + items.filter(item => typeof item === 'object' && !!item).forEach(item => { + const newItem: any = {}; + Object.keys(item).forEach(key => { + if (key === 'displayType') { + newItem.type = item[key]; + } else if (key === 'appearance') { + newItem.customClass = item[key]?.class || ''; + newItem.customStyle = item[key]?.style || ''; + } else if (key === 'type') { + return; + } else { + newItem[key] = item[key]; + } + }); + if (!newItem.type && !newItem.customClass && !newItem.customStyle && options?.defaultButtonType) { + newItem.type = options.defaultButtonType; + } + toolbarItems.push(newItem); + }); + return result; + }; +} + +export const resolveToolbar = generateResolveToolbarFunction("toolbarItems", { defaultButtonType: "primary" }); +export const resolveSwipeToolbar = generateResolveToolbarFunction("swipeToolbar", { defaultButtonType: "danger" }); diff --git a/packages/charts-vue/components/dynamic-resolver/src/common/utils.ts b/packages/charts-vue/components/dynamic-resolver/src/common/utils.ts new file mode 100644 index 00000000000..4aedc631507 --- /dev/null +++ b/packages/charts-vue/components/dynamic-resolver/src/common/utils.ts @@ -0,0 +1,59 @@ +export function concatCustomStyle(newStyle: string, resolvedSchema: any): { customStyle: string } { + newStyle = newStyle || ''; + let customStyle: string = resolvedSchema?.customStyle || ''; + if (typeof customStyle !== 'string') { + customStyle = ''; + } + customStyle = customStyle.trim(); + customStyle = newStyle + customStyle; + return { customStyle }; +} + +function convertStyleObject2String(styleObject: any, validPropNames: string[], cssPropNamePrefix?: string): string { + if (typeof styleObject !== 'object' || !styleObject) { + return ''; + } + return Object.keys(styleObject) + .filter((propName) => { + return validPropNames.includes(propName); + }) + .reduce((styleString, propName) => { + const value = styleObject[propName]; + if (typeof value !== 'number') { + return styleString; + } + const fullPropName = cssPropNamePrefix ? `${cssPropNamePrefix}-${propName}` : propName; + return `${styleString}${fullPropName}: ${value}px;`; + }, ''); +} + +export interface DirectionalStyleObject { + top?: number; + right?: number; + bottom?: number; + left?: number; +} + +export interface SizeStyleObject { + width?: number; + height?: number; +} + +const DIRECTIONAL_STYLE_PROPS = ["top", "right", "bottom", "left"]; +const SIZE_STYLE_PROPS = ["width", "height"]; + +export function getPaddingStyle(paddingObject: DirectionalStyleObject): string { + return convertStyleObject2String(paddingObject, DIRECTIONAL_STYLE_PROPS, 'padding'); +} + +export function getMarginStyle(marginObject: DirectionalStyleObject): string { + return convertStyleObject2String(marginObject, DIRECTIONAL_STYLE_PROPS, 'margin'); +} + +export function getPositionStyle(positionObject: DirectionalStyleObject): string { + return convertStyleObject2String(positionObject, DIRECTIONAL_STYLE_PROPS); +} + +export function getSizeStyle(sizeObject: SizeStyleObject): string { + return convertStyleObject2String(sizeObject, SIZE_STYLE_PROPS); +} diff --git a/packages/charts-vue/components/dynamic-resolver/src/converter/appearance.converter.ts b/packages/charts-vue/components/dynamic-resolver/src/converter/appearance.converter.ts new file mode 100644 index 00000000000..cf9c14e64b3 --- /dev/null +++ b/packages/charts-vue/components/dynamic-resolver/src/converter/appearance.converter.ts @@ -0,0 +1 @@ +export { appearanceConverter as default } from "./cascade.converter"; diff --git a/packages/charts-vue/components/dynamic-resolver/src/converter/buttons.converter.ts b/packages/charts-vue/components/dynamic-resolver/src/converter/buttons.converter.ts new file mode 100644 index 00000000000..7b3d4f389d4 --- /dev/null +++ b/packages/charts-vue/components/dynamic-resolver/src/converter/buttons.converter.ts @@ -0,0 +1,8 @@ +import { ComponentSchema } from "@farris/charts-vue/components/charts-common/src/types"; +import { PropertyConverter, SchemaService } from "../types"; + +export default { + convertFrom: (schema: ComponentSchema, propertyKey: string, schemaService: SchemaService) => { + return (schema.buttons && schema.buttons.length) ? `共 ${schema.buttons.length} 项` : '无'; + } +} as PropertyConverter; diff --git a/packages/charts-vue/components/dynamic-resolver/src/converter/cascade.converter.ts b/packages/charts-vue/components/dynamic-resolver/src/converter/cascade.converter.ts new file mode 100644 index 00000000000..dce361318b0 --- /dev/null +++ b/packages/charts-vue/components/dynamic-resolver/src/converter/cascade.converter.ts @@ -0,0 +1,27 @@ +import { PropertyConverter, SchemaService } from "../types"; + +export function generateCascadePropertyConverter(parentPropertyKey: string, parentPropertyDefaultValue: any = {}): PropertyConverter { + return { + convertTo: (schema: Record, propertyKey: string, propertyValue: any, schemaService: SchemaService) => { + if (!schema[parentPropertyKey] || typeof schema[parentPropertyKey] !== 'object') { + schema[parentPropertyKey] = parentPropertyDefaultValue; + } + schema[parentPropertyKey][propertyKey] = propertyValue; + }, + convertFrom: (schema: Record, propertyKey: string, schemaService: SchemaService) => { + return schema[parentPropertyKey]?.[propertyKey]; + }, + }; +} + +export const appearanceConverter = generateCascadePropertyConverter('appearance'); +export const sizeConverter = generateCascadePropertyConverter('size'); +export const paddingConverter = generateCascadePropertyConverter('padding'); +export const marginConverter = generateCascadePropertyConverter('margin'); +export const borderRadiusConverter = generateCascadePropertyConverter('borderRadius'); +export const positionConverter = generateCascadePropertyConverter('position'); +export const flexBoxConverter = generateCascadePropertyConverter('flexBox'); + +export const toolbarConverter = generateCascadePropertyConverter('toolbar', { items: [] }); +export const swipeToolbarConverter = generateCascadePropertyConverter('swipeToolbar', { items: [] }); +export const rightToolbarConverter = generateCascadePropertyConverter('rightToolbar', { items: [] }); diff --git a/packages/charts-vue/components/dynamic-resolver/src/converter/change-editor.converter.ts b/packages/charts-vue/components/dynamic-resolver/src/converter/change-editor.converter.ts new file mode 100644 index 00000000000..f81cdec930a --- /dev/null +++ b/packages/charts-vue/components/dynamic-resolver/src/converter/change-editor.converter.ts @@ -0,0 +1,15 @@ +import { ComponentSchema } from "@farris/charts-vue/components/charts-common/src/types"; +import { PropertyConverter, SchemaService } from "../types"; + +export default { + convertTo: (schema: ComponentSchema, propertyKey: string, propertyValue: any, schemaService: SchemaService) => { + // eslint-disable-next-line no-self-assign + schema[propertyKey] = schema[propertyKey]; + }, + convertFrom: (schema: ComponentSchema, propertyKey: string, schemaService: SchemaService) => { + if (schema.editor) { + return schemaService.getRealEditorType(schema.editor.type); + } + return ''; + } +} as PropertyConverter; diff --git a/packages/charts-vue/components/dynamic-resolver/src/converter/enum-data.converter.ts b/packages/charts-vue/components/dynamic-resolver/src/converter/enum-data.converter.ts new file mode 100644 index 00000000000..e065deb1c51 --- /dev/null +++ b/packages/charts-vue/components/dynamic-resolver/src/converter/enum-data.converter.ts @@ -0,0 +1,11 @@ +import { ComponentSchema } from "@farris/charts-vue/components/charts-common/src/types"; +import { PropertyConverter, SchemaService } from "../types"; +export default { + convertTo: (schema: ComponentSchema, propertyKey: string, propertyValue: any, schemaService: SchemaService) => { + schema.editor[propertyKey] = propertyValue.value; + }, + convertFrom: (schema: ComponentSchema, propertyKey: string, schemaService: SchemaService) => { + return schema.editor && Object.prototype.hasOwnProperty.call(schema.editor, propertyKey) ? + schema.editor[propertyKey] : schema[propertyKey]; + } +} as PropertyConverter; diff --git a/packages/charts-vue/components/dynamic-resolver/src/converter/field-selector.converter.ts b/packages/charts-vue/components/dynamic-resolver/src/converter/field-selector.converter.ts new file mode 100644 index 00000000000..a9e96534d00 --- /dev/null +++ b/packages/charts-vue/components/dynamic-resolver/src/converter/field-selector.converter.ts @@ -0,0 +1,24 @@ +import { PropertyConverter } from "../types"; + +export default { + convertFrom: (schema: Record, propertyKey: string) => { + // return schema['binding'] ? schema['binding']['type'] + ":" + schema['binding']['path'] : ''; + return schema['binding'] ? schema['binding']['path'] : ''; + + }, + convertTo: (schema: Record, propertyKey: string, propertyValue: any) => { + if (propertyValue && propertyValue.length > 0) { + const bindingData = propertyValue[0]; + + if (!schema.binding) { + schema.binding = {}; + } + + schema.binding.type = 'Form'; + schema.binding.path = bindingData.bindingField; + schema.binding.field = bindingData.id; + schema.binding.fullPath = bindingData.path; + schema.path = bindingData.bindingPath; + } + } +} as PropertyConverter;; diff --git a/packages/charts-vue/components/dynamic-resolver/src/converter/form-group-label.converter.ts b/packages/charts-vue/components/dynamic-resolver/src/converter/form-group-label.converter.ts new file mode 100644 index 00000000000..ac8aec8d00a --- /dev/null +++ b/packages/charts-vue/components/dynamic-resolver/src/converter/form-group-label.converter.ts @@ -0,0 +1,10 @@ +import { PropertyConverter } from "../types"; + +export default { + convertFrom: (schema: Record, propertyKey: string) => { + return schema[propertyKey] || ''; + }, + convertTo: (schema: Record, propertyKey: string, propertyValue: any) => { + schema[propertyKey] = propertyValue; + } +} as PropertyConverter;; diff --git a/packages/charts-vue/components/dynamic-resolver/src/converter/grid-selection.converter.ts b/packages/charts-vue/components/dynamic-resolver/src/converter/grid-selection.converter.ts new file mode 100644 index 00000000000..c39616ec84b --- /dev/null +++ b/packages/charts-vue/components/dynamic-resolver/src/converter/grid-selection.converter.ts @@ -0,0 +1,13 @@ +import { ComponentSchema } from "@farris/charts-vue/components/charts-common/src/types"; +import { PropertyConverter, SchemaService } from "../types"; +export default { + convertTo: (schema: ComponentSchema, propertyKey: string, propertyValue: any, schemaService: SchemaService) => { + if (!schema.selection) { + schema.selection = {}; + } + schema.selection[propertyKey] = propertyValue; + }, + convertFrom: (schema: ComponentSchema, propertyKey: string, schemaService: SchemaService) => { + return schema.selection ? schema.selection[propertyKey] : schema[propertyKey]; + } +} as PropertyConverter; diff --git a/packages/charts-vue/components/dynamic-resolver/src/converter/index.ts b/packages/charts-vue/components/dynamic-resolver/src/converter/index.ts new file mode 100644 index 00000000000..060b0343df1 --- /dev/null +++ b/packages/charts-vue/components/dynamic-resolver/src/converter/index.ts @@ -0,0 +1 @@ +export * from './cascade.converter'; diff --git a/packages/charts-vue/components/dynamic-resolver/src/converter/items-count.converter.ts b/packages/charts-vue/components/dynamic-resolver/src/converter/items-count.converter.ts new file mode 100644 index 00000000000..5d1007fc73f --- /dev/null +++ b/packages/charts-vue/components/dynamic-resolver/src/converter/items-count.converter.ts @@ -0,0 +1,8 @@ +import { ComponentSchema } from "@farris/charts-vue/components/charts-common/src/types"; +import { PropertyConverter, SchemaService } from "../types"; + +export default { + convertFrom: (schema: ComponentSchema, propertyKey: string, schemaService: SchemaService) => { + return (schema[propertyKey] && schema[propertyKey].length) ? `共 ${schema[propertyKey].length} 项` : ''; + } +} as PropertyConverter; diff --git a/packages/charts-vue/components/dynamic-resolver/src/converter/pagination.converter.ts b/packages/charts-vue/components/dynamic-resolver/src/converter/pagination.converter.ts new file mode 100644 index 00000000000..d95e640631f --- /dev/null +++ b/packages/charts-vue/components/dynamic-resolver/src/converter/pagination.converter.ts @@ -0,0 +1,16 @@ +import { ComponentSchema } from "@farris/charts-vue/components/charts-common/src/types"; +import { PropertyConverter, SchemaService } from "../types"; +/** + * NG版，此处pagination类型是布尔 + */ +export default { + convertTo: (schema: ComponentSchema, propertyKey: string, propertyValue: any, schemaService: SchemaService) => { + if (!schema.pagination) { + schema.pagination = {}; + } + schema.pagination[propertyKey] = propertyValue; + }, + convertFrom: (schema: ComponentSchema, propertyKey: string, schemaService: SchemaService) => { + return schema.pagination ? schema.pagination[propertyKey] : schema[propertyKey]; + } +} as PropertyConverter; diff --git a/packages/charts-vue/components/dynamic-resolver/src/converter/property-editor.converter.ts b/packages/charts-vue/components/dynamic-resolver/src/converter/property-editor.converter.ts new file mode 100644 index 00000000000..39113f08df3 --- /dev/null +++ b/packages/charts-vue/components/dynamic-resolver/src/converter/property-editor.converter.ts @@ -0,0 +1,14 @@ +import { ComponentSchema } from "@farris/charts-vue/components/charts-common/src/types"; +import { PropertyConverter, SchemaService } from "../types"; + +export default { + convertTo: (schema: ComponentSchema, propertyKey: string, propertyValue: any, schemaService: SchemaService) => { + if (schema.editor) { + schema.editor[propertyKey] = propertyValue; + } + }, + convertFrom: (schema: ComponentSchema, propertyKey: string, schemaService: SchemaService) => { + return schema.editor && Object.prototype.hasOwnProperty.call(schema.editor, propertyKey) ? + schema.editor[propertyKey] : schema[propertyKey]; + } +} as PropertyConverter; diff --git a/packages/charts-vue/components/dynamic-resolver/src/converter/right-toolbar.converter.ts b/packages/charts-vue/components/dynamic-resolver/src/converter/right-toolbar.converter.ts new file mode 100644 index 00000000000..2d9417d773d --- /dev/null +++ b/packages/charts-vue/components/dynamic-resolver/src/converter/right-toolbar.converter.ts @@ -0,0 +1,14 @@ +import { ComponentSchema } from "@farris/charts-vue/components/charts-common/src/types"; +import { PropertyConverter, SchemaService } from "../types"; + +export default { + convertTo: (schema: ComponentSchema, propertyKey: string, propertyValue: any, schemaService: SchemaService) => { + if (!schema.rightToolbar) { + schema.rightToolbar = []; + } + schema.rightToolbar[propertyKey] = propertyValue; + }, + convertFrom: (schema: ComponentSchema, propertyKey: string, schemaService: SchemaService) => { + return schema.rightToolbar ? schema.rightToolbar[propertyKey] : schema[propertyKey]; + } +} as PropertyConverter; diff --git a/packages/charts-vue/components/dynamic-resolver/src/converter/row-number.converter.ts b/packages/charts-vue/components/dynamic-resolver/src/converter/row-number.converter.ts new file mode 100644 index 00000000000..8ca72dfbcfb --- /dev/null +++ b/packages/charts-vue/components/dynamic-resolver/src/converter/row-number.converter.ts @@ -0,0 +1,13 @@ +import { ComponentSchema } from "@farris/charts-vue/components/charts-common/src/types"; +import { PropertyConverter, SchemaService } from "../types"; +export default { + convertTo: (schema: ComponentSchema, propertyKey: string, propertyValue: any, schemaService: SchemaService) => { + if (!schema.rowNumber) { + schema.rowNumber = {}; + } + schema.rowNumber[propertyKey] = propertyValue; + }, + convertFrom: (schema: ComponentSchema, propertyKey: string, schemaService: SchemaService) => { + return schema.rowNumber ? schema.rowNumber[propertyKey] : schema[propertyKey]; + } +} as PropertyConverter; diff --git a/packages/charts-vue/components/dynamic-resolver/src/editor-resolver.ts b/packages/charts-vue/components/dynamic-resolver/src/editor-resolver.ts new file mode 100644 index 00000000000..6a539482064 --- /dev/null +++ b/packages/charts-vue/components/dynamic-resolver/src/editor-resolver.ts @@ -0,0 +1,10 @@ +import { EditorResolver } from "./types"; + +export function createFormGroupEditorResolver(): EditorResolver { + function resolve(viewSchema: Record) { + return viewSchema.editor; + } + return { + resolve + }; +} diff --git a/packages/charts-vue/components/dynamic-resolver/src/event-handler-resolver.ts b/packages/charts-vue/components/dynamic-resolver/src/event-handler-resolver.ts new file mode 100644 index 00000000000..9d9954e304f --- /dev/null +++ b/packages/charts-vue/components/dynamic-resolver/src/event-handler-resolver.ts @@ -0,0 +1,90 @@ +import { EventHandlerResolver, ViewEvent } from "./types"; + +export function createEventHandlerResolver(): EventHandlerResolver { + function resolve(schema: Record, event: ViewEvent) { + const { name } = event; + return schema[`on${name.charAt(0).toUpperCase()}${name.slice(1)}`] || schema[name]; + }; + return { + resolve + }; +} + +export function createPageHeaderEventHandlerResolver(): EventHandlerResolver { + function resolve(schema: Record, event: ViewEvent) { + const buttons = schema.toolbar?.buttons as any[]; + if (!buttons || buttons.length < 1) { + return null; + } + const [payload, buttonId] = event.payloads; + const button = buttons.find((button: Record) => button.id === buttonId); + if (!button) { + return null; + } + return button.onClick || button.click; + }; + return { + resolve + }; +} + +export function createTabsEventHandlerResolver(): EventHandlerResolver { + function resolve(schema: Record, event: ViewEvent) { + const tabPages = schema.contents; + if (!tabPages || tabPages.length < 1) { + return null; + } + + const buttons = tabPages.reduce((tabsButtons: any[], tabPage: any) => { + const tabPageButtons = tabPage.toolbar && tabPage.toolbar.buttons || []; + tabsButtons.push(...tabPageButtons); + return tabsButtons; + }, []); + if (!buttons || buttons.length < 1) { + return; + } + const [payload, buttonId] = event.payloads; + const button = buttons.find((button: Record) => button.id === buttonId); + if (!button) { + return null; + } + return button.onClick || button.click; + }; + return { + resolve + }; +} +export function createResponseToolbarEventHandlerResolver(): EventHandlerResolver { + function resolve(schema: Record, event: ViewEvent) { + const buttons = schema.buttons as any[]; + if (!buttons || buttons.length < 1) { + return null; + } + const [payload, buttonId] = event.payloads; + const button = buttons.find((button: Record) => button.id === buttonId); + if (!button) { + return null; + } + return button.onClick || button.click; + }; + return { + resolve + }; +} +export function createSectionEventHandlerResolver(): EventHandlerResolver { + function resolve(schema: Record, event: ViewEvent) { + const buttons = schema.toolbar?.buttons as any[]; + if (!buttons || buttons.length < 1) { + return null; + } + const [payload, buttonId] = event.payloads; + const button = buttons.find((button: Record) => button.id === buttonId); + if (!button) { + return null; + } + return button.onClick || button.click; + }; + return { + resolve + }; +} diff --git a/packages/charts-vue/components/dynamic-resolver/src/events-resolver.ts b/packages/charts-vue/components/dynamic-resolver/src/events-resolver.ts new file mode 100644 index 00000000000..fd66d0c5d42 --- /dev/null +++ b/packages/charts-vue/components/dynamic-resolver/src/events-resolver.ts @@ -0,0 +1,20 @@ + +import { EventDispatcher } from "./types"; + +export function createEventsResolver() { + return (component: any, schema: Record, dispatcher: EventDispatcher) => { + const token = schema.id; + const { type } = schema; + const events = component.emits as any[]; + if (!events) { + return {}; + } + return events.filter((eventName: string) => eventName !== 'update:modelValue').reduce((mergedEvents: Record, eventName: string) => { + const eventNameProp = `on${eventName.charAt(0).toUpperCase()}${eventName.slice(1)}`; + mergedEvents[eventNameProp] = (...payloads) => { + dispatcher.dispatch(token, eventName, type, payloads); + }; + return mergedEvents; + }, {}); + }; +} diff --git a/packages/charts-vue/components/dynamic-resolver/src/object-expression.ts b/packages/charts-vue/components/dynamic-resolver/src/object-expression.ts new file mode 100644 index 00000000000..e4104b316de --- /dev/null +++ b/packages/charts-vue/components/dynamic-resolver/src/object-expression.ts @@ -0,0 +1,169 @@ +export type ObjectExpressionFunction = (target: string, param: any, value: any, context: Record) => boolean; + +interface Expression { + target: string; + operator: string; + param: any; + value: any; +} + +/** + * 解析对象表达式描述的布尔值 + * @param valueSchema 布尔值对象描述 + * @param context 解析表达式对象值所需的上下文对象 + * @returns boolean + * @example + * // 简化形式表示数组长度为0 + * {"sibling":0} + * @example + * // 数组长度不等于1 + * { + * "children":{ + * "length":{ + * "not":1 + * } + * } + * } + * @example + * // 存在某元素 + * { + * "children":{ + * "f-page-content":false + * } + * } + * { + * "parent":{ + * "f-page-main":true + * } + * } + * @example + * // 与条件 + * { + * "allOf":[ + * { + * "sibling":0, + * "parent":{ + * "f-page-main":true + * } + * } + * ] + * } + * // 或条件 + * { + * "anyOf":[ + * { + * "children":{ + * "length":{ + * "equal":1 + * }, + * "f-struct-like-card":true + * } + * }, + * { + * "children":{ + * "scroll-spy":false, + * "f-page-content":false, + * "f-struct-like-card":false + * } + * } + * ] + * } + */ +export function useObjectExpression(extendFunctions: Record = {}) { + + function judgingElementCount(target: string, param: any, value: any, context: Record) { + if (typeof value === 'number') { + return context[target].length === value; + } + if (typeof value === 'object') { + const compare = Object.keys(value)[0]; + const targetValue = value[compare]; + if (compare === 'not') { + return Number(context[target].length) !== Number(targetValue); + } + if (compare === 'moreThan') { + return Number(context[target].length) >= Number(targetValue); + } + if (compare === 'lessThan') { + return Number(context[target].length) <= Number(targetValue); + } + } + return false; + } + + function getProperty(target: string, param: any, value: any, context: Record) { + return context[target] && context[target].propertyValue && String(context[target].propertyValue.value) === String(value); + } + + const expressionCalculateFunctions = new Map([ + ['length', judgingElementCount], + ['getProperty', getProperty] + ]); + + Object.keys(extendFunctions).reduce((functionMaps: Map, operator: string) => { + functionMaps.set(operator, extendFunctions[operator]); + return functionMaps; + }, expressionCalculateFunctions); + + function generateExpressions(token: string, valueObject: any): Expression[] { + const target = token; + if (typeof valueObject === 'number') { + return [{ target, operator: 'length', param: null, value: Number(valueObject) }]; + } + if (typeof valueObject === 'boolean') { + return [{ target, operator: 'getProperty', param: token, value: Boolean(valueObject) }]; + } + if (typeof valueObject === 'object') { + return Object.keys(valueObject).map((key: string) => { + if (key === 'length') { + return { target, operator: 'length', param: null, value: valueObject[key] }; + } + const param = key; + const value = valueObject[key]; + const operator = 'getProperty'; + return { target, operator, param, value }; + }); + } + return []; + } + + function parseValueObjectToExpression(valueObject: Record): Expression[] { + const parsedExpression = Object.keys(valueObject).reduce((result: Expression[], token: string) => { + const expressions = generateExpressions(token, valueObject[token]); + result.push(...expressions); + return result; + }, []); + return parsedExpression; + } + + function calculateExpression(expression: Expression, context: Record) { + if (expressionCalculateFunctions.has(expression.operator)) { + const calculateFunction = expressionCalculateFunctions.get(expression.operator); + return calculateFunction && calculateFunction(expression.target, expression.param, expression.value, context) || false; + } + return false; + } + + function calculate(valueObject: Record, context: Record): boolean { + const parsedExpression = parseValueObjectToExpression(valueObject); + const result = parsedExpression.reduce((parsingResult: boolean, expression: Expression) => { + return parsingResult && calculateExpression(expression, context); + }, true); + + return result; + } + + function parseValueSchema(valueSchema: Record, context: Record): boolean { + const schemaKeys = Object.keys(valueSchema); + const allOf = schemaKeys.includes('allOf'); + const anyOf = schemaKeys.includes('anyOf'); + const hasLogicalOperatorsInSchemaKey = allOf || anyOf; + const logicalOperator = hasLogicalOperatorsInSchemaKey ? (allOf ? 'allOf' : 'anyOf') : 'allOf'; + const valueObjects = (hasLogicalOperatorsInSchemaKey ? valueSchema[logicalOperator] : [valueSchema]) as Record[]; + const expressionValues = valueObjects.map((valueObject: Record) => calculate(valueObject, context)); + const result = allOf ? !expressionValues.includes(false) : expressionValues.includes(true); + return result; + } + + return { parseValueSchema }; +} diff --git a/packages/charts-vue/components/dynamic-resolver/src/property-config-resolver.ts b/packages/charts-vue/components/dynamic-resolver/src/property-config-resolver.ts new file mode 100644 index 00000000000..02372dee1f7 --- /dev/null +++ b/packages/charts-vue/components/dynamic-resolver/src/property-config-resolver.ts @@ -0,0 +1,247 @@ +import { computed, ref } from "vue"; +import { EffectFunction, PropertyConverter, SchemaService } from './types'; +import { resolveSchemaWithDefaultValue } from "@farris/charts-vue/components/dynamic-resolver/"; +import { useObjectExpression } from './object-expression'; +import { ComponentSchema, EditorConfig } from "@farris/charts-vue/components/charts-common/src/types"; +import appearanceConverter from './converter/appearance.converter'; +import buttonsConverter from "./converter/buttons.converter"; +import propertyEditorConverter from "./converter/property-editor.converter"; +// import typeConverter from "./converter/type.converter"; +import changeEditorConverter from "./converter/change-editor.converter"; +import fieldSelectorConverter from "./converter/field-selector.converter"; +import paginationConverter from "./converter/pagination.converter"; +import rowNumberConverter from "./converter/row-number.converter"; +import gridSelectionConverter from "./converter/grid-selection.converter"; +import itemsCountConverter from "./converter/items-count.converter"; +import enumDataConverter from "./converter/enum-data.converter"; +import formGroupLabelConverter from "./converter/form-group-label.converter"; +import { ElementPropertyConfig, PropertyEntity } from "@farris/charts-vue/components/charts-common/src/types"; + +const propertyConfigSchemaMap = {} as Record; +const propertyConverterMap = new Map([ + ['/converter/appearance.converter', appearanceConverter], + ['/converter/buttons.converter', buttonsConverter], + ['/converter/property-editor.converter', propertyEditorConverter], + ['/converter/items-count.converter', itemsCountConverter], + // ['/converter/type.converter', typeConverter], + ['/converter/change-editor.converter', changeEditorConverter], + ['/converter/form-group-label.converter', formGroupLabelConverter], + ['/converter/field-selector.converter', fieldSelectorConverter], + ['/converter/pagination.converter', paginationConverter], + ['/converter/row-number.converter', rowNumberConverter], + ['/converter/grid-selection.converter', gridSelectionConverter], + ['/converter/enum-data.converter',enumDataConverter] +]); +const propertyEffectMap = {} as Record; +const propertyEditorMap = new Map([ + ['string', { type: 'input-group', enableClear: false }], + ['boolean', { + "type": "combo-list", + "textField": "name", + "valueField": "value", + "idField": "value", + "enableClear": false, + "editable": false, + "maxHeight": 64, + "data": [ + { + "value": true, + "name": "是" + }, + { + "value": false, + "name": "否" + } + ] + }], + ['enum', { "type": "combo-list", "maxHeight": 128, "enableClear": false, "editable": false }], + ['array', { "type": "button-edit" }], + ['number', { "type": "number-spinner","placeholder":"" }], + ['events-editor', { "type": "events-editor", hide: true }] +]); + +const useObjectExpressionComponstion = useObjectExpression(); + +function generateBooleanValue(pvalueSchema: Record, propertyConfigMap: Record) { + return () => useObjectExpressionComponstion.parseValueSchema(pvalueSchema, propertyConfigMap); +} + +function isVisible(propertySchemaKeys: string[], propertySchema: Record, propertyConfigMap: Record) + : boolean | (() => boolean) { + if (propertySchemaKeys.includes('visible') && propertySchema.visible !== undefined) { + return typeof propertySchema.visible === 'boolean' ? + () => Boolean(propertySchema.visible) : + propertySchema.visible === undefined ? true : generateBooleanValue(propertySchema.visible, propertyConfigMap); + } + return () => true; +} + +function isReadonly(propertySchemaKeys: string[], propertySchema: Record, propertyConfigMap: Record) { + if (propertySchemaKeys.includes('readonly') && propertySchema.readonly !== undefined) { + return typeof propertySchema.readonly === 'boolean' ? + () => Boolean(propertySchema.readonly) : + generateBooleanValue(propertySchema.readonly, propertyConfigMap); + } + return () => false; +} + +function tryGetPropertyConverter(propertySchema: Record, categoryConverter): PropertyConverter | null { + const $converter = propertySchema['$converter'] || categoryConverter; + if (typeof $converter === 'string') { + if ($converter && propertyConverterMap.has($converter)) { + return propertyConverterMap.get($converter) || null; + } + } + return $converter || null; +} + +/** + * + * @param propertiesInCategory + * 举例： + * visible: { + description: "运行时组件是否可见", + title: "是否可见", + type: "boolean" + } + 其中type属性 这个属性用来控制编辑器是哪一种，对应关系在propertyEditorMap中定义，boolean指定了下拉 + * @param propertyConfigMap + * @param editingSchema + * @param rawSchema + * @param schemaService + * @returns + */ +function getPropertyEntities( + propertiesInCategory: Record, + propertyConfigMap: Record, + editingSchema: ComponentSchema, + rawSchema: ComponentSchema, + schemaService: SchemaService, + componentId = '', + categoryConverter: any = '' +): PropertyEntity[] { + const propertyEntities = Object.keys(propertiesInCategory).map((propertyKey: string) => { + const updateCount = ref(1); + const propertyID = propertyKey; + const propertySchema = propertiesInCategory[propertyKey]; + const propertySchemaKeys = Object.keys(propertySchema); + const propertyName = propertySchema.title; + const propertyType = propertySchema.type; + const defaultEditor = propertyEditorMap.get(propertyType) || { type: 'input-group', enableClear: false }; + const editor = propertySchema.editor ? Object.assign({}, defaultEditor, propertySchema.editor) as EditorConfig : Object.assign({}, defaultEditor); + const visible = isVisible(propertySchemaKeys, propertySchema, propertyConfigMap); + const readonly = isReadonly(propertySchemaKeys, propertySchema, propertyConfigMap); + editor.readonly = editor.readonly===undefined?readonly():editor.readonly; + const cascadeConfig = propertySchema.type === 'cascade' ? getPropertyEntities(propertySchema.properties, propertyConfigMap, editingSchema, rawSchema, schemaService, componentId, categoryConverter) : []; + const hideCascadeTitle = true; + let converter = tryGetPropertyConverter(propertySchema, categoryConverter); + // const propertyValue = ref(converter ? converter.convertFrom(schema, propertyKey) : schema[propertyKey]); + const propertyValue = computed({ + get() { + if (updateCount.value) { + // class、style 统一处理 + if (['class', 'style'].find(id => id === propertyID) && !converter) { + converter = propertyConverterMap.get('/converter/appearance.converter') || null; + } + if (converter && converter.convertFrom) { + return converter.convertFrom(editingSchema, propertyKey, schemaService, componentId); + } + // 获取属性时，如果没有convertForm，并且通过在Schema上获取得值是空，那就获取defaultValue属性值或者是空 + const editingSchemaValue = editingSchema[propertyKey]; + return typeof editingSchemaValue == 'string' && editingSchemaValue === '' ? propertySchema['defaultValue'] || '' : editingSchemaValue; + } + return null; + }, + set(newValue) { + updateCount.value += 1; + if (converter && converter.convertTo) { + converter.convertTo(rawSchema, propertyKey, newValue, schemaService, componentId); + converter.convertTo(editingSchema, propertyKey, newValue, schemaService, componentId); + } else { + rawSchema[propertyKey] = newValue; + editingSchema[propertyKey] = newValue; + } + } + }); + const { refreshPanelAfterChanged } = propertySchema; + const propertyEntity = { propertyID, propertyName, propertyType, propertyValue, editor, visible, readonly, cascadeConfig, hideCascadeTitle, refreshPanelAfterChanged }; + propertyConfigMap[propertyID] = propertyEntity; + return propertyEntity; + }); + return propertyEntities; +} + +function getPropertyConfigByType(schemaType: string, schemaService: SchemaService, schema = {} as ComponentSchema): ElementPropertyConfig[] { + const propertyConfigMap = {} as Record; + const propertyConfigSchema = propertyConfigSchemaMap[schemaType]; + if (propertyConfigSchema && propertyConfigSchema.categories) { + const propertyConfigs = Object.keys(propertyConfigSchema.categories).map((categoryId: string) => { + const propertyCategory = propertyConfigSchema.categories[categoryId]; + const categoryName = propertyCategory?.title; + const properties = getPropertyEntities(propertyCategory.properties || {}, propertyConfigMap, {} as ComponentSchema, schema, schemaService); + return { categoryId, categoryName, properties }; + }); + return propertyConfigs; + } + return []; +} + +function tryToResolveReference(categoryId: string, propertyCategory: Record, rawSchema: ComponentSchema, schemaService: SchemaService, componentId = '') { + const refSchemaPath = propertyCategory.$ref.schema; + const $converter = propertyCategory.$ref.converter; + const refSchema = rawSchema[refSchemaPath]; + + const schemaType = refSchema.type; + const editingSchema = resolveSchemaWithDefaultValue(refSchema) as ComponentSchema; + const propertyConfigMap = {} as Record; + const propertyConfigSchema = propertyConfigSchemaMap[schemaType]; + if (propertyConfigSchema && propertyConfigSchema.categories) { + const propertyCategory = propertyConfigSchema.categories[categoryId]; + const categoryName = propertyCategory?.title; + if ($converter) { + Object.keys(propertyCategory.properties).forEach((propertyKey: any) => { + propertyCategory.properties[propertyKey].$converter = $converter; + }); + } + const propertiesInCategory = propertyCategory?.properties || {}; + const properties = getPropertyEntities(propertiesInCategory, propertyConfigMap, editingSchema, refSchema, schemaService, componentId); + return { categoryId, categoryName, properties }; + + } + return { categoryId, categoryName: '', properties: [] }; +} + +// jumphere +function getPropertyConfigBySchema(rawSchema: ComponentSchema, schemaService: SchemaService, designerItem: any, componentId: string, propertyConfig?: Record): ElementPropertyConfig[] { + const schemaType = rawSchema.type; + const editingSchema = resolveSchemaWithDefaultValue(rawSchema) as ComponentSchema; + const propertyConfigMap = {} as Record; + + // 先从ConfigMap中取简单类属性，若找不到，则在控件实例中取复杂属性 + let propertyConfigSchema = propertyConfig || propertyConfigSchemaMap[schemaType]; + if (propertyConfigSchema && Object.keys(propertyConfigSchema).length === 0 && designerItem && designerItem.getPropConfig) { + propertyConfigSchema = designerItem.getPropConfig(componentId); + } + if (propertyConfigSchema && propertyConfigSchema.categories) { + const propertyConfigs = [] as Array; + Object.keys(propertyConfigSchema.categories).map((categoryId: string) => { + const propertyCategory = propertyConfigSchema.categories[categoryId]; + if (propertyCategory.$ref) { + propertyConfigs.push(tryToResolveReference(categoryId, propertyCategory, rawSchema, schemaService, componentId) as ElementPropertyConfig); + return; + } + const categoryName = propertyCategory?.title; + const tabId = propertyCategory?.tabId; + const tabName = propertyCategory?.tabName; + const hide = propertyCategory?.hide; + const hideTitle = propertyCategory?.hideTitle; + const properties = getPropertyEntities(propertyCategory.properties || {}, propertyConfigMap, editingSchema, rawSchema, schemaService, componentId, propertyCategory['$converter']); + const { setPropertyRelates } = propertyCategory; + propertyConfigs.push({ categoryId, categoryName, tabId, tabName, hide, properties, hideTitle, setPropertyRelates }); + }); + return propertyConfigs; + } + return []; +} + +export { getPropertyConfigBySchema, getPropertyConfigByType, propertyConfigSchemaMap, propertyConverterMap, propertyEffectMap }; diff --git a/packages/charts-vue/components/dynamic-resolver/src/props-resolver.ts b/packages/charts-vue/components/dynamic-resolver/src/props-resolver.ts new file mode 100644 index 00000000000..aa27e0c9254 --- /dev/null +++ b/packages/charts-vue/components/dynamic-resolver/src/props-resolver.ts @@ -0,0 +1,52 @@ +import { DesignerHostService } from "@farris/charts-vue/components/charts-common/src/types"; +import { isFunction } from "@farris/charts-vue/components/charts-common/src/utils/src/type"; + +import { resolveSchemaToProps } from './resolver/schema/schema-resolver'; +import { DynamicResolver, EffectFunction, MapperFunction, SchemaResolverFunction } from './types'; +import { RegisterContext } from "@farris/charts-vue/components/charts-common/src/types"; + +/** + * 注册schema和props + */ +function registerSchemaAndProps( + defaultSchema: Record, + schemaResolver: SchemaResolverFunction, + propertyConfig: Record, + propertyEffect: EffectFunction, + registerContext: any +) { + const { schemaMap, schemaResolverMap, propertyConfigSchemaMap, propertyEffectMap } = registerContext; + schemaMap[defaultSchema.title] = defaultSchema; + schemaResolverMap[defaultSchema.title] = schemaResolver; + propertyConfigSchemaMap[defaultSchema.title] = propertyConfig; + propertyEffectMap[defaultSchema.title] = propertyEffect; +} + +export function getPropsResolverGenerator>( + componentPropsObject: T, + defaultSchema: Record, + schemaMapper: Map = new Map(), + schemaResolver: SchemaResolverFunction = ( + dynamicResolver: DynamicResolver, + schema: Record, + resolveContext: Record, + designerHostService?: DesignerHostService + ) => schema, + propertyConfig: Record = {}, + propertyEffect: EffectFunction = (properties: Record) => properties +) { + + return (registerContext: RegisterContext) => { + registerSchemaAndProps(defaultSchema, schemaResolver, propertyConfig, propertyEffect, registerContext); + + return (schemaValue: Record = {}) => { + const resolvedPropsValue = resolveSchemaToProps(schemaValue, defaultSchema, schemaMapper); + const defaultProps = Object.keys(componentPropsObject).reduce((propsObject: Record, propKey: string) => { + const defaultValue = componentPropsObject[propKey].default; + propsObject[propKey] = isFunction(defaultValue) ? defaultValue() : defaultValue; + return propsObject; + }, {}); + return Object.assign(defaultProps, resolvedPropsValue); + }; + }; +} diff --git a/packages/charts-vue/components/dynamic-resolver/src/resolver/property-config/property-config-resolver-design.ts b/packages/charts-vue/components/dynamic-resolver/src/resolver/property-config/property-config-resolver-design.ts new file mode 100644 index 00000000000..e4fba29a4a8 --- /dev/null +++ b/packages/charts-vue/components/dynamic-resolver/src/resolver/property-config/property-config-resolver-design.ts @@ -0,0 +1,13 @@ +import { EffectFunction } from '../../types'; +import { usePropertyConfigResolver } from './use-property-config-resolver'; + +const propertyConfigSchemaMapForDesigner = {} as Record; +const propertyEffectMapForDesigner = {} as Record; + +const { getPropertyConfigBySchema, getPropertyConfigByType, propertyConverterMap } = + usePropertyConfigResolver(propertyConfigSchemaMapForDesigner, propertyEffectMapForDesigner); + +export { + getPropertyConfigBySchema as getPropertyConfigBySchemaForDesigner, getPropertyConfigByType as getPropertyConfigByTypeForDesigner, + propertyConfigSchemaMapForDesigner, propertyConverterMap as propertyConverterMapForDesigner, propertyEffectMapForDesigner +}; diff --git a/packages/charts-vue/components/dynamic-resolver/src/resolver/property-config/property-config-resolver.ts b/packages/charts-vue/components/dynamic-resolver/src/resolver/property-config/property-config-resolver.ts new file mode 100644 index 00000000000..199cbf45c5e --- /dev/null +++ b/packages/charts-vue/components/dynamic-resolver/src/resolver/property-config/property-config-resolver.ts @@ -0,0 +1,10 @@ +import { EffectFunction} from '../../types'; +import { usePropertyConfigResolver } from './use-property-config-resolver'; + +const propertyConfigSchemaMap = {} as Record; +const propertyEffectMap = {} as Record; + +const { getPropertyConfigBySchema, getPropertyConfigByType, propertyConverterMap } = + usePropertyConfigResolver(propertyConfigSchemaMap, propertyEffectMap); + +export { getPropertyConfigBySchema, getPropertyConfigByType, propertyConfigSchemaMap, propertyConverterMap, propertyEffectMap }; diff --git a/packages/charts-vue/components/dynamic-resolver/src/resolver/property-config/use-property-config-resolver.ts b/packages/charts-vue/components/dynamic-resolver/src/resolver/property-config/use-property-config-resolver.ts new file mode 100644 index 00000000000..bfb27d31cf0 --- /dev/null +++ b/packages/charts-vue/components/dynamic-resolver/src/resolver/property-config/use-property-config-resolver.ts @@ -0,0 +1,247 @@ +import { computed, ref } from "vue"; +import { EffectFunction, PropertyConverter, SchemaService } from '../../types'; +import { useObjectExpression } from '../../object-expression'; +import { ComponentSchema,EditorConfig } from "@farris/charts-vue/components/charts-common/src/types"; +import { resolveSchemaWithDefaultValue } from "../schema/schema-resolver"; +import appearanceConverter from '../../converter/appearance.converter'; +import buttonsConverter from "../../converter/buttons.converter"; +import propertyEditorConverter from "../../converter/property-editor.converter"; +import changeEditorConverter from "../../converter/change-editor.converter"; +import fieldSelectorConverter from "../../converter/field-selector.converter"; +import paginationConverter from "../../converter/pagination.converter"; +import rowNumberConverter from "../../converter/row-number.converter"; +import gridSelectionConverter from "../../converter/grid-selection.converter"; +import { ElementPropertyConfig, PropertyEntity } from "@farris/charts-vue/components/charts-common/src/types"; +import itemsCountConverter from "../../converter/items-count.converter"; +import formGroupLabelConverter from "../../converter/form-group-label.converter"; + +export function usePropertyConfigResolver(propertyConfigSchemaMap: Record, propertyEffectMap: Record) { + const propertyConverterMap = new Map([ + ['/converter/appearance.converter', appearanceConverter], + ['/converter/buttons.converter', buttonsConverter], + ['/converter/property-editor.converter', propertyEditorConverter], + ['/converter/items-count.converter', itemsCountConverter], + // ['/converter/type.converter', typeConverter], + ['/converter/change-editor.converter', changeEditorConverter], + ['/converter/form-group-label.converter', formGroupLabelConverter], + ['/converter/field-selector.converter', fieldSelectorConverter], + ['/converter/pagination.converter', paginationConverter], + ['/converter/row-number.converter', rowNumberConverter], + ['/converter/grid-selection.converter', gridSelectionConverter] + ]); + const propertyEditorMap = new Map([ + ['string', { type: 'input-group', enableClear: false }], + ['boolean', { + "type": "combo-list", + "textField": "name", + "valueField": "value", + "idField": "value", + "enableClear": false, + "editable": false, + "maxHeight": 64, + "data": [ + { + "value": true, + "name": "是" + }, + { + "value": false, + "name": "否" + } + ] + }], + ['enum', { "type": "combo-list", "maxHeight": 350, "enableClear": false, "editable": false }], + ['array', { "type": "button-edit" }], + ['number', { "type": "number-spinner", "placeholder": "" }], + ['events-editor', { "type": "events-editor", hide: true }] + ]); + + const useObjectExpressionComponstion = useObjectExpression(); + + function generateBooleanValue(pvalueSchema: Record, propertyConfigMap: Record) { + return () => useObjectExpressionComponstion.parseValueSchema(pvalueSchema, propertyConfigMap); + } + + function isVisible(propertySchemaKeys: string[], propertySchema: Record, propertyConfigMap: Record) + : boolean | (() => boolean) { + if (propertySchemaKeys.includes('visible') && propertySchema.visible !== undefined) { + return typeof propertySchema.visible === 'boolean' ? + () => Boolean(propertySchema.visible) : + propertySchema.visible === undefined ? true : generateBooleanValue(propertySchema.visible, propertyConfigMap); + } + return () => true; + } + + function isReadonly(propertySchemaKeys: string[], propertySchema: Record, propertyConfigMap: Record) { + if (propertySchemaKeys.includes('readonly') && propertySchema.readonly !== undefined) { + return typeof propertySchema.readonly === 'boolean' ? + () => Boolean(propertySchema.readonly) : + generateBooleanValue(propertySchema.readonly, propertyConfigMap); + } + return () => false; + } + + function tryGetPropertyConverter(propertySchema: Record, categoryConverter): PropertyConverter | null { + const $converter = propertySchema['$converter'] || categoryConverter; + if (typeof $converter === 'string') { + if ($converter && propertyConverterMap.has($converter)) { + return propertyConverterMap.get($converter) || null; + } + } + return $converter || null; + } + + /** + * + * @param propertiesInCategory + * 举例： + * visible: { + description: "运行时组件是否可见", + title: "是否可见", + type: "boolean" + } + 其中type属性 这个属性用来控制编辑器是哪一种，对应关系在propertyEditorMap中定义，boolean指定了下拉 + * @param propertyConfigMap + * @param editingSchema + * @param rawSchema + * @param schemaService + * @returns + */ + function getPropertyEntities( + propertiesInCategory: Record, + propertyConfigMap: Record, + editingSchema: ComponentSchema, + rawSchema: ComponentSchema, + schemaService: SchemaService, + componentId = '', + categoryConverter: any = '' + ): PropertyEntity[] { + const propertyEntities = Object.keys(propertiesInCategory).map((propertyKey: string) => { + const updateCount = ref(1); + const propertyID = propertyKey; + const propertySchema = propertiesInCategory[propertyKey]; + const propertySchemaKeys = Object.keys(propertySchema); + const propertyName = propertySchema.title; + const propertyType = propertySchema.type; + const defaultEditor = propertyEditorMap.get(propertyType) || { type: 'input-group', enableClear: false }; + const editor = propertySchema.editor ? Object.assign({}, defaultEditor, propertySchema.editor) as EditorConfig : Object.assign({}, defaultEditor); + const visible = isVisible(propertySchemaKeys, propertySchema, propertyConfigMap); + const readonly = isReadonly(propertySchemaKeys, propertySchema, propertyConfigMap); + editor.readonly = editor.readonly === undefined ? readonly() : editor.readonly; + const cascadeConfig = propertySchema.type === 'cascade' ? getPropertyEntities(propertySchema.properties, propertyConfigMap, editingSchema, rawSchema, schemaService, componentId, categoryConverter) : []; + const hideCascadeTitle = true; + let converter = tryGetPropertyConverter(propertySchema, categoryConverter); + // const propertyValue = ref(converter ? converter.convertFrom(schema, propertyKey) : schema[propertyKey]); + const propertyValue = computed({ + get() { + if (updateCount.value) { + // class、style 统一处理 + if (['class', 'style'].find(id => id === propertyID) && !converter) { + converter = propertyConverterMap.get('/converter/appearance.converter') || null; + } + if (converter && converter.convertFrom) { + return converter.convertFrom(editingSchema, propertyKey, schemaService, componentId); + } + // 获取属性时，如果没有convertForm，并且通过在Schema上获取得值是空，那就获取defaultValue属性值或者是空 + const editingSchemaValue = editingSchema[propertyKey]; + return Object.prototype.hasOwnProperty.call(propertySchema, 'defaultValue') && (editingSchemaValue === undefined || typeof editingSchemaValue == 'string' && editingSchemaValue === '') ? propertySchema['defaultValue'] || '' : editingSchemaValue; + } + return null; + }, + set(newValue) { + updateCount.value += 1; + if (converter && converter.convertTo) { + converter.convertTo(rawSchema, propertyKey, newValue, schemaService, componentId); + converter.convertTo(editingSchema, propertyKey, newValue, schemaService, componentId); + } else { + rawSchema[propertyKey] = newValue; + editingSchema[propertyKey] = newValue; + } + } + }); + const { refreshPanelAfterChanged, description, isExpand } = propertySchema; + const propertyEntity = { propertyID, propertyName, propertyType, propertyValue, editor, visible, readonly, cascadeConfig, hideCascadeTitle, refreshPanelAfterChanged, description, isExpand }; + propertyConfigMap[propertyID] = propertyEntity; + return propertyEntity; + }); + return propertyEntities; + } + + function getPropertyConfigByType(schemaType: string, schemaService: SchemaService, schema = {} as ComponentSchema): ElementPropertyConfig[] { + const propertyConfigMap = {} as Record; + const propertyConfigSchema = propertyConfigSchemaMap[schemaType]; + if (propertyConfigSchema && propertyConfigSchema.categories) { + const propertyConfigs = Object.keys(propertyConfigSchema.categories).map((categoryId: string) => { + const propertyCategory = propertyConfigSchema.categories[categoryId]; + const categoryName = propertyCategory?.title; + const properties = getPropertyEntities(propertyCategory.properties || {}, propertyConfigMap, {} as ComponentSchema, schema, schemaService); + return { categoryId, categoryName, properties }; + }); + return propertyConfigs; + } + return []; + } + + function tryToResolveReference(categoryId: string, propertyCategory: Record, rawSchema: ComponentSchema, schemaService: SchemaService, componentId = '') { + const refSchemaPath = propertyCategory.$ref.schema; + const $converter = propertyCategory.$ref.converter; + const refSchema = rawSchema[refSchemaPath]; + + const schemaType = refSchema.type; + const editingSchema = resolveSchemaWithDefaultValue(refSchema) as ComponentSchema; + const propertyConfigMap = {} as Record; + const propertyConfigSchema = propertyConfigSchemaMap[schemaType]; + if (propertyConfigSchema && propertyConfigSchema.categories) { + const propertyCategory = propertyConfigSchema.categories[categoryId]; + const categoryName = propertyCategory?.title; + if ($converter) { + Object.keys(propertyCategory.properties).forEach((propertyKey: any) => { + propertyCategory.properties[propertyKey].$converter = $converter; + }); + } + const propertiesInCategory = propertyCategory?.properties || {}; + const properties = getPropertyEntities(propertiesInCategory, propertyConfigMap, editingSchema, refSchema, schemaService, componentId); + return { categoryId, categoryName, properties }; + + } + return { categoryId, categoryName: '', properties: [] }; + } + + // jumphere + function getPropertyConfigBySchema(rawSchema: ComponentSchema, schemaService: SchemaService, designerItem: any, componentId: string, propertyConfig?: Record): ElementPropertyConfig[] { + const schemaType = rawSchema.type; + const editingSchema = resolveSchemaWithDefaultValue(rawSchema) as ComponentSchema; + const propertyConfigMap = {} as Record; + + // 先从ConfigMap中取简单类属性，若找不到，则在控件实例中取复杂属性 + let propertyConfigSchema = propertyConfig || propertyConfigSchemaMap[schemaType]; + if (propertyConfigSchema && Object.keys(propertyConfigSchema).length === 0 && designerItem && designerItem.getPropConfig) { + propertyConfigSchema = designerItem.getPropConfig(componentId); + } + if (propertyConfigSchema && propertyConfigSchema.categories) { + const propertyConfigs = [] as Array; + Object.keys(propertyConfigSchema.categories).map((categoryId: string) => { + const propertyCategory = propertyConfigSchema.categories[categoryId]; + if (propertyCategory.$ref) { + propertyConfigs.push(tryToResolveReference(categoryId, propertyCategory, rawSchema, schemaService, componentId) as ElementPropertyConfig); + return; + } + const categoryName = propertyCategory?.title; + const tabId = propertyCategory?.tabId; + const tabName = propertyCategory?.tabName; + const hide = propertyCategory?.hide; + const hideTitle = propertyCategory?.hideTitle; + const properties = getPropertyEntities(propertyCategory.properties || {}, propertyConfigMap, editingSchema, rawSchema, schemaService, componentId, propertyCategory['$converter']); + const { setPropertyRelates } = propertyCategory; + propertyConfigs.push({ categoryId, categoryName, tabId, tabName, hide, properties, hideTitle, setPropertyRelates }); + }); + return propertyConfigs; + } + return []; + } + + return { + getPropertyConfigBySchema, getPropertyConfigByType, propertyConverterMap + }; +} + diff --git a/packages/charts-vue/components/dynamic-resolver/src/resolver/schema/schema-resolver-design.ts b/packages/charts-vue/components/dynamic-resolver/src/resolver/schema/schema-resolver-design.ts new file mode 100644 index 00000000000..d5fe3e93162 --- /dev/null +++ b/packages/charts-vue/components/dynamic-resolver/src/resolver/schema/schema-resolver-design.ts @@ -0,0 +1,14 @@ +import { SchemaResolverFunction } from "../../types"; +import { useSchemaResolver } from "./use-schema-resolver"; + +const schemaMapForDesigner = {} as Record; +const schemaResolverMapForDesigner = {} as Record; + +const { getSchemaByType, resolveSchemaWithDefaultValue, resolveSchemaToProps, mappingSchemaToProps } = + useSchemaResolver(schemaMapForDesigner, schemaResolverMapForDesigner); + +export { + getSchemaByType as getSchemaByTypeForDesigner, resolveSchemaWithDefaultValue as resolveSchemaWithDefaultValueForDesigner, + resolveSchemaToProps as resolveSchemaToPropsForDesigner, schemaMapForDesigner, schemaResolverMapForDesigner, + mappingSchemaToProps as mappingSchemaToPropsForDesigner +}; diff --git a/packages/charts-vue/components/dynamic-resolver/src/resolver/schema/schema-resolver.ts b/packages/charts-vue/components/dynamic-resolver/src/resolver/schema/schema-resolver.ts new file mode 100644 index 00000000000..083e2015cd3 --- /dev/null +++ b/packages/charts-vue/components/dynamic-resolver/src/resolver/schema/schema-resolver.ts @@ -0,0 +1,10 @@ +import { SchemaResolverFunction } from "../../types"; +import { useSchemaResolver } from "./use-schema-resolver"; + +const schemaMap = {} as Record; +const schemaResolverMap = {} as Record; + +const { getSchemaByType, resolveSchemaWithDefaultValue, resolveSchemaToProps, mappingSchemaToProps } = + useSchemaResolver(schemaMap, schemaResolverMap); + +export { getSchemaByType, resolveSchemaWithDefaultValue, resolveSchemaToProps, schemaMap, schemaResolverMap, mappingSchemaToProps }; diff --git a/packages/charts-vue/components/dynamic-resolver/src/resolver/schema/use-schema-resolver.ts b/packages/charts-vue/components/dynamic-resolver/src/resolver/schema/use-schema-resolver.ts new file mode 100644 index 00000000000..f4bed12e043 --- /dev/null +++ b/packages/charts-vue/components/dynamic-resolver/src/resolver/schema/use-schema-resolver.ts @@ -0,0 +1,138 @@ +import { cloneDeep, isPlainObject } from "lodash-es"; +import { MapperFunction, SchemaResolverFunction } from "../../types"; +import { DesignerHostService } from "@farris/charts-vue/components/charts-common/src/types"; + + +export function useSchemaResolver(schemaMap: Record, schemaResolverMap: Record) { + + function getSchemaValueByDefault(defaultSchema: Record): Record { + const { properties, title, ignore: ignoreList } = defaultSchema as Record; + const canIgnoreProperty = ignoreList && Array.isArray(ignoreList); + const resolvedSchema = Object.keys(properties).reduce((propsObject: Record, propKey: string) => { + if (!canIgnoreProperty || !ignoreList.find(item => item === propKey)) { + propsObject[propKey] = (properties[propKey].type === 'object' && !!properties[propKey].properties) ? + getSchemaValueByDefault(properties[propKey]) : cloneDeep(properties[propKey].default); + } + return propsObject; + }, {}); + if (title && (!canIgnoreProperty || !ignoreList.find(item => item === 'id'))) { + const typePrefix = title.toLowerCase().replace(/-/g, '_'); + resolvedSchema.id = `${typePrefix}_${Math.random().toString().slice(2, 6)}`; + } + return resolvedSchema; + } + + /** + * 获取控件元数据，只组装必填的字段 + */ + function getRequiredSchemaValueByDefault(defaultSchema: Record): Record { + const { properties, title, required: requiredProperty } = defaultSchema as Record; + if (requiredProperty && Array.isArray(requiredProperty)) { + const resolvedSchema = requiredProperty.reduce((propsObject: Record, propKey: string) => { + + propsObject[propKey] = (properties[propKey].type === 'object' && !!properties[propKey].properties) ? + getSchemaValueByDefault(properties[propKey]) : cloneDeep(properties[propKey].default); + + return propsObject; + }, {}); + if (title && requiredProperty.find(item => item === 'id')) { + const typePrefix = title.toLowerCase().replace(/-/g, '_'); + resolvedSchema.id = `${typePrefix}_${Math.random().toString().slice(2, 6)}`; + } + return resolvedSchema; + } + return { + type: title + }; + + } + + function getSchemaByType(componentType: string, resolveContext: Record = {}, designerHostService?: DesignerHostService) + : Record | null { + const defaultSchema = schemaMap[componentType]; + if (defaultSchema) { + let componentSchema = getRequiredSchemaValueByDefault(defaultSchema); + const schemaResolver = schemaResolverMap[componentType]; + componentSchema = schemaResolver ? schemaResolver({ getSchemaByType }, componentSchema, resolveContext, designerHostService) + : componentSchema; + return componentSchema; + } + return null; + } + + function resolveSchema(schemaValue: Record, defaultSchema: Record): Record { + + const resolvedSchema = getSchemaValueByDefault(defaultSchema); + + Object.keys(resolvedSchema).reduce((resolvedSchema: Record, propKey: string) => { + if (Object.prototype.hasOwnProperty.call(schemaValue, propKey)) { + // 解决属性是对象类型，默认值被冲掉的情况 + // 增加非判断，解决针对属性时对象，但是schemaValue=null或者undefined情况 + if (resolvedSchema[propKey] && isPlainObject(resolvedSchema[propKey]) && (isPlainObject(schemaValue[propKey] || !schemaValue[propKey]))) { + Object.assign(resolvedSchema[propKey], schemaValue[propKey] || {}); + } else { + resolvedSchema[propKey] = schemaValue[propKey]; + } + } + + return resolvedSchema; + }, resolvedSchema); + + return resolvedSchema; + }; + + function mappingSchemaToProps(resolvedSchema: Record, schemaMapper: Map) { + const props = Object.keys(resolvedSchema) + .filter((propKey: string) => resolvedSchema[propKey] != null) + .reduce((resolvedProps: Record, propKey: string) => { + if (schemaMapper.has(propKey)) { + const mapper = schemaMapper.get(propKey) as string | MapperFunction; + if (typeof mapper === 'string') { + resolvedProps[mapper] = resolvedSchema[propKey]; + } else { + const mapperResult = (mapper as MapperFunction)(propKey, resolvedSchema[propKey], resolvedSchema); + Object.assign(resolvedProps, mapperResult); + Object.assign(resolvedSchema, mapperResult); + } + } else { + resolvedProps[propKey] = resolvedSchema[propKey]; + } + return resolvedProps; + }, {}); + return props; + } + + function resolveSchemaToProps( + schemaValue: Record, + defaultSchema: Record, + schemaMapper: Map = new Map() + ): Record { + const resolvedSchema = resolveSchema(schemaValue, defaultSchema); + const props = mappingSchemaToProps(resolvedSchema, schemaMapper); + return props; + } + + function resolveSchemaWithDefaultValue(schemaValue: Record): Record { + const componentType = schemaValue.type; + if (componentType) { + const defaultSchema = schemaMap[componentType]; + if (!defaultSchema) { + return schemaValue; + } + const resolvedSchema = resolveSchema(schemaValue, defaultSchema); + const editorType = schemaValue.editor?.type || ''; + /* 解决schemeValue结构如下图场景，在editor下，获取不到date-picker类型的默认值的问题 + * {type:'input-group',...,editor:{type:'date-picker',...}} + */ + if (editorType) { + const defaulEditorSchema = schemaMap[editorType]; + const resolvedEditorSchema = resolveSchema(schemaValue.editor, defaulEditorSchema); + resolvedSchema.editor = resolvedEditorSchema; + } + return resolvedSchema; + } + return schemaValue; + } + + return { getSchemaByType, resolveSchemaWithDefaultValue, resolveSchemaToProps, mappingSchemaToProps }; +} diff --git a/packages/charts-vue/components/dynamic-resolver/src/selection-item-resolver.ts b/packages/charts-vue/components/dynamic-resolver/src/selection-item-resolver.ts new file mode 100644 index 00000000000..6b946eae93f --- /dev/null +++ b/packages/charts-vue/components/dynamic-resolver/src/selection-item-resolver.ts @@ -0,0 +1,19 @@ +import { SelectionItemResolver } from "./types"; + +export function createDataGridSelectionItemResolver(): SelectionItemResolver { + function selectItemById(component: any, id: string) { + return component.selectItemById(id); + } + return { + selectItemById + }; +} + +export function createTreeGridSelectionItemResolver(): SelectionItemResolver { + function selectItemById(component: any, id: string) { + return component.selectItemById(id); + } + return { + selectItemById + }; +} diff --git a/packages/charts-vue/components/dynamic-resolver/src/types.ts b/packages/charts-vue/components/dynamic-resolver/src/types.ts new file mode 100644 index 00000000000..0d34468fc87 --- /dev/null +++ b/packages/charts-vue/components/dynamic-resolver/src/types.ts @@ -0,0 +1,83 @@ + +import { DesignerHostService } from "@farris/charts-vue/components/charts-common/src/types"; + +export type MapperFunction = (key: string, value: any, resolvedSchema?: any) => Record; + +export interface SchemaService { + + closest: (componentId: string, componentType: string) => Record | null; + + getSchemaById: (string) => Record; + + load: (componentSchema: Record) => void; + + select: (root: Record, predicate: (child: Record) => boolean) => Record; + + getRealEditorType: (editorType: string) => string; +} + +export interface PropertyConverter { + + convertTo: (schema: Record, propertyKey: string, propertyValue: any, schemaService: SchemaService, componentId?: string) => void; + + convertFrom: (schema: Record, propertyKey: string, schemaService: SchemaService, componentId?: string) => any; +} + +export interface DynamicResolver { + getSchemaByType: (componentType: string, resolveContext?: Record, designerHostService?: DesignerHostService) => Record | null; + getPropertyConfigByType?: (componentType: string) => Record | null; +}; + +export type SchemaResolverFunction = ( + dynamicResolver: DynamicResolver, + schema: Record, + resolveContext: Record, + designerHostService?: DesignerHostService +) => Record; + +export type EffectFunction = (source: Record) => Record; + +export interface EventDispatcher { + dispatch(token: string, eventName: string, ...payloads); +} + +export interface BindingModel { + getValue(field: string); + setValue(field: string, value: any); + getList(dataSource: string); + updateData(...payloads); + dataMapping(...payloads); +} + +export interface BindingData { + getValue(elementId: string); + setValue(elementId: string, field: string, value: any); +} +export interface BindingResolver { + resolve(schema: Record, bindingData: BindingData); +} + +export interface SelectionItemResolver { + selectItemById(component: any, id: string); +} + +export interface EditorResolver { + resolve(schema: Record); +} + +export interface UpdateColumnsResolver { + updateColumns(component: any ,schema: Record); +} + +export interface ViewEvent { + token: string; + type: string; + name: string; + payloads: any[]; +} +export interface EventHandlerResolver { + resolve(schema: Record, event: ViewEvent); +} +export interface Caller { + call: (methodName: string, ...payloads: any[]) => any; +} diff --git a/packages/charts-vue/components/dynamic-resolver/src/update-columns-resolver.ts b/packages/charts-vue/components/dynamic-resolver/src/update-columns-resolver.ts new file mode 100644 index 00000000000..a6556e0fc80 --- /dev/null +++ b/packages/charts-vue/components/dynamic-resolver/src/update-columns-resolver.ts @@ -0,0 +1,11 @@ +import { UpdateColumnsResolver } from "./types"; + +export function createDataViewUpdateColumnsResolver(): UpdateColumnsResolver { + function updateColumns(component: any, schema: Record) { + const { columns } = schema; + return component.updateColumns(columns); + } + return { + updateColumns + }; +} diff --git a/packages/charts-vue/components/dynamic-resolver/src/visible-prop-resolver.ts b/packages/charts-vue/components/dynamic-resolver/src/visible-prop-resolver.ts new file mode 100644 index 00000000000..94a6e09666e --- /dev/null +++ b/packages/charts-vue/components/dynamic-resolver/src/visible-prop-resolver.ts @@ -0,0 +1,8 @@ +export function createVisiblePropResolver() { + function resolve(schema: Record) { + return Object.prototype.hasOwnProperty.call(schema, 'visible') ? schema.visible : null; + } + return { + resolve + }; +} diff --git a/packages/designer/public/designer-canvas/empty1.json b/packages/designer/public/designer-canvas/empty1.json index 257d9663944..1c891015080 100644 --- a/packages/designer/public/designer-canvas/empty1.json +++ b/packages/designer/public/designer-canvas/empty1.json @@ -1067,245 +1067,7 @@ "title": "主内容容器", "appearance": null, "visible": true, - "contents": [ - { - "id": "card-page-form-container", - "type": "form", - "title": "Form组件容器", - "appearance": null, - "contents": [ - { - "id": "form_id", - "type": "form-group", - "appearance": null, - "label": "主键", - "binding": { - "type": "Form", - "path": "id", - "field": "389ab039-9b60-4dd0-8cdc-a23c0feccf31", - "fullPath": "ID" - }, - "editor": { - "type": "input-group", - "required": true, - "readonly": { - "type": "StateMachine", - "field": "canEdit", - "status": false - }, - "maxLength": 36 - }, - "path": "id" - }, - { - "id": "form_version", - "type": "form-group", - "appearance": null, - "label": "版本", - "binding": { - "type": "Form", - "path": "version", - "field": "e3ca9955-1155-4a4b-a164-e48c31928c24", - "fullPath": "Version" - }, - "editor": { - "type": "datetime-picker", - "required": false, - "readonly": { - "type": "StateMachine", - "field": "canEdit", - "status": false - }, - "displayFormat": "yyyy-MM-dd HH:mm:ss" - }, - "path": "version" - }, - { - "id": "form_billStatus_BillState", - "type": "form-group", - "appearance": null, - "label": "状态", - "binding": { - "type": "Form", - "path": "billStatus_BillState", - "field": "9fefd0ed-0101-468f-ae3f-40c76c0f06b0", - "fullPath": "BillStatus.BillState" - }, - "editor": { - "type": "picker", - "data": [ - { - "disabled": false, - "name": "制单", - "value": "Billing" - }, - { - "disabled": false, - "name": "提交审批", - "value": "SubmitApproval" - }, - { - "disabled": false, - "name": "审批通过", - "value": "Approved" - }, - { - "disabled": false, - "name": "审批不通过", - "value": "ApprovalNotPassed" - } - ], - "textField": "name", - "valueField": "value", - "required": false, - "readonly": { - "type": "StateMachine", - "field": "canEdit", - "status": false - } - }, - "path": "billStatus.billState" - }, - { - "id": "form_processInstance_ProcessInstance", - "type": "form-group", - "appearance": null, - "label": "流程实例", - "binding": { - "type": "Form", - "path": "processInstance_ProcessInstance", - "field": "12ef9c5c-ad8f-4da3-a430-c8a7f2162135", - "fullPath": "ProcessInstance.ProcessInstance" - }, - "editor": { - "type": "input-group", - "required": false, - "readonly": { - "type": "StateMachine", - "field": "canEdit", - "status": false - }, - "maxLength": 36 - }, - "path": "processInstance.processInstance" - }, - { - "id": "form_code", - "type": "form-group", - "appearance": null, - "label": "编号", - "binding": { - "type": "Form", - "path": "code", - "field": "8537ca17-502f-4b90-ac87-ae1dde9a7f03", - "fullPath": "code" - }, - "editor": { - "type": "input-group", - "required": false, - "readonly": { - "type": "StateMachine", - "field": "canEdit", - "status": false - }, - "maxLength": 36 - }, - "path": "code" - }, - { - "id": "form_name", - "type": "form-group", - "appearance": null, - "label": "名称", - "binding": { - "type": "Form", - "path": "name", - "field": "6a051d6e-f870-4a9f-84df-043cfbc26cf2", - "fullPath": "name" - }, - "editor": { - "type": "input-group", - "required": false, - "readonly": { - "type": "StateMachine", - "field": "canEdit", - "status": false - }, - "maxLength": 36 - }, - "path": "name" - }, - { - "id": "form_booleanField", - "type": "form-group", - "appearance": null, - "label": "布尔字段", - "binding": { - "type": "Form", - "path": "booleanField", - "field": "f51c1e5d-fe58-4591-8cd1-25a119c9f4c1", - "fullPath": "booleanField" - }, - "editor": { - "type": "switch", - "required": false, - "readonly": { - "type": "StateMachine", - "field": "canEdit", - "status": false - } - }, - "path": "booleanField" - }, - { - "id": "form_numberField", - "type": "form-group", - "appearance": null, - "label": "数值字段", - "binding": { - "type": "Form", - "path": "numberField", - "field": "1f816b38-2a72-4252-8eb6-760b8f97fcea", - "fullPath": "numberField" - }, - "editor": { - "type": "number-input", - "precision": 0, - "required": false, - "readonly": { - "type": "StateMachine", - "field": "canEdit", - "status": false - }, - "maxLength": 0 - }, - "path": "numberField" - }, - { - "id": "form_dateField", - "type": "form-group", - "appearance": null, - "label": "日期字段", - "binding": { - "type": "Form", - "path": "dateField", - "field": "4911913b-1868-4b34-b4e0-84939b14ab6e", - "fullPath": "dateField" - }, - "editor": { - "type": "date-picker", - "required": false, - "readonly": { - "type": "StateMachine", - "field": "canEdit", - "status": false - }, - "displayFormat": "yyyy-MM-dd" - }, - "path": "dateField" - } - ] - } + "contents": [ ] }, { @@ -1318,38 +1080,17 @@ "visible": true, "contents": [ { - "id": "card-page-buttongroup-container", - "type": "content-container", - "appearance": null, - "size": null, - "padding": { - "left": 16, - "right": 16, - "top": 8, - "bottom": 8 - }, - "display": "flex", - "flexBox": { - "direction": "row" - }, - "visible": true, - "title": "按钮组容器", - "contents": [ - { "id": "card-page-save-button", "type": "button", "title": "保存按钮", "visible": true, - "round": true, "disabled": false, "text": "按钮", - "icon": "图标", - "block": true, - "displayType": "primary", - "onClick": "Save" + "icon": "图标" + } - ] - } + + ] } ] diff --git a/packages/designer/src/components/composition/designer-context/use-mobile-designer-context.ts b/packages/designer/src/components/composition/designer-context/use-mobile-designer-context.ts index 8a5a178789f..e6af180b982 100644 --- a/packages/designer/src/components/composition/designer-context/use-mobile-designer-context.ts +++ b/packages/designer/src/components/composition/designer-context/use-mobile-designer-context.ts @@ -10,7 +10,7 @@ import { import { useMobileControlCreator } from "../control-creator/use-mobile-control-creator"; import { PageComponent, UsePageSchema } from "../../../components/types"; import ControllCategories from '../schema-repository/controller/mobile-categories'; -import { FChartsRadar } from '@farris/charts-vue/components'; +import { FChartsBar } from '@farris/charts-vue/components'; export function useMobileDesignerContext(): UseDesignerContext { /** 设计器模式 */ @@ -25,8 +25,9 @@ export function useMobileDesignerContext(): UseDesignerContext { ContentContainer, Card, FloatContainer, Textarea, DatePicker, DateTimePicker, Lookup, Navbar, ListView, Picker, NumberInput, Switch, CheckboxGroup, RadioGroup, Form, FormItem, InputGroup, - Button, ButtonGroup,FChartsRadar + Button, ButtonGroup, FChartsBar ]; + registerDesignerComponents(componentsToRegister); /** 支持的控制器 */ diff --git a/packages/designer/src/components/types/toolbox/mobile-toolbox.json b/packages/designer/src/components/types/toolbox/mobile-toolbox.json index fdc942bfbc1..dbd259ae19c 100644 --- a/packages/designer/src/components/types/toolbox/mobile-toolbox.json +++ b/packages/designer/src/components/types/toolbox/mobile-toolbox.json @@ -1,4 +1,24 @@ [ +{ + "type": "charts", + "name": "图表控件", + "items": [ + { + "id": "ChartsBar", + "type": "charts-bar", + "name": "图表", + "category": "basic", + "icon": "button" + }, + { + "id": "111", + "type": "111", + "name": "图表111", + "category": "basic", + "icon": "111" + } + ] + }, { "type": "basic", "name": "基础类控件", diff --git a/packages/mobile-ui-vue/components/button/index.ts b/packages/mobile-ui-vue/components/button/index.ts index 8084a9042c0..0021e31a6e2 100644 --- a/packages/mobile-ui-vue/components/button/index.ts +++ b/packages/mobile-ui-vue/components/button/index.ts @@ -11,6 +11,5 @@ const Button = withInstall(ButtonInstallless); withRegister(Button, { name: BUTTON_REGISTERED_NAME, propsResolverGenerator }); withRegisterDesigner(Button, { name: BUTTON_REGISTERED_NAME, propsResolverGenerator, designerComponent: ButtonDesign }); - export { Button }; export default Button; -- Gitee From 0d2ebb060eb12da971584c70894bffef28b02a1c Mon Sep 17 00:00:00 2001 From: cy <15990550+langchaocy@user.noreply.gitee.com> Date: Sat, 5 Jul 2025 11:21:55 +0800 Subject: [PATCH 03/23] =?UTF-8?q?fix:=20=E5=AF=B9charts-bar=E5=A2=9E?= =?UTF-8?q?=E5=8A=A0=E9=BB=98=E8=AE=A4=E5=B1=9E=E6=80=A7=E5=80=BC=EF=BC=8C?= =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E4=BA=86=E6=AD=A4=E7=BB=84=E4=BB=B6=E4=B8=8D?= =?UTF-8?q?=E8=83=BD=E5=9C=A8=E8=AE=BE=E8=AE=A1=E5=99=A8=E4=B8=AD=E6=AD=A3?= =?UTF-8?q?=E5=B8=B8=E6=8B=96=E6=8B=BD=E6=98=BE=E7=A4=BA=E7=9A=84=E9=97=AE?= =?UTF-8?q?=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../charts-bar/src/charts-bar.component.tsx | 9 ++--- .../charts-bar/src/charts-bar.props.ts | 16 ++++++--- .../designer/charts-bar.design.component.tsx | 4 --- .../charts-bar.property-config.ts | 36 +++++++++++++++---- .../src/schema/charts-bar.schema.json | 3 +- .../charts-common/src/props/dg-control.ts | 1 + 6 files changed, 48 insertions(+), 21 deletions(-) diff --git a/packages/charts-vue/components/charts-bar/src/charts-bar.component.tsx b/packages/charts-vue/components/charts-bar/src/charts-bar.component.tsx index c3ea0758e3f..32779178227 100644 --- a/packages/charts-vue/components/charts-bar/src/charts-bar.component.tsx +++ b/packages/charts-vue/components/charts-bar/src/charts-bar.component.tsx @@ -48,8 +48,10 @@ export default defineComponent({ return barseries; }) }; + console.log(baseOption) chartInstance.setOption(baseOption, true); + } const initChart = () => { @@ -64,9 +66,7 @@ export default defineComponent({ updateChart(); - console.log("aaaaa") - console.log(props) - console.log(chartInstance) + const { onClick, onDbClick, onMousedown, onMousemove, onMouseup, onMouseover, onMouseout, onGlobalout, onContextmenu } = useMouseEvent(chartInstance, context); onClick(), onDbClick(), onMousedown(), onMousemove(), onMouseup(), onMouseover(), onMouseout(), onGlobalout(), onContextmenu(); @@ -120,13 +120,14 @@ export default defineComponent({ return () => ( <> +
charts-bar
+ /> ); diff --git a/packages/charts-vue/components/charts-bar/src/charts-bar.props.ts b/packages/charts-vue/components/charts-bar/src/charts-bar.props.ts index 76b312775b3..67e2ebe8bea 100644 --- a/packages/charts-vue/components/charts-bar/src/charts-bar.props.ts +++ b/packages/charts-vue/components/charts-bar/src/charts-bar.props.ts @@ -141,19 +141,25 @@ export const chartsBarProps = { backgroundColor: { type: String }, - width: { type: [String, Number]}, + width: { type: [String, Number], default: '100%'}, - height: { type: [String, Number]}, + height: { type: [String, Number], default: '300px'}, textStyle: { type: Object as PropType }, - xAxis: { type: Object as PropType }, + xAxis: { type: Object as PropType, default: { + type: 'category', + data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] + }}, - yAxis: { type: Object as PropType }, + yAxis: { type: Object as PropType, default: {type: 'value'} }, /** * 数据系列 */ - series: { type: Array as PropType, default: [{ ...barSeriesProps }] }, + // series: { type: Array as PropType, default: [{ ...barSeriesProps }] }, + series: { type: Array as PropType, default: [{ + data: [29.9, 71.5, 52.6, 35.5, 42.5, 21.1, 53.1] + }] }, theme: { type: String, default: 'defaultTheme' }, diff --git a/packages/charts-vue/components/charts-bar/src/designer/charts-bar.design.component.tsx b/packages/charts-vue/components/charts-bar/src/designer/charts-bar.design.component.tsx index 79d862ef05c..ca513e359c9 100644 --- a/packages/charts-vue/components/charts-bar/src/designer/charts-bar.design.component.tsx +++ b/packages/charts-vue/components/charts-bar/src/designer/charts-bar.design.component.tsx @@ -30,11 +30,7 @@ export default defineComponent({ return () => { return ( - <> -
nnnnn
- - ); }; } diff --git a/packages/charts-vue/components/charts-bar/src/property-config/charts-bar.property-config.ts b/packages/charts-vue/components/charts-bar/src/property-config/charts-bar.property-config.ts index 0ee252956ef..41112f2861a 100644 --- a/packages/charts-vue/components/charts-bar/src/property-config/charts-bar.property-config.ts +++ b/packages/charts-vue/components/charts-bar/src/property-config/charts-bar.property-config.ts @@ -5,8 +5,11 @@ export class ChartsBarProperty extends BaseControlProperty { super(componentId, designerHostService); } public getPropertyConfig(propertyData: any) { - this.propertyConfig.categories['appearance'] = this.getChartsBarBehaviorConfig(propertyData); + this.propertyConfig.categories['basic'] = this.getBasicPropConfig(propertyData); + this.propertyConfig.categories['appearance'] = this.getAppearanceConfig(propertyData); + + this.propertyConfig.categories['behavior'] = this.getChartsBarBehaviorConfig(propertyData); return this.propertyConfig; } @@ -15,23 +18,42 @@ export class ChartsBarProperty extends BaseControlProperty { description: "基本信息", title: "行为", properties: { + name: { + title: "名字", + type: 'string', + }, + height: { + title: "高度", + type: "select", + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'100px' , name: '100px' }, + { value:'200px' , name: '200px' }, + { value:'300px' , name: '300px' }, + ] + } + }, + color: { title: "颜色", - type: 'select', + type: "select", editor: { type: 'combo-list', textField: 'name', valueField: 'value', editable: false, data: [ - { value:'primary' , name: '主要按钮' }, - { value:'secondary' , name: '次要按钮' }, - { value:'success' , name: '成功按钮' }, - { value:'warning' , name: '警告按钮' }, - { value:'danger' , name: '危险按钮' } + { value:'#5470c6' , name: '颜色1' }, + { value:'#91cc75' , name: '颜色2' }, + { value:'#fac858' , name: '颜色3' }, ] } } + } }; } diff --git a/packages/charts-vue/components/charts-bar/src/schema/charts-bar.schema.json b/packages/charts-vue/components/charts-bar/src/schema/charts-bar.schema.json index 03be4c6bc63..16dcd512a78 100644 --- a/packages/charts-vue/components/charts-bar/src/schema/charts-bar.schema.json +++ b/packages/charts-vue/components/charts-bar/src/schema/charts-bar.schema.json @@ -15,7 +15,8 @@ "default": "charts-bar" }, "name": { - "type": "string" + "type": "string", + "default": "charts-bar" }, "code": { "type": "string" diff --git a/packages/charts-vue/components/charts-common/src/props/dg-control.ts b/packages/charts-vue/components/charts-common/src/props/dg-control.ts index 7686b232834..c51a73e733b 100644 --- a/packages/charts-vue/components/charts-common/src/props/dg-control.ts +++ b/packages/charts-vue/components/charts-common/src/props/dg-control.ts @@ -1,4 +1,5 @@ export const DgControl = { + 'charts-bar': { type: 'charts-bar', name: '柱状图', icon: 'ChartsBar' }, 'module': { type: 'Module', name: '模块', icon: 'Module' }, -- Gitee From 46e3e86dd3c648c2054b51c42608c4dca7b58fca Mon Sep 17 00:00:00 2001 From: cy <15990550+langchaocy@user.noreply.gitee.com> Date: Sat, 5 Jul 2025 12:55:21 +0800 Subject: [PATCH 04/23] =?UTF-8?q?fix:=20=E8=83=BD=E7=AE=80=E5=8D=95?= =?UTF-8?q?=E4=BF=AE=E6=94=B9charts-bar=E7=9A=84color=E5=B1=9E=E6=80=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../charts-bar/src/charts-bar.component.tsx | 4 +- .../designer/charts-bar.design.component.tsx | 10 +++- .../charts-bar.property-config.ts | 56 +++++++++---------- 3 files changed, 36 insertions(+), 34 deletions(-) diff --git a/packages/charts-vue/components/charts-bar/src/charts-bar.component.tsx b/packages/charts-vue/components/charts-bar/src/charts-bar.component.tsx index 32779178227..8c590686346 100644 --- a/packages/charts-vue/components/charts-bar/src/charts-bar.component.tsx +++ b/packages/charts-vue/components/charts-bar/src/charts-bar.component.tsx @@ -46,9 +46,9 @@ export default defineComponent({ const barseries = { ...series }; barseries.type = 'bar'; return barseries; - }) + }), + color: props.color }; - console.log(baseOption) chartInstance.setOption(baseOption, true); diff --git a/packages/charts-vue/components/charts-bar/src/designer/charts-bar.design.component.tsx b/packages/charts-vue/components/charts-bar/src/designer/charts-bar.design.component.tsx index ca513e359c9..48a31cf0913 100644 --- a/packages/charts-vue/components/charts-bar/src/designer/charts-bar.design.component.tsx +++ b/packages/charts-vue/components/charts-bar/src/designer/charts-bar.design.component.tsx @@ -1,4 +1,4 @@ -import { computed, defineComponent, inject, onMounted, ref, SetupContext } from 'vue'; +import { computed, defineComponent, inject, onMounted, ref, SetupContext, watch } from 'vue'; import { DesignerHostService, DesignerItemContext } from '@farris/charts-vue/components/charts-common/src/types'; import { useDesignerComponent } from '@farris/charts-vue/components/charts-common/src/compositions/use-designer-component'; @@ -19,13 +19,17 @@ export default defineComponent({ onMounted(() => { elementRef.value.componentInstance = componentInstance; - console.log('FmChartsBarDesign') }); + watch(props, ()=> { + console.log(123) + console.log(props) + }) context.expose(componentInstance.value); const chartsBarProps = computed(() => ({ - title: props.title + name: props.name, + color: props.color, })); return () => { diff --git a/packages/charts-vue/components/charts-bar/src/property-config/charts-bar.property-config.ts b/packages/charts-vue/components/charts-bar/src/property-config/charts-bar.property-config.ts index 41112f2861a..f9a64ef709e 100644 --- a/packages/charts-vue/components/charts-bar/src/property-config/charts-bar.property-config.ts +++ b/packages/charts-vue/components/charts-bar/src/property-config/charts-bar.property-config.ts @@ -1,4 +1,5 @@ import { BaseControlProperty } from "@farris/charts-vue/components/charts-common/src/props"; +import { color } from "echarts"; export class ChartsBarProperty extends BaseControlProperty { constructor(componentId: string, designerHostService: any) { @@ -19,39 +20,36 @@ export class ChartsBarProperty extends BaseControlProperty { title: "行为", properties: { name: { - title: "名字", + title: "name", type: 'string', }, - height: { - title: "高度", - type: "select", - editor: { - type: 'combo-list', - textField: 'name', - valueField: 'value', - editable: false, - data: [ - { value:'100px' , name: '100px' }, - { value:'200px' , name: '200px' }, - { value:'300px' , name: '300px' }, - ] - } + xAxis: { + title: "xAxis", + type: 'string', + }, + yAxis: { + title: "yAxis", + type: 'string', }, - color: { - title: "颜色", - type: "select", - editor: { - type: 'combo-list', - textField: 'name', - valueField: 'value', - editable: false, - data: [ - { value:'#5470c6' , name: '颜色1' }, - { value:'#91cc75' , name: '颜色2' }, - { value:'#fac858' , name: '颜色3' }, - ] - } + title: "color", + type: 'string', + }, + grid: { + title: "grid", + type: 'string', + }, + legend: { + title: "legend", + type: 'string', + }, + title: { + title: "title", + type: 'string', + }, + textStyle: { + title: "textStyle", + type: 'string', } } -- Gitee From 78ffb2301a24aec19bdef4db679bd1f90d56c716 Mon Sep 17 00:00:00 2001 From: cy <15990550+langchaocy@user.noreply.gitee.com> Date: Sat, 5 Jul 2025 13:59:53 +0800 Subject: [PATCH 05/23] =?UTF-8?q?fix:=20=E5=9C=A8charts-bar=E7=9A=84shema?= =?UTF-8?q?=E8=A1=A8=E4=B8=AD=EF=BC=8C=E5=A2=9E=E5=8A=A0=E9=BB=98=E8=AE=A4?= =?UTF-8?q?=E5=B1=9E=E6=80=A7=E5=80=BC=EF=BC=8C=E6=96=B9=E4=BE=BF=E5=9C=A8?= =?UTF-8?q?=E8=AE=BE=E8=AE=A1=E5=99=A8=E4=B8=AD=E6=98=BE=E7=A4=BA=EF=BC=8C?= =?UTF-8?q?=E5=AE=9E=E7=8E=B0=E4=BA=86=E5=B1=9E=E6=80=A7=E9=85=8D=E7=BD=AE?= =?UTF-8?q?demo?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../charts-bar/src/charts-bar.component.tsx | 3 - .../charts-bar/src/charts-bar.props.ts | 14 ++--- .../designer/charts-bar.design.component.tsx | 15 +++++ .../charts-bar.property-config.ts | 58 +++++++++++++++++-- .../src/schema/charts-bar.schema.json | 14 ++++- .../src/converter/cascade.converter.ts | 2 + 6 files changed, 85 insertions(+), 21 deletions(-) diff --git a/packages/charts-vue/components/charts-bar/src/charts-bar.component.tsx b/packages/charts-vue/components/charts-bar/src/charts-bar.component.tsx index 8c590686346..b9d16577008 100644 --- a/packages/charts-vue/components/charts-bar/src/charts-bar.component.tsx +++ b/packages/charts-vue/components/charts-bar/src/charts-bar.component.tsx @@ -119,8 +119,6 @@ export default defineComponent({ }); return () => ( - <> -
charts-bar
- ); } diff --git a/packages/charts-vue/components/charts-bar/src/charts-bar.props.ts b/packages/charts-vue/components/charts-bar/src/charts-bar.props.ts index 67e2ebe8bea..e70dd80f13f 100644 --- a/packages/charts-vue/components/charts-bar/src/charts-bar.props.ts +++ b/packages/charts-vue/components/charts-bar/src/charts-bar.props.ts @@ -143,23 +143,17 @@ export const chartsBarProps = { width: { type: [String, Number], default: '100%'}, - height: { type: [String, Number], default: '300px'}, + height: { type: [String, Number]}, textStyle: { type: Object as PropType }, - xAxis: { type: Object as PropType, default: { - type: 'category', - data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] - }}, + xAxis: { type: Object as PropType}, - yAxis: { type: Object as PropType, default: {type: 'value'} }, + yAxis: { type: Object as PropType}, /** * 数据系列 */ - // series: { type: Array as PropType, default: [{ ...barSeriesProps }] }, - series: { type: Array as PropType, default: [{ - data: [29.9, 71.5, 52.6, 35.5, 42.5, 21.1, 53.1] - }] }, + series: { type: Array as PropType, default: [{ ...barSeriesProps }] }, theme: { type: String, default: 'defaultTheme' }, diff --git a/packages/charts-vue/components/charts-bar/src/designer/charts-bar.design.component.tsx b/packages/charts-vue/components/charts-bar/src/designer/charts-bar.design.component.tsx index 48a31cf0913..ca2301ae8c8 100644 --- a/packages/charts-vue/components/charts-bar/src/designer/charts-bar.design.component.tsx +++ b/packages/charts-vue/components/charts-bar/src/designer/charts-bar.design.component.tsx @@ -30,6 +30,21 @@ export default defineComponent({ const chartsBarProps = computed(() => ({ name: props.name, color: props.color, + grid: props.grid, + height: props.height, + title: props.title, + xAxis: props.xAxis, + tooltip: props.tooltip, + legend: props.legend, + toolbox: props.toolbox, + animation: props.animation, + animationDuration: props.animationDuration, + animationEasingUpdate: props.animationEasingUpdate, + series: props.series.map((series) => { + const barseries = { ...series }; + barseries.type = 'bar'; + return barseries; + }), })); return () => { diff --git a/packages/charts-vue/components/charts-bar/src/property-config/charts-bar.property-config.ts b/packages/charts-vue/components/charts-bar/src/property-config/charts-bar.property-config.ts index f9a64ef709e..f37769a1f9b 100644 --- a/packages/charts-vue/components/charts-bar/src/property-config/charts-bar.property-config.ts +++ b/packages/charts-vue/components/charts-bar/src/property-config/charts-bar.property-config.ts @@ -1,9 +1,14 @@ -import { BaseControlProperty } from "@farris/charts-vue/components/charts-common/src/props"; -import { color } from "echarts"; +import { BaseControlProperty, ToolbarItemProperty } from "@farris/charts-vue/components/charts-common/src/props"; +import { chartsBarGridConverter } from "@farris/charts-vue/components/dynamic-resolver/src/converter"; + export class ChartsBarProperty extends BaseControlProperty { + + private toolbarItemProperty: ToolbarItemProperty; + constructor(componentId: string, designerHostService: any) { super(componentId, designerHostService); + this.toolbarItemProperty = new ToolbarItemProperty(componentId, designerHostService); } public getPropertyConfig(propertyData: any) { this.propertyConfig.categories['basic'] = this.getBasicPropConfig(propertyData); @@ -11,14 +16,53 @@ export class ChartsBarProperty extends BaseControlProperty { this.propertyConfig.categories['appearance'] = this.getAppearanceConfig(propertyData); this.propertyConfig.categories['behavior'] = this.getChartsBarBehaviorConfig(propertyData); + + this.propertyConfig.categories['grid'] = this.getChartsBarGridConfig(propertyData); + return this.propertyConfig; } + private getChartsBarGridConfig(propertyData) { + return{ + title: 'Grid', + $converter: chartsBarGridConverter, + properties: { + height: { + title: 'height', + type: 'string', + // editor: { + // type: "collection-property-editor", + // textField: 'text', + // modalTitle: '右侧工具栏编辑器', + // onSelectionChange: ({ selectedData, propertyConfig }) => { + // propertyConfig.value = this.toolbarItemProperty.getPropertyConfig(selectedData.value, { + // showAppearance: true, + // }); + // }, + // defaultComponentSchema: { + // id: 'button', + // text: '按钮', + // visible: true, + // disabled: false + // } + // } + } + } + }; + } private getChartsBarBehaviorConfig(propertyData) { return { description: "基本信息", title: "行为", properties: { + height:{ + title: "height", + type: 'string', + }, + width:{ + title: "width", + type: 'string', + }, name: { title: "name", type: 'string', @@ -35,10 +79,7 @@ export class ChartsBarProperty extends BaseControlProperty { title: "color", type: 'string', }, - grid: { - title: "grid", - type: 'string', - }, + legend: { title: "legend", type: 'string', @@ -51,6 +92,11 @@ export class ChartsBarProperty extends BaseControlProperty { title: "textStyle", type: 'string', } + , + series: { + title: "series", + type: 'array', + } } }; diff --git a/packages/charts-vue/components/charts-bar/src/schema/charts-bar.schema.json b/packages/charts-vue/components/charts-bar/src/schema/charts-bar.schema.json index 16dcd512a78..9be01c45979 100644 --- a/packages/charts-vue/components/charts-bar/src/schema/charts-bar.schema.json +++ b/packages/charts-vue/components/charts-bar/src/schema/charts-bar.schema.json @@ -829,7 +829,7 @@ }, "data": { "type": "array", - "default": [] + "default": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"] } } }, @@ -883,7 +883,17 @@ } }, - "default": [] + "default": [{"data": [120, 200, 150, 80, 70, 110, 130]}] + }, + "height":{ + "description": "div de height", + "type": "string", + "default": "300px" + }, + "width":{ + "description": "div de width", + "type": "string", + "default": "100%" } }, diff --git a/packages/charts-vue/components/dynamic-resolver/src/converter/cascade.converter.ts b/packages/charts-vue/components/dynamic-resolver/src/converter/cascade.converter.ts index dce361318b0..334412627c9 100644 --- a/packages/charts-vue/components/dynamic-resolver/src/converter/cascade.converter.ts +++ b/packages/charts-vue/components/dynamic-resolver/src/converter/cascade.converter.ts @@ -25,3 +25,5 @@ export const flexBoxConverter = generateCascadePropertyConverter('flexBox'); export const toolbarConverter = generateCascadePropertyConverter('toolbar', { items: [] }); export const swipeToolbarConverter = generateCascadePropertyConverter('swipeToolbar', { items: [] }); export const rightToolbarConverter = generateCascadePropertyConverter('rightToolbar', { items: [] }); +export const chartsBarGridConverter = generateCascadePropertyConverter('grid', { items: [] }); + -- Gitee From 42579c83239a266d25961b3383af4467c0c456fa Mon Sep 17 00:00:00 2001 From: cy <15990550+langchaocy@user.noreply.gitee.com> Date: Sat, 5 Jul 2025 18:19:00 +0800 Subject: [PATCH 06/23] =?UTF-8?q?fix:=20=E5=B0=86empty1=E6=94=B9=E5=9B=9E?= =?UTF-8?q?=E7=A7=BB=E5=8A=A8=E7=AB=AF=E6=96=B9=E4=BE=BF=E8=87=AA=E5=B7=B1?= =?UTF-8?q?=E5=BC=80=E5=8F=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../public/designer-canvas/empty1.json | 1536 +++++++++++------ 1 file changed, 977 insertions(+), 559 deletions(-) diff --git a/packages/designer/public/designer-canvas/empty1.json b/packages/designer/public/designer-canvas/empty1.json index 4e40a3d3c40..4c180628078 100644 --- a/packages/designer/public/designer-canvas/empty1.json +++ b/packages/designer/public/designer-canvas/empty1.json @@ -1,63 +1,69 @@ { "Header": { - "Code": "CommonDictionary", - "Type": "Form", - "NameSpace": "Inspur.GS.SagiDemo.SagiDemeModule.CommonDictionaries.CommonDictionaries.Front", + "Code": "MobileVueTest", + "Type": "MobileForm", + "NameSpace": "Inspur.GS.MyDev.FarrisVueTest.VueFormTest.VueFormTest.Front", "CertId": null, - "Name": "通用字典", - "FileName": "CommonDictionary.frm", - "BizobjectID": "d8b09de6-5e7c-bfdf-d308-468827ba0d6b", + "Name": "移动Vue测试", + "FileName": "MobileVueTest.mfrm", + "BizobjectID": "e34f063d-9c31-1e20-4ad7-c6b4f57ddfc9", "Language": null, "Extendable": false, "NameLanguage": { - "zh-CHS": "通用字典", - "en": "Common Dictionary", + "zh-CHS": "移动Vue测试", + "en": "", "zh-CHT": "" }, - "ID": "35dd45be-60c7-4ae8-a827-533424031b76", + "ID": "af47af33-345b-471e-9a00-49db59c222a1", "IsTranslating": false }, - "refs": [ + "Refs": [ { "DependentMetadata": { - "ID": "4fdfc52d-8ac3-4f56-b431-d371c1fcf3ec", + "ID": "1cfb0d2a-7300-4fc7-8d01-cd09a5df9198", "CertId": null, - "NameSpace": "Inspur.GS.SagiDemo.SagiDemeModule.CommonDictionaries.CommonDictionaries.Front", - "Code": "CommonDictionary.frm", - "Name": "CommonDictionary.frm", + "NameSpace": "Inspur.GS.MyDev.FarrisVueTest.VueFormTest.VueFormTest.Front", + "Code": "MobileVueTest.mfrm", + "Name": "MobileVueTest.mfrm", "Type": "ResourceMetadata", - "BizobjectID": "d8b09de6-5e7c-bfdf-d308-468827ba0d6b" + "BizobjectID": "e34f063d-9c31-1e20-4ad7-c6b4f57ddfc9" } } ], "Content": { "code": null, "name": null, + "Id": "af47af33-345b-471e-9a00-49db59c222a1", "Contents": { "module": { - "id": "35dd45be-60c7-4ae8-a827-533424031b76", - "code": "CommonDictionary", - "name": "通用字典", + "id": "af47af33-345b-471e-9a00-49db59c222a1", + "code": "MobileVueTest", + "name": "移动Vue测试", "type": "Module", - "creator": "Sagi", - "creationDate": "2025-02-07T07:43:41.186Z", + "creator": "lijiangkun", + "creationDate": "2025-04-17T03:50:32.907Z", "templateId": "list-card-template", "templateRule": "list-card-template", "entity": [ { - "eapiId": "626b3ac9-e713-4cf2-95bd-9d01e401b51e", - "eapiCode": "CommonDictionary_frm", - "eapiName": "通用字典_frm", - "eapiNameSpace": "Inspur.GS.SagiDemo.SagiDemeModule.CommonDictionaries.CommonDictionaries.Front", - "voPath": "SagiDemo/SagiDemeModule/CommonDictionaries/bo-commondictionaries-front/metadata/components", - "voNameSpace": "Inspur.GS.SagiDemo.SagiDemeModule.CommonDictionaries.CommonDictionaries.Front", - "name": "通用字典_frm", - "id": "52c7e73a-4797-4547-a772-fd50edf39f63", + "eapiId": "29245968-6379-4c6c-a812-72e3411917c0", + "eapiCode": null, + "eapiName": null, + "eapiNameSpace": null, + "voPath": null, + "voNameSpace": null, + "name": "移动Vue测试_mfrm", + "id": "0d20adf7-9ed1-44cf-a8f5-e9714353c174", + "extendProperties": { + "enableStdTimeFormat": true + }, + "sourceType": "vo", + "variables": [], + "code": "MobileVueTest_mfrm", "entities": [ { - "label": "commonDictionarys", - "name": "通用字典", - "id": "57a6ad1b-0dc2-4617-b820-a973da18887c", + "name": "Vue测试", + "id": "fa4b4e84-11b2-40ce-b071-7b2cd5b93eed", "type": { "$type": "EntityType", "fields": [ @@ -67,21 +73,21 @@ "editor": { "$type": "TextBox" }, - "require": true, - "multiLanguage": false, "readonly": false, - "label": "id", + "multiLanguage": false, + "require": true, "name": "主键", - "id": "740c1cff-164d-4f47-96d9-cf7c8075cddb", + "id": "389ab039-9b60-4dd0-8cdc-a23c0feccf31", "type": { "$type": "StringType", - "displayName": "字符串", "length": 36, - "name": "String" + "name": "String", + "displayName": "字符串" }, "path": "ID", + "originalId": "389ab039-9b60-4dd0-8cdc-a23c0feccf31", "code": "ID", - "originalId": "740c1cff-164d-4f47-96d9-cf7c8075cddb", + "label": "id", "bindingField": "id", "bindingPath": "id" }, @@ -92,44 +98,155 @@ "$type": "DateBox", "format": "'yyyy-MM-dd'" }, - "require": false, - "multiLanguage": false, "readonly": false, - "label": "version", + "multiLanguage": false, + "require": false, "name": "版本", - "id": "43a7c79e-56e0-442e-b39d-8f9f45e8b0c8", + "id": "e3ca9955-1155-4a4b-a164-e48c31928c24", "type": { "$type": "DateTimeType", - "displayName": "日期时间", - "name": "DateTime" + "name": "DateTime", + "displayName": "日期时间" }, "path": "Version", + "originalId": "e3ca9955-1155-4a4b-a164-e48c31928c24", "code": "Version", - "originalId": "43a7c79e-56e0-442e-b39d-8f9f45e8b0c8", + "label": "version", "bindingField": "version", "bindingPath": "version" }, + { + "$type": "ComplexField", + "name": "状态", + "id": "9fefd0ed-7594-43f7-a6f2-10828a4d00ae", + "type": { + "$type": "ObjectType", + "name": "BillState9fef", + "fields": [ + { + "$type": "SimpleField", + "defaultValue": "", + "editor": { + "$type": "EnumField" + }, + "readonly": false, + "multiLanguage": false, + "require": false, + "name": "状态", + "id": "9fefd0ed-0101-468f-ae3f-40c76c0f06b0", + "type": { + "$type": "EnumType", + "name": "Enum", + "displayName": "枚举", + "enumValues": [ + { + "disabled": false, + "name": "制单", + "value": "Billing" + }, + { + "disabled": false, + "name": "提交审批", + "value": "SubmitApproval" + }, + { + "disabled": false, + "name": "审批通过", + "value": "Approved" + }, + { + "disabled": false, + "name": "审批不通过", + "value": "ApprovalNotPassed" + } + ], + "valueType": { + "$type": "StringType", + "length": 36, + "name": "String", + "displayName": "字符串" + } + }, + "path": "BillStatus.BillState", + "originalId": "a0b19650-0101-468f-ae3f-40c76c0f06b0", + "code": "BillState", + "label": "billState", + "bindingField": "billStatus_BillState", + "bindingPath": "billStatus.billState" + } + ], + "displayName": "状态" + }, + "path": "BillStatus", + "originalId": "9fefd0ed-7594-43f7-a6f2-10828a4d00ae", + "code": "BillStatus", + "label": "billStatus", + "bindingField": "billStatus", + "bindingPath": "billStatus" + }, + { + "$type": "ComplexField", + "name": "流程实例", + "id": "12ef9c5c-4ba3-4df4-bd0f-5672c3e0ecff", + "type": { + "$type": "ObjectType", + "name": "ProcessInstance12ef", + "fields": [ + { + "$type": "SimpleField", + "defaultValue": "", + "editor": { + "$type": "TextBox" + }, + "readonly": false, + "multiLanguage": false, + "require": false, + "name": "流程实例", + "id": "12ef9c5c-ad8f-4da3-a430-c8a7f2162135", + "type": { + "$type": "StringType", + "length": 36, + "name": "String", + "displayName": "字符串" + }, + "path": "ProcessInstance.ProcessInstance", + "originalId": "2e1beb7d-ad8f-4da3-a430-c8a7f2162135", + "code": "ProcessInstance", + "label": "processInstance", + "bindingField": "processInstance_ProcessInstance", + "bindingPath": "processInstance.processInstance" + } + ], + "displayName": "流程实例" + }, + "path": "ProcessInstance", + "originalId": "12ef9c5c-4ba3-4df4-bd0f-5672c3e0ecff", + "code": "ProcessInstance", + "label": "processInstance", + "bindingField": "processInstance", + "bindingPath": "processInstance" + }, { "$type": "SimpleField", "defaultValue": "", "editor": { "$type": "TextBox" }, - "require": false, - "multiLanguage": false, "readonly": false, - "label": "code", + "multiLanguage": false, + "require": false, "name": "编号", - "id": "ddfc72d4-0c9b-49bf-8f41-8047264f6edc", + "id": "8537ca17-502f-4b90-ac87-ae1dde9a7f03", "type": { "$type": "StringType", - "displayName": "字符串", "length": 36, - "name": "String" + "name": "String", + "displayName": "字符串" }, - "path": "Code", - "code": "Code", - "originalId": "ddfc72d4-0c9b-49bf-8f41-8047264f6edc", + "path": "code", + "originalId": "8537ca17-502f-4b90-ac87-ae1dde9a7f03", + "code": "code", + "label": "code", "bindingField": "code", "bindingPath": "code" }, @@ -139,21 +256,21 @@ "editor": { "$type": "TextBox" }, - "require": false, - "multiLanguage": false, "readonly": false, - "label": "name", + "multiLanguage": false, + "require": false, "name": "名称", - "id": "1ecd5759-6df4-41c8-9526-0108a5e2d9b6", + "id": "6a051d6e-f870-4a9f-84df-043cfbc26cf2", "type": { "$type": "StringType", - "displayName": "字符串", "length": 36, - "name": "String" + "name": "String", + "displayName": "字符串" }, - "path": "Name", - "code": "Name", - "originalId": "1ecd5759-6df4-41c8-9526-0108a5e2d9b6", + "path": "name", + "originalId": "6a051d6e-f870-4a9f-84df-043cfbc26cf2", + "code": "name", + "label": "name", "bindingField": "name", "bindingPath": "name" }, @@ -161,222 +278,546 @@ "$type": "SimpleField", "defaultValue": "", "editor": { - "$type": "TextBox" + "$type": "SwitchField" }, - "require": false, - "multiLanguage": false, "readonly": false, - "label": "category", - "name": "分类", - "id": "8e00ef40-17ba-4cbb-8a3c-709cf40b7939", + "multiLanguage": false, + "require": false, + "name": "布尔字段", + "id": "f51c1e5d-fe58-4591-8cd1-25a119c9f4c1", "type": { - "$type": "StringType", - "displayName": "字符串", - "length": 36, - "name": "String" + "$type": "BooleanType", + "name": "Boolean", + "displayName": "布尔" }, - "path": "Category", - "code": "Category", - "originalId": "8e00ef40-17ba-4cbb-8a3c-709cf40b7939", - "bindingField": "category", - "bindingPath": "category" + "path": "booleanField", + "originalId": "f51c1e5d-fe58-4591-8cd1-25a119c9f4c1", + "code": "booleanField", + "label": "booleanField", + "bindingField": "booleanField", + "bindingPath": "booleanField" }, { "$type": "SimpleField", "defaultValue": "", "editor": { - "$type": "EnumField" + "$type": "NumericBox" }, - "require": false, + "readonly": false, "multiLanguage": false, + "require": false, + "name": "数值字段", + "id": "1f816b38-2a72-4252-8eb6-760b8f97fcea", + "type": { + "$type": "NumericType", + "length": 0, + "name": "Number", + "displayName": "数字", + "precision": 0 + }, + "path": "numberField", + "originalId": "1f816b38-2a72-4252-8eb6-760b8f97fcea", + "code": "numberField", + "label": "numberField", + "bindingField": "numberField", + "bindingPath": "numberField" + }, + { + "$type": "SimpleField", + "defaultValue": "", + "editor": { + "$type": "DateBox", + "format": "'yyyy-MM-dd'" + }, "readonly": false, - "label": "enableStatus", - "name": "启用状态", - "id": "df3b84c2-dc6b-419c-85e3-0006b0535e61", + "multiLanguage": false, + "require": false, + "name": "日期字段", + "id": "4911913b-1868-4b34-b4e0-84939b14ab6e", + "type": { + "$type": "DateType", + "name": "Date", + "displayName": "日期" + }, + "path": "dateField", + "originalId": "4911913b-1868-4b34-b4e0-84939b14ab6e", + "code": "dateField", + "label": "dateField", + "bindingField": "dateField", + "bindingPath": "dateField" + } + ], + "primary": "id", + "entities": [ + { + "name": "子表1", + "id": "97347b0b-1c54-432f-891a-4d7b139d6dbc", "type": { - "$type": "EnumType", - "displayName": "枚举", - "name": "Enum", - "enumValues": [ + "$type": "EntityType", + "fields": [ { - "disabled": false, - "name": "未启用", - "value": "0" + "$type": "SimpleField", + "defaultValue": "", + "editor": { + "$type": "TextBox" + }, + "readonly": false, + "multiLanguage": false, + "require": true, + "name": "主键", + "id": "7d1363dc-bbb0-41ac-b52d-5cc12832bf58", + "type": { + "$type": "StringType", + "length": 36, + "name": "String", + "displayName": "字符串" + }, + "path": "ID", + "originalId": "7d1363dc-bbb0-41ac-b52d-5cc12832bf58", + "code": "ID", + "label": "id", + "bindingField": "id", + "bindingPath": "id" }, { - "disabled": false, - "name": "已启用", - "value": "1" + "$type": "SimpleField", + "defaultValue": "", + "editor": { + "$type": "TextBox" + }, + "readonly": false, + "multiLanguage": false, + "require": true, + "name": "上级对象主键", + "id": "750cc77b-6562-4c83-9e5b-80ad5abb7bb8", + "type": { + "$type": "StringType", + "length": 36, + "name": "String", + "displayName": "字符串" + }, + "path": "ParentID", + "originalId": "750cc77b-6562-4c83-9e5b-80ad5abb7bb8", + "code": "ParentID", + "label": "parentID", + "bindingField": "parentID", + "bindingPath": "parentID" + }, + { + "$type": "SimpleField", + "defaultValue": "", + "editor": { + "$type": "TextBox" + }, + "readonly": false, + "multiLanguage": false, + "require": false, + "name": "编号", + "id": "3c2b560e-5b8d-4781-b31f-719f83443df1", + "type": { + "$type": "StringType", + "length": 36, + "name": "String", + "displayName": "字符串" + }, + "path": "code", + "originalId": "3c2b560e-5b8d-4781-b31f-719f83443df1", + "code": "code", + "label": "code", + "bindingField": "code", + "bindingPath": "code" + }, + { + "$type": "SimpleField", + "defaultValue": "", + "editor": { + "$type": "TextBox" + }, + "readonly": false, + "multiLanguage": false, + "require": false, + "name": "名称", + "id": "f89eb4ab-8d41-4fb5-a99d-013bd9242150", + "type": { + "$type": "StringType", + "length": 36, + "name": "String", + "displayName": "字符串" + }, + "path": "name", + "originalId": "f89eb4ab-8d41-4fb5-a99d-013bd9242150", + "code": "name", + "label": "name", + "bindingField": "name", + "bindingPath": "name" } ], - "valueType": { - "$type": "StringType", - "displayName": "字符串", - "length": 36, - "name": "String" - } + "primary": "id", + "entities": [], + "name": "Child1", + "displayName": "子表1" + }, + "code": "Child1", + "label": "child1s" + }, + { + "name": "子表2", + "id": "e1c8145b-15d6-4a54-9d79-9149af8d6dc4", + "type": { + "$type": "EntityType", + "fields": [ + { + "$type": "SimpleField", + "defaultValue": "", + "editor": { + "$type": "TextBox" + }, + "readonly": false, + "multiLanguage": false, + "require": true, + "name": "主键", + "id": "3a1e8cf0-9ad2-4eeb-b16b-e898a8b24be4", + "type": { + "$type": "StringType", + "length": 36, + "name": "String", + "displayName": "字符串" + }, + "path": "ID", + "originalId": "3a1e8cf0-9ad2-4eeb-b16b-e898a8b24be4", + "code": "ID", + "label": "id", + "bindingField": "id", + "bindingPath": "id" + }, + { + "$type": "SimpleField", + "defaultValue": "", + "editor": { + "$type": "TextBox" + }, + "readonly": false, + "multiLanguage": false, + "require": true, + "name": "上级对象主键", + "id": "22649c9f-2483-4907-8a67-9fd70ce9b5e7", + "type": { + "$type": "StringType", + "length": 36, + "name": "String", + "displayName": "字符串" + }, + "path": "ParentID", + "originalId": "22649c9f-2483-4907-8a67-9fd70ce9b5e7", + "code": "ParentID", + "label": "parentID", + "bindingField": "parentID", + "bindingPath": "parentID" + }, + { + "$type": "SimpleField", + "defaultValue": "", + "editor": { + "$type": "TextBox" + }, + "readonly": false, + "multiLanguage": false, + "require": false, + "name": "编号", + "id": "bdc235f6-eded-443a-b95d-cf07fb4a741a", + "type": { + "$type": "StringType", + "length": 36, + "name": "String", + "displayName": "字符串" + }, + "path": "code", + "originalId": "bdc235f6-eded-443a-b95d-cf07fb4a741a", + "code": "code", + "label": "code", + "bindingField": "code", + "bindingPath": "code" + }, + { + "$type": "SimpleField", + "defaultValue": "", + "editor": { + "$type": "TextBox" + }, + "readonly": false, + "multiLanguage": false, + "require": false, + "name": "名称", + "id": "b5c97bc2-94e3-483c-8002-1352e103e9f6", + "type": { + "$type": "StringType", + "length": 36, + "name": "String", + "displayName": "字符串" + }, + "path": "name", + "originalId": "b5c97bc2-94e3-483c-8002-1352e103e9f6", + "code": "name", + "label": "name", + "bindingField": "name", + "bindingPath": "name" + } + ], + "primary": "id", + "entities": [], + "name": "Child2", + "displayName": "子表2" }, - "path": "EnableStatus", - "code": "EnableStatus", - "originalId": "df3b84c2-dc6b-419c-85e3-0006b0535e61", - "bindingField": "enableStatus", - "bindingPath": "enableStatus" + "code": "Child2", + "label": "child2s" } ], - "entities": [], - "primary": "id", - "displayName": "通用字典", - "name": "CommonDictionary" + "name": "VueTest", + "displayName": "Vue测试" }, - "code": "CommonDictionary" + "code": "VueTest", + "label": "vueTests" } ], - "sourceUri": "api/sagidemo/sagidememodule/v1.0/CommonDictionary_frm", - "code": "CommonDictionary_frm", - "variables": [], - "sourceType": "vo", - "extendProperties": { - "enableStdTimeFormat": true - } + "sourceUri": "api/mydev/farrisvuetest/v1.0/MobileVueTest_mfrm" } ], "states": [], "stateMachines": [ { - "id": "CommonDictionary_state_machine", - "name": "通用字典", - "uri": "cde50e74-98bb-484d-8c21-247c84e615e0", - "code": "CommonDictionary_frm", - "nameSpace": "Inspur.GS.SagiDemo.SagiDemeModule.CommonDictionaries.CommonDictionaries.Front" + "id": "MobileVueTest_list-page-component_state_machine", + "name": "移动Vue测试_list-page-component状态机", + "uri": "74843186-76b9-4ab3-8fad-c8ba64390c3c" + }, + { + "id": "MobileVueTest_card-page-component_state_machine", + "name": "移动Vue测试_card-page-component状态机", + "uri": "a39bf6b2-330a-4000-9d5e-82aa1c457edf" } ], "viewmodels": [ { - "id": "root-viewmodel", - "code": "root-viewmodel", - "name": "通用字典", + "id": "list-page-viewmodel", + "code": "list-page-viewmodel", + "name": "Vue测试", "fields": [], - "stateMachine": "CommonDictionary_state_machine", - "serviceRefs": [], - "commands": [], - "states": [], - "bindTo": "/", - "enableValidation": false, - "enableUnifiedSession": false - }, - { - "id": "data-grid-component-viewmodel", - "code": "data-grid-component-viewmodel", - "name": "通用字典", - "fields": [ + "stateMachine": "MobileVueTest_list-page-component_state_machine", + "commands": [ { - "type": "Form", - "id": "ddfc72d4-0c9b-49bf-8f41-8047264f6edc", - "fieldName": "code", - "groupId": null, - "groupName": null, - "updateOn": "blur" + "id": "LoadPageForList", + "code": "LoadPageForList", + "name": "页面加载命令", + "params": [ + { + "name": "commandName", + "shownName": "命令名称", + "value": "LoadDataForList" + }, + { + "name": "viewModelId", + "shownName": "视图模型id", + "value": "" + } + ], + "handlerName": "LoadPageForList", + "cmpId": "cf5e568a-5243-4539-94ea-e195eb4d6736", + "extensions": [], + "isInvalid": false }, { - "type": "Form", - "id": "1ecd5759-6df4-41c8-9526-0108a5e2d9b6", - "fieldName": "name", - "groupId": null, - "groupName": null, - "updateOn": "blur" + "id": "LoadDataForList", + "code": "LoadDataForList", + "name": "列表取数命令", + "params": [ + { + "name": "filters", + "shownName": "过滤条件", + "value": "[]" + }, + { + "name": "sorts", + "shownName": "排序条件", + "value": "[]" + }, + { + "name": "autoMerge", + "shownName": "是否合并过滤条件", + "value": true + } + ], + "handlerName": "LoadForList", + "cmpId": "0a68799b-48c6-4c9f-b0d7-140683c62b58", + "extensions": [], + "isInvalid": false }, { - "type": "Form", - "id": "df3b84c2-dc6b-419c-85e3-0006b0535e61", - "fieldName": "enableStatus", - "groupId": null, - "groupName": null, - "updateOn": "change" - } - ], - "commands": [ - { - "id": "fda876c8-7230-46e7-af3d-d38233642275", - "code": "loadList1", - "name": "加载列表数据", - "params": [], - "handlerName": "loadList", - "cmpId": "7c48ef46-339c-42d4-8365-a21236c63044", + "id": "OpenCardAndAdd", + "code": "OpenCardAndAdd", + "name": "打开卡片并新增命令", + "params": [ + { + "name": "path", + "shownName": "路由地址", + "value": "/MobileVueTest/card-page-component" + }, + { + "name": "queryParams", + "shownName": "携带参数", + "value": "{ \"action\": \"LoadAndAddForCard\" }" + } + ], + "handlerName": "Navigate", + "cmpId": "910661bd-963a-4287-aa32-441c95b8720f", "extensions": [], "isInvalid": false }, { - "id": "22576fc1-08fb-49a9-b132-295c7392b481", - "code": "remove1", - "name": "删除当前数据", + "id": "OpenCardAndEdit", + "code": "OpenCardAndEdit", + "name": "打开卡片并编辑命令", "params": [ { - "name": "id", - "shownName": "待删除数据的标识", - "value": "{DATA~/id}" + "name": "path", + "shownName": "路由地址", + "value": "/MobileVueTest/card-page-component" + }, + { + "name": "queryParams", + "shownName": "携带参数", + "value": "{ \"action\": \"LoadAndEditForCard\", \"id\":\"{DATA~/id}\"}" } ], - "handlerName": "remove", - "cmpId": "7c48ef46-339c-42d4-8365-a21236c63044", + "handlerName": "Navigate", + "cmpId": "910661bd-963a-4287-aa32-441c95b8720f", "extensions": [], "isInvalid": false }, { - "id": "8788c27e-722a-4b98-9d57-98eafb526fe5", - "code": "loadCard1", - "name": "加载卡片数据", - "params": [], - "handlerName": "loadCard", - "cmpId": "7c48ef46-339c-42d4-8365-a21236c63044", + "id": "OpenCardAndView", + "code": "OpenCardAndView", + "name": "打开卡片并查看命令", + "params": [ + { + "name": "path", + "shownName": "路由地址", + "value": "/MobileVueTest/card-page-component" + }, + { + "name": "queryParams", + "shownName": "携带参数", + "value": "{ \"action\": \"LoadAndViewForCard\", \"id\":\"{DATA~/id}\"}" + } + ], + "handlerName": "Navigate", + "cmpId": "910661bd-963a-4287-aa32-441c95b8720f", "extensions": [], "isInvalid": false }, { - "id": "ef281c13-4480-4256-901e-4bef5f92bd9e", - "code": "add1", - "name": "新增一条数据", - "params": [], - "handlerName": "add", - "cmpId": "7c48ef46-339c-42d4-8365-a21236c63044", + "id": "RemoveById", + "code": "RemoveById", + "name": "删除命令", + "params": [ + { + "name": "id", + "shownName": "数据id", + "value": "{DATA~/id}" + } + ], + "handlerName": "RemoveById", + "cmpId": "dab6b7f1-f56f-490a-879c-3d74232cd3ba", "extensions": [], "isInvalid": false }, { - "id": "e7cf83c2-e52d-4dce-aded-047a819c8068", - "code": "changePage1", - "name": "切换页码", + "id": "RemoveByIds", + "code": "RemoveByIds", + "name": "批量删除命令", "params": [ { - "name": "loadCommandName", - "shownName": "切换页面后回调方法", - "value": "loadList1" - }, + "name": "ids", + "shownName": "数据id的数组", + "value": "" + } + ], + "handlerName": "RemoveByIds", + "cmpId": "dab6b7f1-f56f-490a-879c-3d74232cd3ba", + "extensions": [], + "isInvalid": false + }, + { + "id": "GoBack", + "code": "GoBack", + "name": "返回命令", + "params": [ { - "name": "loadCommandFrameId", - "shownName": "目标组件", - "value": "data-grid-component" + "name": "params", + "shownName": "携带参数", + "value": "{}" } ], - "handlerName": "changePage", - "cmpId": "7c48ef46-339c-42d4-8365-a21236c63044", + "handlerName": "GoBack", + "cmpId": "910661bd-963a-4287-aa32-441c95b8720f", + "extensions": [], + "isInvalid": false + }, + { + "id": "77a277bf-6db3-4f7c-9418-1c12212ccab0", + "code": "componentOnBeforeInit", + "name": "列表页面初始化前事件", + "params": [], + "handlerName": "componentOnBeforeInit", + "cmpId": "791cc5d9-65f9-40d0-b40c-444c7bc1afa3", + "shortcut": {}, "extensions": [], "isInvalid": false } ], - "serviceRefs": [], "states": [], "bindTo": "/", - "parent": "root-viewmodel", + "parent": null, "enableValidation": false }, { - "id": "detail-form-component-viewmodel", - "code": "detail-form-component-viewmodel", - "name": "通用字典", + "id": "card-page-viewmodel", + "code": "card-page-viewmodel", + "name": "卡片页面视图模型", "fields": [ { "type": "Form", - "id": "ddfc72d4-0c9b-49bf-8f41-8047264f6edc", + "id": "389ab039-9b60-4dd0-8cdc-a23c0feccf31", + "fieldName": "id", + "groupId": null, + "groupName": null, + "updateOn": "blur" + }, + { + "type": "Form", + "id": "e3ca9955-1155-4a4b-a164-e48c31928c24", + "fieldName": "version", + "groupId": null, + "groupName": null, + "updateOn": "blur" + }, + { + "type": "Form", + "id": "9fefd0ed-0101-468f-ae3f-40c76c0f06b0", + "fieldName": "billStatus_BillState", + "groupId": null, + "groupName": null, + "updateOn": "change" + }, + { + "type": "Form", + "id": "12ef9c5c-ad8f-4da3-a430-c8a7f2162135", + "fieldName": "processInstance_ProcessInstance", + "groupId": null, + "groupName": null, + "updateOn": "blur" + }, + { + "type": "Form", + "id": "8537ca17-502f-4b90-ac87-ae1dde9a7f03", "fieldName": "code", "groupId": null, "groupName": null, @@ -384,7 +825,7 @@ }, { "type": "Form", - "id": "1ecd5759-6df4-41c8-9526-0108a5e2d9b6", + "id": "6a051d6e-f870-4a9f-84df-043cfbc26cf2", "fieldName": "name", "groupId": null, "groupName": null, @@ -392,443 +833,420 @@ }, { "type": "Form", - "id": "8e00ef40-17ba-4cbb-8a3c-709cf40b7939", - "fieldName": "category", + "id": "f51c1e5d-fe58-4591-8cd1-25a119c9f4c1", + "fieldName": "booleanField", + "groupId": null, + "groupName": null, + "updateOn": "blur" + }, + { + "type": "Form", + "id": "1f816b38-2a72-4252-8eb6-760b8f97fcea", + "fieldName": "numberField", + "groupId": null, + "groupName": null, + "updateOn": "blur" + }, + { + "type": "Form", + "id": "4911913b-1868-4b34-b4e0-84939b14ab6e", + "fieldName": "dateField", "groupId": null, "groupName": null, "updateOn": "blur" } ], + "stateMachine": "MobileVueTest_card-page-component_state_machine", "commands": [ { - "id": "d12acc4e-6274-44dc-95e6-cedeb5e66707", - "code": "edit1", - "name": "编辑数据", + "id": "LoadPageForCard", + "code": "LoadPageForCard", + "name": "卡片页面加载命令", + "params": [ + { + "name": "commandName", + "shownName": "命令名称", + "value": "{UISTATE~/#{card-page-component}/routerState/queryParams/action}" + }, + { + "name": "viewModelId", + "shownName": "视图模型id", + "value": "" + } + ], + "handlerName": "LoadPageForCard", + "cmpId": "cf5e568a-5243-4539-94ea-e195eb4d6736", + "extensions": [], + "isInvalid": false + }, + { + "id": "LoadAndAddForCard", + "code": "LoadAndAddForCard", + "name": "卡片加载并新增命令", + "params": [ + { + "name": "action", + "shownName": "状态迁移动作", + "value": "editAction" + } + ], + "handlerName": "LoadAndAddForCard", + "cmpId": "0a68799b-48c6-4c9f-b0d7-140683c62b58", + "extensions": [], + "isInvalid": false + }, + { + "id": "LoadAndEditForCard", + "code": "LoadAndEditForCard", + "name": "卡片加载并编辑命令", "params": [ { "name": "id", - "shownName": "待编辑数据的标识", - "value": "{DATA~/id}" + "shownName": "数据id", + "value": "{UISTATE~/#{card-page-component}/routerState/queryParams/id}" }, { - "name": "transitionAction", - "shownName": "状态机动作", - "value": "Edit" + "name": "action", + "shownName": "状态迁移动作", + "value": "editAction" } ], - "handlerName": "edit", - "cmpId": "7c48ef46-339c-42d4-8365-a21236c63044", + "handlerName": "LoadAndEditForCard", + "cmpId": "0a68799b-48c6-4c9f-b0d7-140683c62b58", "extensions": [], "isInvalid": false }, { - "id": "5707d460-c441-45c4-8fe1-f77abd9f75b1", - "code": "save1", - "name": "保存变更", - "params": [], - "handlerName": "save", - "cmpId": "7c48ef46-339c-42d4-8365-a21236c63044", + "id": "LoadAndViewForCard", + "code": "LoadAndViewForCard", + "name": "卡片加载并查看命令", + "params": [ + { + "name": "id", + "shownName": "数据id", + "value": "{UISTATE~/#{card-page-component}/routerState/queryParams/id}" + }, + { + "name": "action", + "shownName": "状态迁移动作", + "value": "viewAction" + } + ], + "handlerName": "LoadAndViewForCard", + "cmpId": "0a68799b-48c6-4c9f-b0d7-140683c62b58", "extensions": [], "isInvalid": false }, { - "id": "b3897b4b-a37f-48e3-afb3-8489cec02806", - "code": "cancel1", - "name": "取消变更", - "params": [], - "handlerName": "cancel", - "cmpId": "7c48ef46-339c-42d4-8365-a21236c63044", + "id": "Save", + "code": "Save", + "name": "保存命令", + "params": [ + { + "name": "action", + "shownName": "状态迁移动作", + "value": null + } + ], + "handlerName": "Save", + "cmpId": "f863c66a-bf93-4d1f-9f99-bcd76009609d", + "extensions": [], + "isInvalid": false + }, + { + "id": "Cancel", + "code": "Cancel", + "name": "取消命令", + "params": [ + { + "name": "id", + "shownName": "数据id", + "value": "{DATA~/id}" + }, + { + "name": "action", + "shownName": "迁移动作", + "value": null + } + ], + "handlerName": "Cancel", + "cmpId": "05592163-fd45-474e-b0ab-61d7dc02e5c0", + "extensions": [], + "isInvalid": false + }, + { + "id": "GoBackAndCheck", + "code": "GoBackAndCheck", + "name": "返回并检查", + "params": [ + { + "name": "params", + "shownName": "返回携带参数", + "value": "{}" + } + ], + "handlerName": "GoBackAndCheck", + "cmpId": "910661bd-963a-4287-aa32-441c95b8720f", "extensions": [], "isInvalid": false } ], - "serviceRefs": [], "states": [], "bindTo": "/", - "parent": "root-viewmodel", - "enableValidation": true + "parent": null, + "enableValidation": false } ], "components": [ { - "id": "root-component", + "id": "card-page-component", "type": "component", - "componentType": "frame", - "viewModel": "root-viewmodel", + "title": "卡片页面", + "componentType": "page", + "pageType": "Card", + "viewModel": "card-page-viewmodel", + "appearance": null, + "visible": true, + "onBeforeInit": null, + "onInit": "LoadPageForCard", + "onLoadData": null, + "goBack": "GoBackAndCheck", "contents": [ { - "id": "root-layout", - "type": "content-container", - "appearance": { - "class": "f-page f-page-navigate f-page-is-grid-card" - }, + "id": "card-page-container", + "type": "page-container", + "title": "页面根容器", + "appearance": null, + "visible": true, "contents": [ { - "id": "page-header", - "type": "page-header", - "appearance": { - "class": "f-page-header" - }, - "iconClass": "f-title-icon f-text-orna-dict", - "icon": "f-icon f-icon-page-title-dictionary", - "title": "通用字典", - "toolbar": { - "type": "response-toolbar", - "buttons": [ - { - "id": "button-add", - "type": "response-toolbar-item", - "appearance": { - "class": "btn-primary" - }, - "disabled": "!viewModel.stateMachine['canAdd']", - "onClick": "root-viewmodel.data-grid-component-viewmodel.add1", - "text": "新增" - }, - { - "id": "button-edit", - "type": "response-toolbar-item", - "text": "编辑", - "disabled": "!viewModel.stateMachine['canEdit']", - "onClick": "root-viewmodel.detail-form-component-viewmodel.edit1" - }, - { - "id": "button-save", - "type": "response-toolbar-item", - "text": "保存", - "disabled": "!viewModel.stateMachine['canSave']", - "onClick": "root-viewmodel.detail-form-component-viewmodel.save1" - }, - { - "id": "button-cancel", - "type": "response-toolbar-item", - "text": "取消", - "disabled": "!viewModel.stateMachine['canCancel']", - "onClick": "root-viewmodel.detail-form-component-viewmodel.cancel1" - }, - { - "id": "button-delete", - "type": "response-toolbar-item", - "text": "删除", - "disabled": "!viewModel.stateMachine['canRemove']", - "onClick": "root-viewmodel.data-grid-component-viewmodel.remove1" - } - ] - } - }, - { - "id": "main-container", - "type": "content-container", - "appearance": { - "class": "f-page-main" - }, + "id": "card-page-header-container", + "type": "page-header-container", + "title": "页头容器", + "appearance": null, + "visible": true, "contents": [ { - "id": "content-splitter", - "type": "splitter", - "appearance": { - "class": "f-page-content" - }, - "contents": [ - { - "id": "content-list", - "type": "splitter-pane", - "appearance": { - "class": "f-col-w6 f-page-content-nav" - }, - "resizable": true, - "contents": [ - { - "id": "data-grid-component-ref", - "type": "component-ref", - "component": "data-grid-component" - } - ] - }, - { - "id": "content-main", - "type": "splitter-pane", - "appearance": { - "class": "f-page-content-main" - }, - "contents": [ - { - "id": "detail-component-ref", - "type": "component-ref", - "component": "detail-form-component" - } - ] - } - - - ] - } - ] - } - ] - }, - { - "id": "data-grid-component", - "type": "component", - "componentType": "data-grid", - "viewModel": "data-grid-component-viewmodel", - "appearance": { - "class": "f-struct-wrapper f-utils-fill-flex-column" - }, - "onInit": "loadList1", - "contents": [ - { - "id": "data-grid-section", - "type": "section", - "appearance": { - "class": "f-section-grid f-section-in-nav" - }, - "fill": true, - "showHeader": false, - "contents": [ - { - "id": "dataGrid", - "type": "data-grid", - "appearance": { - "class": "f-component-grid" - }, - "dataSource": "commonDictionarys", - "columns": [ - { - "id": "code_ddfc72d4_hxcr", - "type": "data-grid-column", - "title": "编号", - "field": "code", - "dataType": "string", - "binding": { - "type": "Form", - "path": "code", - "field": "ddfc72d4-0c9b-49bf-8f41-8047264f6edc", - "fullPath": "Code" - }, - "width": 120, + "id": "card-page-navigation-bar", + "type": "navbar", + "appearance": null, + "title": "卡片页面", + "text": "导航栏", "visible": true, - "filter": "", - "showSetting": false, - "actualWidth": 120 - }, - { - "id": "name_1ecd5759_yj0s", - "type": "data-grid-column", - "title": "名称", - "field": "name", - "dataType": "string", - "binding": { - "type": "Form", - "path": "name", - "field": "1ecd5759-6df4-41c8-9526-0108a5e2d9b6", - "fullPath": "Name" - }, - "width": 120, - "visible": true, - "filter": "", - "showSetting": false, - "actualWidth": 120 - }, - { - "id": "enableStatus_df3b84c2_jhvi", - "type": "data-grid-column", - "title": "启用状态", - "field": "enableStatus", - "dataType": "enum", - "binding": { - "type": "Form", - "path": "enableStatus", - "field": "df3b84c2-dc6b-419c-85e3-0006b0535e61", - "fullPath": "EnableStatus" - }, - "width": 120, - "formatter": { - "type": "enum", - "data": [ + "onLeftClick": "GoBackAndCheck", + "rightToolbar": { + "items": [ { + "id": "add-btn", + "type": "tool-bar-item", + "appearance": null, + "iconType": "", "disabled": false, - "name": "未启用", - "value": "0" + "text": "新增", + "visible": true, + "onClick": "LoadAndAddForCard" }, { + "id": "cancel-btn", + "type": "tool-bar-item", + "appearance": null, + "iconType": "", "disabled": false, - "name": "已启用", - "value": "1" + "text": "取消", + "visible": true, + "onClick": "Cancel" } ] - }, - "visible": true, - "filter": "", - "showSetting": true, - "actualWidth": 120 + } } - ], - "fieldEditable": false, - "onClickRow": "loadCard1", - "onPageIndexChanged": "changePage1", - "onPageSizeChanged": "changePage1", - "pagination": { - "enable": true, - "mode": "server" - }, - "disabled": "viewModel.stateMachine['editable']" - } - ] - } - ] - }, - { - "id": "detail-form-component", - "type": "component", - "componentType": "form", - "formColumns": 1, - "viewModel": "detail-form-component-viewmodel", - "appearance": { - "class": "f-struct-wrapper" - }, - "contents": [ - { - "id": "detail-form-section", - "type": "section", - "appearance": { - "class": "f-section-form f-section-in-main" - }, - "mainTitle": "基本信息", - "contents": [ + ] + }, { - "id": "detail-form-layout", - "type": "response-form", - "appearance": { - "class": "f-form-layout farris-form farris-form-controls-inline" - }, + "id": "card-page-body-container", + "type": "page-body-container", + "title": "主内容容器", + "appearance": null, + "visible": true, "contents": [ - { - "id": "code_ddfc72d4_njzh", - "type": "form-group", - "appearance": { - "class": "col-12" - }, - "label": "编号", - "binding": { - "type": "Form", - "path": "code", - "field": "ddfc72d4-0c9b-49bf-8f41-8047264f6edc", - "fullPath": "Code" - }, - "editor": { - "type": "input-group", - "readonly": "!viewModel.stateMachine['editable']", - "maxLength": 36 - }, - "path": "code" - }, - { - "id": "name_1ecd5759_onbj", - "type": "form-group", - "appearance": { - "class": "col-12" - }, - "label": "名称", - "binding": { - "type": "Form", - "path": "name", - "field": "1ecd5759-6df4-41c8-9526-0108a5e2d9b6", - "fullPath": "Name" - }, - "editor": { - "type": "input-group", - "readonly": "!viewModel.stateMachine['editable']", - "maxLength": 36 - }, - "path": "name" - }, - { - "id": "category_8e00ef40_wdtg", - "type": "form-group", - "appearance": { - "class": "col-12" - }, - "label": "分类", - "binding": { - "type": "Form", - "path": "category", - "field": "8e00ef40-17ba-4cbb-8a3c-709cf40b7939", - "fullPath": "Category" - }, - "editor": { - "type": "input-group", - "readonly": "!viewModel.stateMachine['editable']", - "maxLength": 36 - }, - "path": "category" - } - ], - "controlsInline": true, - "formAutoIntl": true + + ] + }, + { + "id": "card-page-footer-container", + "type": "page-footer-container", + "title": "页尾容器", + "appearance": null, + "size": null, + "position": null, + "visible": true, + "contents": [ + { + "id": "card-page-save-button", + "type": "button", + "title": "保存按钮", + "visible": true, + "disabled": false, + "text": "按钮", + "icon": "图标" + } + + + ] } ] } - ] + ], + "route": { + "id": "card-page-component", + "uri": "card-page-component", + "name": "card-page-component", + "params": [] + } } ], "webcmds": [ { - "id": "7c48ef46-339c-42d4-8365-a21236c63044", - "path": "/projects/packages/Inspur.GS.Gsp.Web.WebCmp/webcmd", - "name": "ListCardController.webcmd", + "id": "cf5e568a-5243-4539-94ea-e195eb4d6736", + "path": "Gsp/Mobile/MobileCmp/bo-mobilecmp/metadata/webcmd", + "name": "LoadPageCommands.webcmd", "refedHandlers": [ { - "host": "fda876c8-7230-46e7-af3d-d38233642275", - "handler": "loadList" + "host": "LoadPageForList", + "handler": "LoadPageForList" }, { - "host": "8788c27e-722a-4b98-9d57-98eafb526fe5", - "handler": "loadCard" + "host": "LoadPageForCard", + "handler": "LoadPageForCard" + } + ], + "code": "LoadPageCommands", + "nameSpace": "Inspur.GS.Gsp.Mobile.MobileCmp" + }, + { + "id": "0a68799b-48c6-4c9f-b0d7-140683c62b58", + "path": "Gsp/Mobile/MobileCmp/bo-mobilecmp/metadata/webcmd", + "name": "LoadCommands.webcmd", + "refedHandlers": [ + { + "host": "LoadDataForList", + "handler": "LoadForList" + }, + { + "host": "LoadAndAddForCard", + "handler": "LoadAndAddForCard" + }, + { + "host": "LoadAndEditForCard", + "handler": "LoadAndEditForCard" }, { - "host": "ef281c13-4480-4256-901e-4bef5f92bd9e", - "handler": "add" + "host": "LoadAndViewForCard", + "handler": "LoadAndViewForCard" + } + ], + "code": "LoadCommands", + "nameSpace": "Inspur.GS.Gsp.Mobile.MobileCmp" + }, + { + "id": "910661bd-963a-4287-aa32-441c95b8720f", + "path": "Gsp/Mobile/MobileCmp/bo-mobilecmp/metadata/webcmd", + "name": "NavigateCommands.webcmd", + "refedHandlers": [ + { + "host": "OpenCardAndAdd", + "handler": "Navigate" }, { - "host": "d12acc4e-6274-44dc-95e6-cedeb5e66707", - "handler": "edit" + "host": "OpenCardAndEdit", + "handler": "Navigate" }, { - "host": "5707d460-c441-45c4-8fe1-f77abd9f75b1", - "handler": "save" + "host": "OpenCardAndView", + "handler": "Navigate" }, { - "host": "b3897b4b-a37f-48e3-afb3-8489cec02806", - "handler": "cancel" + "host": "GoBack", + "handler": "GoBack" }, { - "host": "22576fc1-08fb-49a9-b132-295c7392b481", - "handler": "remove" + "host": "GoBackAndCheck", + "handler": "GoBackAndCheck" + } + ], + "code": "NavigateCommands", + "nameSpace": "Inspur.GS.Gsp.Mobile.MobileCmp" + }, + { + "id": "dab6b7f1-f56f-490a-879c-3d74232cd3ba", + "path": "Gsp/Mobile/MobileCmp/bo-mobilecmp/metadata/webcmd", + "name": "RemoveCommands.webcmd", + "refedHandlers": [ + { + "host": "RemoveById", + "handler": "RemoveById" }, { - "host": "e7cf83c2-e52d-4dce-aded-047a819c8068", - "handler": "changePage" + "host": "RemoveByIds", + "handler": "RemoveByIds" + } + ], + "code": "RemoveCommands", + "nameSpace": "Inspur.GS.Gsp.Mobile.MobileCmp" + }, + { + "id": "f863c66a-bf93-4d1f-9f99-bcd76009609d", + "path": "Gsp/Mobile/MobileCmp/bo-mobilecmp/metadata/webcmd", + "name": "SaveCommands.webcmd", + "refedHandlers": [ + { + "host": "Save", + "handler": "Save" + } + ], + "code": "SaveCommands", + "nameSpace": "Inspur.GS.Gsp.Mobile.MobileCmp" + }, + { + "id": "05592163-fd45-474e-b0ab-61d7dc02e5c0", + "path": "Gsp/Mobile/MobileCmp/bo-mobilecmp/metadata/webcmd", + "name": "CancelCommands.webcmd", + "refedHandlers": [ + { + "host": "Cancel", + "handler": "Cancel" + } + ], + "code": "CancelCommands", + "nameSpace": "Inspur.GS.Gsp.Mobile.MobileCmp" + }, + { + "id": "791cc5d9-65f9-40d0-b40c-444c7bc1afa3", + "path": "MyDev/FarrisVueTest/VueFormTest/bo-vueformtest-front/metadata/components", + "name": "MobileVueTest_frm_Controller.webcmd", + "refedHandlers": [ + { + "host": "77a277bf-6db3-4f7c-9418-1c12212ccab0", + "handler": "componentOnBeforeInit" } ], - "code": "ListCardController", - "nameSpace": "Inspur.GS.Gsp.Web.WebCmp" + "code": "MobileVueTest_frm_Controller", + "nameSpace": "Inspur.GS.MyDev.FarrisVueTest.VueFormTest.VueFormTest.Front" } ], - "projectName": "bo-commondictionaries-front", + "projectName": "bo-vueformtest-front", + "customClass": {}, "actions": [] } }, - "Id": "35dd45be-60c7-4ae8-a827-533424031b76", "CreationDate": null }, - "extendRule": null, - "relativePath": "SagiDemo/SagiDemeModule/CommonDictionaries/bo-commondictionaries-front/metadata/components", - "extendProperty": "", - "extended": false, - "previousVersion": null, - "version": null, - "properties": { + "ExtendRule": null, + "RelativePath": "MyDev/FarrisVueTest/VueFormTest/bo-vueformtest-front/metadata/components", + "ExtendProperty": "", + "Extended": false, + "PreviousVersion": null, + "Version": null, + "Properties": { "SchemaVersion": null, "CacheVersion": null, "Framework": "Vue" -- Gitee From c20ddc22d9cc7c4b4360667a4d69a403bab62678 Mon Sep 17 00:00:00 2001 From: cy <15990550+langchaocy@user.noreply.gitee.com> Date: Sun, 6 Jul 2025 09:26:37 +0800 Subject: [PATCH 07/23] =?UTF-8?q?fix:=20=E5=88=A0=E9=99=A4=E5=B0=8F?= =?UTF-8?q?=E9=83=A8=E5=88=86=E5=86=97=E4=BD=99=E8=B0=83=E8=AF=95=E4=BB=A3?= =?UTF-8?q?=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/designer/charts-bar.design.component.tsx | 5 +---- .../src/components/types/toolbox/mobile-toolbox.json | 7 ------- 2 files changed, 1 insertion(+), 11 deletions(-) diff --git a/packages/charts-vue/components/charts-bar/src/designer/charts-bar.design.component.tsx b/packages/charts-vue/components/charts-bar/src/designer/charts-bar.design.component.tsx index ca2301ae8c8..d75ee3c3708 100644 --- a/packages/charts-vue/components/charts-bar/src/designer/charts-bar.design.component.tsx +++ b/packages/charts-vue/components/charts-bar/src/designer/charts-bar.design.component.tsx @@ -20,10 +20,6 @@ export default defineComponent({ onMounted(() => { elementRef.value.componentInstance = componentInstance; }); - watch(props, ()=> { - console.log(123) - console.log(props) - }) context.expose(componentInstance.value); @@ -32,6 +28,7 @@ export default defineComponent({ color: props.color, grid: props.grid, height: props.height, + width: props.width, title: props.title, xAxis: props.xAxis, tooltip: props.tooltip, diff --git a/packages/designer/src/components/types/toolbox/mobile-toolbox.json b/packages/designer/src/components/types/toolbox/mobile-toolbox.json index dbd259ae19c..a017f97b814 100644 --- a/packages/designer/src/components/types/toolbox/mobile-toolbox.json +++ b/packages/designer/src/components/types/toolbox/mobile-toolbox.json @@ -9,13 +9,6 @@ "name": "图表", "category": "basic", "icon": "button" - }, - { - "id": "111", - "type": "111", - "name": "图表111", - "category": "basic", - "icon": "111" } ] }, -- Gitee From c2104d45047978c3b143907649012936aed69796 Mon Sep 17 00:00:00 2001 From: cy <15990550+langchaocy@user.noreply.gitee.com> Date: Sun, 6 Jul 2025 11:28:17 +0800 Subject: [PATCH 08/23] =?UTF-8?q?fix:=20=E9=85=8D=E7=BD=AEechart=E7=9A=84t?= =?UTF-8?q?itle=E5=B1=9E=E6=80=A7=EF=BC=8C=E4=BD=86=E6=98=AF=E6=9C=80?= =?UTF-8?q?=E5=A4=9A=E5=8F=AA=E8=83=BD=E6=8B=BF=E5=88=B0=E7=AC=AC=E4=BA=8C?= =?UTF-8?q?=E5=B1=82=E5=B1=9E=E6=80=A7=EF=BC=8C=E7=AC=AC=E4=B8=89=E5=B1=82?= =?UTF-8?q?=E5=92=8C=E7=AC=AC=E5=9B=9B=E5=B1=82=E5=B1=9E=E6=80=A7=E4=B8=8D?= =?UTF-8?q?=E7=9F=A5=E9=81=93=E6=80=8E=E4=B9=88=E6=8B=BF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../charts-bar.property-config.ts | 78 ++++++++++++++++++- .../src/converter/cascade.converter.ts | 4 +- 2 files changed, 79 insertions(+), 3 deletions(-) diff --git a/packages/charts-vue/components/charts-bar/src/property-config/charts-bar.property-config.ts b/packages/charts-vue/components/charts-bar/src/property-config/charts-bar.property-config.ts index f37769a1f9b..52318712bbb 100644 --- a/packages/charts-vue/components/charts-bar/src/property-config/charts-bar.property-config.ts +++ b/packages/charts-vue/components/charts-bar/src/property-config/charts-bar.property-config.ts @@ -1,5 +1,5 @@ import { BaseControlProperty, ToolbarItemProperty } from "@farris/charts-vue/components/charts-common/src/props"; -import { chartsBarGridConverter } from "@farris/charts-vue/components/dynamic-resolver/src/converter"; +import { gridConverter, titleConverter } from "@farris/charts-vue/components/dynamic-resolver/src/converter"; export class ChartsBarProperty extends BaseControlProperty { @@ -15,16 +15,90 @@ export class ChartsBarProperty extends BaseControlProperty { this.propertyConfig.categories['appearance'] = this.getAppearanceConfig(propertyData); + this.propertyConfig.categories['title'] = this.getChartsBarTitleConfig(propertyData); + this.propertyConfig.categories['behavior'] = this.getChartsBarBehaviorConfig(propertyData); this.propertyConfig.categories['grid'] = this.getChartsBarGridConfig(propertyData); + return this.propertyConfig; } + private getChartsBarTitleConfig(propertyData) { + return{ + title: 'Title', + $converter: titleConverter, + properties: { + show: { + title: '标题展示show', + type: 'boolean', + }, + text: { + title: '标题text', + type: 'string', + }, + link: { + title: '标题超链接link', + type: 'string', + }, + target: { + title: 'target', + type: 'select', + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'self' , name: '超链接当前窗口打开' }, + { value:'blank' , name: '超链接新窗口打开' }, + ] + } + }, + textStyle: { + title: "textStyle", + type: "cascade", + visible: propertyData.display === "flex", + isExpand: true, + properties: { + color: { + title: "color", + type: 'string', + }, + // 取不到属性套属性套属性 要写一个新的 generate Cascade Property Converter 生成级联属性转换器 吗？？？ + // 最多的有4层属性，目前这种方式只能取到2层属性。 + }, + }, + subtext: { + title: '副标题subtext', + type: 'string', + }, + sublink: { + title: '副标题超链接link', + type: 'string', + }, + subtarget: { + title: 'subtarget', + type: 'select', + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'self' , name: '超链接当前窗口打开' }, + { value:'blank' , name: '超链接新窗口打开' }, + ] + } + }, + + } + }; + } private getChartsBarGridConfig(propertyData) { return{ title: 'Grid', - $converter: chartsBarGridConverter, + $converter: gridConverter, properties: { height: { title: 'height', diff --git a/packages/charts-vue/components/dynamic-resolver/src/converter/cascade.converter.ts b/packages/charts-vue/components/dynamic-resolver/src/converter/cascade.converter.ts index 334412627c9..06249498a45 100644 --- a/packages/charts-vue/components/dynamic-resolver/src/converter/cascade.converter.ts +++ b/packages/charts-vue/components/dynamic-resolver/src/converter/cascade.converter.ts @@ -25,5 +25,7 @@ export const flexBoxConverter = generateCascadePropertyConverter('flexBox'); export const toolbarConverter = generateCascadePropertyConverter('toolbar', { items: [] }); export const swipeToolbarConverter = generateCascadePropertyConverter('swipeToolbar', { items: [] }); export const rightToolbarConverter = generateCascadePropertyConverter('rightToolbar', { items: [] }); -export const chartsBarGridConverter = generateCascadePropertyConverter('grid', { items: [] }); +export const gridConverter = generateCascadePropertyConverter('grid', { items: [] }); +export const titleConverter = generateCascadePropertyConverter('title', { items: [] }); + -- Gitee From 8267cd9af6ca3fd72744851dbb8a4379c61bbed4 Mon Sep 17 00:00:00 2001 From: cy <15990550+langchaocy@user.noreply.gitee.com> Date: Sun, 6 Jul 2025 11:43:39 +0800 Subject: [PATCH 09/23] =?UTF-8?q?fix:=20=E6=8A=8Amobile-ui-vue=E4=B8=8B?= =?UTF-8?q?=E5=AF=B9common=E7=9A=84=E6=94=B9=E5=8A=A8=E5=90=8C=E6=AD=A5?= =?UTF-8?q?=E5=88=B0charts-vue=E4=B8=8B=E7=9A=84charts-common?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/charts-common/src/props/base-property.ts | 8 ++++---- .../charts-common/src/props/use-property-editor.ts | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/charts-vue/components/charts-common/src/props/base-property.ts b/packages/charts-vue/components/charts-common/src/props/base-property.ts index ce8c8017928..4ed4aa3e123 100644 --- a/packages/charts-vue/components/charts-common/src/props/base-property.ts +++ b/packages/charts-vue/components/charts-common/src/props/base-property.ts @@ -34,12 +34,12 @@ export class BaseControlProperty { constructor(componentId: string, designerHostService: any) { this.componentId = componentId; this.designerHostService = designerHostService; - this.eventsEditorUtils = designerHostService['eventsEditorUtils']; - this.formSchemaUtils = designerHostService['formSchemaUtils']; + this.eventsEditorUtils = designerHostService['eventEditor']; + this.formSchemaUtils = designerHostService['pageSchema']; this.formMetadataConverter = designerHostService['formMetadataConverter']; this.viewModelId = this.formSchemaUtils?.getViewModelIdByComponentId(componentId) || ''; - this.designViewModelUtils = designerHostService['designViewModelUtils']; - this.controlCreatorUtils = designerHostService['controlCreatorUtils']; + this.designViewModelUtils = designerHostService['designViewModel']; + this.controlCreatorUtils = designerHostService['controlCreator']; this.metadataService = designerHostService['metadataService']; this.schemaService = designerHostService['schemaService']; } diff --git a/packages/charts-vue/components/charts-common/src/props/use-property-editor.ts b/packages/charts-vue/components/charts-common/src/props/use-property-editor.ts index edc1e1d5101..9120637bcde 100644 --- a/packages/charts-vue/components/charts-common/src/props/use-property-editor.ts +++ b/packages/charts-vue/components/charts-common/src/props/use-property-editor.ts @@ -6,7 +6,7 @@ import { DesignerHostService } from "../types"; * @returns */ export function usePropertyEditor(designerHostService: DesignerHostService): any { - const { formSchemaUtils, formStateMachineUtils } = designerHostService; + const { pageSchema: formSchemaUtils, formStateMachineUtils } = designerHostService; /** * 把变量视图模型的变量转化为PropertyEditor的变量格式 -- Gitee From cd2780109e3221faa4b5589cbb6fbb7e1a3dd863 Mon Sep 17 00:00:00 2001 From: cy <15990550+langchaocy@user.noreply.gitee.com> Date: Sun, 6 Jul 2025 14:41:25 +0800 Subject: [PATCH 10/23] =?UTF-8?q?fix:=20=E4=BC=98=E5=8C=96=E4=BA=86charts-?= =?UTF-8?q?bar=E5=AE=BD=E9=AB=98=E7=9A=84=E5=B1=9E=E6=80=A7=E8=AE=BE?= =?UTF-8?q?=E7=BD=AE=EF=BC=8C=E8=88=8D=E5=BC=83=E5=8E=9F=E6=9D=A5=E7=9A=84?= =?UTF-8?q?=E5=AD=97=E7=AC=A6=E4=B8=B2height=EF=BC=8Cwidth=E9=85=8D?= =?UTF-8?q?=E7=BD=AE=E9=A1=B9=EF=BC=8C=E6=94=B9=E4=B8=BA=E5=AF=B9=E8=B1=A1?= =?UTF-8?q?size=EF=BC=8C=E5=B0=86=E5=AE=BD=E9=AB=98=E6=94=B9=E4=B8=BAnumbe?= =?UTF-8?q?r=E7=B1=BB=E5=9E=8B=E7=9A=84=E9=85=8D=E7=BD=AE=EF=BC=8C?= =?UTF-8?q?=E6=9B=B4=E5=8F=8B=E5=A5=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../charts-bar/src/charts-bar.component.tsx | 7 +-- .../charts-bar/src/charts-bar.props.ts | 4 +- .../designer/charts-bar.design.component.tsx | 1 + .../charts-bar.property-config.ts | 46 +++++++++++++++---- .../src/schema/charts-bar.schema.json | 7 +++ 5 files changed, 53 insertions(+), 12 deletions(-) diff --git a/packages/charts-vue/components/charts-bar/src/charts-bar.component.tsx b/packages/charts-vue/components/charts-bar/src/charts-bar.component.tsx index b9d16577008..75d7692b95f 100644 --- a/packages/charts-vue/components/charts-bar/src/charts-bar.component.tsx +++ b/packages/charts-vue/components/charts-bar/src/charts-bar.component.tsx @@ -1,4 +1,4 @@ -import { defineComponent, onMounted, onBeforeUnmount, ref, watch, SetupContext } from 'vue'; +import { defineComponent, onMounted, onBeforeUnmount, ref, watch, SetupContext, computed, CSSProperties } from 'vue'; import * as echarts from 'echarts'; import type { ECharts } from 'echarts'; import { ChartsBarProps, chartsBarProps } from './charts-bar.props'; @@ -118,12 +118,13 @@ export default defineComponent({ } }); + return () => (
diff --git a/packages/charts-vue/components/charts-bar/src/charts-bar.props.ts b/packages/charts-vue/components/charts-bar/src/charts-bar.props.ts index e70dd80f13f..cb15550d980 100644 --- a/packages/charts-vue/components/charts-bar/src/charts-bar.props.ts +++ b/packages/charts-vue/components/charts-bar/src/charts-bar.props.ts @@ -141,7 +141,7 @@ export const chartsBarProps = { backgroundColor: { type: String }, - width: { type: [String, Number], default: '100%'}, + width: { type: [String, Number]}, height: { type: [String, Number]}, @@ -157,6 +157,8 @@ export const chartsBarProps = { theme: { type: String, default: 'defaultTheme' }, + size: { type: Object }, + ...animationProps } as Record; diff --git a/packages/charts-vue/components/charts-bar/src/designer/charts-bar.design.component.tsx b/packages/charts-vue/components/charts-bar/src/designer/charts-bar.design.component.tsx index d75ee3c3708..5d39b033f32 100644 --- a/packages/charts-vue/components/charts-bar/src/designer/charts-bar.design.component.tsx +++ b/packages/charts-vue/components/charts-bar/src/designer/charts-bar.design.component.tsx @@ -28,6 +28,7 @@ export default defineComponent({ color: props.color, grid: props.grid, height: props.height, + size: props.size, width: props.width, title: props.title, xAxis: props.xAxis, diff --git a/packages/charts-vue/components/charts-bar/src/property-config/charts-bar.property-config.ts b/packages/charts-vue/components/charts-bar/src/property-config/charts-bar.property-config.ts index 52318712bbb..00f9d1eaf4b 100644 --- a/packages/charts-vue/components/charts-bar/src/property-config/charts-bar.property-config.ts +++ b/packages/charts-vue/components/charts-bar/src/property-config/charts-bar.property-config.ts @@ -1,5 +1,5 @@ import { BaseControlProperty, ToolbarItemProperty } from "@farris/charts-vue/components/charts-common/src/props"; -import { gridConverter, titleConverter } from "@farris/charts-vue/components/dynamic-resolver/src/converter"; +import { gridConverter, titleConverter, sizeConverter } from "@farris/charts-vue/components/dynamic-resolver/src/converter"; export class ChartsBarProperty extends BaseControlProperty { @@ -129,13 +129,43 @@ export class ChartsBarProperty extends BaseControlProperty { description: "基本信息", title: "行为", properties: { - height:{ - title: "height", - type: 'string', - }, - width:{ - title: "width", - type: 'string', + // height:{ + // title: "height", + // type: 'string', + // }, + // width:{ + // title: "width", + // type: 'string', + // }, + size: { + title: "尺寸", + type: "cascade", + description: "组件的尺寸", + isExpand: true, + properties: { + width: { + title: "宽度（%）", + type: "number", + description: "组件的宽度", + editor: { + min: 0, + decimals: 0, + nullable: true, + }, + $converter: sizeConverter, + }, + height: { + title: "高度（px）", + type: "number", + description: "组件的高度", + editor: { + min: 0, + decimals: 0, + nullable: true, + }, + $converter: sizeConverter, + } + } }, name: { title: "name", diff --git a/packages/charts-vue/components/charts-bar/src/schema/charts-bar.schema.json b/packages/charts-vue/components/charts-bar/src/schema/charts-bar.schema.json index 9be01c45979..925dd00511c 100644 --- a/packages/charts-vue/components/charts-bar/src/schema/charts-bar.schema.json +++ b/packages/charts-vue/components/charts-bar/src/schema/charts-bar.schema.json @@ -885,6 +885,13 @@ }, "default": [{"data": [120, 200, 150, 80, 70, 110, 130]}] }, + "size": { + "type": "object", + "default": { + "width": 100, + "height": 300 + } + }, "height":{ "description": "div de height", "type": "string", -- Gitee From 4a476b70c37043631f95b7c022557d85d1f4285b Mon Sep 17 00:00:00 2001 From: cy <15990550+langchaocy@user.noreply.gitee.com> Date: Sun, 6 Jul 2025 15:45:10 +0800 Subject: [PATCH 11/23] =?UTF-8?q?feature:=20=E4=B8=BAcharts-line=E8=BF=9B?= =?UTF-8?q?=E8=A1=8C=E4=BA=86=E4=B8=8Echarts-bar=E7=9B=B8=E5=90=8C?= =?UTF-8?q?=E7=9A=84=E9=85=8D=E7=BD=AE=EF=BC=8C=E4=BD=86object=E7=B1=BB?= =?UTF-8?q?=E5=9E=8B=E7=9A=84=E5=B1=9E=E6=80=A7=E9=85=8D=E7=BD=AE=E5=AD=98?= =?UTF-8?q?=E5=9C=A8=E9=97=AE=E9=A2=98=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../charts-common/src/props/dg-control.ts | 2 + .../components/charts-line/index.ts | 22 +- .../charts-line/src/charts-line.component.tsx | 4 +- .../charts-line/src/charts-line.props.ts | 22 +- .../designer/charts-line.design.component.tsx | 53 + .../src/designer/use-designer-rules.ts | 57 ++ .../charts-line.property-config.ts | 207 ++++ .../src/schema/charts-line.schema.json | 911 ++++++++++++++++++ .../charts-line/src/schema/schema-mapper.ts | 17 + .../charts-line/src/schema/schema-resolver.ts | 5 + .../use-mobile-designer-context.ts | 4 +- .../types/toolbox/mobile-toolbox.json | 11 +- 12 files changed, 1303 insertions(+), 12 deletions(-) create mode 100644 packages/charts-vue/components/charts-line/src/designer/charts-line.design.component.tsx create mode 100644 packages/charts-vue/components/charts-line/src/designer/use-designer-rules.ts create mode 100644 packages/charts-vue/components/charts-line/src/property-config/charts-line.property-config.ts create mode 100644 packages/charts-vue/components/charts-line/src/schema/charts-line.schema.json create mode 100644 packages/charts-vue/components/charts-line/src/schema/schema-mapper.ts create mode 100644 packages/charts-vue/components/charts-line/src/schema/schema-resolver.ts diff --git a/packages/charts-vue/components/charts-common/src/props/dg-control.ts b/packages/charts-vue/components/charts-common/src/props/dg-control.ts index c51a73e733b..2aac6a2ab31 100644 --- a/packages/charts-vue/components/charts-common/src/props/dg-control.ts +++ b/packages/charts-vue/components/charts-common/src/props/dg-control.ts @@ -1,6 +1,8 @@ export const DgControl = { 'charts-bar': { type: 'charts-bar', name: '柱状图', icon: 'ChartsBar' }, + 'charts-line': { type: 'charts-line', name: '折线图', icon: 'ChartsLine' }, + 'module': { type: 'Module', name: '模块', icon: 'Module' }, 'component': { type: 'component', name: '组件', icon: 'Component' }, diff --git a/packages/charts-vue/components/charts-line/index.ts b/packages/charts-vue/components/charts-line/index.ts index 86e86dd5e97..e6a93023ccc 100644 --- a/packages/charts-vue/components/charts-line/index.ts +++ b/packages/charts-vue/components/charts-line/index.ts @@ -1,6 +1,20 @@ -import FCharstLine from './src/charts-line.component'; -import { withInstall } from '@farris/charts-vue/components/charts-common'; +import FChartsLineInstallless from './src/charts-line.component'; +import { propsResolverGenerator } from './src/charts-line.props'; +import { withInstall, withRegister, withRegisterDesigner } from '@farris/charts-vue/components/charts-common'; +import ChartsLineDesign from './src/designer/charts-line.design.component'; export * from './src/charts-line.props'; -export { FCharstLine }; -export default withInstall(FCharstLine); + +const CHARTS_BAR_REGISTERED_NAME = 'charts-line'; +// FChartsLine.register = (componentMap: Record, propsResolverMap: Record, configResolverMap: Record, resolverMap: Record) => { +// componentMap['charts-line'] = FChartsLine; +// propsResolverMap['charts-line'] = propsResolver; +// }; + +const FChartsLine = withInstall(FChartsLineInstallless) + +withRegister(FChartsLine, {name: CHARTS_BAR_REGISTERED_NAME, propsResolverGenerator}) +withRegisterDesigner(FChartsLine, { name: CHARTS_BAR_REGISTERED_NAME, propsResolverGenerator, designerComponent: ChartsLineDesign }); + +export { FChartsLine }; +export default FChartsLine diff --git a/packages/charts-vue/components/charts-line/src/charts-line.component.tsx b/packages/charts-vue/components/charts-line/src/charts-line.component.tsx index 2a3c8e5c31e..6e8e8e2f88f 100644 --- a/packages/charts-vue/components/charts-line/src/charts-line.component.tsx +++ b/packages/charts-vue/components/charts-line/src/charts-line.component.tsx @@ -122,8 +122,8 @@ export default defineComponent({
); diff --git a/packages/charts-vue/components/charts-line/src/charts-line.props.ts b/packages/charts-vue/components/charts-line/src/charts-line.props.ts index f85ec555d28..524ed5add69 100644 --- a/packages/charts-vue/components/charts-line/src/charts-line.props.ts +++ b/packages/charts-vue/components/charts-line/src/charts-line.props.ts @@ -5,6 +5,10 @@ import { SelectProps, TooltipProps, SelectedModeType, SamplingType, TextStyleProps, LegendProps, TitleProps, GridProps, DataZoomProps } from '@farris/charts-vue/components/charts-common'; +import { getPropsResolverGenerator } from '@farris/charts-vue/components/dynamic-resolver'; +import chartsLineSchema from './schema/charts-line.schema.json'; +import { schemaMapper } from './schema/schema-mapper'; +import { schemaResolver } from './schema/schema-resolver'; export const lineSeriesProps = { type: { type: String, default: 'line' }, @@ -85,6 +89,15 @@ export const lineSeriesProps = { export type LineSeriesProps = ExtractPropTypes; export const chartsLineProps = { + /** + * 组件标识 + */ + id: { type: String as PropType, default: 'charts-line', required: true }, + /** + * 组件类型，默认是 'line' + */ + type: { type: String as PropType, default: 'line', required: true }, + title: { type: Object as PropType }, legend: { type: Object as PropType }, @@ -114,8 +127,15 @@ export const chartsLineProps = { yAxis: { type: Object as PropType }, theme: { type: String, default: 'defaultTheme' }, - + + size: { type: Object }, ...animationProps }; export type ChartsLineProps = ExtractPropTypes; +export const propsResolverGenerator = getPropsResolverGenerator( + chartsLineProps, + chartsLineSchema, + schemaMapper, + schemaResolver +); \ No newline at end of file diff --git a/packages/charts-vue/components/charts-line/src/designer/charts-line.design.component.tsx b/packages/charts-vue/components/charts-line/src/designer/charts-line.design.component.tsx new file mode 100644 index 00000000000..10732b637a1 --- /dev/null +++ b/packages/charts-vue/components/charts-line/src/designer/charts-line.design.component.tsx @@ -0,0 +1,53 @@ +import { computed, defineComponent, inject, onMounted, ref, SetupContext, watch } from 'vue'; +import { DesignerHostService, DesignerItemContext } from '@farris/charts-vue/components/charts-common/src/types'; +import { useDesignerComponent } from '@farris/charts-vue/components/charts-common/src/compositions/use-designer-component'; + +import { ChartsLineProps, chartsLineProps } from '../charts-line.props'; +import FChartsLine from '../charts-line.component'; +import { useDesignerRules } from './use-designer-rules'; + +export default defineComponent({ + name: 'FmChartsLineDesign', + props: chartsLineProps, + emits: ['click'], + setup(props: ChartsLineProps, context: SetupContext) { + const elementRef = ref(); + const designerHostService = inject('designer-host-service'); + const designItemContext = inject('design-item-context') as DesignerItemContext; + const designerRulesComposition = useDesignerRules(designItemContext, designerHostService); + const componentInstance = useDesignerComponent(elementRef, designItemContext, designerRulesComposition); + + onMounted(() => { + elementRef.value.componentInstance = componentInstance; + }); + + context.expose(componentInstance.value); + + const chartsLineProps = computed(() => ({ + color: props.color, + grid: props.grid, + height: props.height, + size: props.size, + width: props.width, + title: props.title, + xAxis: props.xAxis, + tooltip: props.tooltip, + legend: props.legend, + toolbox: props.toolbox, + animation: props.animation, + animationDuration: props.animationDuration, + animationEasingUpdate: props.animationEasingUpdate, + series: props.series.map((series) => { + const lineseries = { ...series }; + lineseries.type = 'line'; + return lineseries; + }), + })); + + return () => { + return ( + + ); + }; + } +}); diff --git a/packages/charts-vue/components/charts-line/src/designer/use-designer-rules.ts b/packages/charts-vue/components/charts-line/src/designer/use-designer-rules.ts new file mode 100644 index 00000000000..a019de896f1 --- /dev/null +++ b/packages/charts-vue/components/charts-line/src/designer/use-designer-rules.ts @@ -0,0 +1,57 @@ +import { ref } from "vue"; +import { DraggingResolveContext } from "@farris/charts-vue/components/charts-common/src/types"; +import { DesignerHostService, DesignerItemContext, UseDesignerRules } from "@farris/charts-vue/components/charts-common/src/types"; +import { ChartsLineProperty } from "../property-config/charts-line.property-config"; + +export function useDesignerRules(designItemContext: DesignerItemContext, designerHostService?: DesignerHostService): UseDesignerRules { + + const triggerBelongedComponentToMoveWhenMoved = ref(false); + + const triggerBelongedComponentToDeleteWhenDeleted = ref(false); + + function canAccepts(draggingContext: DraggingResolveContext): boolean { + + return false; + } + + + function checkCanMoveComponent() { + return true; + } + function checkCanDeleteComponent() { + return true; + } + + function hideNestedPaddingInDesginerView() { + return true; + } + + function getStyles(): string { + return ' '; + } + + function getDesignerClass(): string { + return ' '; + } + + /** + * 获取属性配置 + */ + function getPropsConfig(componentId: string) { + const componentProp = new ChartsLineProperty(componentId, designerHostService); + const { schema } = designItemContext; + return componentProp.getPropertyConfig(schema); + } + + return { + canAccepts, + // triggerBelongedComponentToMoveWhenMoved, + // triggerBelongedComponentToDeleteWhenDeleted, + // checkCanMoveComponent, + // checkCanDeleteComponent, + hideNestedPaddingInDesginerView, + // getStyles, + // getDesignerClass, + getPropsConfig + }; +} diff --git a/packages/charts-vue/components/charts-line/src/property-config/charts-line.property-config.ts b/packages/charts-vue/components/charts-line/src/property-config/charts-line.property-config.ts new file mode 100644 index 00000000000..c1237cd26a3 --- /dev/null +++ b/packages/charts-vue/components/charts-line/src/property-config/charts-line.property-config.ts @@ -0,0 +1,207 @@ +import { BaseControlProperty } from "@farris/charts-vue/components/charts-common/src/props"; +import { gridConverter, titleConverter, sizeConverter } from "@farris/charts-vue/components/dynamic-resolver/src/converter"; + + +export class ChartsLineProperty extends BaseControlProperty { + + + constructor(componentId: string, designerHostService: any) { + super(componentId, designerHostService); + } + public getPropertyConfig(propertyData: any) { + this.propertyConfig.categories['basic'] = this.getBasicPropConfig(propertyData); + + this.propertyConfig.categories['appearance'] = this.getAppearanceConfig(propertyData); + + this.propertyConfig.categories['title'] = this.getChartsLineTitleConfig(propertyData); + + this.propertyConfig.categories['behavior'] = this.getChartsLineBehaviorConfig(propertyData); + + this.propertyConfig.categories['grid'] = this.getChartsLineGridConfig(propertyData); + + + return this.propertyConfig; + } + private getChartsLineTitleConfig(propertyData) { + return{ + title: 'Title', + $converter: titleConverter, + properties: { + show: { + title: '标题展示show', + type: 'boolean', + }, + text: { + title: '标题text', + type: 'string', + }, + link: { + title: '标题超链接link', + type: 'string', + }, + target: { + title: 'target', + type: 'select', + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'self' , name: '超链接当前窗口打开' }, + { value:'blank' , name: '超链接新窗口打开' }, + ] + } + }, + textStyle: { + title: "textStyle", + type: "cascade", + visible: propertyData.display === "flex", + isExpand: true, + properties: { + color: { + title: "color", + type: 'string', + }, + // 取不到属性套属性套属性 要写一个新的 generate Cascade Property Converter 生成级联属性转换器 吗？？？ + // 最多的有4层属性，目前这种方式只能取到2层属性。 + }, + }, + subtext: { + title: '副标题subtext', + type: 'string', + }, + sublink: { + title: '副标题超链接link', + type: 'string', + }, + subtarget: { + title: 'subtarget', + type: 'select', + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'self' , name: '超链接当前窗口打开' }, + { value:'blank' , name: '超链接新窗口打开' }, + ] + } + }, + + } + }; + } + private getChartsLineGridConfig(propertyData) { + return{ + title: 'Grid', + $converter: gridConverter, + properties: { + height: { + title: 'height', + type: 'string', + // editor: { + // type: "collection-property-editor", + // textField: 'text', + // modalTitle: '右侧工具栏编辑器', + // onSelectionChange: ({ selectedData, propertyConfig }) => { + // propertyConfig.value = this.toollineItemProperty.getPropertyConfig(selectedData.value, { + // showAppearance: true, + // }); + // }, + // defaultComponentSchema: { + // id: 'button', + // text: '按钮', + // visible: true, + // disabled: false + // } + // } + } + } + }; + } + + private getChartsLineBehaviorConfig(propertyData) { + return { + description: "基本信息", + title: "行为", + properties: { + // height:{ + // title: "height", + // type: 'string', + // }, + // width:{ + // title: "width", + // type: 'string', + // }, + size: { + title: "尺寸", + type: "cascade", + description: "组件的尺寸", + isExpand: true, + properties: { + width: { + title: "宽度（%）", + type: "number", + description: "组件的宽度", + editor: { + min: 0, + decimals: 0, + nullable: true, + }, + $converter: sizeConverter, + }, + height: { + title: "高度（px）", + type: "number", + description: "组件的高度", + editor: { + min: 0, + decimals: 0, + nullable: true, + }, + $converter: sizeConverter, + } + } + }, + name: { + title: "name", + type: 'string', + }, + xAxis: { + title: "xAxis", + type: 'string', + }, + yAxis: { + title: "yAxis", + type: 'string', + }, + color: { + title: "color", + type: 'string', + }, + + legend: { + title: "legend", + type: 'string', + }, + title: { + title: "title", + type: 'string', + }, + textStyle: { + title: "textStyle", + type: 'string', + } + , + series: { + title: "series", + type: 'array', + } + + } + }; + } + +} diff --git a/packages/charts-vue/components/charts-line/src/schema/charts-line.schema.json b/packages/charts-vue/components/charts-line/src/schema/charts-line.schema.json new file mode 100644 index 00000000000..7259933bbac --- /dev/null +++ b/packages/charts-vue/components/charts-line/src/schema/charts-line.schema.json @@ -0,0 +1,911 @@ +{ + "$schema": "https://json-schema.org/draft/2020-12/schema", + "$id": "https://farris-design.gitee.io/charts-line.schema.json", + "title": "charts-line", + "description": "A Farris Line Component", + "type": "object", + "properties": { + "id": { + "description": "The unique identifier for a Input Group", + "type": "string" + }, + "type": { + "description": "The type string of Input Group component", + "type": "string", + "default": "charts-line" + }, + "name": { + "type": "string", + "default": "charts-line" + }, + "code": { + "type": "string" + }, + "color": { + "type": "array", + "default": [ + "#5470c6", + "#91cc75", + "#fac858", + "#ee6666", + "#73c0de", + "#3ba272", + "#fc8452", + "#9a60b4", + "#ea7ccc" + ] + }, + "textStyle": { + "type": "object", + "properties": { + "color": { + "type": "string", + "default": "#808080" + }, + "fontStyle": { + "type": "string", + "enum": [ + "normal", + "italic", + "oblique" + ], + "default": "normal" + }, + "fontWeight": { + "type": "string", + "enum": [ + "normal", + "bold", + "bolder", + "lighter" + ], + "default": "normal" + }, + "fontFamily": { + "type": "string", + "enum": [ + "serif", + "monospace", + "Arial", + "Courier New" + ], + "default": "serif" + }, + "fontSize": { + "type": "number", + "default": 12 + }, + "lineHeight": { + "type": "number" + }, + "width": { + "type": "number" + }, + "height": { + "type": "number" + }, + "overflow": { + "type": "string", + "enum": [ + "none", + "truncate", + "break", + "breakAll" + ], + "default": "none" + }, + "ellipsis": { + "type": "string", + "description": "在overflow配置为'truncate'的时候，可以通过该属性配置末尾显示的文本", + "default": "..." + } + } + }, + "title": { + "type": "object", + "properties": { + "id": { + "type": "string", + "default": "" + }, + "show": { + "type": "boolean", + "default": true + }, + "text": { + "type": "string", + "default": "" + }, + "link": { + "type": "string", + "default": "" + }, + "target": { + "type": "string", + "enum": [ + "blank", + "self" + ], + "default": "blank" + }, + "textStyle": { + "type": "object", + "properties": { + "color": { + "type": "string", + "default": "#2D2F33" + }, + "fontStyle": { + "type": "string", + "enum": [ + "normal", + "italic", + "oblique" + ], + "default": "normal" + }, + "fontWeight": { + "type": [ + "string", + "number" + ], + "enum": [ + "normal", + "bold", + "bolder", + "lighter" + ], + "default": 500 + }, + "fontFamily": { + "type": "string", + "enum": [ + "serif", + "monospace", + "Arial", + "Courier New" + ], + "default": "serif" + }, + "lineHeight": { + "type": "number", + "default": 26 + } + } + }, + "subtext": { + "type": "string", + "default": "" + }, + "sublink": { + "type": "string", + "default": "" + }, + "subtarget": { + "type": "string", + "enum": [ + "blank", + "self" + ], + "default": "blank" + }, + "subtextStyle": { + "type": "object", + "properties": { + "color": { + "type": "string", + "default": "#2D2F33" + }, + "fontStyle": { + "type": "string", + "enum": [ + "normal", + "italic", + "oblique" + ], + "default": "normal" + }, + "fontWeight": { + "type": [ + "string", + "number" + ], + "enum": [ + "normal", + "bold", + "bolder", + "lighter" + ], + "default": "normal" + }, + "fontFamily": { + "type": "string", + "enum": [ + "serif", + "monospace", + "Arial", + "Courier New" + ], + "default": "serif" + }, + "lineHeight": { + "type": "number", + "default": 20 + } + } + }, + "triggerEvent": { + "type": "boolean", + "default": true + }, + "padding": { + "type": "array", + "items": { + "type": "number" + }, + "default": [ + 5, + 5, + 5, + 5 + ] + }, + "itemGap": { + "type": "number", + "default": 10 + }, + "top": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "bottom": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "left": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "right": { + "type": [ + "string", + "number" + ], + "default": "auto" + } + } + }, + "legend": { + "type": "object", + "properties": { + "id": { + "type": "string", + "default": "" + }, + "show": { + "type": "boolean", + "default": true + }, + "type": { + "type": "string", + "enum": [ + "plain", + "scroll" + ], + "default": "plain" + }, + "top": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "bottom": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "left": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "right": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "width": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "height": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "orient": { + "type": [ + "string" + ], + "enum": [ + "horizontal", + "vertical" + ], + "default": "horizontal" + }, + "align": { + "type": "string", + "enum": [ + "auto", + "left", + "right" + ], + "default": "auto" + }, + "padding": { + "type": "number", + "default": 5 + }, + "itemGap": { + "type": "number", + "default": 10 + }, + "itemWidth": { + "type": "number", + "default": 12 + }, + "itemHeight": { + "type": "number", + "default": 12 + }, + "itemStyle": { + "type": "object", + "properties": { + "color": { + "type": "array", + "items": { + "type": "string" + } + } + } + }, + "lineStyle": { + "type": "object", + "properties": { + "color": { + "type": "array", + "items": { + "type": "string" + } + } + } + }, + "textStyle": { + "type": "object", + "properties": { + "color": { + "type": "string", + "default": "#666666" + }, + "fontSize": { + "type": "number", + "default": 12 + }, + "fontStyle": { + "type": "string", + "enum": [ + "normal", + "italic", + "oblique" + ], + "default": "normal" + }, + "fontWeight": { + "type": [ + "string", + "number" + ], + "enum": [ + "normal", + "bold", + "bolder", + "lighter" + ], + "default": 400 + }, + "fontFamily": { + "type": "string", + "enum": [ + "serif", + "monospace", + "Arial", + "Courier New" + ], + "default": "serif" + }, + "lineHeight": { + "type": "number", + "default": 16 + } + } + }, + "formatter": { + "type": "object", + "default": "" + }, + "tooltip": { + "type": "boolean", + "default": false + }, + "icon": { + "type": "string", + "default": "" + }, + "data": { + "type": "object", + "properties": { + "name": { + "type": "string" + }, + "icon": { + "type": "string" + }, + "textStyle": { + "type": "object", + "properties": { + "color": { + "type": "string" + }, + "fontStyle": { + "type": "string", + "enum": [ + "normal", + "italic", + "oblique" + ] + }, + "fontWeight": { + "type": [ + "string", + "number" + ], + "enum": [ + "normal", + "bold", + "bolder", + "lighter" + ] + }, + "fontFamily": { + "type": "string", + "enum": [ + "serif", + "monospace", + "Arial", + "Courier New" + ] + }, + "lineHeight": { + "type": "number" + } + } + } + } + }, + "borderRadius": { + "type": [ + "number", + "array" + ], + "default": 0 + } + } + }, + "grid": { + "type": "object", + "properties": { + "id": { + "type": "string", + "default": "" + }, + "show": { + "type": "boolean", + "default": true + }, + "zlevel": { + "type": "number", + "default": 0 + }, + "z": { + "type": "number", + "default": 0 + }, + "top": { + "type": [ + "string", + "number" + ], + "default": 60 + }, + "bottom": { + "type": [ + "string", + "number" + ], + "default": 60 + }, + "left": { + "type": [ + "string", + "number" + ], + "default": "10%" + }, + "right": { + "type": [ + "string", + "number" + ], + "default": "10%" + }, + "width": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "height": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "containLabel": { + "type": "boolean", + "description": "grid 区域是否包含坐标轴的刻度标签。containLabel 为 false 的时候：grid.left grid.right grid.top grid.bottom grid.width grid.height 决定的是由坐标轴形成的矩形的尺寸和位置。这比较适用于多个 grid 进行对齐的场景，因为往往多个 grid 对齐的时候，是依据坐标轴来对齐的。containLabel 为 true 的时候：grid.left grid.right grid.top grid.bottom grid.width grid.height 决定的是包括了坐标轴标签在内的所有内容所形成的矩形的位置。这常用于『防止标签溢出』的场景，标签溢出指的是，标签长度动态变化时，可能会溢出容器或者覆盖其他组件", + "default": false + }, + "backgroundColor": { + "type": "string", + "default": "rgba(1,51,100,0.05)" + }, + "borderColor": { + "type": "string", + "default": "#FFFFFF" + }, + "borderWidth": { + "type": "number", + "default": 0 + }, + "tooltip": { + "type": "object", + "properties": { + "show": { + "type": "boolean" + }, + "padding": { + "type": "number" + }, + "trigger": { + "type": "string", + "enum": [ + "item", + "axis", + "none" + ] + }, + "formatter": { + "type": "object" + }, + "valueFormater": { + "type": "object" + }, + "textStyle": { + "type": "object", + "properties": { + "color": { + "type": "string" + }, + "fontStyle": { + "type": "string", + "enum": [ + "normal", + "italic", + "oblique" + ] + }, + "fontWeight": { + "type": [ + "string", + "number" + ], + "enum": [ + "normal", + "bold", + "bolder", + "lighter" + ] + }, + "fontFamily": { + "type": "string", + "enum": [ + "serif", + "monospace", + "Arial", + "Courier New" + ] + }, + "lineHeight": { + "type": "number" + } + } + }, + "axisPointer": { + "type": "object", + "properties": { + "type": { + "type": "string", + "enum": [ + "line", + "shadow", + "none", + "cross" + ], + "description": "指示器类型。" + }, + "axis": { + "type": "string", + "enum": [ + "x", + "y", + "radius", + "angle" + ], + "description": "指示器的坐标轴。默认情况，坐标系会自动选择显示哪个轴的 axisPointer（默认取类目轴或者时间轴）" + }, + "label": { + "type": "object", + "properties": { + "show": { + "type": "boolean", + "description": "是否显示文本标签。" + }, + "precision": { + "type": [ + "number", + "string" + ], + "description": "文本标签中数值的小数点精度。默认根据当前轴的值自动判断。也可以指定如 2 表示保留两位小数" + }, + "margin": { + "type": "number", + "description": "label 距离轴的距离" + }, + "color": { + "type": "string", + "description": "文字的颜色" + }, + "fontStyle": { + "type": "string", + "enum": [ + "normal", + "italic", + "oblique" + ], + "description": "文字字体的风格" + }, + "fontWeight": { + "type": [ + "number", + "string" + ], + "description": "文字字体的粗细. normal bold bolder lighter, 100|200|300|400" + }, + "fontFamily": { + "type": "string", + "description": "文字的字体系列. 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ..." + }, + "fontSize": { + "type": "number" + }, + "lineHeight": { + "type": "number" + }, + "width": { + "type": "number" + }, + "height": { + "type": "number" + }, + "overflow": { + "type": "string", + "enum": [ + "none", + "truncate", + "break", + "breakAll" + ], + "description": "文字超出宽度是否截断或者换行。配置width时有效" + }, + "padding": { + "type": "array" + }, + "backgroundColor": { + "type": "string" + }, + "borderColor": { + "type": "string" + }, + "borderWidth": { + "type": "number" + } + } + }, + "lineStyle": { + "type": "object", + "properties": { + "color": { + "type": "string" + }, + "width": { + "type": "number" + }, + "type": { + "type": [ + "string", + "array" + ], + "description": "线的类型" + }, + "cap": { + "type": "string", + "enum": [ + "butt", + "round", + "square" + ], + "description": "用于指定线段的绘制方式" + }, + "join": { + "type": "string", + "enum": [ + "bevel", + "round", + "miter" + ], + "description": "用于设置2个长度不为0的相连部分（线段，圆弧，曲线）如何连接在一起的属性" + } + } + } + } + } + } + } + } + }, + "appearance": { + "description": "", + "type": "object", + "properties": { + "class": { + "type": "string" + }, + "style": { + "type": "string" + } + }, + "default": {} + }, + "xAxis": { + "type": "object", + "properties": { + "type": { + "type": "string", + "default": "category" + }, + "data": { + "type": "array", + "default": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"] + } + } + }, + "yAxis": { + "type": "object", + "properties": { + "type": { + "type": "string", + "default": "value" + } + } + }, + "series": { + "type": "array", + "properties": { + "type": { + "type": "string", + "default": "line" + }, + "id": { + "type": "string", + "default": "" + }, + "name": { + "type": "string", + "default": "" + }, + "xAxisIndex": { + "type": "number", + "default": 0 + }, + "yAxisIndex": { + "type": "number", + "default": 0 + }, + "clip": { + "type": "boolean", + "default": true + }, + "data": { + "type": "array", + "properties" : { + "name": { + "type": "string" + }, + "value": { + "type": "number" + } + }, + "default": [] + } + + }, + "default": [{"data": [120, 200, 150, 80, 70, 110, 130]}] + }, + "size": { + "type": "object", + "default": { + "width": 100, + "height": 300 + } + }, + "height":{ + "description": "div de height", + "type": "string", + "default": "300px" + }, + "width":{ + "description": "div de width", + "type": "string", + "default": "100%" + } + + }, + "required": [ + "id", + "type" + ] +} \ No newline at end of file diff --git a/packages/charts-vue/components/charts-line/src/schema/schema-mapper.ts b/packages/charts-vue/components/charts-line/src/schema/schema-mapper.ts new file mode 100644 index 00000000000..04d7b384ed9 --- /dev/null +++ b/packages/charts-vue/components/charts-line/src/schema/schema-mapper.ts @@ -0,0 +1,17 @@ +import { resolveAppearance, MapperFunction } from '@farris/charts-vue/components/dynamic-resolver'; + + +function createTemplatePropResolver(name: string): MapperFunction { + return (key: string, content: string) => { + if (!content) { + return {}; + } + const templateInfo = { name, content }; + + return { text: templateInfo }; + }; +} + +export const schemaMapper = new Map([ + ['appearance', resolveAppearance] +]); diff --git a/packages/charts-vue/components/charts-line/src/schema/schema-resolver.ts b/packages/charts-vue/components/charts-line/src/schema/schema-resolver.ts new file mode 100644 index 00000000000..6fb4684c3dd --- /dev/null +++ b/packages/charts-vue/components/charts-line/src/schema/schema-resolver.ts @@ -0,0 +1,5 @@ +import { DynamicResolver } from '@farris/charts-vue/components/dynamic-resolver'; + +export function schemaResolver(resolver: DynamicResolver, schema: Record, context: Record): Record { + return schema; +} diff --git a/packages/designer/src/components/composition/designer-context/use-mobile-designer-context.ts b/packages/designer/src/components/composition/designer-context/use-mobile-designer-context.ts index e6af180b982..79f2a01146a 100644 --- a/packages/designer/src/components/composition/designer-context/use-mobile-designer-context.ts +++ b/packages/designer/src/components/composition/designer-context/use-mobile-designer-context.ts @@ -10,7 +10,7 @@ import { import { useMobileControlCreator } from "../control-creator/use-mobile-control-creator"; import { PageComponent, UsePageSchema } from "../../../components/types"; import ControllCategories from '../schema-repository/controller/mobile-categories'; -import { FChartsBar } from '@farris/charts-vue/components'; +import { FChartsBar, FChartsLine } from '@farris/charts-vue/components'; export function useMobileDesignerContext(): UseDesignerContext { /** 设计器模式 */ @@ -25,7 +25,7 @@ export function useMobileDesignerContext(): UseDesignerContext { ContentContainer, Card, FloatContainer, Textarea, DatePicker, DateTimePicker, Lookup, Navbar, ListView, Picker, NumberInput, Switch, CheckboxGroup, RadioGroup, Form, FormItem, InputGroup, - Button, ButtonGroup, FChartsBar + Button, ButtonGroup, FChartsBar, FChartsLine ]; registerDesignerComponents(componentsToRegister); diff --git a/packages/designer/src/components/types/toolbox/mobile-toolbox.json b/packages/designer/src/components/types/toolbox/mobile-toolbox.json index a017f97b814..21b241626e0 100644 --- a/packages/designer/src/components/types/toolbox/mobile-toolbox.json +++ b/packages/designer/src/components/types/toolbox/mobile-toolbox.json @@ -6,9 +6,14 @@ { "id": "ChartsBar", "type": "charts-bar", - "name": "图表", - "category": "basic", - "icon": "button" + "name": "charts-bar", + "category": "charts" + }, + { + "id": "ChartsLine", + "type": "charts-line", + "name": "charts-line", + "category": "charts" } ] }, -- Gitee From 69a493339831ee5738e5b414947dd0717cb6a72d Mon Sep 17 00:00:00 2001 From: cy <15990550+langchaocy@user.noreply.gitee.com> Date: Sun, 6 Jul 2025 16:43:53 +0800 Subject: [PATCH 12/23] fix: xx --- .../src/property-config/charts-bar.property-config.ts | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/packages/charts-vue/components/charts-bar/src/property-config/charts-bar.property-config.ts b/packages/charts-vue/components/charts-bar/src/property-config/charts-bar.property-config.ts index 00f9d1eaf4b..403d7f0c262 100644 --- a/packages/charts-vue/components/charts-bar/src/property-config/charts-bar.property-config.ts +++ b/packages/charts-vue/components/charts-bar/src/property-config/charts-bar.property-config.ts @@ -1,27 +1,23 @@ -import { BaseControlProperty, ToolbarItemProperty } from "@farris/charts-vue/components/charts-common/src/props"; +import { BaseControlProperty } from "@farris/charts-vue/components/charts-common/src/props"; import { gridConverter, titleConverter, sizeConverter } from "@farris/charts-vue/components/dynamic-resolver/src/converter"; export class ChartsBarProperty extends BaseControlProperty { - private toolbarItemProperty: ToolbarItemProperty; - constructor(componentId: string, designerHostService: any) { super(componentId, designerHostService); - this.toolbarItemProperty = new ToolbarItemProperty(componentId, designerHostService); } public getPropertyConfig(propertyData: any) { this.propertyConfig.categories['basic'] = this.getBasicPropConfig(propertyData); + + this.propertyConfig.categories['behavior'] = this.getChartsBarBehaviorConfig(propertyData); this.propertyConfig.categories['appearance'] = this.getAppearanceConfig(propertyData); this.propertyConfig.categories['title'] = this.getChartsBarTitleConfig(propertyData); - this.propertyConfig.categories['behavior'] = this.getChartsBarBehaviorConfig(propertyData); - this.propertyConfig.categories['grid'] = this.getChartsBarGridConfig(propertyData); - return this.propertyConfig; } private getChartsBarTitleConfig(propertyData) { -- Gitee From f95028216a59a25c88b36883be08a88503af67f6 Mon Sep 17 00:00:00 2001 From: cy <15990550+langchaocy@user.noreply.gitee.com> Date: Mon, 7 Jul 2025 12:24:27 +0800 Subject: [PATCH 13/23] =?UTF-8?q?feature:=20=E4=B8=BAchart-bar=E5=9C=A8?= =?UTF-8?q?=E8=AE=BE=E8=AE=A1=E5=99=A8=E4=B8=AD=E6=96=B0=E5=A2=9E=E4=BA=86?= =?UTF-8?q?=E6=9B=B4=E5=A4=9A=E5=B1=9E=E6=80=A7=E7=9A=84=E9=85=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../charts-bar/src/charts-bar.component.tsx | 2 +- .../designer/charts-bar.design.component.tsx | 9 +- .../charts-bar.property-config.ts | 208 ++++++++++++++++-- .../src/schema/charts-bar.schema.json | 6 +- .../src/converter/cascade.converter.ts | 1 + .../types/toolbox/mobile-toolbox.json | 6 +- 6 files changed, 208 insertions(+), 24 deletions(-) diff --git a/packages/charts-vue/components/charts-bar/src/charts-bar.component.tsx b/packages/charts-vue/components/charts-bar/src/charts-bar.component.tsx index 75d7692b95f..98301c0d937 100644 --- a/packages/charts-vue/components/charts-bar/src/charts-bar.component.tsx +++ b/packages/charts-vue/components/charts-bar/src/charts-bar.component.tsx @@ -120,7 +120,7 @@ export default defineComponent({ return () => ( -
('design-item-context') as DesignerItemContext; const designerRulesComposition = useDesignerRules(designItemContext, designerHostService); const componentInstance = useDesignerComponent(elementRef, designItemContext, designerRulesComposition); - onMounted(() => { elementRef.value.componentInstance = componentInstance; }); context.expose(componentInstance.value); - const chartsBarProps = computed(() => ({ + const chartsBarProps1 = computed(() => ({ name: props.name, color: props.color, grid: props.grid, @@ -44,10 +43,14 @@ export default defineComponent({ return barseries; }), })); + watch(props, () => { + console.log(props) + }) + return () => { return ( - + ); }; } diff --git a/packages/charts-vue/components/charts-bar/src/property-config/charts-bar.property-config.ts b/packages/charts-vue/components/charts-bar/src/property-config/charts-bar.property-config.ts index 403d7f0c262..b0bacf7498c 100644 --- a/packages/charts-vue/components/charts-bar/src/property-config/charts-bar.property-config.ts +++ b/packages/charts-vue/components/charts-bar/src/property-config/charts-bar.property-config.ts @@ -1,5 +1,5 @@ import { BaseControlProperty } from "@farris/charts-vue/components/charts-common/src/props"; -import { gridConverter, titleConverter, sizeConverter } from "@farris/charts-vue/components/dynamic-resolver/src/converter"; +import { gridConverter, titleConverter, sizeConverter, legendConverter } from "@farris/charts-vue/components/dynamic-resolver/src/converter"; export class ChartsBarProperty extends BaseControlProperty { @@ -9,13 +9,14 @@ export class ChartsBarProperty extends BaseControlProperty { } public getPropertyConfig(propertyData: any) { this.propertyConfig.categories['basic'] = this.getBasicPropConfig(propertyData); + + this.propertyConfig.categories['title'] = this.getChartsBarTitleConfig(propertyData); + this.propertyConfig.categories['legend'] = this.getChartsBarLegendConfig(propertyData); this.propertyConfig.categories['behavior'] = this.getChartsBarBehaviorConfig(propertyData); this.propertyConfig.categories['appearance'] = this.getAppearanceConfig(propertyData); - this.propertyConfig.categories['title'] = this.getChartsBarTitleConfig(propertyData); - this.propertyConfig.categories['grid'] = this.getChartsBarGridConfig(propertyData); return this.propertyConfig; @@ -51,20 +52,6 @@ export class ChartsBarProperty extends BaseControlProperty { ] } }, - textStyle: { - title: "textStyle", - type: "cascade", - visible: propertyData.display === "flex", - isExpand: true, - properties: { - color: { - title: "color", - type: 'string', - }, - // 取不到属性套属性套属性 要写一个新的 generate Cascade Property Converter 生成级联属性转换器 吗？？？ - // 最多的有4层属性，目前这种方式只能取到2层属性。 - }, - }, subtext: { title: '副标题subtext', type: 'string', @@ -87,6 +74,47 @@ export class ChartsBarProperty extends BaseControlProperty { ] } }, + triggerEvent: { + title: 'triggerEvent', + type: 'boolean', + }, + padding: { + title: 'padding', + type: 'array', + }, + itemGap: { + title: 'itemGap', + type: 'number', + }, + top: { + title: 'top', + type: [ + "string", + "number" + ], + }, + bottom: { + title: 'bottom', + type: [ + "string", + "number" + ], + }, + left: { + title: 'left', + type: [ + "string", + "number" + ], + }, + right: { + title: 'right', + type: [ + "string", + "number" + ], + }, + } }; @@ -119,6 +147,152 @@ export class ChartsBarProperty extends BaseControlProperty { } }; } + private getChartsBarLegendConfig(propertyData) { + return{ + title: 'Legend', + $converter: legendConverter, + properties: { + show: { + title: 'show', + type: 'boolean', + }, + type: { + title: 'type', + type: 'string', + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'plain' , name: 'plain' }, + { value:'scroll' , name: 'scroll' }, + ] + } + }, + top: { + title: 'top', + type: [ + "string", + "number" + ], + }, + bottom: { + title: 'bottom', + type: [ + "string", + "number" + ], + }, + left: { + title: 'left', + type: [ + "string", + "number" + ], + }, + right: { + title: 'right', + type: [ + "string", + "number" + ], + }, + width: { + title: 'width', + type: [ + "string", + "number" + ], + }, + height: { + title: 'height', + type: [ + "string", + "number" + ], + }, + orient: { + title: 'orient', + type: 'string', + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'horizontal' , name: 'horizontal' }, + { value:'vertical' , name: 'vertical' }, + ] + } + }, + align: { + title: 'align', + type: 'string', + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'left' , name: 'left' }, + { value:'right' , name: 'right' }, + + ] + } + }, + padding: { + title: 'padding', + type: 'number', + }, + itemGap: { + title: 'itemGap', + type: 'number', + }, + itemWidth: { + title: 'itemWidth', + type: 'number', + }, + itemHeight: { + title: 'itemHeight', + type: 'number', + }, + tooltip: { + title: 'tooltip', + type: 'boolean', + }, + icon: { + title: 'icon', + type: 'string', + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'circle' , name: 'circle' }, + { value:'rect' , name: 'rect' }, + { value:'roundRect' , name: 'roundRect' }, + { value:'triangle' , name: 'triangle' }, + { value:'diamond' , name: 'diamond' }, + { value:'pin' , name: 'pin' }, + { value:'arrow' , name: 'arrow' }, + { value:'none' , name: 'none' }, + + ] + } + }, + borderRadius: { + title: 'borderRadius', + type: [ + "string", + "number" + ], + } + } + }; + } private getChartsBarBehaviorConfig(propertyData) { return { diff --git a/packages/charts-vue/components/charts-bar/src/schema/charts-bar.schema.json b/packages/charts-vue/components/charts-bar/src/schema/charts-bar.schema.json index 925dd00511c..d47cd49e802 100644 --- a/packages/charts-vue/components/charts-bar/src/schema/charts-bar.schema.json +++ b/packages/charts-vue/components/charts-bar/src/schema/charts-bar.schema.json @@ -883,7 +883,11 @@ } }, - "default": [{"data": [120, 200, 150, 80, 70, 110, 130]}] + "default": [ + {"name": "第一个", "data": [120, 200, 150, 80, 70, 110, 130]}, + {"name": "第二个", "data": [220, 100, 350, 180, 170, 10, 70]} + + ] }, "size": { "type": "object", diff --git a/packages/charts-vue/components/dynamic-resolver/src/converter/cascade.converter.ts b/packages/charts-vue/components/dynamic-resolver/src/converter/cascade.converter.ts index 06249498a45..fde58a16282 100644 --- a/packages/charts-vue/components/dynamic-resolver/src/converter/cascade.converter.ts +++ b/packages/charts-vue/components/dynamic-resolver/src/converter/cascade.converter.ts @@ -27,5 +27,6 @@ export const swipeToolbarConverter = generateCascadePropertyConverter('swipeTool export const rightToolbarConverter = generateCascadePropertyConverter('rightToolbar', { items: [] }); export const gridConverter = generateCascadePropertyConverter('grid', { items: [] }); export const titleConverter = generateCascadePropertyConverter('title', { items: [] }); +export const legendConverter = generateCascadePropertyConverter('legend', { items: [] }); diff --git a/packages/designer/src/components/types/toolbox/mobile-toolbox.json b/packages/designer/src/components/types/toolbox/mobile-toolbox.json index 83d573df172..fdcd850262a 100644 --- a/packages/designer/src/components/types/toolbox/mobile-toolbox.json +++ b/packages/designer/src/components/types/toolbox/mobile-toolbox.json @@ -7,13 +7,15 @@ "id": "ChartsBar", "type": "charts-bar", "name": "charts-bar", - "category": "charts" + "category": "charts", + "icon": "charts" }, { "id": "ChartsLine", "type": "charts-line", "name": "charts-line", - "category": "charts" + "category": "charts", + "icon": "charts" } ] }, -- Gitee From 8905be9d4fc7d306f37c27c19dd1bd2519182a4a Mon Sep 17 00:00:00 2001 From: cy <15990550+langchaocy@user.noreply.gitee.com> Date: Mon, 7 Jul 2025 17:03:44 +0800 Subject: [PATCH 14/23] =?UTF-8?q?feature:=20=E5=AE=8C=E6=88=90=E4=BA=86cha?= =?UTF-8?q?rts-bar=E7=BB=84=E4=BB=B6=E7=9A=84=E6=8B=96=E8=BD=AC=E6=B7=BB?= =?UTF-8?q?=E5=8A=A0=E4=BB=A5=E5=8F=8A=E5=B1=9E=E6=80=A7=E9=85=8D=E7=BD=AE?= =?UTF-8?q?=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../designer/charts-bar.design.component.tsx | 4 +- .../charts-bar.property-config.ts | 366 +++++++++++++----- .../src/schema/charts-bar.schema.json | 69 ---- .../src/converter/cascade.converter.ts | 3 + 4 files changed, 274 insertions(+), 168 deletions(-) diff --git a/packages/charts-vue/components/charts-bar/src/designer/charts-bar.design.component.tsx b/packages/charts-vue/components/charts-bar/src/designer/charts-bar.design.component.tsx index 2047e1a03b4..b4a9a02bcd5 100644 --- a/packages/charts-vue/components/charts-bar/src/designer/charts-bar.design.component.tsx +++ b/packages/charts-vue/components/charts-bar/src/designer/charts-bar.design.component.tsx @@ -31,6 +31,7 @@ export default defineComponent({ width: props.width, title: props.title, xAxis: props.xAxis, + yAxis: props.yAxis, tooltip: props.tooltip, legend: props.legend, toolbox: props.toolbox, @@ -43,9 +44,6 @@ export default defineComponent({ return barseries; }), })); - watch(props, () => { - console.log(props) - }) return () => { diff --git a/packages/charts-vue/components/charts-bar/src/property-config/charts-bar.property-config.ts b/packages/charts-vue/components/charts-bar/src/property-config/charts-bar.property-config.ts index b0bacf7498c..6fdb064065c 100644 --- a/packages/charts-vue/components/charts-bar/src/property-config/charts-bar.property-config.ts +++ b/packages/charts-vue/components/charts-bar/src/property-config/charts-bar.property-config.ts @@ -1,5 +1,6 @@ import { BaseControlProperty } from "@farris/charts-vue/components/charts-common/src/props"; -import { gridConverter, titleConverter, sizeConverter, legendConverter } from "@farris/charts-vue/components/dynamic-resolver/src/converter"; +import { gridConverter, titleConverter, sizeConverter, legendConverter, xAxisConverter, yAxisConverter, seriesConverter } from "@farris/charts-vue/components/dynamic-resolver/src/converter"; +import { values } from "lodash"; export class ChartsBarProperty extends BaseControlProperty { @@ -9,14 +10,19 @@ export class ChartsBarProperty extends BaseControlProperty { } public getPropertyConfig(propertyData: any) { this.propertyConfig.categories['basic'] = this.getBasicPropConfig(propertyData); - - this.propertyConfig.categories['title'] = this.getChartsBarTitleConfig(propertyData); - this.propertyConfig.categories['legend'] = this.getChartsBarLegendConfig(propertyData); + this.propertyConfig.categories['appearance'] = this.getAppearanceConfig(propertyData); + this.propertyConfig.categories['behavior'] = this.getChartsBarBehaviorConfig(propertyData); - this.propertyConfig.categories['appearance'] = this.getAppearanceConfig(propertyData); + this.propertyConfig.categories['xAxis'] = this.getChartsBarXAxisConfig(propertyData); + + this.propertyConfig.categories['yAxis'] = this.getChartsBarYAxisConfig(propertyData); + this.propertyConfig.categories['title'] = this.getChartsBarTitleConfig(propertyData); + + this.propertyConfig.categories['legend'] = this.getChartsBarLegendConfig(propertyData); + this.propertyConfig.categories['grid'] = this.getChartsBarGridConfig(propertyData); return this.propertyConfig; @@ -27,15 +33,14 @@ export class ChartsBarProperty extends BaseControlProperty { $converter: titleConverter, properties: { show: { - title: '标题展示show', + title: '标题是否展示', type: 'boolean', }, text: { - title: '标题text', - type: 'string', + title: '标题', }, link: { - title: '标题超链接link', + title: '标题链接', type: 'string', }, target: { @@ -47,17 +52,17 @@ export class ChartsBarProperty extends BaseControlProperty { valueField: 'value', editable: false, data: [ - { value:'self' , name: '超链接当前窗口打开' }, - { value:'blank' , name: '超链接新窗口打开' }, + { value:'self' , name: '当前窗口打开' }, + { value:'blank' , name: '新窗口打开' }, ] } }, subtext: { - title: '副标题subtext', + title: '副标题', type: 'string', }, sublink: { - title: '副标题超链接link', + title: 'sublink', type: 'string', }, subtarget: { @@ -69,21 +74,13 @@ export class ChartsBarProperty extends BaseControlProperty { valueField: 'value', editable: false, data: [ - { value:'self' , name: '超链接当前窗口打开' }, - { value:'blank' , name: '超链接新窗口打开' }, + { value:'self' , name: '当前窗口打开' }, + { value:'blank' , name: '新窗口打开' }, ] } }, - triggerEvent: { - title: 'triggerEvent', - type: 'boolean', - }, - padding: { - title: 'padding', - type: 'array', - }, itemGap: { - title: 'itemGap', + title: '主副标题之间的间距', type: 'number', }, top: { @@ -91,62 +88,152 @@ export class ChartsBarProperty extends BaseControlProperty { type: [ "string", "number" - ], + ], + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'top' , name: 'top' }, + { value:'middle' , name: 'middle' }, + { value:'bottom' , name: 'bottom' }, + + ] + } }, bottom: { title: 'bottom', type: [ "string", "number" - ], + ], + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'top' , name: 'top' }, + { value:'middle' , name: 'middle' }, + { value:'bottom' , name: 'bottom' }, + + ] + } }, left: { title: 'left', type: [ "string", "number" - ], + ], + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'left' , name: 'left' }, + { value:'center' , name: 'center' }, + { value:'right' , name: 'right' }, + + ] + } }, right: { title: 'right', type: [ "string", "number" - ], + ], + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'left' , name: 'left' }, + { value:'center' , name: 'center' }, + { value:'right' , name: 'right' }, + + ] + } + }, + triggerEvent: { + title: '是否触发事件triggerEvent', + type: 'boolean', }, - } }; } + private getChartsBarGridConfig(propertyData) { return{ title: 'Grid', $converter: gridConverter, properties: { + show: { + title: 'show', + type: 'boolean', + }, + zlevel: { + title: 'zlevel', + type: 'number', + }, + z: { + title: 'z', + type: 'number', + }, + top: { + title: 'top', + type: ['number',"string"] + }, + bottom: { + title: 'bottom', + type: ['number',"string"] + }, + left: { + title: 'left', + type: ['number',"string"] + }, + right: { + title: 'right', + type: ['number',"string"] + }, + width: { + title: 'width', + type: ['number',"string"] + }, height: { title: 'height', - type: 'string', - // editor: { - // type: "collection-property-editor", - // textField: 'text', - // modalTitle: '右侧工具栏编辑器', - // onSelectionChange: ({ selectedData, propertyConfig }) => { - // propertyConfig.value = this.toolbarItemProperty.getPropertyConfig(selectedData.value, { - // showAppearance: true, - // }); - // }, - // defaultComponentSchema: { - // id: 'button', - // text: '按钮', - // visible: true, - // disabled: false - // } - // } + type: ['number',"string"] + }, + containLabel: { + title: 'containLabel', + type: 'boolean', + }, + backgroundColor: { + title: 'backgroundColor', + type: 'string', + }, + borderColor: { + title: 'borderColor', + type: 'string', + }, + borderWidth: { + title: 'borderWidth', + type: 'number', } + } }; } + private getChartsBarLegendConfig(propertyData) { return{ title: 'Legend', @@ -175,28 +262,80 @@ export class ChartsBarProperty extends BaseControlProperty { type: [ "string", "number" - ], + ], + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'top' , name: 'top' }, + { value:'middle' , name: 'middle' }, + { value:'bottom' , name: 'bottom' }, + + ] + } }, bottom: { title: 'bottom', type: [ "string", "number" - ], + ], + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'top' , name: 'top' }, + { value:'middle' , name: 'middle' }, + { value:'bottom' , name: 'bottom' }, + + ] + } }, left: { title: 'left', type: [ "string", "number" - ], + ], + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'left' , name: 'left' }, + { value:'center' , name: 'center' }, + { value:'right' , name: 'right' }, + + ] + } }, right: { title: 'right', type: [ "string", "number" - ], + ], + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'left' , name: 'left' }, + { value:'center' , name: 'center' }, + { value:'right' , name: 'right' }, + + ] + } }, width: { title: 'width', @@ -282,14 +421,67 @@ export class ChartsBarProperty extends BaseControlProperty { ] } - }, - borderRadius: { - title: 'borderRadius', - type: [ - "string", - "number" - ], - } + }, + } + }; + } + + private getChartsBarXAxisConfig(propertyData) { + return{ + title: 'XAxis', + $converter: xAxisConverter, + properties: { + // data: { + // title: "data", + // type: "array", + // editor: { + // type: 'item-collection-editor', + // columns: [{field: 'value', title: 'value', dataType: 'string' }] + // } + // }, + type: { + title: 'type', + type: "string", + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'value' , name: 'value' }, + { value:'category' , name: 'category' }, + { value:'time' , name: 'time' }, + { value:'log' , name: 'log' }, + ] + } + }, + + } + }; + } + + private getChartsBarYAxisConfig(propertyData) { + return{ + title: 'YAxis', + $converter: yAxisConverter, + properties: { + type: { + title: 'type', + type: "string", + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'value' , name: 'value' }, + { value:'category' , name: 'category' }, + { value:'time' , name: 'time' }, + { value:'log' , name: 'log' }, + ] + } + }, + } }; } @@ -299,14 +491,6 @@ export class ChartsBarProperty extends BaseControlProperty { description: "基本信息", title: "行为", properties: { - // height:{ - // title: "height", - // type: 'string', - // }, - // width:{ - // title: "width", - // type: 'string', - // }, size: { title: "尺寸", type: "cascade", @@ -341,36 +525,26 @@ export class ChartsBarProperty extends BaseControlProperty { title: "name", type: 'string', }, - xAxis: { - title: "xAxis", - type: 'string', - }, - yAxis: { - title: "yAxis", - type: 'string', - }, - color: { - title: "color", - type: 'string', - }, - - legend: { - title: "legend", - type: 'string', - }, - title: { - title: "title", - type: 'string', - }, - textStyle: { - title: "textStyle", - type: 'string', - } - , - series: { - title: "series", - type: 'array', - } + // series: { + // title: 'series', + // type: "array", + // editor: { + // type: 'item-collection-editor', + // columns: [ + // {field: 'name', title: 'name', dataType: 'string'}, + // {field: 'xAxisIndex', title: 'xAxisIndex', dataType: 'number'}, + // {field: 'yAxisIndex', title: 'yAxisIndex', dataType: 'number'}, + // {field: 'clip', title: 'clip', dataType: 'boolean'}, + // {field: 'data', title: 'data', dataType: 'array', + // editor: { + // type: 'item-collection-editor', + // columns: [{field: 'value', title: 'value', dataType: 'number' }] + // } + // }, + // ], + // }, + // }, + } }; diff --git a/packages/charts-vue/components/charts-bar/src/schema/charts-bar.schema.json b/packages/charts-vue/components/charts-bar/src/schema/charts-bar.schema.json index d47cd49e802..6386834107d 100644 --- a/packages/charts-vue/components/charts-bar/src/schema/charts-bar.schema.json +++ b/packages/charts-vue/components/charts-bar/src/schema/charts-bar.schema.json @@ -380,17 +380,6 @@ "type": "number", "default": 12 }, - "itemStyle": { - "type": "object", - "properties": { - "color": { - "type": "array", - "items": { - "type": "string" - } - } - } - }, "lineStyle": { "type": "object", "properties": { @@ -462,64 +451,6 @@ "icon": { "type": "string", "default": "" - }, - "data": { - "type": "object", - "properties": { - "name": { - "type": "string" - }, - "icon": { - "type": "string" - }, - "textStyle": { - "type": "object", - "properties": { - "color": { - "type": "string" - }, - "fontStyle": { - "type": "string", - "enum": [ - "normal", - "italic", - "oblique" - ] - }, - "fontWeight": { - "type": [ - "string", - "number" - ], - "enum": [ - "normal", - "bold", - "bolder", - "lighter" - ] - }, - "fontFamily": { - "type": "string", - "enum": [ - "serif", - "monospace", - "Arial", - "Courier New" - ] - }, - "lineHeight": { - "type": "number" - } - } - } - } - }, - "borderRadius": { - "type": [ - "number", - "array" - ], - "default": 0 } } }, diff --git a/packages/charts-vue/components/dynamic-resolver/src/converter/cascade.converter.ts b/packages/charts-vue/components/dynamic-resolver/src/converter/cascade.converter.ts index fde58a16282..9fba731e96d 100644 --- a/packages/charts-vue/components/dynamic-resolver/src/converter/cascade.converter.ts +++ b/packages/charts-vue/components/dynamic-resolver/src/converter/cascade.converter.ts @@ -28,5 +28,8 @@ export const rightToolbarConverter = generateCascadePropertyConverter('rightTool export const gridConverter = generateCascadePropertyConverter('grid', { items: [] }); export const titleConverter = generateCascadePropertyConverter('title', { items: [] }); export const legendConverter = generateCascadePropertyConverter('legend', { items: [] }); +export const xAxisConverter = generateCascadePropertyConverter('xAxis', { items: [] }); +export const yAxisConverter = generateCascadePropertyConverter('yAxis', { items: [] }); + -- Gitee From 2c4a777e1a4ab8b2171d40255b4dc8ae14d3be5b Mon Sep 17 00:00:00 2001 From: cy <15990550+langchaocy@user.noreply.gitee.com> Date: Mon, 7 Jul 2025 17:12:43 +0800 Subject: [PATCH 15/23] =?UTF-8?q?feature:=20=E5=AE=8C=E6=88=90=E4=BA=86cha?= =?UTF-8?q?rts-line=E7=9A=84=E6=8B=96=E6=8B=BD=E6=B7=BB=E5=8A=A0=E5=92=8C?= =?UTF-8?q?=E5=B1=9E=E6=80=A7=E9=85=8D=E7=BD=AE=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../designer/charts-line.design.component.tsx | 8 +- .../charts-line.property-config.ts | 516 +++++++++++++++--- .../src/schema/charts-line.schema.json | 75 +-- .../src/converter/cascade.converter.ts | 5 +- 4 files changed, 442 insertions(+), 162 deletions(-) diff --git a/packages/charts-vue/components/charts-line/src/designer/charts-line.design.component.tsx b/packages/charts-vue/components/charts-line/src/designer/charts-line.design.component.tsx index 10732b637a1..e05c0c89343 100644 --- a/packages/charts-vue/components/charts-line/src/designer/charts-line.design.component.tsx +++ b/packages/charts-vue/components/charts-line/src/designer/charts-line.design.component.tsx @@ -16,14 +16,14 @@ export default defineComponent({ const designItemContext = inject('design-item-context') as DesignerItemContext; const designerRulesComposition = useDesignerRules(designItemContext, designerHostService); const componentInstance = useDesignerComponent(elementRef, designItemContext, designerRulesComposition); - onMounted(() => { elementRef.value.componentInstance = componentInstance; }); context.expose(componentInstance.value); - const chartsLineProps = computed(() => ({ + const chartsLineProps1 = computed(() => ({ + name: props.name, color: props.color, grid: props.grid, height: props.height, @@ -31,6 +31,7 @@ export default defineComponent({ width: props.width, title: props.title, xAxis: props.xAxis, + yAxis: props.yAxis, tooltip: props.tooltip, legend: props.legend, toolbox: props.toolbox, @@ -44,9 +45,10 @@ export default defineComponent({ }), })); + return () => { return ( - + ); }; } diff --git a/packages/charts-vue/components/charts-line/src/property-config/charts-line.property-config.ts b/packages/charts-vue/components/charts-line/src/property-config/charts-line.property-config.ts index c1237cd26a3..b4989c7820e 100644 --- a/packages/charts-vue/components/charts-line/src/property-config/charts-line.property-config.ts +++ b/packages/charts-vue/components/charts-line/src/property-config/charts-line.property-config.ts @@ -1,24 +1,29 @@ import { BaseControlProperty } from "@farris/charts-vue/components/charts-common/src/props"; -import { gridConverter, titleConverter, sizeConverter } from "@farris/charts-vue/components/dynamic-resolver/src/converter"; +import { gridConverter, titleConverter, sizeConverter, legendConverter, xAxisConverter, yAxisConverter, seriesConverter } from "@farris/charts-vue/components/dynamic-resolver/src/converter"; +import { values } from "lodash"; export class ChartsLineProperty extends BaseControlProperty { - constructor(componentId: string, designerHostService: any) { super(componentId, designerHostService); } public getPropertyConfig(propertyData: any) { this.propertyConfig.categories['basic'] = this.getBasicPropConfig(propertyData); - + this.propertyConfig.categories['appearance'] = this.getAppearanceConfig(propertyData); - this.propertyConfig.categories['title'] = this.getChartsLineTitleConfig(propertyData); - this.propertyConfig.categories['behavior'] = this.getChartsLineBehaviorConfig(propertyData); - this.propertyConfig.categories['grid'] = this.getChartsLineGridConfig(propertyData); + this.propertyConfig.categories['xAxis'] = this.getChartsLineXAxisConfig(propertyData); + + this.propertyConfig.categories['yAxis'] = this.getChartsLineYAxisConfig(propertyData); + this.propertyConfig.categories['title'] = this.getChartsLineTitleConfig(propertyData); + + this.propertyConfig.categories['legend'] = this.getChartsLineLegendConfig(propertyData); + + this.propertyConfig.categories['grid'] = this.getChartsLineGridConfig(propertyData); return this.propertyConfig; } @@ -28,15 +33,14 @@ export class ChartsLineProperty extends BaseControlProperty { $converter: titleConverter, properties: { show: { - title: '标题展示show', + title: '标题是否展示', type: 'boolean', }, text: { - title: '标题text', - type: 'string', + title: '标题', }, link: { - title: '标题超链接link', + title: '标题链接', type: 'string', }, target: { @@ -48,31 +52,17 @@ export class ChartsLineProperty extends BaseControlProperty { valueField: 'value', editable: false, data: [ - { value:'self' , name: '超链接当前窗口打开' }, - { value:'blank' , name: '超链接新窗口打开' }, + { value:'self' , name: '当前窗口打开' }, + { value:'blank' , name: '新窗口打开' }, ] } }, - textStyle: { - title: "textStyle", - type: "cascade", - visible: propertyData.display === "flex", - isExpand: true, - properties: { - color: { - title: "color", - type: 'string', - }, - // 取不到属性套属性套属性 要写一个新的 generate Cascade Property Converter 生成级联属性转换器 吗？？？ - // 最多的有4层属性，目前这种方式只能取到2层属性。 - }, - }, subtext: { - title: '副标题subtext', + title: '副标题', type: 'string', }, sublink: { - title: '副标题超链接link', + title: 'sublink', type: 'string', }, subtarget: { @@ -84,57 +74,423 @@ export class ChartsLineProperty extends BaseControlProperty { valueField: 'value', editable: false, data: [ - { value:'self' , name: '超链接当前窗口打开' }, - { value:'blank' , name: '超链接新窗口打开' }, + { value:'self' , name: '当前窗口打开' }, + { value:'blank' , name: '新窗口打开' }, ] } }, + itemGap: { + title: '主副标题之间的间距', + type: 'number', + }, + top: { + title: 'top', + type: [ + "string", + "number" + ], + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'top' , name: 'top' }, + { value:'middle' , name: 'middle' }, + { value:'bottom' , name: 'bottom' }, + + ] + } + }, + bottom: { + title: 'bottom', + type: [ + "string", + "number" + ], + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'top' , name: 'top' }, + { value:'middle' , name: 'middle' }, + { value:'bottom' , name: 'bottom' }, + + ] + } + }, + left: { + title: 'left', + type: [ + "string", + "number" + ], + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'left' , name: 'left' }, + { value:'center' , name: 'center' }, + { value:'right' , name: 'right' }, + + ] + } + }, + right: { + title: 'right', + type: [ + "string", + "number" + ], + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'left' , name: 'left' }, + { value:'center' , name: 'center' }, + { value:'right' , name: 'right' }, + + ] + } + }, + triggerEvent: { + title: '是否触发事件triggerEvent', + type: 'boolean', + }, } }; } + private getChartsLineGridConfig(propertyData) { return{ title: 'Grid', $converter: gridConverter, properties: { + show: { + title: 'show', + type: 'boolean', + }, + zlevel: { + title: 'zlevel', + type: 'number', + }, + z: { + title: 'z', + type: 'number', + }, + top: { + title: 'top', + type: ['number',"string"] + }, + bottom: { + title: 'bottom', + type: ['number',"string"] + }, + left: { + title: 'left', + type: ['number',"string"] + }, + right: { + title: 'right', + type: ['number',"string"] + }, + width: { + title: 'width', + type: ['number',"string"] + }, height: { title: 'height', - type: 'string', - // editor: { - // type: "collection-property-editor", - // textField: 'text', - // modalTitle: '右侧工具栏编辑器', - // onSelectionChange: ({ selectedData, propertyConfig }) => { - // propertyConfig.value = this.toollineItemProperty.getPropertyConfig(selectedData.value, { - // showAppearance: true, - // }); - // }, - // defaultComponentSchema: { - // id: 'button', - // text: '按钮', - // visible: true, - // disabled: false - // } - // } + type: ['number',"string"] + }, + containLabel: { + title: 'containLabel', + type: 'boolean', + }, + backgroundColor: { + title: 'backgroundColor', + type: 'string', + }, + borderColor: { + title: 'borderColor', + type: 'string', + }, + borderWidth: { + title: 'borderWidth', + type: 'number', } + } }; } + private getChartsLineLegendConfig(propertyData) { + return{ + title: 'Legend', + $converter: legendConverter, + properties: { + show: { + title: 'show', + type: 'boolean', + }, + type: { + title: 'type', + type: 'string', + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'plain' , name: 'plain' }, + { value:'scroll' , name: 'scroll' }, + ] + } + }, + top: { + title: 'top', + type: [ + "string", + "number" + ], + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'top' , name: 'top' }, + { value:'middle' , name: 'middle' }, + { value:'bottom' , name: 'bottom' }, + + ] + } + }, + bottom: { + title: 'bottom', + type: [ + "string", + "number" + ], + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'top' , name: 'top' }, + { value:'middle' , name: 'middle' }, + { value:'bottom' , name: 'bottom' }, + + ] + } + }, + left: { + title: 'left', + type: [ + "string", + "number" + ], + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'left' , name: 'left' }, + { value:'center' , name: 'center' }, + { value:'right' , name: 'right' }, + + ] + } + }, + right: { + title: 'right', + type: [ + "string", + "number" + ], + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'left' , name: 'left' }, + { value:'center' , name: 'center' }, + { value:'right' , name: 'right' }, + + ] + } + }, + width: { + title: 'width', + type: [ + "string", + "number" + ], + }, + height: { + title: 'height', + type: [ + "string", + "number" + ], + }, + orient: { + title: 'orient', + type: 'string', + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'horizontal' , name: 'horizontal' }, + { value:'vertical' , name: 'vertical' }, + ] + } + }, + align: { + title: 'align', + type: 'string', + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'left' , name: 'left' }, + { value:'right' , name: 'right' }, + + ] + } + }, + padding: { + title: 'padding', + type: 'number', + }, + itemGap: { + title: 'itemGap', + type: 'number', + }, + itemWidth: { + title: 'itemWidth', + type: 'number', + }, + itemHeight: { + title: 'itemHeight', + type: 'number', + }, + tooltip: { + title: 'tooltip', + type: 'boolean', + }, + icon: { + title: 'icon', + type: 'string', + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'circle' , name: 'circle' }, + { value:'rect' , name: 'rect' }, + { value:'roundRect' , name: 'roundRect' }, + { value:'triangle' , name: 'triangle' }, + { value:'diamond' , name: 'diamond' }, + { value:'pin' , name: 'pin' }, + { value:'arrow' , name: 'arrow' }, + { value:'none' , name: 'none' }, + + ] + } + }, + } + }; + } + + private getChartsLineXAxisConfig(propertyData) { + return{ + title: 'XAxis', + $converter: xAxisConverter, + properties: { + // data: { + // title: "data", + // type: "array", + // editor: { + // type: 'item-collection-editor', + // columns: [{field: 'value', title: 'value', dataType: 'string' }] + // } + // }, + type: { + title: 'type', + type: "string", + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'value' , name: 'value' }, + { value:'category' , name: 'category' }, + { value:'time' , name: 'time' }, + { value:'log' , name: 'log' }, + ] + } + }, + + } + }; + } + + private getChartsLineYAxisConfig(propertyData) { + return{ + title: 'YAxis', + $converter: yAxisConverter, + properties: { + type: { + title: 'type', + type: "string", + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'value' , name: 'value' }, + { value:'category' , name: 'category' }, + { value:'time' , name: 'time' }, + { value:'log' , name: 'log' }, + ] + } + }, + + } + }; + } + private getChartsLineBehaviorConfig(propertyData) { return { description: "基本信息", title: "行为", properties: { - // height:{ - // title: "height", - // type: 'string', - // }, - // width:{ - // title: "width", - // type: 'string', - // }, size: { title: "尺寸", type: "cascade", @@ -169,36 +525,26 @@ export class ChartsLineProperty extends BaseControlProperty { title: "name", type: 'string', }, - xAxis: { - title: "xAxis", - type: 'string', - }, - yAxis: { - title: "yAxis", - type: 'string', - }, - color: { - title: "color", - type: 'string', - }, - - legend: { - title: "legend", - type: 'string', - }, - title: { - title: "title", - type: 'string', - }, - textStyle: { - title: "textStyle", - type: 'string', - } - , - series: { - title: "series", - type: 'array', - } + // series: { + // title: 'series', + // type: "array", + // editor: { + // type: 'item-collection-editor', + // columns: [ + // {field: 'name', title: 'name', dataType: 'string'}, + // {field: 'xAxisIndex', title: 'xAxisIndex', dataType: 'number'}, + // {field: 'yAxisIndex', title: 'yAxisIndex', dataType: 'number'}, + // {field: 'clip', title: 'clip', dataType: 'boolean'}, + // {field: 'data', title: 'data', dataType: 'array', + // editor: { + // type: 'item-collection-editor', + // columns: [{field: 'value', title: 'value', dataType: 'number' }] + // } + // }, + // ], + // }, + // }, + } }; diff --git a/packages/charts-vue/components/charts-line/src/schema/charts-line.schema.json b/packages/charts-vue/components/charts-line/src/schema/charts-line.schema.json index 7259933bbac..ac1e1e803e0 100644 --- a/packages/charts-vue/components/charts-line/src/schema/charts-line.schema.json +++ b/packages/charts-vue/components/charts-line/src/schema/charts-line.schema.json @@ -380,17 +380,6 @@ "type": "number", "default": 12 }, - "itemStyle": { - "type": "object", - "properties": { - "color": { - "type": "array", - "items": { - "type": "string" - } - } - } - }, "lineStyle": { "type": "object", "properties": { @@ -462,64 +451,6 @@ "icon": { "type": "string", "default": "" - }, - "data": { - "type": "object", - "properties": { - "name": { - "type": "string" - }, - "icon": { - "type": "string" - }, - "textStyle": { - "type": "object", - "properties": { - "color": { - "type": "string" - }, - "fontStyle": { - "type": "string", - "enum": [ - "normal", - "italic", - "oblique" - ] - }, - "fontWeight": { - "type": [ - "string", - "number" - ], - "enum": [ - "normal", - "bold", - "bolder", - "lighter" - ] - }, - "fontFamily": { - "type": "string", - "enum": [ - "serif", - "monospace", - "Arial", - "Courier New" - ] - }, - "lineHeight": { - "type": "number" - } - } - } - } - }, - "borderRadius": { - "type": [ - "number", - "array" - ], - "default": 0 } } }, @@ -883,7 +814,11 @@ } }, - "default": [{"data": [120, 200, 150, 80, 70, 110, 130]}] + "default": [ + {"name": "第一个", "data": [120, 200, 150, 80, 70, 110, 130]}, + {"name": "第二个", "data": [220, 100, 350, 180, 170, 10, 70]} + + ] }, "size": { "type": "object", diff --git a/packages/charts-vue/components/dynamic-resolver/src/converter/cascade.converter.ts b/packages/charts-vue/components/dynamic-resolver/src/converter/cascade.converter.ts index 9fba731e96d..dd01a44cb42 100644 --- a/packages/charts-vue/components/dynamic-resolver/src/converter/cascade.converter.ts +++ b/packages/charts-vue/components/dynamic-resolver/src/converter/cascade.converter.ts @@ -29,7 +29,4 @@ export const gridConverter = generateCascadePropertyConverter('grid', { items: [ export const titleConverter = generateCascadePropertyConverter('title', { items: [] }); export const legendConverter = generateCascadePropertyConverter('legend', { items: [] }); export const xAxisConverter = generateCascadePropertyConverter('xAxis', { items: [] }); -export const yAxisConverter = generateCascadePropertyConverter('yAxis', { items: [] }); - - - +export const yAxisConverter = generateCascadePropertyConverter('yAxis', { items: [] }); \ No newline at end of file -- Gitee From 79c131e946cd1c8546b4a14b3c9a2707d08f6e08 Mon Sep 17 00:00:00 2001 From: cy <15990550+langchaocy@user.noreply.gitee.com> Date: Mon, 7 Jul 2025 17:16:55 +0800 Subject: [PATCH 16/23] =?UTF-8?q?fix:=20=E5=88=A0=E9=99=A4=E5=B0=91?= =?UTF-8?q?=E9=83=A8=E5=88=86=E5=86=97=E4=BD=99=E8=B0=83=E8=AF=95=E4=BB=A3?= =?UTF-8?q?=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/property-config/charts-bar.property-config.ts | 3 +-- .../charts-line/src/designer/charts-line.design.component.tsx | 1 - .../src/property-config/charts-line.property-config.ts | 3 +-- 3 files changed, 2 insertions(+), 5 deletions(-) diff --git a/packages/charts-vue/components/charts-bar/src/property-config/charts-bar.property-config.ts b/packages/charts-vue/components/charts-bar/src/property-config/charts-bar.property-config.ts index 6fdb064065c..7786f8334af 100644 --- a/packages/charts-vue/components/charts-bar/src/property-config/charts-bar.property-config.ts +++ b/packages/charts-vue/components/charts-bar/src/property-config/charts-bar.property-config.ts @@ -1,6 +1,5 @@ import { BaseControlProperty } from "@farris/charts-vue/components/charts-common/src/props"; -import { gridConverter, titleConverter, sizeConverter, legendConverter, xAxisConverter, yAxisConverter, seriesConverter } from "@farris/charts-vue/components/dynamic-resolver/src/converter"; -import { values } from "lodash"; +import { gridConverter, titleConverter, sizeConverter, legendConverter, xAxisConverter, yAxisConverter } from "@farris/charts-vue/components/dynamic-resolver/src/converter"; export class ChartsBarProperty extends BaseControlProperty { diff --git a/packages/charts-vue/components/charts-line/src/designer/charts-line.design.component.tsx b/packages/charts-vue/components/charts-line/src/designer/charts-line.design.component.tsx index e05c0c89343..56f34f26299 100644 --- a/packages/charts-vue/components/charts-line/src/designer/charts-line.design.component.tsx +++ b/packages/charts-vue/components/charts-line/src/designer/charts-line.design.component.tsx @@ -23,7 +23,6 @@ export default defineComponent({ context.expose(componentInstance.value); const chartsLineProps1 = computed(() => ({ - name: props.name, color: props.color, grid: props.grid, height: props.height, diff --git a/packages/charts-vue/components/charts-line/src/property-config/charts-line.property-config.ts b/packages/charts-vue/components/charts-line/src/property-config/charts-line.property-config.ts index b4989c7820e..cb45f2cdb18 100644 --- a/packages/charts-vue/components/charts-line/src/property-config/charts-line.property-config.ts +++ b/packages/charts-vue/components/charts-line/src/property-config/charts-line.property-config.ts @@ -1,6 +1,5 @@ import { BaseControlProperty } from "@farris/charts-vue/components/charts-common/src/props"; -import { gridConverter, titleConverter, sizeConverter, legendConverter, xAxisConverter, yAxisConverter, seriesConverter } from "@farris/charts-vue/components/dynamic-resolver/src/converter"; -import { values } from "lodash"; +import { gridConverter, titleConverter, sizeConverter, legendConverter, xAxisConverter, yAxisConverter } from "@farris/charts-vue/components/dynamic-resolver/src/converter"; export class ChartsLineProperty extends BaseControlProperty { -- Gitee From c9ae319febd392c92b1d6b10af1495c7050b6209 Mon Sep 17 00:00:00 2001 From: cy <15990550+langchaocy@user.noreply.gitee.com> Date: Mon, 7 Jul 2025 20:40:38 +0800 Subject: [PATCH 17/23] =?UTF-8?q?feature:=20=E6=96=B0=E5=A2=9Echarts-pie?= =?UTF-8?q?=E4=BB=A5=E5=8F=8Acharts-combined=E7=9A=84=E6=8B=96=E6=8B=BD?= =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=8A=9F=E8=83=BD=E4=BB=A5=E5=8F=8A=E5=B1=9E?= =?UTF-8?q?=E6=80=A7=E9=9D=A2=E6=9D=BF=E9=85=8D=E7=BD=AE=E5=8A=9F=E8=83=BD?= =?UTF-8?q?=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/schema/charts-bar.schema.json | 3 +- .../components/charts-combined/index.ts | 18 +- .../src/charts-combined.component.tsx | 4 +- .../src/charts-combined.props.ts | 13 + .../charts-combined.design.component.tsx | 47 + .../src/designer/use-designer-rules.ts | 57 ++ .../charts-combined.property-config.ts | 552 ++++++++++++ .../src/schema/charts-combined.schema.json | 836 +++++++++++++++++ .../src/schema/schema-mapper.ts | 17 + .../src/schema/schema-resolver.ts | 5 + .../components/charts-line/index.ts | 10 +- .../charts-line/src/charts-line.props.ts | 1 + .../src/schema/charts-line.schema.json | 2 +- .../charts-vue/components/charts-pie/index.ts | 18 +- .../charts-pie/src/charts-pie.component.tsx | 5 +- .../charts-pie/src/charts-pie.props.ts | 16 + .../designer/charts-pie.design.component.tsx | 50 ++ .../src/designer/use-designer-rules.ts | 57 ++ .../charts-pie.property-config.ts | 488 ++++++++++ .../src/schema/charts-pie.schema.json | 845 ++++++++++++++++++ .../charts-pie/src/schema/schema-mapper.ts | 17 + .../charts-pie/src/schema/schema-resolver.ts | 5 + packages/charts-vue/components/index.ts | 4 + .../use-mobile-designer-context.ts | 6 +- .../types/toolbox/mobile-toolbox.json | 14 + 25 files changed, 3066 insertions(+), 24 deletions(-) create mode 100644 packages/charts-vue/components/charts-combined/src/designer/charts-combined.design.component.tsx create mode 100644 packages/charts-vue/components/charts-combined/src/designer/use-designer-rules.ts create mode 100644 packages/charts-vue/components/charts-combined/src/property-config/charts-combined.property-config.ts create mode 100644 packages/charts-vue/components/charts-combined/src/schema/charts-combined.schema.json create mode 100644 packages/charts-vue/components/charts-combined/src/schema/schema-mapper.ts create mode 100644 packages/charts-vue/components/charts-combined/src/schema/schema-resolver.ts create mode 100644 packages/charts-vue/components/charts-pie/src/designer/charts-pie.design.component.tsx create mode 100644 packages/charts-vue/components/charts-pie/src/designer/use-designer-rules.ts create mode 100644 packages/charts-vue/components/charts-pie/src/property-config/charts-pie.property-config.ts create mode 100644 packages/charts-vue/components/charts-pie/src/schema/charts-pie.schema.json create mode 100644 packages/charts-vue/components/charts-pie/src/schema/schema-mapper.ts create mode 100644 packages/charts-vue/components/charts-pie/src/schema/schema-resolver.ts diff --git a/packages/charts-vue/components/charts-bar/src/schema/charts-bar.schema.json b/packages/charts-vue/components/charts-bar/src/schema/charts-bar.schema.json index 6386834107d..f05d9894808 100644 --- a/packages/charts-vue/components/charts-bar/src/schema/charts-bar.schema.json +++ b/packages/charts-vue/components/charts-bar/src/schema/charts-bar.schema.json @@ -322,7 +322,7 @@ "string", "number" ], - "default": "auto" + "default": "center" }, "right": { "type": [ @@ -837,7 +837,6 @@ "type": "string", "default": "100%" } - }, "required": [ "id", diff --git a/packages/charts-vue/components/charts-combined/index.ts b/packages/charts-vue/components/charts-combined/index.ts index fc3958212fd..bb7b9eaf453 100644 --- a/packages/charts-vue/components/charts-combined/index.ts +++ b/packages/charts-vue/components/charts-combined/index.ts @@ -1,6 +1,16 @@ -import FCharstCombined from './src/charts-combined.component'; -import { withInstall } from '@farris/charts-vue/components/charts-common'; +import FChartsCombinedInstallless from './src/charts-combined.component'; +import { propsResolverGenerator } from './src/charts-combined.props'; +import { withInstall, withRegister, withRegisterDesigner } from '@farris/charts-vue/components/charts-common'; +import ChartsCombinedDesign from './src/designer/charts-combined.design.component'; export * from './src/charts-combined.props'; -export { FCharstCombined }; -export default withInstall(FCharstCombined); + +const CHARTS_COMBINED_REGISTERED_NAME = 'charts-combined'; + +const FChartsCombined = withInstall(FChartsCombinedInstallless) + +withRegister(FChartsCombined, {name: CHARTS_COMBINED_REGISTERED_NAME, propsResolverGenerator}) +withRegisterDesigner(FChartsCombined, { name: CHARTS_COMBINED_REGISTERED_NAME, propsResolverGenerator, designerComponent: ChartsCombinedDesign }); + +export { FChartsCombined }; +export default FChartsCombined diff --git a/packages/charts-vue/components/charts-combined/src/charts-combined.component.tsx b/packages/charts-vue/components/charts-combined/src/charts-combined.component.tsx index 6b87d1cb160..01cc5ab3b84 100644 --- a/packages/charts-vue/components/charts-combined/src/charts-combined.component.tsx +++ b/packages/charts-vue/components/charts-combined/src/charts-combined.component.tsx @@ -124,8 +124,8 @@ export default defineComponent({
); diff --git a/packages/charts-vue/components/charts-combined/src/charts-combined.props.ts b/packages/charts-vue/components/charts-combined/src/charts-combined.props.ts index b64e52819ad..97fd230ce24 100644 --- a/packages/charts-vue/components/charts-combined/src/charts-combined.props.ts +++ b/packages/charts-vue/components/charts-combined/src/charts-combined.props.ts @@ -7,6 +7,11 @@ import { CombinedType } from '@farris/charts-vue/components/charts-common'; +import { getPropsResolverGenerator } from '@farris/charts-vue/components/dynamic-resolver'; +import chartsCombinedSchema from './schema/charts-combined.schema.json'; +import { schemaMapper } from './schema/schema-mapper'; +import { schemaResolver } from './schema/schema-resolver'; + export const combinedSeriesProps = { type: { type: String as PropType }, @@ -132,7 +137,15 @@ export const chartsCombinedProps = { theme: { type: String, default: 'defaultTheme' }, + size: { type: Object }, + ...animationProps }; export type ChartsCombinedProps = ExtractPropTypes; +export const propsResolverGenerator = getPropsResolverGenerator( + chartsCombinedProps, + chartsCombinedSchema, + schemaMapper, + schemaResolver +); \ No newline at end of file diff --git a/packages/charts-vue/components/charts-combined/src/designer/charts-combined.design.component.tsx b/packages/charts-vue/components/charts-combined/src/designer/charts-combined.design.component.tsx new file mode 100644 index 00000000000..01c4ff93ea4 --- /dev/null +++ b/packages/charts-vue/components/charts-combined/src/designer/charts-combined.design.component.tsx @@ -0,0 +1,47 @@ +import { computed, defineComponent, inject, onMounted, ref, SetupContext, watch } from 'vue'; +import { DesignerHostService, DesignerItemContext } from '@farris/charts-vue/components/charts-common/src/types'; +import { useDesignerComponent } from '@farris/charts-vue/components/charts-common/src/compositions/use-designer-component'; + +import { ChartsCombinedProps, chartsCombinedProps } from '../charts-combined.props'; +import FChartsCombined from '../charts-combined.component'; +import { useDesignerRules } from './use-designer-rules'; + +export default defineComponent({ + name: 'FmChartsCombinedDesign', + props: chartsCombinedProps, + emits: ['click'], + setup(props: ChartsCombinedProps, context: SetupContext) { + const elementRef = ref(); + const designerHostService = inject('designer-host-service'); + const designItemContext = inject('design-item-context') as DesignerItemContext; + const designerRulesComposition = useDesignerRules(designItemContext, designerHostService); + const componentInstance = useDesignerComponent(elementRef, designItemContext, designerRulesComposition); + onMounted(() => { + elementRef.value.componentInstance = componentInstance; + }); + + context.expose(componentInstance.value); + + const chartsCombinedProps1 = computed(() => ({ + grid: props.grid, + size: props.size, + title: props.title, + xAxis: props.xAxis, + yAxis: props.yAxis, + tooltip: props.tooltip, + legend: props.legend, + toolbox: props.toolbox, + animation: props.animation, + animationDuration: props.animationDuration, + animationEasingUpdate: props.animationEasingUpdate, + series: props.series + })); + + + return () => { + return ( + + ); + }; + } +}); diff --git a/packages/charts-vue/components/charts-combined/src/designer/use-designer-rules.ts b/packages/charts-vue/components/charts-combined/src/designer/use-designer-rules.ts new file mode 100644 index 00000000000..104c09c99b3 --- /dev/null +++ b/packages/charts-vue/components/charts-combined/src/designer/use-designer-rules.ts @@ -0,0 +1,57 @@ +import { ref } from "vue"; +import { DraggingResolveContext } from "@farris/charts-vue/components/charts-common/src/types"; +import { DesignerHostService, DesignerItemContext, UseDesignerRules } from "@farris/charts-vue/components/charts-common/src/types"; +import { ChartsCombinedProperty } from "../property-config/charts-combined.property-config"; + +export function useDesignerRules(designItemContext: DesignerItemContext, designerHostService?: DesignerHostService): UseDesignerRules { + + const triggerBelongedComponentToMoveWhenMoved = ref(false); + + const triggerBelongedComponentToDeleteWhenDeleted = ref(false); + + function canAccepts(draggingContext: DraggingResolveContext): boolean { + + return false; + } + + + function checkCanMoveComponent() { + return true; + } + function checkCanDeleteComponent() { + return true; + } + + function hideNestedPaddingInDesginerView() { + return true; + } + + function getStyles(): string { + return ' '; + } + + function getDesignerClass(): string { + return ' '; + } + + /** + * 获取属性配置 + */ + function getPropsConfig(componentId: string) { + const componentProp = new ChartsCombinedProperty(componentId, designerHostService); + const { schema } = designItemContext; + return componentProp.getPropertyConfig(schema); + } + + return { + canAccepts, + // triggerBelongedComponentToMoveWhenMoved, + // triggerBelongedComponentToDeleteWhenDeleted, + // checkCanMoveComponent, + // checkCanDeleteComponent, + hideNestedPaddingInDesginerView, + // getStyles, + // getDesignerClass, + getPropsConfig + }; +} diff --git a/packages/charts-vue/components/charts-combined/src/property-config/charts-combined.property-config.ts b/packages/charts-vue/components/charts-combined/src/property-config/charts-combined.property-config.ts new file mode 100644 index 00000000000..e79ab732cf3 --- /dev/null +++ b/packages/charts-vue/components/charts-combined/src/property-config/charts-combined.property-config.ts @@ -0,0 +1,552 @@ +import { BaseControlProperty } from "@farris/charts-vue/components/charts-common/src/props"; +import { gridConverter, titleConverter, sizeConverter, legendConverter, xAxisConverter, yAxisConverter } from "@farris/charts-vue/components/dynamic-resolver/src/converter"; + + +export class ChartsCombinedProperty extends BaseControlProperty { + + constructor(componentId: string, designerHostService: any) { + super(componentId, designerHostService); + } + public getPropertyConfig(propertyData: any) { + this.propertyConfig.categories['basic'] = this.getBasicPropConfig(propertyData); + + this.propertyConfig.categories['appearance'] = this.getAppearanceConfig(propertyData); + + this.propertyConfig.categories['behavior'] = this.getChartsCombinedBehaviorConfig(propertyData); + + this.propertyConfig.categories['xAxis'] = this.getChartsCombinedXAxisConfig(propertyData); + + this.propertyConfig.categories['yAxis'] = this.getChartsCombinedYAxisConfig(propertyData); + + this.propertyConfig.categories['title'] = this.getChartsCombinedTitleConfig(propertyData); + + this.propertyConfig.categories['legend'] = this.getChartsCombinedLegendConfig(propertyData); + + this.propertyConfig.categories['grid'] = this.getChartsCombinedGridConfig(propertyData); + + return this.propertyConfig; + } + private getChartsCombinedTitleConfig(propertyData) { + return{ + title: 'Title', + $converter: titleConverter, + properties: { + show: { + title: '标题是否展示', + type: 'boolean', + }, + text: { + title: '标题', + }, + link: { + title: '标题链接', + type: 'string', + }, + target: { + title: 'target', + type: 'select', + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'self' , name: '当前窗口打开' }, + { value:'blank' , name: '新窗口打开' }, + ] + } + }, + subtext: { + title: '副标题', + type: 'string', + }, + sublink: { + title: 'sublink', + type: 'string', + }, + subtarget: { + title: 'subtarget', + type: 'select', + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'self' , name: '当前窗口打开' }, + { value:'blank' , name: '新窗口打开' }, + ] + } + }, + itemGap: { + title: '主副标题之间的间距', + type: 'number', + }, + top: { + title: 'top', + type: [ + "string", + "number" + ], + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'top' , name: 'top' }, + { value:'middle' , name: 'middle' }, + { value:'bottom' , name: 'bottom' }, + + ] + } + }, + bottom: { + title: 'bottom', + type: [ + "string", + "number" + ], + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'top' , name: 'top' }, + { value:'middle' , name: 'middle' }, + { value:'bottom' , name: 'bottom' }, + + ] + } + }, + left: { + title: 'left', + type: [ + "string", + "number" + ], + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'left' , name: 'left' }, + { value:'center' , name: 'center' }, + { value:'right' , name: 'right' }, + + ] + } + }, + right: { + title: 'right', + type: [ + "string", + "number" + ], + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'left' , name: 'left' }, + { value:'center' , name: 'center' }, + { value:'right' , name: 'right' }, + + ] + } + }, + triggerEvent: { + title: '是否触发事件triggerEvent', + type: 'boolean', + }, + + } + }; + } + + private getChartsCombinedGridConfig(propertyData) { + return{ + title: 'Grid', + $converter: gridConverter, + properties: { + show: { + title: 'show', + type: 'boolean', + }, + zlevel: { + title: 'zlevel', + type: 'number', + }, + z: { + title: 'z', + type: 'number', + }, + top: { + title: 'top', + type: ['number',"string"] + }, + bottom: { + title: 'bottom', + type: ['number',"string"] + }, + left: { + title: 'left', + type: ['number',"string"] + }, + right: { + title: 'right', + type: ['number',"string"] + }, + width: { + title: 'width', + type: ['number',"string"] + }, + height: { + title: 'height', + type: ['number',"string"] + }, + containLabel: { + title: 'containLabel', + type: 'boolean', + }, + backgroundColor: { + title: 'backgroundColor', + type: 'string', + }, + borderColor: { + title: 'borderColor', + type: 'string', + }, + borderWidth: { + title: 'borderWidth', + type: 'number', + } + + } + }; + } + + private getChartsCombinedLegendConfig(propertyData) { + return{ + title: 'Legend', + $converter: legendConverter, + properties: { + show: { + title: 'show', + type: 'boolean', + }, + type: { + title: 'type', + type: 'string', + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'plain' , name: 'plain' }, + { value:'scroll' , name: 'scroll' }, + ] + } + }, + top: { + title: 'top', + type: [ + "string", + "number" + ], + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'top' , name: 'top' }, + { value:'middle' , name: 'middle' }, + { value:'bottom' , name: 'bottom' }, + + ] + } + }, + bottom: { + title: 'bottom', + type: [ + "string", + "number" + ], + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'top' , name: 'top' }, + { value:'middle' , name: 'middle' }, + { value:'bottom' , name: 'bottom' }, + + ] + } + }, + left: { + title: 'left', + type: [ + "string", + "number" + ], + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'left' , name: 'left' }, + { value:'center' , name: 'center' }, + { value:'right' , name: 'right' }, + + ] + } + }, + right: { + title: 'right', + type: [ + "string", + "number" + ], + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'left' , name: 'left' }, + { value:'center' , name: 'center' }, + { value:'right' , name: 'right' }, + + ] + } + }, + width: { + title: 'width', + type: [ + "string", + "number" + ], + }, + height: { + title: 'height', + type: [ + "string", + "number" + ], + }, + orient: { + title: 'orient', + type: 'string', + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'horizontal' , name: 'horizontal' }, + { value:'vertical' , name: 'vertical' }, + ] + } + }, + align: { + title: 'align', + type: 'string', + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'left' , name: 'left' }, + { value:'right' , name: 'right' }, + + ] + } + }, + padding: { + title: 'padding', + type: 'number', + }, + itemGap: { + title: 'itemGap', + type: 'number', + }, + itemWidth: { + title: 'itemWidth', + type: 'number', + }, + itemHeight: { + title: 'itemHeight', + type: 'number', + }, + tooltip: { + title: 'tooltip', + type: 'boolean', + }, + icon: { + title: 'icon', + type: 'string', + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'circle' , name: 'circle' }, + { value:'rect' , name: 'rect' }, + { value:'roundRect' , name: 'roundRect' }, + { value:'triangle' , name: 'triangle' }, + { value:'diamond' , name: 'diamond' }, + { value:'pin' , name: 'pin' }, + { value:'arrow' , name: 'arrow' }, + { value:'none' , name: 'none' }, + + ] + } + }, + } + }; + } + + private getChartsCombinedXAxisConfig(propertyData) { + return{ + title: 'XAxis', + $converter: xAxisConverter, + properties: { + // data: { + // title: "data", + // type: "array", + // editor: { + // type: 'item-collection-editor', + // columns: [{field: 'value', title: 'value', dataType: 'string' }] + // } + // }, + type: { + title: 'type', + type: "string", + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'value' , name: 'value' }, + { value:'category' , name: 'category' }, + { value:'time' , name: 'time' }, + { value:'log' , name: 'log' }, + ] + } + }, + + } + }; + } + + private getChartsCombinedYAxisConfig(propertyData) { + return{ + title: 'YAxis', + $converter: yAxisConverter, + properties: { + type: { + title: 'type', + type: "string", + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'value' , name: 'value' }, + { value:'category' , name: 'category' }, + { value:'time' , name: 'time' }, + { value:'log' , name: 'log' }, + ] + } + }, + + } + }; + } + + private getChartsCombinedBehaviorConfig(propertyData) { + return { + description: "基本信息", + title: "行为", + properties: { + size: { + title: "尺寸", + type: "cascade", + description: "组件的尺寸", + isExpand: true, + properties: { + width: { + title: "宽度（%）", + type: "number", + description: "组件的宽度", + editor: { + min: 0, + decimals: 0, + nullable: true, + }, + $converter: sizeConverter, + }, + height: { + title: "高度（px）", + type: "number", + description: "组件的高度", + editor: { + min: 0, + decimals: 0, + nullable: true, + }, + $converter: sizeConverter, + } + } + }, + name: { + title: "name", + type: 'string', + }, + // series: { + // title: 'series', + // type: "array", + // editor: { + // type: 'item-collection-editor', + // columns: [ + // {field: 'name', title: 'name', dataType: 'string'}, + // {field: 'xAxisIndex', title: 'xAxisIndex', dataType: 'number'}, + // {field: 'yAxisIndex', title: 'yAxisIndex', dataType: 'number'}, + // {field: 'clip', title: 'clip', dataType: 'boolean'}, + // {field: 'data', title: 'data', dataType: 'array', + // editor: { + // type: 'item-collection-editor', + // columns: [{field: 'value', title: 'value', dataType: 'number' }] + // } + // }, + // ], + // }, + // }, + + + } + }; + } + +} diff --git a/packages/charts-vue/components/charts-combined/src/schema/charts-combined.schema.json b/packages/charts-vue/components/charts-combined/src/schema/charts-combined.schema.json new file mode 100644 index 00000000000..2a1d8e66389 --- /dev/null +++ b/packages/charts-vue/components/charts-combined/src/schema/charts-combined.schema.json @@ -0,0 +1,836 @@ +{ + "$schema": "https://json-schema.org/draft/2020-12/schema", + "$id": "https://farris-design.gitee.io/charts-combined.schema.json", + "title": "charts-combined", + "description": "A Farris Combined Component", + "type": "object", + "properties": { + "id": { + "description": "The unique identifier for a Input Group", + "type": "string" + }, + "type": { + "description": "The type string of Input Group component", + "type": "string", + "default": "charts-combined" + }, + "name": { + "type": "string", + "default": "charts-combined" + }, + "code": { + "type": "string" + }, + "color": { + "type": "array", + "default": [ + "#5470c6", + "#91cc75", + "#fac858", + "#ee6666", + "#73c0de", + "#3ba272", + "#fc8452", + "#9a60b4", + "#ea7ccc" + ] + }, + "textStyle": { + "type": "object", + "properties": { + "color": { + "type": "string", + "default": "#808080" + }, + "fontStyle": { + "type": "string", + "enum": [ + "normal", + "italic", + "oblique" + ], + "default": "normal" + }, + "fontWeight": { + "type": "string", + "enum": [ + "normal", + "bold", + "bolder", + "lighter" + ], + "default": "normal" + }, + "fontFamily": { + "type": "string", + "enum": [ + "serif", + "monospace", + "Arial", + "Courier New" + ], + "default": "serif" + }, + "fontSize": { + "type": "number", + "default": 12 + }, + "lineHeight": { + "type": "number" + }, + "width": { + "type": "number" + }, + "height": { + "type": "number" + }, + "overflow": { + "type": "string", + "enum": [ + "none", + "truncate", + "break", + "breakAll" + ], + "default": "none" + }, + "ellipsis": { + "type": "string", + "description": "在overflow配置为'truncate'的时候，可以通过该属性配置末尾显示的文本", + "default": "..." + } + } + }, + "title": { + "type": "object", + "properties": { + "id": { + "type": "string", + "default": "" + }, + "show": { + "type": "boolean", + "default": true + }, + "text": { + "type": "string", + "default": "" + }, + "link": { + "type": "string", + "default": "" + }, + "target": { + "type": "string", + "enum": [ + "blank", + "self" + ], + "default": "blank" + }, + "textStyle": { + "type": "object", + "properties": { + "color": { + "type": "string", + "default": "#2D2F33" + }, + "fontStyle": { + "type": "string", + "enum": [ + "normal", + "italic", + "oblique" + ], + "default": "normal" + }, + "fontWeight": { + "type": [ + "string", + "number" + ], + "enum": [ + "normal", + "bold", + "bolder", + "lighter" + ], + "default": 500 + }, + "fontFamily": { + "type": "string", + "enum": [ + "serif", + "monospace", + "Arial", + "Courier New" + ], + "default": "serif" + }, + "lineHeight": { + "type": "number", + "default": 26 + } + } + }, + "subtext": { + "type": "string", + "default": "" + }, + "sublink": { + "type": "string", + "default": "" + }, + "subtarget": { + "type": "string", + "enum": [ + "blank", + "self" + ], + "default": "blank" + }, + "subtextStyle": { + "type": "object", + "properties": { + "color": { + "type": "string", + "default": "#2D2F33" + }, + "fontStyle": { + "type": "string", + "enum": [ + "normal", + "italic", + "oblique" + ], + "default": "normal" + }, + "fontWeight": { + "type": [ + "string", + "number" + ], + "enum": [ + "normal", + "bold", + "bolder", + "lighter" + ], + "default": "normal" + }, + "fontFamily": { + "type": "string", + "enum": [ + "serif", + "monospace", + "Arial", + "Courier New" + ], + "default": "serif" + }, + "lineHeight": { + "type": "number", + "default": 20 + } + } + }, + "triggerEvent": { + "type": "boolean", + "default": true + }, + "padding": { + "type": "array", + "items": { + "type": "number" + }, + "default": [ + 5, + 5, + 5, + 5 + ] + }, + "itemGap": { + "type": "number", + "default": 10 + }, + "top": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "bottom": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "left": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "right": { + "type": [ + "string", + "number" + ], + "default": "auto" + } + } + }, + "legend": { + "type": "object", + "properties": { + "id": { + "type": "string", + "default": "" + }, + "show": { + "type": "boolean", + "default": true + }, + "type": { + "type": "string", + "enum": [ + "plain", + "scroll" + ], + "default": "plain" + }, + "top": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "bottom": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "left": { + "type": [ + "string", + "number" + ], + "default": "center" + }, + "right": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "width": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "height": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "orient": { + "type": [ + "string" + ], + "enum": [ + "horizontal", + "vertical" + ], + "default": "horizontal" + }, + "align": { + "type": "string", + "enum": [ + "auto", + "left", + "right" + ], + "default": "auto" + }, + "padding": { + "type": "number", + "default": 5 + }, + "itemGap": { + "type": "number", + "default": 10 + }, + "itemWidth": { + "type": "number", + "default": 12 + }, + "itemHeight": { + "type": "number", + "default": 12 + }, + "lineStyle": { + "type": "object", + "properties": { + "color": { + "type": "array", + "items": { + "type": "string" + } + } + } + }, + "textStyle": { + "type": "object", + "properties": { + "color": { + "type": "string", + "default": "#666666" + }, + "fontSize": { + "type": "number", + "default": 12 + }, + "fontStyle": { + "type": "string", + "enum": [ + "normal", + "italic", + "oblique" + ], + "default": "normal" + }, + "fontWeight": { + "type": [ + "string", + "number" + ], + "enum": [ + "normal", + "bold", + "bolder", + "lighter" + ], + "default": 400 + }, + "fontFamily": { + "type": "string", + "enum": [ + "serif", + "monospace", + "Arial", + "Courier New" + ], + "default": "serif" + }, + "lineHeight": { + "type": "number", + "default": 16 + } + } + }, + "formatter": { + "type": "object", + "default": "" + }, + "tooltip": { + "type": "boolean", + "default": false + }, + "icon": { + "type": "string", + "default": "" + } + } + }, + "grid": { + "type": "object", + "properties": { + "id": { + "type": "string", + "default": "" + }, + "show": { + "type": "boolean", + "default": true + }, + "zlevel": { + "type": "number", + "default": 0 + }, + "z": { + "type": "number", + "default": 0 + }, + "top": { + "type": [ + "string", + "number" + ], + "default": 60 + }, + "bottom": { + "type": [ + "string", + "number" + ], + "default": 60 + }, + "left": { + "type": [ + "string", + "number" + ], + "default": "10%" + }, + "right": { + "type": [ + "string", + "number" + ], + "default": "10%" + }, + "width": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "height": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "containLabel": { + "type": "boolean", + "description": "grid 区域是否包含坐标轴的刻度标签。containLabel 为 false 的时候：grid.left grid.right grid.top grid.bottom grid.width grid.height 决定的是由坐标轴形成的矩形的尺寸和位置。这比较适用于多个 grid 进行对齐的场景，因为往往多个 grid 对齐的时候，是依据坐标轴来对齐的。containLabel 为 true 的时候：grid.left grid.right grid.top grid.bottom grid.width grid.height 决定的是包括了坐标轴标签在内的所有内容所形成的矩形的位置。这常用于『防止标签溢出』的场景，标签溢出指的是，标签长度动态变化时，可能会溢出容器或者覆盖其他组件", + "default": false + }, + "backgroundColor": { + "type": "string", + "default": "rgba(1,51,100,0.05)" + }, + "borderColor": { + "type": "string", + "default": "#FFFFFF" + }, + "borderWidth": { + "type": "number", + "default": 0 + }, + "tooltip": { + "type": "object", + "properties": { + "show": { + "type": "boolean" + }, + "padding": { + "type": "number" + }, + "trigger": { + "type": "string", + "enum": [ + "item", + "axis", + "none" + ] + }, + "formatter": { + "type": "object" + }, + "valueFormater": { + "type": "object" + }, + "textStyle": { + "type": "object", + "properties": { + "color": { + "type": "string" + }, + "fontStyle": { + "type": "string", + "enum": [ + "normal", + "italic", + "oblique" + ] + }, + "fontWeight": { + "type": [ + "string", + "number" + ], + "enum": [ + "normal", + "bold", + "bolder", + "lighter" + ] + }, + "fontFamily": { + "type": "string", + "enum": [ + "serif", + "monospace", + "Arial", + "Courier New" + ] + }, + "lineHeight": { + "type": "number" + } + } + }, + "axisPointer": { + "type": "object", + "properties": { + "type": { + "type": "string", + "enum": [ + "line", + "shadow", + "none", + "cross" + ], + "description": "指示器类型。" + }, + "axis": { + "type": "string", + "enum": [ + "x", + "y", + "radius", + "angle" + ], + "description": "指示器的坐标轴。默认情况，坐标系会自动选择显示哪个轴的 axisPointer（默认取类目轴或者时间轴）" + }, + "label": { + "type": "object", + "properties": { + "show": { + "type": "boolean", + "description": "是否显示文本标签。" + }, + "precision": { + "type": [ + "number", + "string" + ], + "description": "文本标签中数值的小数点精度。默认根据当前轴的值自动判断。也可以指定如 2 表示保留两位小数" + }, + "margin": { + "type": "number", + "description": "label 距离轴的距离" + }, + "color": { + "type": "string", + "description": "文字的颜色" + }, + "fontStyle": { + "type": "string", + "enum": [ + "normal", + "italic", + "oblique" + ], + "description": "文字字体的风格" + }, + "fontWeight": { + "type": [ + "number", + "string" + ], + "description": "文字字体的粗细. normal bold bolder lighter, 100|200|300|400" + }, + "fontFamily": { + "type": "string", + "description": "文字的字体系列. 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ..." + }, + "fontSize": { + "type": "number" + }, + "lineHeight": { + "type": "number" + }, + "width": { + "type": "number" + }, + "height": { + "type": "number" + }, + "overflow": { + "type": "string", + "enum": [ + "none", + "truncate", + "break", + "breakAll" + ], + "description": "文字超出宽度是否截断或者换行。配置width时有效" + }, + "padding": { + "type": "array" + }, + "backgroundColor": { + "type": "string" + }, + "borderColor": { + "type": "string" + }, + "borderWidth": { + "type": "number" + } + } + }, + "lineStyle": { + "type": "object", + "properties": { + "color": { + "type": "string" + }, + "width": { + "type": "number" + }, + "type": { + "type": [ + "string", + "array" + ], + "description": "线的类型" + }, + "cap": { + "type": "string", + "enum": [ + "butt", + "round", + "square" + ], + "description": "用于指定线段的绘制方式" + }, + "join": { + "type": "string", + "enum": [ + "bevel", + "round", + "miter" + ], + "description": "用于设置2个长度不为0的相连部分（线段，圆弧，曲线）如何连接在一起的属性" + } + } + } + } + } + } + } + } + }, + "appearance": { + "description": "", + "type": "object", + "properties": { + "class": { + "type": "string" + }, + "style": { + "type": "string" + } + }, + "default": {} + }, + "xAxis": { + "type": "object", + "properties": { + "type": { + "type": "string", + "default": "category" + }, + "data": { + "type": "array", + "default": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"] + } + } + }, + "yAxis": { + "type": "object", + "properties": { + "type": { + "type": "string", + "default": "value" + } + } + }, + "series": { + "type": "array", + "properties": { + "type": { + "type": "string", + "default": "combined" + }, + "id": { + "type": "string", + "default": "" + }, + "name": { + "type": "string", + "default": "" + }, + "xAxisIndex": { + "type": "number", + "default": 0 + }, + "yAxisIndex": { + "type": "number", + "default": 0 + }, + "clip": { + "type": "boolean", + "default": true + }, + "data": { + "type": "array", + "properties" : { + "name": { + "type": "string" + }, + "value": { + "type": "number" + } + }, + "default": [] + } + + }, + "default": [ + {"name": "第一个","type": "bar","data": [120, 200, 150, 80, 70, 110, 130]}, + {"name": "第二个","type": "line", "data": [220, 100, 350, 180, 170, 10, 70]} + + ] + }, + "size": { + "type": "object", + "default": { + "width": 100, + "height": 300 + } + } + + }, + "required": [ + "id", + "type" + ] +} \ No newline at end of file diff --git a/packages/charts-vue/components/charts-combined/src/schema/schema-mapper.ts b/packages/charts-vue/components/charts-combined/src/schema/schema-mapper.ts new file mode 100644 index 00000000000..04d7b384ed9 --- /dev/null +++ b/packages/charts-vue/components/charts-combined/src/schema/schema-mapper.ts @@ -0,0 +1,17 @@ +import { resolveAppearance, MapperFunction } from '@farris/charts-vue/components/dynamic-resolver'; + + +function createTemplatePropResolver(name: string): MapperFunction { + return (key: string, content: string) => { + if (!content) { + return {}; + } + const templateInfo = { name, content }; + + return { text: templateInfo }; + }; +} + +export const schemaMapper = new Map([ + ['appearance', resolveAppearance] +]); diff --git a/packages/charts-vue/components/charts-combined/src/schema/schema-resolver.ts b/packages/charts-vue/components/charts-combined/src/schema/schema-resolver.ts new file mode 100644 index 00000000000..6fb4684c3dd --- /dev/null +++ b/packages/charts-vue/components/charts-combined/src/schema/schema-resolver.ts @@ -0,0 +1,5 @@ +import { DynamicResolver } from '@farris/charts-vue/components/dynamic-resolver'; + +export function schemaResolver(resolver: DynamicResolver, schema: Record, context: Record): Record { + return schema; +} diff --git a/packages/charts-vue/components/charts-line/index.ts b/packages/charts-vue/components/charts-line/index.ts index e6a93023ccc..71cf3212655 100644 --- a/packages/charts-vue/components/charts-line/index.ts +++ b/packages/charts-vue/components/charts-line/index.ts @@ -5,16 +5,12 @@ import ChartsLineDesign from './src/designer/charts-line.design.component'; export * from './src/charts-line.props'; -const CHARTS_BAR_REGISTERED_NAME = 'charts-line'; -// FChartsLine.register = (componentMap: Record, propsResolverMap: Record, configResolverMap: Record, resolverMap: Record) => { -// componentMap['charts-line'] = FChartsLine; -// propsResolverMap['charts-line'] = propsResolver; -// }; +const CHARTS_LINE_REGISTERED_NAME = 'charts-line'; const FChartsLine = withInstall(FChartsLineInstallless) -withRegister(FChartsLine, {name: CHARTS_BAR_REGISTERED_NAME, propsResolverGenerator}) -withRegisterDesigner(FChartsLine, { name: CHARTS_BAR_REGISTERED_NAME, propsResolverGenerator, designerComponent: ChartsLineDesign }); +withRegister(FChartsLine, {name: CHARTS_LINE_REGISTERED_NAME, propsResolverGenerator}) +withRegisterDesigner(FChartsLine, { name: CHARTS_LINE_REGISTERED_NAME, propsResolverGenerator, designerComponent: ChartsLineDesign }); export { FChartsLine }; export default FChartsLine diff --git a/packages/charts-vue/components/charts-line/src/charts-line.props.ts b/packages/charts-vue/components/charts-line/src/charts-line.props.ts index 524ed5add69..8f267c68b45 100644 --- a/packages/charts-vue/components/charts-line/src/charts-line.props.ts +++ b/packages/charts-vue/components/charts-line/src/charts-line.props.ts @@ -129,6 +129,7 @@ export const chartsLineProps = { theme: { type: String, default: 'defaultTheme' }, size: { type: Object }, + ...animationProps }; diff --git a/packages/charts-vue/components/charts-line/src/schema/charts-line.schema.json b/packages/charts-vue/components/charts-line/src/schema/charts-line.schema.json index ac1e1e803e0..2400cbb8079 100644 --- a/packages/charts-vue/components/charts-line/src/schema/charts-line.schema.json +++ b/packages/charts-vue/components/charts-line/src/schema/charts-line.schema.json @@ -322,7 +322,7 @@ "string", "number" ], - "default": "auto" + "default": "center" }, "right": { "type": [ diff --git a/packages/charts-vue/components/charts-pie/index.ts b/packages/charts-vue/components/charts-pie/index.ts index bea1f1b6cbc..3b83f24cd46 100644 --- a/packages/charts-vue/components/charts-pie/index.ts +++ b/packages/charts-vue/components/charts-pie/index.ts @@ -1,6 +1,16 @@ -import FCharstPie from './src/charts-pie.component'; -import { withInstall } from '@farris/charts-vue/components/charts-common'; +import FChartsPieInstallless from './src/charts-pie.component'; +import { propsResolverGenerator } from './src/charts-pie.props'; +import { withInstall, withRegister, withRegisterDesigner } from '@farris/charts-vue/components/charts-common'; +import ChartsPieDesign from './src/designer/charts-pie.design.component'; export * from './src/charts-pie.props'; -export { FCharstPie }; -export default withInstall(FCharstPie); + +const CHARTS_PIE_REGISTERED_NAME = 'charts-pie'; + +const FChartsPie = withInstall(FChartsPieInstallless) + +withRegister(FChartsPie, {name: CHARTS_PIE_REGISTERED_NAME, propsResolverGenerator}) +withRegisterDesigner(FChartsPie, { name: CHARTS_PIE_REGISTERED_NAME, propsResolverGenerator, designerComponent: ChartsPieDesign }); + +export { FChartsPie }; +export default FChartsPie diff --git a/packages/charts-vue/components/charts-pie/src/charts-pie.component.tsx b/packages/charts-vue/components/charts-pie/src/charts-pie.component.tsx index aa16d6a2f47..39fe9a22f77 100644 --- a/packages/charts-vue/components/charts-pie/src/charts-pie.component.tsx +++ b/packages/charts-vue/components/charts-pie/src/charts-pie.component.tsx @@ -72,6 +72,7 @@ export default defineComponent({ return s; }) }; + console.log(baseOption) chartInstance.setOption(baseOption, true); } @@ -119,8 +120,8 @@ export default defineComponent({
); diff --git a/packages/charts-vue/components/charts-pie/src/charts-pie.props.ts b/packages/charts-vue/components/charts-pie/src/charts-pie.props.ts index 10d51635c31..03f8fe0dd8e 100644 --- a/packages/charts-vue/components/charts-pie/src/charts-pie.props.ts +++ b/packages/charts-vue/components/charts-pie/src/charts-pie.props.ts @@ -4,6 +4,10 @@ import { animationProps, ToolboxProps, BlurProps, SelectProps, TooltipProps, SelectedModeType, SamplingType, TextStyleProps, LegendProps, TitleProps, GridProps, DataZoomProps } from '@farris/charts-vue/components/charts-common'; +import { getPropsResolverGenerator } from '@farris/charts-vue/components/dynamic-resolver'; +import chartsPieSchema from './schema/charts-pie.schema.json'; +import { schemaMapper } from './schema/schema-mapper'; +import { schemaResolver } from './schema/schema-resolver'; export const pieSeriesProps = { type: { type: String, default: 'pie' }, @@ -70,6 +74,10 @@ export const pieSeriesProps = { /** 如果 series.data 没有指定，并且 dataset 存在，那么就会使用 dataset。datasetIndex 指定本系列使用哪个 dataset */ datasetIndex: { type: Number }, + radius: { type: String }, + + emphasis: { type: Object }, + ...animationProps }; @@ -102,7 +110,15 @@ export const chartsPieProps = { theme: { type: String, default: 'defaultTheme' }, + size: { type: Object }, + ...animationProps }; export type ChartsPieProps = ExtractPropTypes; +export const propsResolverGenerator = getPropsResolverGenerator( + chartsPieProps, + chartsPieSchema, + schemaMapper, + schemaResolver +); \ No newline at end of file diff --git a/packages/charts-vue/components/charts-pie/src/designer/charts-pie.design.component.tsx b/packages/charts-vue/components/charts-pie/src/designer/charts-pie.design.component.tsx new file mode 100644 index 00000000000..ce7573e96eb --- /dev/null +++ b/packages/charts-vue/components/charts-pie/src/designer/charts-pie.design.component.tsx @@ -0,0 +1,50 @@ +import { computed, defineComponent, inject, onMounted, ref, SetupContext, watch } from 'vue'; +import { DesignerHostService, DesignerItemContext } from '@farris/charts-vue/components/charts-common/src/types'; +import { useDesignerComponent } from '@farris/charts-vue/components/charts-common/src/compositions/use-designer-component'; + +import { ChartsPieProps, chartsPieProps } from '../charts-pie.props'; +import FChartsPie from '../charts-pie.component'; +import { useDesignerRules } from './use-designer-rules'; + +export default defineComponent({ + name: 'FmChartsPieDesign', + props: chartsPieProps, + emits: ['click'], + setup(props: ChartsPieProps, context: SetupContext) { + const elementRef = ref(); + const designerHostService = inject('designer-host-service'); + const designItemContext = inject('design-item-context') as DesignerItemContext; + const designerRulesComposition = useDesignerRules(designItemContext, designerHostService); + const componentInstance = useDesignerComponent(elementRef, designItemContext, designerRulesComposition); + onMounted(() => { + elementRef.value.componentInstance = componentInstance; + }); + + context.expose(componentInstance.value); + + const chartsPieProps1 = computed(() => ({ + title: props.title, + grid: props.grid, + size: props.size, + tooltip: props.tooltip, + legend: props.legend, + toolbox: props.toolbox, + animation: props.animation, + animationEasingUpdate: props.animationEasingUpdate, + series: props.series.map((series) => { + const s = { ...series }; + s.type = 'pie'; + return s; + }) + })); + watch(props, ()=> { + console.log(props) + }) + + return () => { + return ( + + ); + }; + } +}); diff --git a/packages/charts-vue/components/charts-pie/src/designer/use-designer-rules.ts b/packages/charts-vue/components/charts-pie/src/designer/use-designer-rules.ts new file mode 100644 index 00000000000..40fb3636f73 --- /dev/null +++ b/packages/charts-vue/components/charts-pie/src/designer/use-designer-rules.ts @@ -0,0 +1,57 @@ +import { ref } from "vue"; +import { DraggingResolveContext } from "@farris/charts-vue/components/charts-common/src/types"; +import { DesignerHostService, DesignerItemContext, UseDesignerRules } from "@farris/charts-vue/components/charts-common/src/types"; +import { ChartsPieProperty } from "../property-config/charts-pie.property-config"; + +export function useDesignerRules(designItemContext: DesignerItemContext, designerHostService?: DesignerHostService): UseDesignerRules { + + const triggerBelongedComponentToMoveWhenMoved = ref(false); + + const triggerBelongedComponentToDeleteWhenDeleted = ref(false); + + function canAccepts(draggingContext: DraggingResolveContext): boolean { + + return false; + } + + + function checkCanMoveComponent() { + return true; + } + function checkCanDeleteComponent() { + return true; + } + + function hideNestedPaddingInDesginerView() { + return true; + } + + function getStyles(): string { + return ' '; + } + + function getDesignerClass(): string { + return ' '; + } + + /** + * 获取属性配置 + */ + function getPropsConfig(componentId: string) { + const componentProp = new ChartsPieProperty(componentId, designerHostService); + const { schema } = designItemContext; + return componentProp.getPropertyConfig(schema); + } + + return { + canAccepts, + // triggerBelongedComponentToMoveWhenMoved, + // triggerBelongedComponentToDeleteWhenDeleted, + // checkCanMoveComponent, + // checkCanDeleteComponent, + hideNestedPaddingInDesginerView, + // getStyles, + // getDesignerClass, + getPropsConfig + }; +} diff --git a/packages/charts-vue/components/charts-pie/src/property-config/charts-pie.property-config.ts b/packages/charts-vue/components/charts-pie/src/property-config/charts-pie.property-config.ts new file mode 100644 index 00000000000..516efb9ae1c --- /dev/null +++ b/packages/charts-vue/components/charts-pie/src/property-config/charts-pie.property-config.ts @@ -0,0 +1,488 @@ +import { BaseControlProperty } from "@farris/charts-vue/components/charts-common/src/props"; +import { gridConverter, titleConverter, sizeConverter, legendConverter } from "@farris/charts-vue/components/dynamic-resolver/src/converter"; + + +export class ChartsPieProperty extends BaseControlProperty { + + constructor(componentId: string, designerHostService: any) { + super(componentId, designerHostService); + } + public getPropertyConfig(propertyData: any) { + this.propertyConfig.categories['basic'] = this.getBasicPropConfig(propertyData); + + this.propertyConfig.categories['appearance'] = this.getAppearanceConfig(propertyData); + + this.propertyConfig.categories['behavior'] = this.getChartsPieBehaviorConfig(propertyData); + + this.propertyConfig.categories['title'] = this.getChartsPieTitleConfig(propertyData); + + this.propertyConfig.categories['legend'] = this.getChartsPieLegendConfig(propertyData); + + this.propertyConfig.categories['grid'] = this.getChartsPieGridConfig(propertyData); + + return this.propertyConfig; + } + private getChartsPieTitleConfig(propertyData) { + return{ + title: 'Title', + $converter: titleConverter, + properties: { + show: { + title: '标题是否展示', + type: 'boolean', + }, + text: { + title: '标题', + }, + link: { + title: '标题链接', + type: 'string', + }, + target: { + title: 'target', + type: 'select', + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'self' , name: '当前窗口打开' }, + { value:'blank' , name: '新窗口打开' }, + ] + } + }, + subtext: { + title: '副标题', + type: 'string', + }, + sublink: { + title: 'sublink', + type: 'string', + }, + subtarget: { + title: 'subtarget', + type: 'select', + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'self' , name: '当前窗口打开' }, + { value:'blank' , name: '新窗口打开' }, + ] + } + }, + itemGap: { + title: '主副标题之间的间距', + type: 'number', + }, + top: { + title: 'top', + type: [ + "string", + "number" + ], + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'top' , name: 'top' }, + { value:'middle' , name: 'middle' }, + { value:'bottom' , name: 'bottom' }, + + ] + } + }, + bottom: { + title: 'bottom', + type: [ + "string", + "number" + ], + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'top' , name: 'top' }, + { value:'middle' , name: 'middle' }, + { value:'bottom' , name: 'bottom' }, + + ] + } + }, + left: { + title: 'left', + type: [ + "string", + "number" + ], + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'left' , name: 'left' }, + { value:'center' , name: 'center' }, + { value:'right' , name: 'right' }, + + ] + } + }, + right: { + title: 'right', + type: [ + "string", + "number" + ], + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'left' , name: 'left' }, + { value:'center' , name: 'center' }, + { value:'right' , name: 'right' }, + + ] + } + }, + triggerEvent: { + title: '是否触发事件triggerEvent', + type: 'boolean', + }, + + } + }; + } + + private getChartsPieGridConfig(propertyData) { + return{ + title: 'Grid', + $converter: gridConverter, + properties: { + show: { + title: 'show', + type: 'boolean', + }, + zlevel: { + title: 'zlevel', + type: 'number', + }, + z: { + title: 'z', + type: 'number', + }, + top: { + title: 'top', + type: ['number',"string"] + }, + bottom: { + title: 'bottom', + type: ['number',"string"] + }, + left: { + title: 'left', + type: ['number',"string"] + }, + right: { + title: 'right', + type: ['number',"string"] + }, + width: { + title: 'width', + type: ['number',"string"] + }, + height: { + title: 'height', + type: ['number',"string"] + }, + containLabel: { + title: 'containLabel', + type: 'boolean', + }, + backgroundColor: { + title: 'backgroundColor', + type: 'string', + }, + borderColor: { + title: 'borderColor', + type: 'string', + }, + borderWidth: { + title: 'borderWidth', + type: 'number', + } + + } + }; + } + + private getChartsPieLegendConfig(propertyData) { + return{ + title: 'Legend', + $converter: legendConverter, + properties: { + show: { + title: 'show', + type: 'boolean', + }, + type: { + title: 'type', + type: 'string', + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'plain' , name: 'plain' }, + { value:'scroll' , name: 'scroll' }, + ] + } + }, + top: { + title: 'top', + type: [ + "string", + "number" + ], + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'top' , name: 'top' }, + { value:'middle' , name: 'middle' }, + { value:'bottom' , name: 'bottom' }, + + ] + } + }, + bottom: { + title: 'bottom', + type: [ + "string", + "number" + ], + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'top' , name: 'top' }, + { value:'middle' , name: 'middle' }, + { value:'bottom' , name: 'bottom' }, + + ] + } + }, + left: { + title: 'left', + type: [ + "string", + "number" + ], + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'left' , name: 'left' }, + { value:'center' , name: 'center' }, + { value:'right' , name: 'right' }, + + ] + } + }, + right: { + title: 'right', + type: [ + "string", + "number" + ], + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'left' , name: 'left' }, + { value:'center' , name: 'center' }, + { value:'right' , name: 'right' }, + + ] + } + }, + width: { + title: 'width', + type: [ + "string", + "number" + ], + }, + height: { + title: 'height', + type: [ + "string", + "number" + ], + }, + orient: { + title: 'orient', + type: 'string', + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'horizontal' , name: 'horizontal' }, + { value:'vertical' , name: 'vertical' }, + ] + } + }, + align: { + title: 'align', + type: 'string', + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'left' , name: 'left' }, + { value:'right' , name: 'right' }, + + ] + } + }, + padding: { + title: 'padding', + type: 'number', + }, + itemGap: { + title: 'itemGap', + type: 'number', + }, + itemWidth: { + title: 'itemWidth', + type: 'number', + }, + itemHeight: { + title: 'itemHeight', + type: 'number', + }, + tooltip: { + title: 'tooltip', + type: 'boolean', + }, + icon: { + title: 'icon', + type: 'string', + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'circle' , name: 'circle' }, + { value:'rect' , name: 'rect' }, + { value:'roundRect' , name: 'roundRect' }, + { value:'triangle' , name: 'triangle' }, + { value:'diamond' , name: 'diamond' }, + { value:'pin' , name: 'pin' }, + { value:'arrow' , name: 'arrow' }, + { value:'none' , name: 'none' }, + + ] + } + }, + } + }; + } + + private getChartsPieBehaviorConfig(propertyData) { + return { + description: "基本信息", + title: "行为", + properties: { + size: { + title: "尺寸", + type: "cascade", + description: "组件的尺寸", + isExpand: true, + properties: { + width: { + title: "宽度（%）", + type: "number", + description: "组件的宽度", + editor: { + min: 0, + decimals: 0, + nullable: true, + }, + $converter: sizeConverter, + }, + height: { + title: "高度（px）", + type: "number", + description: "组件的高度", + editor: { + min: 0, + decimals: 0, + nullable: true, + }, + $converter: sizeConverter, + } + } + }, + name: { + title: "name", + type: 'string', + }, + // series: { + // title: 'series', + // type: "array", + // editor: { + // type: 'item-collection-editor', + // columns: [ + // {field: 'name', title: 'name', dataType: 'string'}, + // {field: 'xAxisIndex', title: 'xAxisIndex', dataType: 'number'}, + // {field: 'yAxisIndex', title: 'yAxisIndex', dataType: 'number'}, + // {field: 'clip', title: 'clip', dataType: 'boolean'}, + // {field: 'data', title: 'data', dataType: 'array', + // editor: { + // type: 'item-collection-editor', + // columns: [{field: 'value', title: 'value', dataType: 'number' }] + // } + // }, + // ], + // }, + // }, + + + } + }; + } + +} diff --git a/packages/charts-vue/components/charts-pie/src/schema/charts-pie.schema.json b/packages/charts-vue/components/charts-pie/src/schema/charts-pie.schema.json new file mode 100644 index 00000000000..eb855a6e74d --- /dev/null +++ b/packages/charts-vue/components/charts-pie/src/schema/charts-pie.schema.json @@ -0,0 +1,845 @@ +{ + "$schema": "https://json-schema.org/draft/2020-12/schema", + "$id": "https://farris-design.gitee.io/charts-pie.schema.json", + "title": "charts-pie", + "description": "A Farris Pie Component", + "type": "object", + "properties": { + "id": { + "description": "The unique identifier for a Input Group", + "type": "string" + }, + "type": { + "description": "The type string of Input Group component", + "type": "string", + "default": "charts-pie" + }, + "name": { + "type": "string", + "default": "charts-pie" + }, + "code": { + "type": "string" + }, + "color": { + "type": "array", + "default": [ + "#5470c6", + "#91cc75", + "#fac858", + "#ee6666", + "#73c0de", + "#3ba272", + "#fc8452", + "#9a60b4", + "#ea7ccc" + ] + }, + "textStyle": { + "type": "object", + "properties": { + "color": { + "type": "string", + "default": "#808080" + }, + "fontStyle": { + "type": "string", + "enum": [ + "normal", + "italic", + "oblique" + ], + "default": "normal" + }, + "fontWeight": { + "type": "string", + "enum": [ + "normal", + "bold", + "bolder", + "lighter" + ], + "default": "normal" + }, + "fontFamily": { + "type": "string", + "enum": [ + "serif", + "monospace", + "Arial", + "Courier New" + ], + "default": "serif" + }, + "fontSize": { + "type": "number", + "default": 12 + }, + "lineHeight": { + "type": "number" + }, + "width": { + "type": "number" + }, + "height": { + "type": "number" + }, + "overflow": { + "type": "string", + "enum": [ + "none", + "truncate", + "break", + "breakAll" + ], + "default": "none" + }, + "ellipsis": { + "type": "string", + "description": "在overflow配置为'truncate'的时候，可以通过该属性配置末尾显示的文本", + "default": "..." + } + } + }, + "title": { + "type": "object", + "properties": { + "id": { + "type": "string", + "default": "" + }, + "show": { + "type": "boolean", + "default": true + }, + "text": { + "type": "string", + "default": "Referer of a Website" + }, + "link": { + "type": "string", + "default": "" + }, + "target": { + "type": "string", + "enum": [ + "blank", + "self" + ], + "default": "blank" + }, + "textStyle": { + "type": "object", + "properties": { + "color": { + "type": "string", + "default": "#2D2F33" + }, + "fontStyle": { + "type": "string", + "enum": [ + "normal", + "italic", + "oblique" + ], + "default": "normal" + }, + "fontWeight": { + "type": [ + "string", + "number" + ], + "enum": [ + "normal", + "bold", + "bolder", + "lighter" + ], + "default": 500 + }, + "fontFamily": { + "type": "string", + "enum": [ + "serif", + "monospace", + "Arial", + "Courier New" + ], + "default": "serif" + }, + "lineHeight": { + "type": "number", + "default": 18 + } + } + }, + "subtext": { + "type": "string", + "default": "Fake Data" + }, + "sublink": { + "type": "string", + "default": "" + }, + "subtarget": { + "type": "string", + "enum": [ + "blank", + "self" + ], + "default": "blank" + }, + "subtextStyle": { + "type": "object", + "properties": { + "color": { + "type": "string", + "default": "#2D2F33" + }, + "fontStyle": { + "type": "string", + "enum": [ + "normal", + "italic", + "oblique" + ], + "default": "normal" + }, + "fontWeight": { + "type": [ + "string", + "number" + ], + "enum": [ + "normal", + "bold", + "bolder", + "lighter" + ], + "default": "normal" + }, + "fontFamily": { + "type": "string", + "enum": [ + "serif", + "monospace", + "Arial", + "Courier New" + ], + "default": "serif" + }, + "lineHeight": { + "type": "number", + "default": 20 + } + } + }, + "triggerEvent": { + "type": "boolean", + "default": true + }, + "padding": { + "type": "array", + "items": { + "type": "number" + }, + "default": [ + 5, + 5, + 5, + 5 + ] + }, + "itemGap": { + "type": "number", + "default": 5 + }, + "top": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "bottom": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "left": { + "type": [ + "string", + "number" + ], + "default": "center" + }, + "right": { + "type": [ + "string", + "number" + ], + "default": "auto" + } + } + }, + "legend": { + "type": "object", + "properties": { + "id": { + "type": "string", + "default": "" + }, + "show": { + "type": "boolean", + "default": true + }, + "type": { + "type": "string", + "enum": [ + "plain", + "scroll" + ], + "default": "plain" + }, + "top": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "bottom": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "left": { + "type": [ + "string", + "number" + ], + "default": "left" + }, + "right": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "width": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "height": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "orient": { + "type": [ + "string" + ], + "enum": [ + "horizontal", + "vertical" + ], + "default": "vertical" + }, + "align": { + "type": "string", + "enum": [ + "auto", + "left", + "right" + ], + "default": "auto" + }, + "padding": { + "type": "number", + "default": 5 + }, + "itemGap": { + "type": "number", + "default": 5 + }, + "itemWidth": { + "type": "number", + "default": 12 + }, + "itemHeight": { + "type": "number", + "default": 12 + }, + "lineStyle": { + "type": "object", + "properties": { + "color": { + "type": "array", + "items": { + "type": "string" + } + } + } + }, + "textStyle": { + "type": "object", + "properties": { + "color": { + "type": "string", + "default": "#666666" + }, + "fontSize": { + "type": "number", + "default": 12 + }, + "fontStyle": { + "type": "string", + "enum": [ + "normal", + "italic", + "oblique" + ], + "default": "normal" + }, + "fontWeight": { + "type": [ + "string", + "number" + ], + "enum": [ + "normal", + "bold", + "bolder", + "lighter" + ], + "default": 400 + }, + "fontFamily": { + "type": "string", + "enum": [ + "serif", + "monospace", + "Arial", + "Courier New" + ], + "default": "serif" + }, + "lineHeight": { + "type": "number", + "default": 16 + } + } + }, + "formatter": { + "type": "object", + "default": "" + }, + "tooltip": { + "type": "boolean", + "default": false + }, + "icon": { + "type": "string", + "default": "" + } + } + }, + "grid": { + "type": "object", + "properties": { + "id": { + "type": "string", + "default": "" + }, + "show": { + "type": "boolean", + "default": false + }, + "zlevel": { + "type": "number", + "default": 0 + }, + "z": { + "type": "number", + "default": 2 + }, + "top": { + "type": [ + "string", + "number" + ], + "default": 60 + }, + "bottom": { + "type": [ + "string", + "number" + ], + "default": 60 + }, + "left": { + "type": [ + "string", + "number" + ], + "default": "10%" + }, + "right": { + "type": [ + "string", + "number" + ], + "default": "10%" + }, + "width": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "height": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "containLabel": { + "type": "boolean", + "description": "grid 区域是否包含坐标轴的刻度标签。containLabel 为 false 的时候：grid.left grid.right grid.top grid.bottom grid.width grid.height 决定的是由坐标轴形成的矩形的尺寸和位置。这比较适用于多个 grid 进行对齐的场景，因为往往多个 grid 对齐的时候，是依据坐标轴来对齐的。containLabel 为 true 的时候：grid.left grid.right grid.top grid.bottom grid.width grid.height 决定的是包括了坐标轴标签在内的所有内容所形成的矩形的位置。这常用于『防止标签溢出』的场景，标签溢出指的是，标签长度动态变化时，可能会溢出容器或者覆盖其他组件", + "default": false + }, + "backgroundColor": { + "type": "string", + "default": "rgba(1,51,100,0.05)" + }, + "borderColor": { + "type": "string", + "default": "#FFFFFF" + }, + "borderWidth": { + "type": "number", + "default": 0 + }, + "tooltip": { + "type": "object", + "properties": { + "show": { + "type": "boolean" + }, + "padding": { + "type": "number" + }, + "trigger": { + "type": "string", + "enum": [ + "item", + "axis", + "none" + ] + }, + "formatter": { + "type": "object" + }, + "valueFormater": { + "type": "object" + }, + "textStyle": { + "type": "object", + "properties": { + "color": { + "type": "string" + }, + "fontStyle": { + "type": "string", + "enum": [ + "normal", + "italic", + "oblique" + ] + }, + "fontWeight": { + "type": [ + "string", + "number" + ], + "enum": [ + "normal", + "bold", + "bolder", + "lighter" + ] + }, + "fontFamily": { + "type": "string", + "enum": [ + "serif", + "monospace", + "Arial", + "Courier New" + ] + }, + "lineHeight": { + "type": "number" + } + } + }, + "axisPointer": { + "type": "object", + "properties": { + "type": { + "type": "string", + "enum": [ + "line", + "shadow", + "none", + "cross" + ], + "description": "指示器类型。" + }, + "axis": { + "type": "string", + "enum": [ + "x", + "y", + "radius", + "angle" + ], + "description": "指示器的坐标轴。默认情况，坐标系会自动选择显示哪个轴的 axisPointer（默认取类目轴或者时间轴）" + }, + "label": { + "type": "object", + "properties": { + "show": { + "type": "boolean", + "description": "是否显示文本标签。" + }, + "precision": { + "type": [ + "number", + "string" + ], + "description": "文本标签中数值的小数点精度。默认根据当前轴的值自动判断。也可以指定如 2 表示保留两位小数" + }, + "margin": { + "type": "number", + "description": "label 距离轴的距离" + }, + "color": { + "type": "string", + "description": "文字的颜色" + }, + "fontStyle": { + "type": "string", + "enum": [ + "normal", + "italic", + "oblique" + ], + "description": "文字字体的风格" + }, + "fontWeight": { + "type": [ + "number", + "string" + ], + "description": "文字字体的粗细. normal bold bolder lighter, 100|200|300|400" + }, + "fontFamily": { + "type": "string", + "description": "文字的字体系列. 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ..." + }, + "fontSize": { + "type": "number" + }, + "lineHeight": { + "type": "number" + }, + "width": { + "type": "number" + }, + "height": { + "type": "number" + }, + "overflow": { + "type": "string", + "enum": [ + "none", + "truncate", + "break", + "breakAll" + ], + "description": "文字超出宽度是否截断或者换行。配置width时有效" + }, + "padding": { + "type": "array" + }, + "backgroundColor": { + "type": "string" + }, + "borderColor": { + "type": "string" + }, + "borderWidth": { + "type": "number" + } + } + }, + "lineStyle": { + "type": "object", + "properties": { + "color": { + "type": "string" + }, + "width": { + "type": "number" + }, + "type": { + "type": [ + "string", + "array" + ], + "description": "线的类型" + }, + "cap": { + "type": "string", + "enum": [ + "butt", + "round", + "square" + ], + "description": "用于指定线段的绘制方式" + }, + "join": { + "type": "string", + "enum": [ + "bevel", + "round", + "miter" + ], + "description": "用于设置2个长度不为0的相连部分（线段，圆弧，曲线）如何连接在一起的属性" + } + } + } + } + } + } + } + } + }, + "appearance": { + "description": "", + "type": "object", + "properties": { + "class": { + "type": "string" + }, + "style": { + "type": "string" + } + }, + "default": {} + }, + "series": { + "type": "array", + "properties": { + "type": { + "type": "string", + "default": "pie" + }, + "id": { + "type": "string", + "default": "" + }, + "name": { + "type": "string", + "default": "" + }, + "clip": { + "type": "boolean", + "default": true + }, + "radius": { + "type": "string" + }, + "emphasis": { + "type": "object" + }, + "data": { + "type": "array", + "properties" : { + "name": { + "type": "string" + }, + "value": { + "type": "number" + } + }, + "default": [] + } + + }, + "default": [{ + "name": "第一个", + "type": "pie", + "data": [ + { "value": 1048, "name": "Search" }, + { "value": 735, "name": "Direct" }, + { "value": 580, "name": "Email" }, + { "value": 484, "name": "Union" }, + { "value": 300, "name": "Video" } + ], + "emphasis": { + "itemStyle": { + "shadowBlur": 10, + "shadowOffsetX": 0, + "shadowColor": "rgba(0, 0, 0, 0.5)" + } + }, + "radius": "50%", + "label": { + "fontSize": "10px" + } + } + + ] + }, + "size": { + "type": "object", + "default": { + "width": 100, + "height": 300 + } + }, + "tooltip": { + "type": "object", + "properties": { + "show": { + "type": "boolean" + }, + "trigger": { + "type": "string", + "default": "item" + } + + }, + "default": {} + } + + }, + "required": [ + "id", + "type" + ] +} \ No newline at end of file diff --git a/packages/charts-vue/components/charts-pie/src/schema/schema-mapper.ts b/packages/charts-vue/components/charts-pie/src/schema/schema-mapper.ts new file mode 100644 index 00000000000..04d7b384ed9 --- /dev/null +++ b/packages/charts-vue/components/charts-pie/src/schema/schema-mapper.ts @@ -0,0 +1,17 @@ +import { resolveAppearance, MapperFunction } from '@farris/charts-vue/components/dynamic-resolver'; + + +function createTemplatePropResolver(name: string): MapperFunction { + return (key: string, content: string) => { + if (!content) { + return {}; + } + const templateInfo = { name, content }; + + return { text: templateInfo }; + }; +} + +export const schemaMapper = new Map([ + ['appearance', resolveAppearance] +]); diff --git a/packages/charts-vue/components/charts-pie/src/schema/schema-resolver.ts b/packages/charts-vue/components/charts-pie/src/schema/schema-resolver.ts new file mode 100644 index 00000000000..6fb4684c3dd --- /dev/null +++ b/packages/charts-vue/components/charts-pie/src/schema/schema-resolver.ts @@ -0,0 +1,5 @@ +import { DynamicResolver } from '@farris/charts-vue/components/dynamic-resolver'; + +export function schemaResolver(resolver: DynamicResolver, schema: Record, context: Record): Record { + return schema; +} diff --git a/packages/charts-vue/components/index.ts b/packages/charts-vue/components/index.ts index 824a1ee918b..3712cc10507 100644 --- a/packages/charts-vue/components/index.ts +++ b/packages/charts-vue/components/index.ts @@ -31,6 +31,10 @@ export * from './components'; // 导出设计器部分组件及属性 // export * from './designer'; +export {FChartsPie} from './charts-pie'; +export {FChartsCombined} from './charts-combined'; + + // 不注册设计时组件 export default { install(app: App): void { diff --git a/packages/designer/src/components/composition/designer-context/use-mobile-designer-context.ts b/packages/designer/src/components/composition/designer-context/use-mobile-designer-context.ts index 7208233a5d4..d78c7ceb760 100644 --- a/packages/designer/src/components/composition/designer-context/use-mobile-designer-context.ts +++ b/packages/designer/src/components/composition/designer-context/use-mobile-designer-context.ts @@ -11,7 +11,7 @@ import { HtmlTemplate } from "../../../../../mobile-ui-vue/components/html-templ import { useMobileControlCreator } from "../control-creator/use-mobile-control-creator"; import { PageComponent, UsePageSchema } from "../../../components/types"; import ControllCategories from '../schema-repository/controller/mobile-categories'; -import { FChartsBar, FChartsLine } from '@farris/charts-vue/components'; +import { FChartsBar, FChartsLine, FChartsPie, FChartsCombined } from '@farris/charts-vue/components'; export function useMobileDesignerContext(): UseDesignerContext { /** 设计器模式 */ @@ -26,7 +26,9 @@ export function useMobileDesignerContext(): UseDesignerContext { ContentContainer, Card, FloatContainer, Textarea, DatePicker, DateTimePicker, Lookup, Navbar, ListView, Picker, NumberInput, Switch, CheckboxGroup, RadioGroup, Form, FormItem, InputGroup, - Button, ButtonGroup, FChartsBar, FChartsLine + Button, ButtonGroup, + FChartsBar, FChartsLine, FChartsPie, FChartsCombined + ]; registerDesignerComponents(componentsToRegister); diff --git a/packages/designer/src/components/types/toolbox/mobile-toolbox.json b/packages/designer/src/components/types/toolbox/mobile-toolbox.json index fdcd850262a..fc625db1c72 100644 --- a/packages/designer/src/components/types/toolbox/mobile-toolbox.json +++ b/packages/designer/src/components/types/toolbox/mobile-toolbox.json @@ -16,6 +16,20 @@ "name": "charts-line", "category": "charts", "icon": "charts" + }, + { + "id": "FChartsPie", + "type": "charts-pie", + "name": "charts-pie", + "category": "charts", + "icon": "charts" + }, + { + "id": "FChartsCombined", + "type": "charts-combined", + "name": "charts-combined", + "category": "charts", + "icon": "charts" } ] }, -- Gitee From 0fd3381afd2290a78209cbd0ef356d50525ccb3a Mon Sep 17 00:00:00 2001 From: cy <15990550+langchaocy@user.noreply.gitee.com> Date: Mon, 7 Jul 2025 21:27:27 +0800 Subject: [PATCH 18/23] =?UTF-8?q?feature:=20=E4=B8=BA=E6=95=A3=E7=82=B9?= =?UTF-8?q?=E5=9B=BE=E6=96=B0=E5=A2=9E=E4=BA=86=E6=8B=96=E6=8B=BD=E6=B7=BB?= =?UTF-8?q?=E5=8A=A0=E5=8A=9F=E8=83=BD=EF=BC=8C=E5=A2=9E=E5=8A=A0=E4=BA=86?= =?UTF-8?q?=E9=85=8D=E7=BD=AE=E5=B1=9E=E6=80=A7=E9=9D=A2=E6=9D=BF=E5=8A=9F?= =?UTF-8?q?=E8=83=BD=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/charts-scatter/index.ts | 22 +- .../src/charts-scatter.component.tsx | 4 +- .../src/charts-scatter.props.ts | 12 + .../charts-scatter.design.component.tsx | 50 ++ .../src/designer/use-designer-rules.ts | 57 ++ .../charts-scatter.property-config.ts | 488 ++++++++++ .../src/schema/charts-scatter.schema.json | 848 ++++++++++++++++++ .../src/schema/schema-mapper.ts | 17 + .../src/schema/schema-resolver.ts | 5 + .../src/converter/cascade.converter.ts | 2 +- packages/charts-vue/components/index.ts | 1 + .../use-mobile-designer-context.ts | 6 +- .../types/toolbox/mobile-toolbox.json | 11 +- 13 files changed, 1511 insertions(+), 12 deletions(-) create mode 100644 packages/charts-vue/components/charts-scatter/src/designer/charts-scatter.design.component.tsx create mode 100644 packages/charts-vue/components/charts-scatter/src/designer/use-designer-rules.ts create mode 100644 packages/charts-vue/components/charts-scatter/src/property-config/charts-scatter.property-config.ts create mode 100644 packages/charts-vue/components/charts-scatter/src/schema/charts-scatter.schema.json create mode 100644 packages/charts-vue/components/charts-scatter/src/schema/schema-mapper.ts create mode 100644 packages/charts-vue/components/charts-scatter/src/schema/schema-resolver.ts diff --git a/packages/charts-vue/components/charts-scatter/index.ts b/packages/charts-vue/components/charts-scatter/index.ts index 2a9684bb46b..92e3a1c5333 100644 --- a/packages/charts-vue/components/charts-scatter/index.ts +++ b/packages/charts-vue/components/charts-scatter/index.ts @@ -1,6 +1,20 @@ -import FCharstScatter from './src/charts-scatter.component'; -import { withInstall } from '@farris/charts-vue/components/charts-common'; +import FChartsScatterInstallless from './src/charts-scatter.component'; +import { propsResolverGenerator } from './src/charts-scatter.props'; +import { withInstall, withRegister, withRegisterDesigner } from '@farris/charts-vue/components/charts-common'; +import ChartsScatterDesign from './src/designer/charts-scatter.design.component'; export * from './src/charts-scatter.props'; -export { FCharstScatter }; -export default withInstall(FCharstScatter); + +const CHARTS_SCATTER_REGISTERED_NAME = 'charts-scatter'; +// FChartsScatter.register = (componentMap: Record, propsResolverMap: Record, configResolverMap: Record, resolverMap: Record) => { +// componentMap['charts-scatter'] = FChartsScatter; +// propsResolverMap['charts-scatter'] = propsResolver; +// }; + +const FChartsScatter = withInstall(FChartsScatterInstallless) + +withRegister(FChartsScatter, {name: CHARTS_SCATTER_REGISTERED_NAME, propsResolverGenerator}) +withRegisterDesigner(FChartsScatter, { name: CHARTS_SCATTER_REGISTERED_NAME, propsResolverGenerator, designerComponent: ChartsScatterDesign }); + +export { FChartsScatter }; +export default FChartsScatter diff --git a/packages/charts-vue/components/charts-scatter/src/charts-scatter.component.tsx b/packages/charts-vue/components/charts-scatter/src/charts-scatter.component.tsx index b9670320551..29339793c80 100644 --- a/packages/charts-vue/components/charts-scatter/src/charts-scatter.component.tsx +++ b/packages/charts-vue/components/charts-scatter/src/charts-scatter.component.tsx @@ -122,8 +122,8 @@ export default defineComponent({
); diff --git a/packages/charts-vue/components/charts-scatter/src/charts-scatter.props.ts b/packages/charts-vue/components/charts-scatter/src/charts-scatter.props.ts index ee3d0d6d9d8..10dfcf32e35 100644 --- a/packages/charts-vue/components/charts-scatter/src/charts-scatter.props.ts +++ b/packages/charts-vue/components/charts-scatter/src/charts-scatter.props.ts @@ -5,6 +5,11 @@ import { TextStyleProps, LegendProps, TitleProps, GridProps, DataZoomProps, AxisProps, ToolboxProps } from '@farris/charts-vue/components/charts-common'; +import { getPropsResolverGenerator } from '@farris/charts-vue/components/dynamic-resolver'; +import chartsScatterSchema from './schema/charts-scatter.schema.json'; +import { schemaMapper } from './schema/schema-mapper'; +import { schemaResolver } from './schema/schema-resolver'; + export const scatterSeriesProps = { type: { type: String, default: 'scatter' }, @@ -118,7 +123,14 @@ export const chartsScatterProps = { theme: { type: String, default: 'defaultTheme' }, + size: { type: Object}, ...animationProps }; export type ChartsScatterProps = ExtractPropTypes; +export const propsResolverGenerator = getPropsResolverGenerator( + chartsScatterProps, + chartsScatterSchema, + schemaMapper, + schemaResolver +); \ No newline at end of file diff --git a/packages/charts-vue/components/charts-scatter/src/designer/charts-scatter.design.component.tsx b/packages/charts-vue/components/charts-scatter/src/designer/charts-scatter.design.component.tsx new file mode 100644 index 00000000000..00e16c93e99 --- /dev/null +++ b/packages/charts-vue/components/charts-scatter/src/designer/charts-scatter.design.component.tsx @@ -0,0 +1,50 @@ +import { computed, defineComponent, inject, onMounted, ref, SetupContext, watch } from 'vue'; +import { DesignerHostService, DesignerItemContext } from '@farris/charts-vue/components/charts-common/src/types'; +import { useDesignerComponent } from '@farris/charts-vue/components/charts-common/src/compositions/use-designer-component'; + +import { ChartsScatterProps, chartsScatterProps } from '../charts-scatter.props'; +import FChartsScatter from '../charts-scatter.component'; +import { useDesignerRules } from './use-designer-rules'; + +export default defineComponent({ + name: 'FmChartsScatterDesign', + props: chartsScatterProps, + emits: ['click'], + setup(props: ChartsScatterProps, context: SetupContext) { + const elementRef = ref(); + const designerHostService = inject('designer-host-service'); + const designItemContext = inject('design-item-context') as DesignerItemContext; + const designerRulesComposition = useDesignerRules(designItemContext, designerHostService); + const componentInstance = useDesignerComponent(elementRef, designItemContext, designerRulesComposition); + onMounted(() => { + elementRef.value.componentInstance = componentInstance; + }); + + context.expose(componentInstance.value); + + const chartsScatterProps1 = computed(() => ({ + size: props.size, + title: props.title, + grid: props.grid, + tooltip: props.tooltip, + legend: props.legend, + toolbox: props.toolbox, + xAxis: props.xAxis, + yAxis: props.yAxis, + animation: props.animation, + animationDuration: props.animationDuration, + animationEasingUpdate: props.animationEasingUpdate, + series: props.series.map((series) => { + const s = { ...series }; + s.type = 'scatter'; + return s; + }) + })); + + return () => { + return ( + + ); + }; + } +}); diff --git a/packages/charts-vue/components/charts-scatter/src/designer/use-designer-rules.ts b/packages/charts-vue/components/charts-scatter/src/designer/use-designer-rules.ts new file mode 100644 index 00000000000..eebebb23417 --- /dev/null +++ b/packages/charts-vue/components/charts-scatter/src/designer/use-designer-rules.ts @@ -0,0 +1,57 @@ +import { ref } from "vue"; +import { DraggingResolveContext } from "@farris/charts-vue/components/charts-common/src/types"; +import { DesignerHostService, DesignerItemContext, UseDesignerRules } from "@farris/charts-vue/components/charts-common/src/types"; +import { ChartsScatterProperty } from "../property-config/charts-scatter.property-config"; + +export function useDesignerRules(designItemContext: DesignerItemContext, designerHostService?: DesignerHostService): UseDesignerRules { + + const triggerBelongedComponentToMoveWhenMoved = ref(false); + + const triggerBelongedComponentToDeleteWhenDeleted = ref(false); + + function canAccepts(draggingContext: DraggingResolveContext): boolean { + + return false; + } + + + function checkCanMoveComponent() { + return true; + } + function checkCanDeleteComponent() { + return true; + } + + function hideNestedPaddingInDesginerView() { + return true; + } + + function getStyles(): string { + return ' '; + } + + function getDesignerClass(): string { + return ' '; + } + + /** + * 获取属性配置 + */ + function getPropsConfig(componentId: string) { + const componentProp = new ChartsScatterProperty(componentId, designerHostService); + const { schema } = designItemContext; + return componentProp.getPropertyConfig(schema); + } + + return { + canAccepts, + // triggerBelongedComponentToMoveWhenMoved, + // triggerBelongedComponentToDeleteWhenDeleted, + // checkCanMoveComponent, + // checkCanDeleteComponent, + hideNestedPaddingInDesginerView, + // getStyles, + // getDesignerClass, + getPropsConfig + }; +} diff --git a/packages/charts-vue/components/charts-scatter/src/property-config/charts-scatter.property-config.ts b/packages/charts-vue/components/charts-scatter/src/property-config/charts-scatter.property-config.ts new file mode 100644 index 00000000000..99797f870d8 --- /dev/null +++ b/packages/charts-vue/components/charts-scatter/src/property-config/charts-scatter.property-config.ts @@ -0,0 +1,488 @@ +import { BaseControlProperty } from "@farris/charts-vue/components/charts-common/src/props"; +import { gridConverter, titleConverter, sizeConverter, legendConverter } from "@farris/charts-vue/components/dynamic-resolver/src/converter"; + + +export class ChartsScatterProperty extends BaseControlProperty { + + constructor(componentId: string, designerHostService: any) { + super(componentId, designerHostService); + } + public getPropertyConfig(propertyData: any) { + this.propertyConfig.categories['basic'] = this.getBasicPropConfig(propertyData); + + this.propertyConfig.categories['appearance'] = this.getAppearanceConfig(propertyData); + + this.propertyConfig.categories['behavior'] = this.getChartsScatterBehaviorConfig(propertyData); + + this.propertyConfig.categories['title'] = this.getChartsScatterTitleConfig(propertyData); + + this.propertyConfig.categories['legend'] = this.getChartsScatterLegendConfig(propertyData); + + this.propertyConfig.categories['grid'] = this.getChartsScatterGridConfig(propertyData); + + return this.propertyConfig; + } + private getChartsScatterTitleConfig(propertyData) { + return{ + title: 'Title', + $converter: titleConverter, + properties: { + show: { + title: '标题是否展示', + type: 'boolean', + }, + text: { + title: '标题', + }, + link: { + title: '标题链接', + type: 'string', + }, + target: { + title: 'target', + type: 'select', + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'self' , name: '当前窗口打开' }, + { value:'blank' , name: '新窗口打开' }, + ] + } + }, + subtext: { + title: '副标题', + type: 'string', + }, + sublink: { + title: 'sublink', + type: 'string', + }, + subtarget: { + title: 'subtarget', + type: 'select', + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'self' , name: '当前窗口打开' }, + { value:'blank' , name: '新窗口打开' }, + ] + } + }, + itemGap: { + title: '主副标题之间的间距', + type: 'number', + }, + top: { + title: 'top', + type: [ + "string", + "number" + ], + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'top' , name: 'top' }, + { value:'middle' , name: 'middle' }, + { value:'bottom' , name: 'bottom' }, + + ] + } + }, + bottom: { + title: 'bottom', + type: [ + "string", + "number" + ], + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'top' , name: 'top' }, + { value:'middle' , name: 'middle' }, + { value:'bottom' , name: 'bottom' }, + + ] + } + }, + left: { + title: 'left', + type: [ + "string", + "number" + ], + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'left' , name: 'left' }, + { value:'center' , name: 'center' }, + { value:'right' , name: 'right' }, + + ] + } + }, + right: { + title: 'right', + type: [ + "string", + "number" + ], + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'left' , name: 'left' }, + { value:'center' , name: 'center' }, + { value:'right' , name: 'right' }, + + ] + } + }, + triggerEvent: { + title: '是否触发事件triggerEvent', + type: 'boolean', + }, + + } + }; + } + + private getChartsScatterGridConfig(propertyData) { + return{ + title: 'Grid', + $converter: gridConverter, + properties: { + show: { + title: 'show', + type: 'boolean', + }, + zlevel: { + title: 'zlevel', + type: 'number', + }, + z: { + title: 'z', + type: 'number', + }, + top: { + title: 'top', + type: ['number',"string"] + }, + bottom: { + title: 'bottom', + type: ['number',"string"] + }, + left: { + title: 'left', + type: ['number',"string"] + }, + right: { + title: 'right', + type: ['number',"string"] + }, + width: { + title: 'width', + type: ['number',"string"] + }, + height: { + title: 'height', + type: ['number',"string"] + }, + containLabel: { + title: 'containLabel', + type: 'boolean', + }, + backgroundColor: { + title: 'backgroundColor', + type: 'string', + }, + borderColor: { + title: 'borderColor', + type: 'string', + }, + borderWidth: { + title: 'borderWidth', + type: 'number', + } + + } + }; + } + + private getChartsScatterLegendConfig(propertyData) { + return{ + title: 'Legend', + $converter: legendConverter, + properties: { + show: { + title: 'show', + type: 'boolean', + }, + type: { + title: 'type', + type: 'string', + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'plain' , name: 'plain' }, + { value:'scroll' , name: 'scroll' }, + ] + } + }, + top: { + title: 'top', + type: [ + "string", + "number" + ], + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'top' , name: 'top' }, + { value:'middle' , name: 'middle' }, + { value:'bottom' , name: 'bottom' }, + + ] + } + }, + bottom: { + title: 'bottom', + type: [ + "string", + "number" + ], + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'top' , name: 'top' }, + { value:'middle' , name: 'middle' }, + { value:'bottom' , name: 'bottom' }, + + ] + } + }, + left: { + title: 'left', + type: [ + "string", + "number" + ], + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'left' , name: 'left' }, + { value:'center' , name: 'center' }, + { value:'right' , name: 'right' }, + + ] + } + }, + right: { + title: 'right', + type: [ + "string", + "number" + ], + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'left' , name: 'left' }, + { value:'center' , name: 'center' }, + { value:'right' , name: 'right' }, + + ] + } + }, + width: { + title: 'width', + type: [ + "string", + "number" + ], + }, + height: { + title: 'height', + type: [ + "string", + "number" + ], + }, + orient: { + title: 'orient', + type: 'string', + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'horizontal' , name: 'horizontal' }, + { value:'vertical' , name: 'vertical' }, + ] + } + }, + align: { + title: 'align', + type: 'string', + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'left' , name: 'left' }, + { value:'right' , name: 'right' }, + + ] + } + }, + padding: { + title: 'padding', + type: 'number', + }, + itemGap: { + title: 'itemGap', + type: 'number', + }, + itemWidth: { + title: 'itemWidth', + type: 'number', + }, + itemHeight: { + title: 'itemHeight', + type: 'number', + }, + tooltip: { + title: 'tooltip', + type: 'boolean', + }, + icon: { + title: 'icon', + type: 'string', + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'circle' , name: 'circle' }, + { value:'rect' , name: 'rect' }, + { value:'roundRect' , name: 'roundRect' }, + { value:'triangle' , name: 'triangle' }, + { value:'diamond' , name: 'diamond' }, + { value:'pin' , name: 'pin' }, + { value:'arrow' , name: 'arrow' }, + { value:'none' , name: 'none' }, + + ] + } + }, + } + }; + } + + private getChartsScatterBehaviorConfig(propertyData) { + return { + description: "基本信息", + title: "行为", + properties: { + size: { + title: "尺寸", + type: "cascade", + description: "组件的尺寸", + isExpand: true, + properties: { + width: { + title: "宽度（%）", + type: "number", + description: "组件的宽度", + editor: { + min: 0, + decimals: 0, + nullable: true, + }, + $converter: sizeConverter, + }, + height: { + title: "高度（px）", + type: "number", + description: "组件的高度", + editor: { + min: 0, + decimals: 0, + nullable: true, + }, + $converter: sizeConverter, + } + } + }, + name: { + title: "name", + type: 'string', + }, + // series: { + // title: 'series', + // type: "array", + // editor: { + // type: 'item-collection-editor', + // columns: [ + // {field: 'name', title: 'name', dataType: 'string'}, + // {field: 'xAxisIndex', title: 'xAxisIndex', dataType: 'number'}, + // {field: 'yAxisIndex', title: 'yAxisIndex', dataType: 'number'}, + // {field: 'clip', title: 'clip', dataType: 'boolean'}, + // {field: 'data', title: 'data', dataType: 'array', + // editor: { + // type: 'item-collection-editor', + // columns: [{field: 'value', title: 'value', dataType: 'number' }] + // } + // }, + // ], + // }, + // }, + + + } + }; + } + +} diff --git a/packages/charts-vue/components/charts-scatter/src/schema/charts-scatter.schema.json b/packages/charts-vue/components/charts-scatter/src/schema/charts-scatter.schema.json new file mode 100644 index 00000000000..4d0fe9ed82f --- /dev/null +++ b/packages/charts-vue/components/charts-scatter/src/schema/charts-scatter.schema.json @@ -0,0 +1,848 @@ +{ + "$schema": "https://json-schema.org/draft/2020-12/schema", + "$id": "https://farris-design.gitee.io/charts-scatter.schema.json", + "title": "charts-scatter", + "description": "A Farris Scatter Component", + "type": "object", + "properties": { + "id": { + "description": "The unique identifier for a Input Group", + "type": "string" + }, + "type": { + "description": "The type string of Input Group component", + "type": "string", + "default": "charts-scatter" + }, + "name": { + "type": "string", + "default": "charts-scatter" + }, + "code": { + "type": "string" + }, + "color": { + "type": "array", + "default": [ + "#5470c6", + "#91cc75", + "#fac858", + "#ee6666", + "#73c0de", + "#3ba272", + "#fc8452", + "#9a60b4", + "#ea7ccc" + ] + }, + "textStyle": { + "type": "object", + "properties": { + "color": { + "type": "string", + "default": "#808080" + }, + "fontStyle": { + "type": "string", + "enum": [ + "normal", + "italic", + "oblique" + ], + "default": "normal" + }, + "fontWeight": { + "type": "string", + "enum": [ + "normal", + "bold", + "bolder", + "lighter" + ], + "default": "normal" + }, + "fontFamily": { + "type": "string", + "enum": [ + "serif", + "monospace", + "Arial", + "Courier New" + ], + "default": "serif" + }, + "fontSize": { + "type": "number", + "default": 12 + }, + "lineHeight": { + "type": "number" + }, + "width": { + "type": "number" + }, + "height": { + "type": "number" + }, + "overflow": { + "type": "string", + "enum": [ + "none", + "truncate", + "break", + "breakAll" + ], + "default": "none" + }, + "ellipsis": { + "type": "string", + "description": "在overflow配置为'truncate'的时候，可以通过该属性配置末尾显示的文本", + "default": "..." + } + } + }, + "title": { + "type": "object", + "properties": { + "id": { + "type": "string", + "default": "" + }, + "show": { + "type": "boolean", + "default": true + }, + "text": { + "type": "string", + "default": "" + }, + "link": { + "type": "string", + "default": "" + }, + "target": { + "type": "string", + "enum": [ + "blank", + "self" + ], + "default": "blank" + }, + "textStyle": { + "type": "object", + "properties": { + "color": { + "type": "string", + "default": "#2D2F33" + }, + "fontStyle": { + "type": "string", + "enum": [ + "normal", + "italic", + "oblique" + ], + "default": "normal" + }, + "fontWeight": { + "type": [ + "string", + "number" + ], + "enum": [ + "normal", + "bold", + "bolder", + "lighter" + ], + "default": 500 + }, + "fontFamily": { + "type": "string", + "enum": [ + "serif", + "monospace", + "Arial", + "Courier New" + ], + "default": "serif" + }, + "lineHeight": { + "type": "number", + "default": 26 + } + } + }, + "subtext": { + "type": "string", + "default": "" + }, + "sublink": { + "type": "string", + "default": "" + }, + "subtarget": { + "type": "string", + "enum": [ + "blank", + "self" + ], + "default": "blank" + }, + "subtextStyle": { + "type": "object", + "properties": { + "color": { + "type": "string", + "default": "#2D2F33" + }, + "fontStyle": { + "type": "string", + "enum": [ + "normal", + "italic", + "oblique" + ], + "default": "normal" + }, + "fontWeight": { + "type": [ + "string", + "number" + ], + "enum": [ + "normal", + "bold", + "bolder", + "lighter" + ], + "default": "normal" + }, + "fontFamily": { + "type": "string", + "enum": [ + "serif", + "monospace", + "Arial", + "Courier New" + ], + "default": "serif" + }, + "lineHeight": { + "type": "number", + "default": 20 + } + } + }, + "triggerEvent": { + "type": "boolean", + "default": true + }, + "padding": { + "type": "array", + "items": { + "type": "number" + }, + "default": [ + 5, + 5, + 5, + 5 + ] + }, + "itemGap": { + "type": "number", + "default": 10 + }, + "top": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "bottom": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "left": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "right": { + "type": [ + "string", + "number" + ], + "default": "auto" + } + } + }, + "legend": { + "type": "object", + "properties": { + "id": { + "type": "string", + "default": "" + }, + "show": { + "type": "boolean", + "default": true + }, + "type": { + "type": "string", + "enum": [ + "plain", + "scroll" + ], + "default": "plain" + }, + "top": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "bottom": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "left": { + "type": [ + "string", + "number" + ], + "default": "center" + }, + "right": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "width": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "height": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "orient": { + "type": [ + "string" + ], + "enum": [ + "horizontal", + "vertical" + ], + "default": "horizontal" + }, + "align": { + "type": "string", + "enum": [ + "auto", + "left", + "right" + ], + "default": "auto" + }, + "padding": { + "type": "number", + "default": 5 + }, + "itemGap": { + "type": "number", + "default": 10 + }, + "itemWidth": { + "type": "number", + "default": 12 + }, + "itemHeight": { + "type": "number", + "default": 12 + }, + "lineStyle": { + "type": "object", + "properties": { + "color": { + "type": "array", + "items": { + "type": "string" + } + } + } + }, + "textStyle": { + "type": "object", + "properties": { + "color": { + "type": "string", + "default": "#666666" + }, + "fontSize": { + "type": "number", + "default": 12 + }, + "fontStyle": { + "type": "string", + "enum": [ + "normal", + "italic", + "oblique" + ], + "default": "normal" + }, + "fontWeight": { + "type": [ + "string", + "number" + ], + "enum": [ + "normal", + "bold", + "bolder", + "lighter" + ], + "default": 400 + }, + "fontFamily": { + "type": "string", + "enum": [ + "serif", + "monospace", + "Arial", + "Courier New" + ], + "default": "serif" + }, + "lineHeight": { + "type": "number", + "default": 16 + } + } + }, + "formatter": { + "type": "object", + "default": "" + }, + "tooltip": { + "type": "boolean", + "default": false + }, + "icon": { + "type": "string", + "default": "" + } + } + }, + "grid": { + "type": "object", + "properties": { + "id": { + "type": "string", + "default": "" + }, + "show": { + "type": "boolean", + "default": true + }, + "zlevel": { + "type": "number", + "default": 0 + }, + "z": { + "type": "number", + "default": 0 + }, + "top": { + "type": [ + "string", + "number" + ], + "default": 60 + }, + "bottom": { + "type": [ + "string", + "number" + ], + "default": 60 + }, + "left": { + "type": [ + "string", + "number" + ], + "default": "10%" + }, + "right": { + "type": [ + "string", + "number" + ], + "default": "10%" + }, + "width": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "height": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "containLabel": { + "type": "boolean", + "description": "grid 区域是否包含坐标轴的刻度标签。containLabel 为 false 的时候：grid.left grid.right grid.top grid.bottom grid.width grid.height 决定的是由坐标轴形成的矩形的尺寸和位置。这比较适用于多个 grid 进行对齐的场景，因为往往多个 grid 对齐的时候，是依据坐标轴来对齐的。containLabel 为 true 的时候：grid.left grid.right grid.top grid.bottom grid.width grid.height 决定的是包括了坐标轴标签在内的所有内容所形成的矩形的位置。这常用于『防止标签溢出』的场景，标签溢出指的是，标签长度动态变化时，可能会溢出容器或者覆盖其他组件", + "default": false + }, + "backgroundColor": { + "type": "string", + "default": "rgba(1,51,100,0.05)" + }, + "borderColor": { + "type": "string", + "default": "#FFFFFF" + }, + "borderWidth": { + "type": "number", + "default": 0 + }, + "tooltip": { + "type": "object", + "properties": { + "show": { + "type": "boolean" + }, + "padding": { + "type": "number" + }, + "trigger": { + "type": "string", + "enum": [ + "item", + "axis", + "none" + ] + }, + "formatter": { + "type": "object" + }, + "valueFormater": { + "type": "object" + }, + "textStyle": { + "type": "object", + "properties": { + "color": { + "type": "string" + }, + "fontStyle": { + "type": "string", + "enum": [ + "normal", + "italic", + "oblique" + ] + }, + "fontWeight": { + "type": [ + "string", + "number" + ], + "enum": [ + "normal", + "bold", + "bolder", + "lighter" + ] + }, + "fontFamily": { + "type": "string", + "enum": [ + "serif", + "monospace", + "Arial", + "Courier New" + ] + }, + "lineHeight": { + "type": "number" + } + } + }, + "axisPointer": { + "type": "object", + "properties": { + "type": { + "type": "string", + "enum": [ + "line", + "shadow", + "none", + "cross" + ], + "description": "指示器类型。" + }, + "axis": { + "type": "string", + "enum": [ + "x", + "y", + "radius", + "angle" + ], + "description": "指示器的坐标轴。默认情况，坐标系会自动选择显示哪个轴的 axisPointer（默认取类目轴或者时间轴）" + }, + "label": { + "type": "object", + "properties": { + "show": { + "type": "boolean", + "description": "是否显示文本标签。" + }, + "precision": { + "type": [ + "number", + "string" + ], + "description": "文本标签中数值的小数点精度。默认根据当前轴的值自动判断。也可以指定如 2 表示保留两位小数" + }, + "margin": { + "type": "number", + "description": "label 距离轴的距离" + }, + "color": { + "type": "string", + "description": "文字的颜色" + }, + "fontStyle": { + "type": "string", + "enum": [ + "normal", + "italic", + "oblique" + ], + "description": "文字字体的风格" + }, + "fontWeight": { + "type": [ + "number", + "string" + ], + "description": "文字字体的粗细. normal bold bolder lighter, 100|200|300|400" + }, + "fontFamily": { + "type": "string", + "description": "文字的字体系列. 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ..." + }, + "fontSize": { + "type": "number" + }, + "lineHeight": { + "type": "number" + }, + "width": { + "type": "number" + }, + "height": { + "type": "number" + }, + "overflow": { + "type": "string", + "enum": [ + "none", + "truncate", + "break", + "breakAll" + ], + "description": "文字超出宽度是否截断或者换行。配置width时有效" + }, + "padding": { + "type": "array" + }, + "backgroundColor": { + "type": "string" + }, + "borderColor": { + "type": "string" + }, + "borderWidth": { + "type": "number" + } + } + }, + "lineStyle": { + "type": "object", + "properties": { + "color": { + "type": "string" + }, + "width": { + "type": "number" + }, + "type": { + "type": [ + "string", + "array" + ], + "description": "线的类型" + }, + "cap": { + "type": "string", + "enum": [ + "butt", + "round", + "square" + ], + "description": "用于指定线段的绘制方式" + }, + "join": { + "type": "string", + "enum": [ + "bevel", + "round", + "miter" + ], + "description": "用于设置2个长度不为0的相连部分（线段，圆弧，曲线）如何连接在一起的属性" + } + } + } + } + } + } + } + } + }, + "appearance": { + "description": "", + "type": "object", + "properties": { + "class": { + "type": "string" + }, + "style": { + "type": "string" + } + }, + "default": {} + }, + "series": { + "type": "array", + "properties": { + "type": { + "type": "string", + "default": "scatter" + }, + "id": { + "type": "string", + "default": "" + }, + "name": { + "type": "string", + "default": "" + }, + "xAxisIndex": { + "type": "number", + "default": 0 + }, + "yAxisIndex": { + "type": "number", + "default": 0 + }, + "clip": { + "type": "boolean", + "default": true + }, + "data": { + "type": "array", + "properties" : { + "name": { + "type": "string" + }, + "value": { + "type": "number" + } + }, + "default": [] + } + + }, + "default": [{ + "symbolSize": 5, + "data": [ + [10.0, 8.04], + [8.07, 6.95], + [13.0, 7.58], + [9.05, 8.81], + [11.0, 8.33], + [14.0, 7.66], + [13.4, 6.81], + [10.0, 6.33], + [14.0, 8.96], + [12.5, 6.82], + [9.15, 7.2], + [11.5, 7.2], + [3.03, 4.23], + [12.2, 7.83], + [2.02, 4.47], + [1.05, 3.33], + [4.05, 4.96], + [6.03, 7.24], + [12.0, 6.26], + [12.0, 8.84], + [7.08, 5.82], + [5.02, 5.68] + ], + "type": "scatter" + } + + ] + }, + "size": { + "type": "object", + "default": { + "width": 100, + "height": 300 + } + }, + "tooltip": { + "type": "object", + "default": { + "trigger": "axis", + "axisPointer": { + "type": "cross" + } + } + + } + }, + "required": [ + "id", + "type" + ] +} \ No newline at end of file diff --git a/packages/charts-vue/components/charts-scatter/src/schema/schema-mapper.ts b/packages/charts-vue/components/charts-scatter/src/schema/schema-mapper.ts new file mode 100644 index 00000000000..04d7b384ed9 --- /dev/null +++ b/packages/charts-vue/components/charts-scatter/src/schema/schema-mapper.ts @@ -0,0 +1,17 @@ +import { resolveAppearance, MapperFunction } from '@farris/charts-vue/components/dynamic-resolver'; + + +function createTemplatePropResolver(name: string): MapperFunction { + return (key: string, content: string) => { + if (!content) { + return {}; + } + const templateInfo = { name, content }; + + return { text: templateInfo }; + }; +} + +export const schemaMapper = new Map([ + ['appearance', resolveAppearance] +]); diff --git a/packages/charts-vue/components/charts-scatter/src/schema/schema-resolver.ts b/packages/charts-vue/components/charts-scatter/src/schema/schema-resolver.ts new file mode 100644 index 00000000000..6fb4684c3dd --- /dev/null +++ b/packages/charts-vue/components/charts-scatter/src/schema/schema-resolver.ts @@ -0,0 +1,5 @@ +import { DynamicResolver } from '@farris/charts-vue/components/dynamic-resolver'; + +export function schemaResolver(resolver: DynamicResolver, schema: Record, context: Record): Record { + return schema; +} diff --git a/packages/charts-vue/components/dynamic-resolver/src/converter/cascade.converter.ts b/packages/charts-vue/components/dynamic-resolver/src/converter/cascade.converter.ts index dd01a44cb42..8888e523e21 100644 --- a/packages/charts-vue/components/dynamic-resolver/src/converter/cascade.converter.ts +++ b/packages/charts-vue/components/dynamic-resolver/src/converter/cascade.converter.ts @@ -29,4 +29,4 @@ export const gridConverter = generateCascadePropertyConverter('grid', { items: [ export const titleConverter = generateCascadePropertyConverter('title', { items: [] }); export const legendConverter = generateCascadePropertyConverter('legend', { items: [] }); export const xAxisConverter = generateCascadePropertyConverter('xAxis', { items: [] }); -export const yAxisConverter = generateCascadePropertyConverter('yAxis', { items: [] }); \ No newline at end of file +export const yAxisConverter = generateCascadePropertyConverter('yAxis', { items: [] }); diff --git a/packages/charts-vue/components/index.ts b/packages/charts-vue/components/index.ts index 3712cc10507..1816146ad34 100644 --- a/packages/charts-vue/components/index.ts +++ b/packages/charts-vue/components/index.ts @@ -33,6 +33,7 @@ export * from './components'; export {FChartsPie} from './charts-pie'; export {FChartsCombined} from './charts-combined'; +export {FChartsScatter} from './charts-scatter'; // 不注册设计时组件 diff --git a/packages/designer/src/components/composition/designer-context/use-mobile-designer-context.ts b/packages/designer/src/components/composition/designer-context/use-mobile-designer-context.ts index d78c7ceb760..915fa5e20c0 100644 --- a/packages/designer/src/components/composition/designer-context/use-mobile-designer-context.ts +++ b/packages/designer/src/components/composition/designer-context/use-mobile-designer-context.ts @@ -11,7 +11,7 @@ import { HtmlTemplate } from "../../../../../mobile-ui-vue/components/html-templ import { useMobileControlCreator } from "../control-creator/use-mobile-control-creator"; import { PageComponent, UsePageSchema } from "../../../components/types"; import ControllCategories from '../schema-repository/controller/mobile-categories'; -import { FChartsBar, FChartsLine, FChartsPie, FChartsCombined } from '@farris/charts-vue/components'; +import { FChartsBar, FChartsLine, FChartsPie, FChartsCombined, FChartsScatter } from '@farris/charts-vue/components'; export function useMobileDesignerContext(): UseDesignerContext { /** 设计器模式 */ @@ -24,10 +24,10 @@ export function useMobileDesignerContext(): UseDesignerContext { const componentsToRegister: any[] = [ Component, PageContainer, PageHeaderContainer, PageBodyContainer, PageFooterContainer, ContentContainer, Card, FloatContainer, Textarea, DatePicker, DateTimePicker, Lookup, - Navbar, ListView, Picker, NumberInput, Switch, CheckboxGroup, RadioGroup, + Navbar, ListView, Picker, NumberInput, Switch, CheckboxGroup, RadioGroup, Form, FormItem, InputGroup, Button, ButtonGroup, - FChartsBar, FChartsLine, FChartsPie, FChartsCombined + FChartsBar, FChartsLine, FChartsPie, FChartsCombined, FChartsScatter ]; diff --git a/packages/designer/src/components/types/toolbox/mobile-toolbox.json b/packages/designer/src/components/types/toolbox/mobile-toolbox.json index fc625db1c72..47def036478 100644 --- a/packages/designer/src/components/types/toolbox/mobile-toolbox.json +++ b/packages/designer/src/components/types/toolbox/mobile-toolbox.json @@ -18,18 +18,25 @@ "icon": "charts" }, { - "id": "FChartsPie", + "id": "ChartsPie", "type": "charts-pie", "name": "charts-pie", "category": "charts", "icon": "charts" }, { - "id": "FChartsCombined", + "id": "ChartsCombined", "type": "charts-combined", "name": "charts-combined", "category": "charts", "icon": "charts" + }, + { + "id": "ChartsScatter", + "type": "charts-scatter", + "name": "charts-scatter", + "category": "charts", + "icon": "charts" } ] }, -- Gitee From b825ef893c3cb21adfe1676c53511a4e03dae1f1 Mon Sep 17 00:00:00 2001 From: cy <15990550+langchaocy@user.noreply.gitee.com> Date: Tue, 8 Jul 2025 11:11:41 +0800 Subject: [PATCH 19/23] =?UTF-8?q?feature:=20=E4=B8=BA=E5=85=B6=E4=BB=96?= =?UTF-8?q?=E5=9B=BE=E8=A1=A8=E7=BB=84=E4=BB=B6=E6=96=B0=E5=A2=9E=E4=BA=86?= =?UTF-8?q?=E6=8B=96=E6=8B=BD=E6=B7=BB=E5=8A=A0=E5=8A=9F=E8=83=BD=EF=BC=8C?= =?UTF-8?q?=E5=B9=B6=E8=83=BD=E5=A4=9F=E9=85=8D=E7=BD=AE=E4=B8=80=E4=BA=9B?= =?UTF-8?q?=E7=AE=80=E5=8D=95=E7=9A=84=E5=B1=9E=E6=80=A7=E3=80=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../charts-common/src/props/dg-control.ts | 6 + .../components/charts-funnel/index.ts | 20 +- .../src/charts-funnel.component.tsx | 4 +- .../charts-funnel/src/charts-funnel.props.ts | 14 +- .../charts-funnel.design.component.tsx | 49 + .../src/designer/use-designer-rules.ts | 57 ++ .../charts-funnel.property-config.ts | 488 ++++++++++ .../src/schema/charts-funnel.schema.json | 842 +++++++++++++++++ .../charts-funnel/src/schema/schema-mapper.ts | 17 + .../src/schema/schema-resolver.ts | 5 + .../components/charts-graph/index.ts | 20 +- .../src/charts-graph.component.tsx | 4 +- .../charts-graph/src/charts-graph.props.ts | 13 + .../charts-graph.design.component.tsx | 49 + .../src/designer/use-designer-rules.ts | 57 ++ .../charts-graph.property-config.ts | 488 ++++++++++ .../src/schema/charts-graph.schema.json | 887 +++++++++++++++++ .../charts-graph/src/schema/schema-mapper.ts | 17 + .../src/schema/schema-resolver.ts | 5 + .../components/charts-process-gauge/index.ts | 20 +- .../src/charts-process-gauge.component.tsx | 14 +- .../src/charts-process-gauge.props.ts | 13 + .../charts-process-gauge.design.component.tsx | 49 + .../src/designer/use-designer-rules.ts | 57 ++ .../charts-process-gauge.property-config.ts | 488 ++++++++++ .../schema/charts-process-gauge.schema.json | 890 ++++++++++++++++++ .../src/schema/schema-mapper.ts | 17 + .../src/schema/schema-resolver.ts | 5 + .../components/charts-radar/index.ts | 20 +- .../src/charts-radar.component.tsx | 4 +- .../charts-radar/src/charts-radar.props.ts | 14 +- .../charts-radar.design.component.tsx | 53 ++ .../src/designer/use-designer-rules.ts | 57 ++ .../charts-radar.property-config.ts | 513 ++++++++++ .../src/schema/charts-radar.schema.json | 863 +++++++++++++++++ .../charts-radar/src/schema/schema-mapper.ts | 17 + .../src/schema/schema-resolver.ts | 5 + .../src/converter/cascade.converter.ts | 3 + packages/charts-vue/components/index.ts | 4 + .../use-mobile-designer-context.ts | 10 +- .../types/toolbox/mobile-toolbox.json | 43 +- 41 files changed, 6164 insertions(+), 37 deletions(-) create mode 100644 packages/charts-vue/components/charts-funnel/src/designer/charts-funnel.design.component.tsx create mode 100644 packages/charts-vue/components/charts-funnel/src/designer/use-designer-rules.ts create mode 100644 packages/charts-vue/components/charts-funnel/src/property-config/charts-funnel.property-config.ts create mode 100644 packages/charts-vue/components/charts-funnel/src/schema/charts-funnel.schema.json create mode 100644 packages/charts-vue/components/charts-funnel/src/schema/schema-mapper.ts create mode 100644 packages/charts-vue/components/charts-funnel/src/schema/schema-resolver.ts create mode 100644 packages/charts-vue/components/charts-graph/src/designer/charts-graph.design.component.tsx create mode 100644 packages/charts-vue/components/charts-graph/src/designer/use-designer-rules.ts create mode 100644 packages/charts-vue/components/charts-graph/src/property-config/charts-graph.property-config.ts create mode 100644 packages/charts-vue/components/charts-graph/src/schema/charts-graph.schema.json create mode 100644 packages/charts-vue/components/charts-graph/src/schema/schema-mapper.ts create mode 100644 packages/charts-vue/components/charts-graph/src/schema/schema-resolver.ts create mode 100644 packages/charts-vue/components/charts-process-gauge/src/designer/charts-process-gauge.design.component.tsx create mode 100644 packages/charts-vue/components/charts-process-gauge/src/designer/use-designer-rules.ts create mode 100644 packages/charts-vue/components/charts-process-gauge/src/property-config/charts-process-gauge.property-config.ts create mode 100644 packages/charts-vue/components/charts-process-gauge/src/schema/charts-process-gauge.schema.json create mode 100644 packages/charts-vue/components/charts-process-gauge/src/schema/schema-mapper.ts create mode 100644 packages/charts-vue/components/charts-process-gauge/src/schema/schema-resolver.ts create mode 100644 packages/charts-vue/components/charts-radar/src/designer/charts-radar.design.component.tsx create mode 100644 packages/charts-vue/components/charts-radar/src/designer/use-designer-rules.ts create mode 100644 packages/charts-vue/components/charts-radar/src/property-config/charts-radar.property-config.ts create mode 100644 packages/charts-vue/components/charts-radar/src/schema/charts-radar.schema.json create mode 100644 packages/charts-vue/components/charts-radar/src/schema/schema-mapper.ts create mode 100644 packages/charts-vue/components/charts-radar/src/schema/schema-resolver.ts diff --git a/packages/charts-vue/components/charts-common/src/props/dg-control.ts b/packages/charts-vue/components/charts-common/src/props/dg-control.ts index 2aac6a2ab31..a9ac897e7d6 100644 --- a/packages/charts-vue/components/charts-common/src/props/dg-control.ts +++ b/packages/charts-vue/components/charts-common/src/props/dg-control.ts @@ -3,6 +3,12 @@ export const DgControl = { 'charts-line': { type: 'charts-line', name: '折线图', icon: 'ChartsLine' }, + 'charts-pie': { type: 'charts-pie', name: '饼图', icon: 'ChartsPie' }, + + 'charts-combined': { type: 'charts-combined', name: '组合图表', icon: 'ChartsCombined' }, + + 'charts-scatter': { type: 'charts-scatter', name: '散点图', icon: 'ChartsScatter' }, + 'module': { type: 'Module', name: '模块', icon: 'Module' }, 'component': { type: 'component', name: '组件', icon: 'Component' }, diff --git a/packages/charts-vue/components/charts-funnel/index.ts b/packages/charts-vue/components/charts-funnel/index.ts index c1c6541f0c8..5882a6a31e5 100644 --- a/packages/charts-vue/components/charts-funnel/index.ts +++ b/packages/charts-vue/components/charts-funnel/index.ts @@ -1,6 +1,20 @@ -import FChartsFunnel from './src/charts-funnel.component'; -import { withInstall } from '@farris/charts-vue/components/charts-common'; +import FChartsFunnelInstallless from './src/charts-funnel.component'; +import { propsResolverGenerator } from './src/charts-funnel.props'; +import { withInstall, withRegister, withRegisterDesigner } from '@farris/charts-vue/components/charts-common'; +import ChartsFunnelDesign from './src/designer/charts-funnel.design.component'; export * from './src/charts-funnel.props'; + +const CHARTS_FUNNEL_REGISTERED_NAME = 'charts-funnel'; +// FChartsFunnel.register = (componentMap: Record, propsResolverMap: Record, configResolverMap: Record, resolverMap: Record) => { +// componentMap['charts-funnel'] = FChartsFunnel; +// propsResolverMap['charts-funnel'] = propsResolver; +// }; + +const FChartsFunnel = withInstall(FChartsFunnelInstallless) + +withRegister(FChartsFunnel, {name: CHARTS_FUNNEL_REGISTERED_NAME, propsResolverGenerator}) +withRegisterDesigner(FChartsFunnel, { name: CHARTS_FUNNEL_REGISTERED_NAME, propsResolverGenerator, designerComponent: ChartsFunnelDesign }); + export { FChartsFunnel }; -export default withInstall(FChartsFunnel); +export default FChartsFunnel diff --git a/packages/charts-vue/components/charts-funnel/src/charts-funnel.component.tsx b/packages/charts-vue/components/charts-funnel/src/charts-funnel.component.tsx index c03f66c8cc1..f739c44eb42 100644 --- a/packages/charts-vue/components/charts-funnel/src/charts-funnel.component.tsx +++ b/packages/charts-vue/components/charts-funnel/src/charts-funnel.component.tsx @@ -120,8 +120,8 @@ export default defineComponent({
diff --git a/packages/charts-vue/components/charts-funnel/src/charts-funnel.props.ts b/packages/charts-vue/components/charts-funnel/src/charts-funnel.props.ts index 077626ce6e9..5f34f1db61e 100644 --- a/packages/charts-vue/components/charts-funnel/src/charts-funnel.props.ts +++ b/packages/charts-vue/components/charts-funnel/src/charts-funnel.props.ts @@ -6,7 +6,10 @@ import { SelectProps, TooltipProps, SelectedModeType, TextStyleProps, LegendProps, TitleProps, GridProps, DataZoomProps, EmphasisProps } from '@farris/charts-vue/components/charts-common'; - +import { getPropsResolverGenerator } from '@farris/charts-vue/components/dynamic-resolver'; +import chartsFunnelSchema from './schema/charts-funnel.schema.json'; +import { schemaMapper } from './schema/schema-mapper'; +import { schemaResolver } from './schema/schema-resolver'; export type SortType = 'ascending' | 'descending' | 'none'; export type FunnelAlignType = 'left' | 'right' | 'center'; @@ -128,7 +131,16 @@ export const chartsFunnelProps = { theme: { type: String, default: 'defaultTheme' }, + size: { type: Object }, + ...animationProps }; export type ChartsFunnelProps = ExtractPropTypes; + +export const propsResolverGenerator = getPropsResolverGenerator( + chartsFunnelProps, + chartsFunnelSchema, + schemaMapper, + schemaResolver +); \ No newline at end of file diff --git a/packages/charts-vue/components/charts-funnel/src/designer/charts-funnel.design.component.tsx b/packages/charts-vue/components/charts-funnel/src/designer/charts-funnel.design.component.tsx new file mode 100644 index 00000000000..27de3850912 --- /dev/null +++ b/packages/charts-vue/components/charts-funnel/src/designer/charts-funnel.design.component.tsx @@ -0,0 +1,49 @@ +import { computed, defineComponent, inject, onMounted, ref, SetupContext, watch } from 'vue'; +import { DesignerHostService, DesignerItemContext } from '@farris/charts-vue/components/charts-common/src/types'; +import { useDesignerComponent } from '@farris/charts-vue/components/charts-common/src/compositions/use-designer-component'; + +import { ChartsFunnelProps, chartsFunnelProps } from '../charts-funnel.props'; +import FChartsFunnel from '../charts-funnel.component'; +import { useDesignerRules } from './use-designer-rules'; + +export default defineComponent({ + name: 'FmChartsFunnelDesign', + props: chartsFunnelProps, + emits: ['click'], + setup(props: ChartsFunnelProps, context: SetupContext) { + const elementRef = ref(); + const designerHostService = inject('designer-host-service'); + const designItemContext = inject('design-item-context') as DesignerItemContext; + const designerRulesComposition = useDesignerRules(designItemContext, designerHostService); + const componentInstance = useDesignerComponent(elementRef, designItemContext, designerRulesComposition); + onMounted(() => { + elementRef.value.componentInstance = componentInstance; + }); + + context.expose(componentInstance.value); + + const chartsFunnelProps1 = computed(() => ({ + size: props.size, + title: props.title, + grid: props.grid, + tooltip: props.tooltip, + legend: props.legend, + toolbox: props.toolbox, + animation: props.animation, + animationDuration: props.animationDuration, + animationEasingUpdate: props.animationEasingUpdate, + series: props.series.map((series) => { + const s = { ...series }; + s.type = 'funnel'; + return s; + }) + })); + + + return () => { + return ( + + ); + }; + } +}); diff --git a/packages/charts-vue/components/charts-funnel/src/designer/use-designer-rules.ts b/packages/charts-vue/components/charts-funnel/src/designer/use-designer-rules.ts new file mode 100644 index 00000000000..d01021c4b6c --- /dev/null +++ b/packages/charts-vue/components/charts-funnel/src/designer/use-designer-rules.ts @@ -0,0 +1,57 @@ +import { ref } from "vue"; +import { DraggingResolveContext } from "@farris/charts-vue/components/charts-common/src/types"; +import { DesignerHostService, DesignerItemContext, UseDesignerRules } from "@farris/charts-vue/components/charts-common/src/types"; +import { ChartsFunnelProperty } from "../property-config/charts-funnel.property-config"; + +export function useDesignerRules(designItemContext: DesignerItemContext, designerHostService?: DesignerHostService): UseDesignerRules { + + const triggerBelongedComponentToMoveWhenMoved = ref(false); + + const triggerBelongedComponentToDeleteWhenDeleted = ref(false); + + function canAccepts(draggingContext: DraggingResolveContext): boolean { + + return false; + } + + + function checkCanMoveComponent() { + return true; + } + function checkCanDeleteComponent() { + return true; + } + + function hideNestedPaddingInDesginerView() { + return true; + } + + function getStyles(): string { + return ' '; + } + + function getDesignerClass(): string { + return ' '; + } + + /** + * 获取属性配置 + */ + function getPropsConfig(componentId: string) { + const componentProp = new ChartsFunnelProperty(componentId, designerHostService); + const { schema } = designItemContext; + return componentProp.getPropertyConfig(schema); + } + + return { + canAccepts, + // triggerBelongedComponentToMoveWhenMoved, + // triggerBelongedComponentToDeleteWhenDeleted, + // checkCanMoveComponent, + // checkCanDeleteComponent, + hideNestedPaddingInDesginerView, + // getStyles, + // getDesignerClass, + getPropsConfig + }; +} diff --git a/packages/charts-vue/components/charts-funnel/src/property-config/charts-funnel.property-config.ts b/packages/charts-vue/components/charts-funnel/src/property-config/charts-funnel.property-config.ts new file mode 100644 index 00000000000..d2b8920006d --- /dev/null +++ b/packages/charts-vue/components/charts-funnel/src/property-config/charts-funnel.property-config.ts @@ -0,0 +1,488 @@ +import { BaseControlProperty } from "@farris/charts-vue/components/charts-common/src/props"; +import { gridConverter, titleConverter, sizeConverter, legendConverter, xAxisConverter, yAxisConverter } from "@farris/charts-vue/components/dynamic-resolver/src/converter"; + + +export class ChartsFunnelProperty extends BaseControlProperty { + + constructor(componentId: string, designerHostService: any) { + super(componentId, designerHostService); + } + public getPropertyConfig(propertyData: any) { + this.propertyConfig.categories['basic'] = this.getBasicPropConfig(propertyData); + + this.propertyConfig.categories['appearance'] = this.getAppearanceConfig(propertyData); + + this.propertyConfig.categories['behavior'] = this.getChartsFunnelBehaviorConfig(propertyData); + + this.propertyConfig.categories['title'] = this.getChartsFunnelTitleConfig(propertyData); + + this.propertyConfig.categories['legend'] = this.getChartsFunnelLegendConfig(propertyData); + + this.propertyConfig.categories['grid'] = this.getChartsFunnelGridConfig(propertyData); + + return this.propertyConfig; + } + private getChartsFunnelTitleConfig(propertyData) { + return{ + title: 'Title', + $converter: titleConverter, + properties: { + show: { + title: '标题是否展示', + type: 'boolean', + }, + text: { + title: '标题', + }, + link: { + title: '标题链接', + type: 'string', + }, + target: { + title: 'target', + type: 'select', + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'self' , name: '当前窗口打开' }, + { value:'blank' , name: '新窗口打开' }, + ] + } + }, + subtext: { + title: '副标题', + type: 'string', + }, + sublink: { + title: 'sublink', + type: 'string', + }, + subtarget: { + title: 'subtarget', + type: 'select', + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'self' , name: '当前窗口打开' }, + { value:'blank' , name: '新窗口打开' }, + ] + } + }, + itemGap: { + title: '主副标题之间的间距', + type: 'number', + }, + top: { + title: 'top', + type: [ + "string", + "number" + ], + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'top' , name: 'top' }, + { value:'middle' , name: 'middle' }, + { value:'bottom' , name: 'bottom' }, + + ] + } + }, + bottom: { + title: 'bottom', + type: [ + "string", + "number" + ], + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'top' , name: 'top' }, + { value:'middle' , name: 'middle' }, + { value:'bottom' , name: 'bottom' }, + + ] + } + }, + left: { + title: 'left', + type: [ + "string", + "number" + ], + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'left' , name: 'left' }, + { value:'center' , name: 'center' }, + { value:'right' , name: 'right' }, + + ] + } + }, + right: { + title: 'right', + type: [ + "string", + "number" + ], + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'left' , name: 'left' }, + { value:'center' , name: 'center' }, + { value:'right' , name: 'right' }, + + ] + } + }, + triggerEvent: { + title: '是否触发事件triggerEvent', + type: 'boolean', + }, + + } + }; + } + + private getChartsFunnelGridConfig(propertyData) { + return{ + title: 'Grid', + $converter: gridConverter, + properties: { + show: { + title: 'show', + type: 'boolean', + }, + zlevel: { + title: 'zlevel', + type: 'number', + }, + z: { + title: 'z', + type: 'number', + }, + top: { + title: 'top', + type: ['number',"string"] + }, + bottom: { + title: 'bottom', + type: ['number',"string"] + }, + left: { + title: 'left', + type: ['number',"string"] + }, + right: { + title: 'right', + type: ['number',"string"] + }, + width: { + title: 'width', + type: ['number',"string"] + }, + height: { + title: 'height', + type: ['number',"string"] + }, + containLabel: { + title: 'containLabel', + type: 'boolean', + }, + backgroundColor: { + title: 'backgroundColor', + type: 'string', + }, + borderColor: { + title: 'borderColor', + type: 'string', + }, + borderWidth: { + title: 'borderWidth', + type: 'number', + } + + } + }; + } + + private getChartsFunnelLegendConfig(propertyData) { + return{ + title: 'Legend', + $converter: legendConverter, + properties: { + show: { + title: 'show', + type: 'boolean', + }, + type: { + title: 'type', + type: 'string', + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'plain' , name: 'plain' }, + { value:'scroll' , name: 'scroll' }, + ] + } + }, + top: { + title: 'top', + type: [ + "string", + "number" + ], + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'top' , name: 'top' }, + { value:'middle' , name: 'middle' }, + { value:'bottom' , name: 'bottom' }, + + ] + } + }, + bottom: { + title: 'bottom', + type: [ + "string", + "number" + ], + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'top' , name: 'top' }, + { value:'middle' , name: 'middle' }, + { value:'bottom' , name: 'bottom' }, + + ] + } + }, + left: { + title: 'left', + type: [ + "string", + "number" + ], + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'left' , name: 'left' }, + { value:'center' , name: 'center' }, + { value:'right' , name: 'right' }, + + ] + } + }, + right: { + title: 'right', + type: [ + "string", + "number" + ], + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'left' , name: 'left' }, + { value:'center' , name: 'center' }, + { value:'right' , name: 'right' }, + + ] + } + }, + width: { + title: 'width', + type: [ + "string", + "number" + ], + }, + height: { + title: 'height', + type: [ + "string", + "number" + ], + }, + orient: { + title: 'orient', + type: 'string', + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'horizontal' , name: 'horizontal' }, + { value:'vertical' , name: 'vertical' }, + ] + } + }, + align: { + title: 'align', + type: 'string', + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'left' , name: 'left' }, + { value:'right' , name: 'right' }, + + ] + } + }, + padding: { + title: 'padding', + type: 'number', + }, + itemGap: { + title: 'itemGap', + type: 'number', + }, + itemWidth: { + title: 'itemWidth', + type: 'number', + }, + itemHeight: { + title: 'itemHeight', + type: 'number', + }, + tooltip: { + title: 'tooltip', + type: 'boolean', + }, + icon: { + title: 'icon', + type: 'string', + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'circle' , name: 'circle' }, + { value:'rect' , name: 'rect' }, + { value:'roundRect' , name: 'roundRect' }, + { value:'triangle' , name: 'triangle' }, + { value:'diamond' , name: 'diamond' }, + { value:'pin' , name: 'pin' }, + { value:'arrow' , name: 'arrow' }, + { value:'none' , name: 'none' }, + + ] + } + }, + } + }; + } + + private getChartsFunnelBehaviorConfig(propertyData) { + return { + description: "基本信息", + title: "行为", + properties: { + size: { + title: "尺寸", + type: "cascade", + description: "组件的尺寸", + isExpand: true, + properties: { + width: { + title: "宽度（%）", + type: "number", + description: "组件的宽度", + editor: { + min: 0, + decimals: 0, + nullable: true, + }, + $converter: sizeConverter, + }, + height: { + title: "高度（px）", + type: "number", + description: "组件的高度", + editor: { + min: 0, + decimals: 0, + nullable: true, + }, + $converter: sizeConverter, + } + } + }, + name: { + title: "name", + type: 'string', + }, + // series: { + // title: 'series', + // type: "array", + // editor: { + // type: 'item-collection-editor', + // columns: [ + // {field: 'name', title: 'name', dataType: 'string'}, + // {field: 'xAxisIndex', title: 'xAxisIndex', dataType: 'number'}, + // {field: 'yAxisIndex', title: 'yAxisIndex', dataType: 'number'}, + // {field: 'clip', title: 'clip', dataType: 'boolean'}, + // {field: 'data', title: 'data', dataType: 'array', + // editor: { + // type: 'item-collection-editor', + // columns: [{field: 'value', title: 'value', dataType: 'number' }] + // } + // }, + // ], + // }, + // }, + + + } + }; + } + +} diff --git a/packages/charts-vue/components/charts-funnel/src/schema/charts-funnel.schema.json b/packages/charts-vue/components/charts-funnel/src/schema/charts-funnel.schema.json new file mode 100644 index 00000000000..5764fc99470 --- /dev/null +++ b/packages/charts-vue/components/charts-funnel/src/schema/charts-funnel.schema.json @@ -0,0 +1,842 @@ +{ + "$schema": "https://json-schema.org/draft/2020-12/schema", + "$id": "https://farris-design.gitee.io/charts-funnel.schema.json", + "title": "charts-funnel", + "description": "A Farris Funnel Component", + "type": "object", + "properties": { + "id": { + "description": "The unique identifier for a Input Group", + "type": "string" + }, + "type": { + "description": "The type string of Input Group component", + "type": "string", + "default": "charts-funnel" + }, + "name": { + "type": "string", + "default": "charts-funnel" + }, + "code": { + "type": "string" + }, + "color": { + "type": "array", + "default": [ + "#5470c6", + "#91cc75", + "#fac858", + "#ee6666", + "#73c0de", + "#3ba272", + "#fc8452", + "#9a60b4", + "#ea7ccc" + ] + }, + "textStyle": { + "type": "object", + "properties": { + "color": { + "type": "string", + "default": "#808080" + }, + "fontStyle": { + "type": "string", + "enum": [ + "normal", + "italic", + "oblique" + ], + "default": "normal" + }, + "fontWeight": { + "type": "string", + "enum": [ + "normal", + "bold", + "bolder", + "lighter" + ], + "default": "normal" + }, + "fontFamily": { + "type": "string", + "enum": [ + "serif", + "monospace", + "Arial", + "Courier New" + ], + "default": "serif" + }, + "fontSize": { + "type": "number", + "default": 12 + }, + "lineHeight": { + "type": "number" + }, + "width": { + "type": "number" + }, + "height": { + "type": "number" + }, + "overflow": { + "type": "string", + "enum": [ + "none", + "truncate", + "break", + "breakAll" + ], + "default": "none" + }, + "ellipsis": { + "type": "string", + "description": "在overflow配置为'truncate'的时候，可以通过该属性配置末尾显示的文本", + "default": "..." + } + } + }, + "title": { + "type": "object", + "properties": { + "id": { + "type": "string", + "default": "" + }, + "show": { + "type": "boolean", + "default": true + }, + "text": { + "type": "string", + "default": "" + }, + "link": { + "type": "string", + "default": "" + }, + "target": { + "type": "string", + "enum": [ + "blank", + "self" + ], + "default": "blank" + }, + "textStyle": { + "type": "object", + "properties": { + "color": { + "type": "string", + "default": "#2D2F33" + }, + "fontStyle": { + "type": "string", + "enum": [ + "normal", + "italic", + "oblique" + ], + "default": "normal" + }, + "fontWeight": { + "type": [ + "string", + "number" + ], + "enum": [ + "normal", + "bold", + "bolder", + "lighter" + ], + "default": 500 + }, + "fontFamily": { + "type": "string", + "enum": [ + "serif", + "monospace", + "Arial", + "Courier New" + ], + "default": "serif" + }, + "lineHeight": { + "type": "number", + "default": 26 + } + } + }, + "subtext": { + "type": "string", + "default": "" + }, + "sublink": { + "type": "string", + "default": "" + }, + "subtarget": { + "type": "string", + "enum": [ + "blank", + "self" + ], + "default": "blank" + }, + "subtextStyle": { + "type": "object", + "properties": { + "color": { + "type": "string", + "default": "#2D2F33" + }, + "fontStyle": { + "type": "string", + "enum": [ + "normal", + "italic", + "oblique" + ], + "default": "normal" + }, + "fontWeight": { + "type": [ + "string", + "number" + ], + "enum": [ + "normal", + "bold", + "bolder", + "lighter" + ], + "default": "normal" + }, + "fontFamily": { + "type": "string", + "enum": [ + "serif", + "monospace", + "Arial", + "Courier New" + ], + "default": "serif" + }, + "lineHeight": { + "type": "number", + "default": 20 + } + } + }, + "triggerEvent": { + "type": "boolean", + "default": true + }, + "padding": { + "type": "array", + "items": { + "type": "number" + }, + "default": [ + 5, + 5, + 5, + 5 + ] + }, + "itemGap": { + "type": "number", + "default": 10 + }, + "top": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "bottom": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "left": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "right": { + "type": [ + "string", + "number" + ], + "default": "auto" + } + } + }, + "legend": { + "type": "object", + "properties": { + "id": { + "type": "string", + "default": "" + }, + "show": { + "type": "boolean", + "default": true + }, + "type": { + "type": "string", + "enum": [ + "plain", + "scroll" + ], + "default": "plain" + }, + "top": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "bottom": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "left": { + "type": [ + "string", + "number" + ], + "default": "center" + }, + "right": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "width": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "height": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "orient": { + "type": [ + "string" + ], + "enum": [ + "horizontal", + "vertical" + ], + "default": "horizontal" + }, + "align": { + "type": "string", + "enum": [ + "auto", + "left", + "right" + ], + "default": "auto" + }, + "padding": { + "type": "number", + "default": 5 + }, + "itemGap": { + "type": "number", + "default": 10 + }, + "itemWidth": { + "type": "number", + "default": 12 + }, + "itemHeight": { + "type": "number", + "default": 12 + }, + "lineStyle": { + "type": "object", + "properties": { + "color": { + "type": "array", + "items": { + "type": "string" + } + } + } + }, + "textStyle": { + "type": "object", + "properties": { + "color": { + "type": "string", + "default": "#666666" + }, + "fontSize": { + "type": "number", + "default": 12 + }, + "fontStyle": { + "type": "string", + "enum": [ + "normal", + "italic", + "oblique" + ], + "default": "normal" + }, + "fontWeight": { + "type": [ + "string", + "number" + ], + "enum": [ + "normal", + "bold", + "bolder", + "lighter" + ], + "default": 400 + }, + "fontFamily": { + "type": "string", + "enum": [ + "serif", + "monospace", + "Arial", + "Courier New" + ], + "default": "serif" + }, + "lineHeight": { + "type": "number", + "default": 16 + } + } + }, + "formatter": { + "type": "object", + "default": "" + }, + "tooltip": { + "type": "boolean", + "default": false + }, + "icon": { + "type": "string", + "default": "" + } + } + }, + "grid": { + "type": "object", + "properties": { + "id": { + "type": "string", + "default": "" + }, + "show": { + "type": "boolean", + "default": false + }, + "zlevel": { + "type": "number", + "default": 0 + }, + "z": { + "type": "number", + "default": 0 + }, + "top": { + "type": [ + "string", + "number" + ], + "default": 60 + }, + "bottom": { + "type": [ + "string", + "number" + ], + "default": 60 + }, + "left": { + "type": [ + "string", + "number" + ], + "default": "10%" + }, + "right": { + "type": [ + "string", + "number" + ], + "default": "10%" + }, + "width": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "height": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "containLabel": { + "type": "boolean", + "description": "grid 区域是否包含坐标轴的刻度标签。containLabel 为 false 的时候：grid.left grid.right grid.top grid.bottom grid.width grid.height 决定的是由坐标轴形成的矩形的尺寸和位置。这比较适用于多个 grid 进行对齐的场景，因为往往多个 grid 对齐的时候，是依据坐标轴来对齐的。containLabel 为 true 的时候：grid.left grid.right grid.top grid.bottom grid.width grid.height 决定的是包括了坐标轴标签在内的所有内容所形成的矩形的位置。这常用于『防止标签溢出』的场景，标签溢出指的是，标签长度动态变化时，可能会溢出容器或者覆盖其他组件", + "default": false + }, + "backgroundColor": { + "type": "string", + "default": "rgba(1,51,100,0.05)" + }, + "borderColor": { + "type": "string", + "default": "#FFFFFF" + }, + "borderWidth": { + "type": "number", + "default": 0 + }, + "tooltip": { + "type": "object", + "properties": { + "show": { + "type": "boolean" + }, + "padding": { + "type": "number" + }, + "trigger": { + "type": "string", + "enum": [ + "item", + "axis", + "none" + ] + }, + "formatter": { + "type": "object" + }, + "valueFormater": { + "type": "object" + }, + "textStyle": { + "type": "object", + "properties": { + "color": { + "type": "string" + }, + "fontStyle": { + "type": "string", + "enum": [ + "normal", + "italic", + "oblique" + ] + }, + "fontWeight": { + "type": [ + "string", + "number" + ], + "enum": [ + "normal", + "bold", + "bolder", + "lighter" + ] + }, + "fontFamily": { + "type": "string", + "enum": [ + "serif", + "monospace", + "Arial", + "Courier New" + ] + }, + "lineHeight": { + "type": "number" + } + } + }, + "axisPointer": { + "type": "object", + "properties": { + "type": { + "type": "string", + "enum": [ + "line", + "shadow", + "none", + "cross" + ], + "description": "指示器类型。" + }, + "axis": { + "type": "string", + "enum": [ + "x", + "y", + "radius", + "angle" + ], + "description": "指示器的坐标轴。默认情况，坐标系会自动选择显示哪个轴的 axisPointer（默认取类目轴或者时间轴）" + }, + "label": { + "type": "object", + "properties": { + "show": { + "type": "boolean", + "description": "是否显示文本标签。" + }, + "precision": { + "type": [ + "number", + "string" + ], + "description": "文本标签中数值的小数点精度。默认根据当前轴的值自动判断。也可以指定如 2 表示保留两位小数" + }, + "margin": { + "type": "number", + "description": "label 距离轴的距离" + }, + "color": { + "type": "string", + "description": "文字的颜色" + }, + "fontStyle": { + "type": "string", + "enum": [ + "normal", + "italic", + "oblique" + ], + "description": "文字字体的风格" + }, + "fontWeight": { + "type": [ + "number", + "string" + ], + "description": "文字字体的粗细. normal bold bolder lighter, 100|200|300|400" + }, + "fontFamily": { + "type": "string", + "description": "文字的字体系列. 'serif' , 'monospace', 'Arial', 'Courier' 'New', 'Microsoft YaHei', ..." + }, + "fontSize": { + "type": "number" + }, + "lineHeight": { + "type": "number" + }, + "width": { + "type": "number" + }, + "height": { + "type": "number" + }, + "overflow": { + "type": "string", + "enum": [ + "none", + "truncate", + "break", + "breakAll" + ], + "description": "文字超出宽度是否截断或者换行。配置width时有效" + }, + "padding": { + "type": "array" + }, + "backgroundColor": { + "type": "string" + }, + "borderColor": { + "type": "string" + }, + "borderWidth": { + "type": "number" + } + } + }, + "lineStyle": { + "type": "object", + "properties": { + "color": { + "type": "string" + }, + "width": { + "type": "number" + }, + "type": { + "type": [ + "string", + "array" + ], + "description": "线的类型" + }, + "cap": { + "type": "string", + "enum": [ + "butt", + "round", + "square" + ], + "description": "用于指定线段的绘制方式" + }, + "join": { + "type": "string", + "enum": [ + "bevel", + "round", + "miter" + ], + "description": "用于设置2个长度不为0的相连部分（线段，圆弧，曲线）如何连接在一起的属性" + } + } + } + } + } + } + } + } + }, + "appearance": { + "description": "", + "type": "object", + "properties": { + "class": { + "type": "string" + }, + "style": { + "type": "string" + } + }, + "default": {} + }, + "series": { + "type": "array", + "properties": { + "type": { + "type": "string", + "default": "funnel" + }, + "id": { + "type": "string", + "default": "" + }, + "name": { + "type": "string", + "default": "" + }, + "data": { + "type": "array", + "properties" : { + "name": { + "type": "string" + }, + "value": { + "type": "number" + } + }, + "default": [] + } + + }, + "default": [ + { + "type": "funnel", + "left": "10%", + "top": 60, + "bottom": 60, + "width": "80%", + "min": 0, + "max": 100, + "minSize": "0%", + "maxSize": "100%", + "sort": "descending", + "gap": 2, + "label": { + "show": true, + "textBorderColor": "rgb(20, 20, 20)", + "textBorderWidth": 0, + "fontWeight": 500, + "color": "rgb(70, 70, 70)" + + }, + "labelLine": { + "length": 10, + "lineStyle": { + "width": 1, + "type": "solid" + } + }, + "itemStyle": { + "borderColor": "#fff", + "borderWidth": 1 + }, + "emphasis": { + "label": { + "fontSize": 10 + } + }, + "data": [ + { "value": 60, "name": "Visit" }, + { "value": 40, "name": "Inquiry" }, + { "value": 20, "name": "Order" }, + { "value": 80, "name": "Click" }, + { "value": 100, "name": "Show" } + ] + } + ] + }, + "size": { + "type": "object", + "default": { + "width": 100, + "height": 350 + } + } + }, + "required": [ + "id", + "type" + ] +} \ No newline at end of file diff --git a/packages/charts-vue/components/charts-funnel/src/schema/schema-mapper.ts b/packages/charts-vue/components/charts-funnel/src/schema/schema-mapper.ts new file mode 100644 index 00000000000..04d7b384ed9 --- /dev/null +++ b/packages/charts-vue/components/charts-funnel/src/schema/schema-mapper.ts @@ -0,0 +1,17 @@ +import { resolveAppearance, MapperFunction } from '@farris/charts-vue/components/dynamic-resolver'; + + +function createTemplatePropResolver(name: string): MapperFunction { + return (key: string, content: string) => { + if (!content) { + return {}; + } + const templateInfo = { name, content }; + + return { text: templateInfo }; + }; +} + +export const schemaMapper = new Map([ + ['appearance', resolveAppearance] +]); diff --git a/packages/charts-vue/components/charts-funnel/src/schema/schema-resolver.ts b/packages/charts-vue/components/charts-funnel/src/schema/schema-resolver.ts new file mode 100644 index 00000000000..6fb4684c3dd --- /dev/null +++ b/packages/charts-vue/components/charts-funnel/src/schema/schema-resolver.ts @@ -0,0 +1,5 @@ +import { DynamicResolver } from '@farris/charts-vue/components/dynamic-resolver'; + +export function schemaResolver(resolver: DynamicResolver, schema: Record, context: Record): Record { + return schema; +} diff --git a/packages/charts-vue/components/charts-graph/index.ts b/packages/charts-vue/components/charts-graph/index.ts index 64c55107ae1..356d5ff9beb 100644 --- a/packages/charts-vue/components/charts-graph/index.ts +++ b/packages/charts-vue/components/charts-graph/index.ts @@ -1,6 +1,20 @@ -import FChartsGraph from './src/charts-graph.component'; -import { withInstall } from '@farris/charts-vue/components/charts-common'; +import FChartsGraphInstallless from './src/charts-graph.component'; +import { propsResolverGenerator } from './src/charts-graph.props'; +import { withInstall, withRegister, withRegisterDesigner } from '@farris/charts-vue/components/charts-common'; +import ChartsGraphDesign from './src/designer/charts-graph.design.component'; export * from './src/charts-graph.props'; + +const CHARTS_GRAPH_REGISTERED_NAME = 'charts-graph'; +// FChartsGraph.register = (componentMap: Record, propsResolverMap: Record, configResolverMap: Record, resolverMap: Record) => { +// componentMap['charts-graph'] = FChartsGraph; +// propsResolverMap['charts-graph'] = propsResolver; +// }; + +const FChartsGraph = withInstall(FChartsGraphInstallless) + +withRegister(FChartsGraph, {name: CHARTS_GRAPH_REGISTERED_NAME, propsResolverGenerator}) +withRegisterDesigner(FChartsGraph, { name: CHARTS_GRAPH_REGISTERED_NAME, propsResolverGenerator, designerComponent: ChartsGraphDesign }); + export { FChartsGraph }; -export default withInstall(FChartsGraph); +export default FChartsGraph diff --git a/packages/charts-vue/components/charts-graph/src/charts-graph.component.tsx b/packages/charts-vue/components/charts-graph/src/charts-graph.component.tsx index cbaa6675d7e..395775566f0 100644 --- a/packages/charts-vue/components/charts-graph/src/charts-graph.component.tsx +++ b/packages/charts-vue/components/charts-graph/src/charts-graph.component.tsx @@ -122,8 +122,8 @@ export default defineComponent({
); diff --git a/packages/charts-vue/components/charts-graph/src/charts-graph.props.ts b/packages/charts-vue/components/charts-graph/src/charts-graph.props.ts index 74cf8359b9b..3990cc5ce25 100644 --- a/packages/charts-vue/components/charts-graph/src/charts-graph.props.ts +++ b/packages/charts-vue/components/charts-graph/src/charts-graph.props.ts @@ -5,6 +5,10 @@ import { SelectProps, TooltipProps, SelectedModeType, TextStyleProps, LegendProps, TitleProps, GridProps, DataZoomProps } from '@farris/charts-vue/components/charts-common'; +import { getPropsResolverGenerator } from '@farris/charts-vue/components/dynamic-resolver'; +import chartsGraphSchema from './schema/charts-graph.schema.json'; +import { schemaMapper } from './schema/schema-mapper'; +import { schemaResolver } from './schema/schema-resolver'; export const graphDataProps = { @@ -196,7 +200,16 @@ export const chartsGraphProps = { // yAxis: { type: Object as PropType }, + size: { type: Object}, + ...animationProps }; export type ChartsGraphProps = ExtractPropTypes; + +export const propsResolverGenerator = getPropsResolverGenerator( + chartsGraphProps, + chartsGraphSchema, + schemaMapper, + schemaResolver +); \ No newline at end of file diff --git a/packages/charts-vue/components/charts-graph/src/designer/charts-graph.design.component.tsx b/packages/charts-vue/components/charts-graph/src/designer/charts-graph.design.component.tsx new file mode 100644 index 00000000000..5e2ba152bb7 --- /dev/null +++ b/packages/charts-vue/components/charts-graph/src/designer/charts-graph.design.component.tsx @@ -0,0 +1,49 @@ +import { computed, defineComponent, inject, onMounted, ref, SetupContext, watch } from 'vue'; +import { DesignerHostService, DesignerItemContext } from '@farris/charts-vue/components/charts-common/src/types'; +import { useDesignerComponent } from '@farris/charts-vue/components/charts-common/src/compositions/use-designer-component'; + +import { ChartsGraphProps, chartsGraphProps } from '../charts-graph.props'; +import FChartsGraph from '../charts-graph.component'; +import { useDesignerRules } from './use-designer-rules'; + +export default defineComponent({ + name: 'FmChartsGraphDesign', + props: chartsGraphProps, + emits: ['click'], + setup(props: ChartsGraphProps, context: SetupContext) { + const elementRef = ref(); + const designerHostService = inject('designer-host-service'); + const designItemContext = inject('design-item-context') as DesignerItemContext; + const designerRulesComposition = useDesignerRules(designItemContext, designerHostService); + const componentInstance = useDesignerComponent(elementRef, designItemContext, designerRulesComposition); + onMounted(() => { + elementRef.value.componentInstance = componentInstance; + }); + + context.expose(componentInstance.value); + + const chartsGraphProps1 = computed(() => ({ + size: props.size, + title: props.title, + grid: props.grid, + tooltip: props.tooltip, + legend: props.legend, + toolbox: props.toolbox, + animation: props.animation, + animationDuration: props.animationDuration, + animationEasingUpdate: props.animationEasingUpdate, + series: props.series.map((series) => { + const s = { ...series }; + s.type = 'graph'; + return s; + }) + })); + + + return () => { + return ( + + ); + }; + } +}); diff --git a/packages/charts-vue/components/charts-graph/src/designer/use-designer-rules.ts b/packages/charts-vue/components/charts-graph/src/designer/use-designer-rules.ts new file mode 100644 index 00000000000..b46013865d6 --- /dev/null +++ b/packages/charts-vue/components/charts-graph/src/designer/use-designer-rules.ts @@ -0,0 +1,57 @@ +import { ref } from "vue"; +import { DraggingResolveContext } from "@farris/charts-vue/components/charts-common/src/types"; +import { DesignerHostService, DesignerItemContext, UseDesignerRules } from "@farris/charts-vue/components/charts-common/src/types"; +import { ChartsGraphProperty } from "../property-config/charts-graph.property-config"; + +export function useDesignerRules(designItemContext: DesignerItemContext, designerHostService?: DesignerHostService): UseDesignerRules { + + const triggerBelongedComponentToMoveWhenMoved = ref(false); + + const triggerBelongedComponentToDeleteWhenDeleted = ref(false); + + function canAccepts(draggingContext: DraggingResolveContext): boolean { + + return false; + } + + + function checkCanMoveComponent() { + return true; + } + function checkCanDeleteComponent() { + return true; + } + + function hideNestedPaddingInDesginerView() { + return true; + } + + function getStyles(): string { + return ' '; + } + + function getDesignerClass(): string { + return ' '; + } + + /** + * 获取属性配置 + */ + function getPropsConfig(componentId: string) { + const componentProp = new ChartsGraphProperty(componentId, designerHostService); + const { schema } = designItemContext; + return componentProp.getPropertyConfig(schema); + } + + return { + canAccepts, + // triggerBelongedComponentToMoveWhenMoved, + // triggerBelongedComponentToDeleteWhenDeleted, + // checkCanMoveComponent, + // checkCanDeleteComponent, + hideNestedPaddingInDesginerView, + // getStyles, + // getDesignerClass, + getPropsConfig + }; +} diff --git a/packages/charts-vue/components/charts-graph/src/property-config/charts-graph.property-config.ts b/packages/charts-vue/components/charts-graph/src/property-config/charts-graph.property-config.ts new file mode 100644 index 00000000000..21c544e7e91 --- /dev/null +++ b/packages/charts-vue/components/charts-graph/src/property-config/charts-graph.property-config.ts @@ -0,0 +1,488 @@ +import { BaseControlProperty } from "@farris/charts-vue/components/charts-common/src/props"; +import { gridConverter, titleConverter, sizeConverter, legendConverter, xAxisConverter, yAxisConverter } from "@farris/charts-vue/components/dynamic-resolver/src/converter"; + + +export class ChartsGraphProperty extends BaseControlProperty { + + constructor(componentId: string, designerHostService: any) { + super(componentId, designerHostService); + } + public getPropertyConfig(propertyData: any) { + this.propertyConfig.categories['basic'] = this.getBasicPropConfig(propertyData); + + this.propertyConfig.categories['appearance'] = this.getAppearanceConfig(propertyData); + + this.propertyConfig.categories['behavior'] = this.getChartsGraphBehaviorConfig(propertyData); + + this.propertyConfig.categories['title'] = this.getChartsGraphTitleConfig(propertyData); + + this.propertyConfig.categories['legend'] = this.getChartsGraphLegendConfig(propertyData); + + this.propertyConfig.categories['grid'] = this.getChartsGraphGridConfig(propertyData); + + return this.propertyConfig; + } + private getChartsGraphTitleConfig(propertyData) { + return{ + title: 'Title', + $converter: titleConverter, + properties: { + show: { + title: '标题是否展示', + type: 'boolean', + }, + text: { + title: '标题', + }, + link: { + title: '标题链接', + type: 'string', + }, + target: { + title: 'target', + type: 'select', + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'self' , name: '当前窗口打开' }, + { value:'blank' , name: '新窗口打开' }, + ] + } + }, + subtext: { + title: '副标题', + type: 'string', + }, + sublink: { + title: 'sublink', + type: 'string', + }, + subtarget: { + title: 'subtarget', + type: 'select', + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'self' , name: '当前窗口打开' }, + { value:'blank' , name: '新窗口打开' }, + ] + } + }, + itemGap: { + title: '主副标题之间的间距', + type: 'number', + }, + top: { + title: 'top', + type: [ + "string", + "number" + ], + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'top' , name: 'top' }, + { value:'middle' , name: 'middle' }, + { value:'bottom' , name: 'bottom' }, + + ] + } + }, + bottom: { + title: 'bottom', + type: [ + "string", + "number" + ], + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'top' , name: 'top' }, + { value:'middle' , name: 'middle' }, + { value:'bottom' , name: 'bottom' }, + + ] + } + }, + left: { + title: 'left', + type: [ + "string", + "number" + ], + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'left' , name: 'left' }, + { value:'center' , name: 'center' }, + { value:'right' , name: 'right' }, + + ] + } + }, + right: { + title: 'right', + type: [ + "string", + "number" + ], + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'left' , name: 'left' }, + { value:'center' , name: 'center' }, + { value:'right' , name: 'right' }, + + ] + } + }, + triggerEvent: { + title: '是否触发事件triggerEvent', + type: 'boolean', + }, + + } + }; + } + + private getChartsGraphGridConfig(propertyData) { + return{ + title: 'Grid', + $converter: gridConverter, + properties: { + show: { + title: 'show', + type: 'boolean', + }, + zlevel: { + title: 'zlevel', + type: 'number', + }, + z: { + title: 'z', + type: 'number', + }, + top: { + title: 'top', + type: ['number',"string"] + }, + bottom: { + title: 'bottom', + type: ['number',"string"] + }, + left: { + title: 'left', + type: ['number',"string"] + }, + right: { + title: 'right', + type: ['number',"string"] + }, + width: { + title: 'width', + type: ['number',"string"] + }, + height: { + title: 'height', + type: ['number',"string"] + }, + containLabel: { + title: 'containLabel', + type: 'boolean', + }, + backgroundColor: { + title: 'backgroundColor', + type: 'string', + }, + borderColor: { + title: 'borderColor', + type: 'string', + }, + borderWidth: { + title: 'borderWidth', + type: 'number', + } + + } + }; + } + + private getChartsGraphLegendConfig(propertyData) { + return{ + title: 'Legend', + $converter: legendConverter, + properties: { + show: { + title: 'show', + type: 'boolean', + }, + type: { + title: 'type', + type: 'string', + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'plain' , name: 'plain' }, + { value:'scroll' , name: 'scroll' }, + ] + } + }, + top: { + title: 'top', + type: [ + "string", + "number" + ], + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'top' , name: 'top' }, + { value:'middle' , name: 'middle' }, + { value:'bottom' , name: 'bottom' }, + + ] + } + }, + bottom: { + title: 'bottom', + type: [ + "string", + "number" + ], + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'top' , name: 'top' }, + { value:'middle' , name: 'middle' }, + { value:'bottom' , name: 'bottom' }, + + ] + } + }, + left: { + title: 'left', + type: [ + "string", + "number" + ], + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'left' , name: 'left' }, + { value:'center' , name: 'center' }, + { value:'right' , name: 'right' }, + + ] + } + }, + right: { + title: 'right', + type: [ + "string", + "number" + ], + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'left' , name: 'left' }, + { value:'center' , name: 'center' }, + { value:'right' , name: 'right' }, + + ] + } + }, + width: { + title: 'width', + type: [ + "string", + "number" + ], + }, + height: { + title: 'height', + type: [ + "string", + "number" + ], + }, + orient: { + title: 'orient', + type: 'string', + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'horizontal' , name: 'horizontal' }, + { value:'vertical' , name: 'vertical' }, + ] + } + }, + align: { + title: 'align', + type: 'string', + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'left' , name: 'left' }, + { value:'right' , name: 'right' }, + + ] + } + }, + padding: { + title: 'padding', + type: 'number', + }, + itemGap: { + title: 'itemGap', + type: 'number', + }, + itemWidth: { + title: 'itemWidth', + type: 'number', + }, + itemHeight: { + title: 'itemHeight', + type: 'number', + }, + tooltip: { + title: 'tooltip', + type: 'boolean', + }, + icon: { + title: 'icon', + type: 'string', + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'circle' , name: 'circle' }, + { value:'rect' , name: 'rect' }, + { value:'roundRect' , name: 'roundRect' }, + { value:'triangle' , name: 'triangle' }, + { value:'diamond' , name: 'diamond' }, + { value:'pin' , name: 'pin' }, + { value:'arrow' , name: 'arrow' }, + { value:'none' , name: 'none' }, + + ] + } + }, + } + }; + } + + private getChartsGraphBehaviorConfig(propertyData) { + return { + description: "基本信息", + title: "行为", + properties: { + size: { + title: "尺寸", + type: "cascade", + description: "组件的尺寸", + isExpand: true, + properties: { + width: { + title: "宽度（%）", + type: "number", + description: "组件的宽度", + editor: { + min: 0, + decimals: 0, + nullable: true, + }, + $converter: sizeConverter, + }, + height: { + title: "高度（px）", + type: "number", + description: "组件的高度", + editor: { + min: 0, + decimals: 0, + nullable: true, + }, + $converter: sizeConverter, + } + } + }, + name: { + title: "name", + type: 'string', + }, + // series: { + // title: 'series', + // type: "array", + // editor: { + // type: 'item-collection-editor', + // columns: [ + // {field: 'name', title: 'name', dataType: 'string'}, + // {field: 'xAxisIndex', title: 'xAxisIndex', dataType: 'number'}, + // {field: 'yAxisIndex', title: 'yAxisIndex', dataType: 'number'}, + // {field: 'clip', title: 'clip', dataType: 'boolean'}, + // {field: 'data', title: 'data', dataType: 'array', + // editor: { + // type: 'item-collection-editor', + // columns: [{field: 'value', title: 'value', dataType: 'number' }] + // } + // }, + // ], + // }, + // }, + + + } + }; + } + +} diff --git a/packages/charts-vue/components/charts-graph/src/schema/charts-graph.schema.json b/packages/charts-vue/components/charts-graph/src/schema/charts-graph.schema.json new file mode 100644 index 00000000000..9aa2ac52d16 --- /dev/null +++ b/packages/charts-vue/components/charts-graph/src/schema/charts-graph.schema.json @@ -0,0 +1,887 @@ +{ + "$schema": "https://json-schema.org/draft/2020-12/schema", + "$id": "https://farris-design.gitee.io/charts-graph.schema.json", + "title": "charts-graph", + "description": "A Farris Graph Component", + "type": "object", + "properties": { + "id": { + "description": "The unique identifier for a Input Group", + "type": "string" + }, + "type": { + "description": "The type string of Input Group component", + "type": "string", + "default": "charts-graph" + }, + "name": { + "type": "string", + "default": "charts-graph" + }, + "code": { + "type": "string" + }, + "color": { + "type": "array", + "default": [ + "#5470c6", + "#91cc75", + "#fac858", + "#ee6666", + "#73c0de", + "#3ba272", + "#fc8452", + "#9a60b4", + "#ea7ccc" + ] + }, + "textStyle": { + "type": "object", + "properties": { + "color": { + "type": "string", + "default": "#808080" + }, + "fontStyle": { + "type": "string", + "enum": [ + "normal", + "italic", + "oblique" + ], + "default": "normal" + }, + "fontWeight": { + "type": "string", + "enum": [ + "normal", + "bold", + "bolder", + "lighter" + ], + "default": "normal" + }, + "fontFamily": { + "type": "string", + "enum": [ + "serif", + "monospace", + "Arial", + "Courier New" + ], + "default": "serif" + }, + "fontSize": { + "type": "number", + "default": 12 + }, + "lineHeight": { + "type": "number" + }, + "width": { + "type": "number" + }, + "height": { + "type": "number" + }, + "overflow": { + "type": "string", + "enum": [ + "none", + "truncate", + "break", + "breakAll" + ], + "default": "none" + }, + "ellipsis": { + "type": "string", + "description": "在overflow配置为'truncate'的时候，可以通过该属性配置末尾显示的文本", + "default": "..." + } + } + }, + "title": { + "type": "object", + "properties": { + "id": { + "type": "string", + "default": "" + }, + "show": { + "type": "boolean", + "default": true + }, + "text": { + "type": "string", + "default": "" + }, + "link": { + "type": "string", + "default": "" + }, + "target": { + "type": "string", + "enum": [ + "blank", + "self" + ], + "default": "blank" + }, + "textStyle": { + "type": "object", + "properties": { + "color": { + "type": "string", + "default": "#2D2F33" + }, + "fontStyle": { + "type": "string", + "enum": [ + "normal", + "italic", + "oblique" + ], + "default": "normal" + }, + "fontWeight": { + "type": [ + "string", + "number" + ], + "enum": [ + "normal", + "bold", + "bolder", + "lighter" + ], + "default": 500 + }, + "fontFamily": { + "type": "string", + "enum": [ + "serif", + "monospace", + "Arial", + "Courier New" + ], + "default": "serif" + }, + "lineHeight": { + "type": "number", + "default": 26 + } + } + }, + "subtext": { + "type": "string", + "default": "" + }, + "sublink": { + "type": "string", + "default": "" + }, + "subtarget": { + "type": "string", + "enum": [ + "blank", + "self" + ], + "default": "blank" + }, + "subtextStyle": { + "type": "object", + "properties": { + "color": { + "type": "string", + "default": "#2D2F33" + }, + "fontStyle": { + "type": "string", + "enum": [ + "normal", + "italic", + "oblique" + ], + "default": "normal" + }, + "fontWeight": { + "type": [ + "string", + "number" + ], + "enum": [ + "normal", + "bold", + "bolder", + "lighter" + ], + "default": "normal" + }, + "fontFamily": { + "type": "string", + "enum": [ + "serif", + "monospace", + "Arial", + "Courier New" + ], + "default": "serif" + }, + "lineHeight": { + "type": "number", + "default": 20 + } + } + }, + "triggerEvent": { + "type": "boolean", + "default": true + }, + "padding": { + "type": "array", + "items": { + "type": "number" + }, + "default": [ + 5, + 5, + 5, + 5 + ] + }, + "itemGap": { + "type": "number", + "default": 10 + }, + "top": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "bottom": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "left": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "right": { + "type": [ + "string", + "number" + ], + "default": "auto" + } + } + }, + "legend": { + "type": "object", + "properties": { + "id": { + "type": "string", + "default": "" + }, + "show": { + "type": "boolean", + "default": true + }, + "type": { + "type": "string", + "enum": [ + "plain", + "scroll" + ], + "default": "plain" + }, + "top": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "bottom": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "left": { + "type": [ + "string", + "number" + ], + "default": "center" + }, + "right": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "width": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "height": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "orient": { + "type": [ + "string" + ], + "enum": [ + "horizontal", + "vertical" + ], + "default": "horizontal" + }, + "align": { + "type": "string", + "enum": [ + "auto", + "left", + "right" + ], + "default": "auto" + }, + "padding": { + "type": "number", + "default": 5 + }, + "itemGap": { + "type": "number", + "default": 10 + }, + "itemWidth": { + "type": "number", + "default": 12 + }, + "itemHeight": { + "type": "number", + "default": 12 + }, + "lineStyle": { + "type": "object", + "properties": { + "color": { + "type": "array", + "items": { + "type": "string" + } + } + } + }, + "textStyle": { + "type": "object", + "properties": { + "color": { + "type": "string", + "default": "#666666" + }, + "fontSize": { + "type": "number", + "default": 12 + }, + "fontStyle": { + "type": "string", + "enum": [ + "normal", + "italic", + "oblique" + ], + "default": "normal" + }, + "fontWeight": { + "type": [ + "string", + "number" + ], + "enum": [ + "normal", + "bold", + "bolder", + "lighter" + ], + "default": 400 + }, + "fontFamily": { + "type": "string", + "enum": [ + "serif", + "monospace", + "Arial", + "Courier New" + ], + "default": "serif" + }, + "lineHeight": { + "type": "number", + "default": 16 + } + } + }, + "formatter": { + "type": "object", + "default": "" + }, + "tooltip": { + "type": "boolean", + "default": false + }, + "icon": { + "type": "string", + "default": "" + } + } + }, + "grid": { + "type": "object", + "properties": { + "id": { + "type": "string", + "default": "" + }, + "show": { + "type": "boolean", + "default": false + }, + "zlevel": { + "type": "number", + "default": 0 + }, + "z": { + "type": "number", + "default": 0 + }, + "top": { + "type": [ + "string", + "number" + ], + "default": 60 + }, + "bottom": { + "type": [ + "string", + "number" + ], + "default": 60 + }, + "left": { + "type": [ + "string", + "number" + ], + "default": "10%" + }, + "right": { + "type": [ + "string", + "number" + ], + "default": "10%" + }, + "width": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "height": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "containLabel": { + "type": "boolean", + "description": "grid 区域是否包含坐标轴的刻度标签。containLabel 为 false 的时候：grid.left grid.right grid.top grid.bottom grid.width grid.height 决定的是由坐标轴形成的矩形的尺寸和位置。这比较适用于多个 grid 进行对齐的场景，因为往往多个 grid 对齐的时候，是依据坐标轴来对齐的。containLabel 为 true 的时候：grid.left grid.right grid.top grid.bottom grid.width grid.height 决定的是包括了坐标轴标签在内的所有内容所形成的矩形的位置。这常用于『防止标签溢出』的场景，标签溢出指的是，标签长度动态变化时，可能会溢出容器或者覆盖其他组件", + "default": false + }, + "backgroundColor": { + "type": "string", + "default": "rgba(1,51,100,0.05)" + }, + "borderColor": { + "type": "string", + "default": "#FFFFFF" + }, + "borderWidth": { + "type": "number", + "default": 0 + }, + "tooltip": { + "type": "object", + "properties": { + "show": { + "type": "boolean" + }, + "padding": { + "type": "number" + }, + "trigger": { + "type": "string", + "enum": [ + "item", + "axis", + "none" + ] + }, + "formatter": { + "type": "object" + }, + "valueFormater": { + "type": "object" + }, + "textStyle": { + "type": "object", + "properties": { + "color": { + "type": "string" + }, + "fontStyle": { + "type": "string", + "enum": [ + "normal", + "italic", + "oblique" + ] + }, + "fontWeight": { + "type": [ + "string", + "number" + ], + "enum": [ + "normal", + "bold", + "bolder", + "lighter" + ] + }, + "fontFamily": { + "type": "string", + "enum": [ + "serif", + "monospace", + "Arial", + "Courier New" + ] + }, + "lineHeight": { + "type": "number" + } + } + }, + "axisPointer": { + "type": "object", + "properties": { + "type": { + "type": "string", + "enum": [ + "line", + "shadow", + "none", + "cross" + ], + "description": "指示器类型。" + }, + "axis": { + "type": "string", + "enum": [ + "x", + "y", + "radius", + "angle" + ], + "description": "指示器的坐标轴。默认情况，坐标系会自动选择显示哪个轴的 axisPointer（默认取类目轴或者时间轴）" + }, + "label": { + "type": "object", + "properties": { + "show": { + "type": "boolean", + "description": "是否显示文本标签。" + }, + "precision": { + "type": [ + "number", + "string" + ], + "description": "文本标签中数值的小数点精度。默认根据当前轴的值自动判断。也可以指定如 2 表示保留两位小数" + }, + "margin": { + "type": "number", + "description": "label 距离轴的距离" + }, + "color": { + "type": "string", + "description": "文字的颜色" + }, + "fontStyle": { + "type": "string", + "enum": [ + "normal", + "italic", + "oblique" + ], + "description": "文字字体的风格" + }, + "fontWeight": { + "type": [ + "number", + "string" + ], + "description": "文字字体的粗细. normal bold bolder lighter, 100|200|300|400" + }, + "fontFamily": { + "type": "string", + "description": "文字的字体系列. 'serif' , 'monospace', 'Arial', 'Courier' 'New', 'Microsoft YaHei', ..." + }, + "fontSize": { + "type": "number" + }, + "lineHeight": { + "type": "number" + }, + "width": { + "type": "number" + }, + "height": { + "type": "number" + }, + "overflow": { + "type": "string", + "enum": [ + "none", + "truncate", + "break", + "breakAll" + ], + "description": "文字超出宽度是否截断或者换行。配置width时有效" + }, + "padding": { + "type": "array" + }, + "backgroundColor": { + "type": "string" + }, + "borderColor": { + "type": "string" + }, + "borderWidth": { + "type": "number" + } + } + }, + "lineStyle": { + "type": "object", + "properties": { + "color": { + "type": "string" + }, + "width": { + "type": "number" + }, + "type": { + "type": [ + "string", + "array" + ], + "description": "线的类型" + }, + "cap": { + "type": "string", + "enum": [ + "butt", + "round", + "square" + ], + "description": "用于指定线段的绘制方式" + }, + "join": { + "type": "string", + "enum": [ + "bevel", + "round", + "miter" + ], + "description": "用于设置2个长度不为0的相连部分（线段，圆弧，曲线）如何连接在一起的属性" + } + } + } + } + } + } + } + } + }, + "appearance": { + "description": "", + "type": "object", + "properties": { + "class": { + "type": "string" + }, + "style": { + "type": "string" + } + }, + "default": {} + }, + "series": { + "type": "array", + "properties": { + "type": { + "type": "string", + "default": "graph" + }, + "id": { + "type": "string", + "default": "" + }, + "name": { + "type": "string", + "default": "" + }, + "data": { + "type": "array", + "properties": { + "name": { + "type": "string" + }, + "value": { + "type": "number" + } + }, + "default": [] + } + }, + "default": [ + { + "type": "graph", + "layout": "none", + "symbolSize": 50, + "roam": true, + "label": { + "show": true + }, + "edgeSymbol": [ + "circle", + "arrow" + ], + "edgeSymbolSize": [ + 4, + 10 + ], + "edgeLabel": { + "fontSize": 14 + }, + "data": [ + { + "name": "Node 1", + "x": 300, + "y": 300 + }, + { + "name": "Node 2", + "x": 800, + "y": 300 + }, + { + "name": "Node 3", + "x": 550, + "y": 100 + }, + { + "name": "Node 4", + "x": 550, + "y": 500 + } + ], + "links": [ + { + "source": 0, + "target": 1, + "symbolSize": [ + 5, + 20 + ], + "label": { + "show": true + }, + "lineStyle": { + "width": 5, + "curveness": 0.2 + } + }, + { + "source": "Node 2", + "target": "Node 1", + "label": { + "show": true + }, + "lineStyle": { + "curveness": 0.2 + } + }, + { + "source": "Node 1", + "target": "Node 3" + }, + { + "source": "Node 2", + "target": "Node 3" + }, + { + "source": "Node 2", + "target": "Node 4" + }, + { + "source": "Node 1", + "target": "Node 4" + } + ], + "lineStyle": { + "opacity": 0.9, + "width": 2, + "curveness": 0 + } + } + ] + }, + "size": { + "type": "object", + "default": { + "width": 100, + "height": 350 + } + } + }, + "required": [ + "id", + "type" + ] +} \ No newline at end of file diff --git a/packages/charts-vue/components/charts-graph/src/schema/schema-mapper.ts b/packages/charts-vue/components/charts-graph/src/schema/schema-mapper.ts new file mode 100644 index 00000000000..04d7b384ed9 --- /dev/null +++ b/packages/charts-vue/components/charts-graph/src/schema/schema-mapper.ts @@ -0,0 +1,17 @@ +import { resolveAppearance, MapperFunction } from '@farris/charts-vue/components/dynamic-resolver'; + + +function createTemplatePropResolver(name: string): MapperFunction { + return (key: string, content: string) => { + if (!content) { + return {}; + } + const templateInfo = { name, content }; + + return { text: templateInfo }; + }; +} + +export const schemaMapper = new Map([ + ['appearance', resolveAppearance] +]); diff --git a/packages/charts-vue/components/charts-graph/src/schema/schema-resolver.ts b/packages/charts-vue/components/charts-graph/src/schema/schema-resolver.ts new file mode 100644 index 00000000000..6fb4684c3dd --- /dev/null +++ b/packages/charts-vue/components/charts-graph/src/schema/schema-resolver.ts @@ -0,0 +1,5 @@ +import { DynamicResolver } from '@farris/charts-vue/components/dynamic-resolver'; + +export function schemaResolver(resolver: DynamicResolver, schema: Record, context: Record): Record { + return schema; +} diff --git a/packages/charts-vue/components/charts-process-gauge/index.ts b/packages/charts-vue/components/charts-process-gauge/index.ts index d53242c11e5..cb29639524f 100644 --- a/packages/charts-vue/components/charts-process-gauge/index.ts +++ b/packages/charts-vue/components/charts-process-gauge/index.ts @@ -1,6 +1,20 @@ -import FChartsProcessGauge from './src/charts-process-gauge.component'; -import { withInstall } from '@farris/charts-vue/components/charts-common'; +import FChartsProcessGaugeInstallless from './src/charts-process-gauge.component'; +import { propsResolverGenerator } from './src/charts-process-gauge.props'; +import { withInstall, withRegister, withRegisterDesigner } from '@farris/charts-vue/components/charts-common'; +import ChartsProcessGaugeDesign from './src/designer/charts-process-gauge.design.component'; export * from './src/charts-process-gauge.props'; + +const CHARTS_PROCESS_GAUGE_REGISTERED_NAME = 'charts-process-gauge'; +// FChartsProcessGauge.register = (componentMap: Record, propsResolverMap: Record, configResolverMap: Record, resolverMap: Record) => { +// componentMap['charts-process-gauge'] = FChartsProcessGauge; +// propsResolverMap['charts-process-gauge'] = propsResolver; +// }; + +const FChartsProcessGauge = withInstall(FChartsProcessGaugeInstallless) + +withRegister(FChartsProcessGauge, {name: CHARTS_PROCESS_GAUGE_REGISTERED_NAME, propsResolverGenerator}) +withRegisterDesigner(FChartsProcessGauge, { name: CHARTS_PROCESS_GAUGE_REGISTERED_NAME, propsResolverGenerator, designerComponent: ChartsProcessGaugeDesign }); + export { FChartsProcessGauge }; -export default withInstall(FChartsProcessGauge); +export default FChartsProcessGauge diff --git a/packages/charts-vue/components/charts-process-gauge/src/charts-process-gauge.component.tsx b/packages/charts-vue/components/charts-process-gauge/src/charts-process-gauge.component.tsx index 23a9c76fff6..ac741fe3391 100644 --- a/packages/charts-vue/components/charts-process-gauge/src/charts-process-gauge.component.tsx +++ b/packages/charts-vue/components/charts-process-gauge/src/charts-process-gauge.component.tsx @@ -59,11 +59,11 @@ export default defineComponent({ const baseOption: any = { ...theme, - title: props.title || {}, - grid: props.grid || {}, - tooltip: props.tooltip || {}, - legend: props.legend || {}, - toolbox: props.toolbox || {}, + title: props.title, + grid: props.grid, + tooltip: props.tooltip, + legend: props.legend, + toolbox: props.toolbox, animation: props.animation, animationDuration: props.animationDuration, animationEasingUpdate: props.animationEasingUpdate, @@ -120,8 +120,8 @@ export default defineComponent({
); diff --git a/packages/charts-vue/components/charts-process-gauge/src/charts-process-gauge.props.ts b/packages/charts-vue/components/charts-process-gauge/src/charts-process-gauge.props.ts index b8e77768326..8a8ebb84c0b 100644 --- a/packages/charts-vue/components/charts-process-gauge/src/charts-process-gauge.props.ts +++ b/packages/charts-vue/components/charts-process-gauge/src/charts-process-gauge.props.ts @@ -4,6 +4,10 @@ import { GridProps, DataZoomProps, LineStyleProps, textStyleProps, borderProps, AxisLabelProps, animationProps, ToolboxProps } from '@farris/charts-vue/components/charts-common'; +import { getPropsResolverGenerator } from '@farris/charts-vue/components/dynamic-resolver'; +import chartsProcessGaugeSchema from './schema/charts-process-gauge.schema.json'; +import { schemaMapper } from './schema/schema-mapper'; +import { schemaResolver } from './schema/schema-resolver'; export const gaugeAxisLineProps = { show: { type: Boolean, default: true }, @@ -153,7 +157,16 @@ export const chartsProcessGaugeProps = { theme: { type: String, default: 'defaultTheme' }, + size: { type: Object }, + ...animationProps }; export type ChartsProcessGaugeProps = ExtractPropTypes; + +export const propsResolverGenerator = getPropsResolverGenerator( + chartsProcessGaugeProps, + chartsProcessGaugeSchema, + schemaMapper, + schemaResolver +); \ No newline at end of file diff --git a/packages/charts-vue/components/charts-process-gauge/src/designer/charts-process-gauge.design.component.tsx b/packages/charts-vue/components/charts-process-gauge/src/designer/charts-process-gauge.design.component.tsx new file mode 100644 index 00000000000..cb597027dbd --- /dev/null +++ b/packages/charts-vue/components/charts-process-gauge/src/designer/charts-process-gauge.design.component.tsx @@ -0,0 +1,49 @@ +import { computed, defineComponent, inject, onMounted, ref, SetupContext, watch } from 'vue'; +import { DesignerHostService, DesignerItemContext } from '@farris/charts-vue/components/charts-common/src/types'; +import { useDesignerComponent } from '@farris/charts-vue/components/charts-common/src/compositions/use-designer-component'; + +import { ChartsProcessGaugeProps, chartsProcessGaugeProps } from '../charts-process-gauge.props'; +import FChartsProcessGauge from '../charts-process-gauge.component'; +import { useDesignerRules } from './use-designer-rules'; + +export default defineComponent({ + name: 'FmChartsProcessGaugeDesign', + props: chartsProcessGaugeProps, + emits: ['click'], + setup(props: ChartsProcessGaugeProps, context: SetupContext) { + const elementRef = ref(); + const designerHostService = inject('designer-host-service'); + const designItemContext = inject('design-item-context') as DesignerItemContext; + const designerRulesComposition = useDesignerRules(designItemContext, designerHostService); + const componentInstance = useDesignerComponent(elementRef, designItemContext, designerRulesComposition); + onMounted(() => { + elementRef.value.componentInstance = componentInstance; + }); + + context.expose(componentInstance.value); + + const chartsProcessGaugeProps1 = computed(() => ({ + size: props.size, + title: props.title, + grid: props.grid, + tooltip: props.tooltip, + legend: props.legend, + toolbox: props.toolbox, + animation: props.animation, + animationDuration: props.animationDuration, + animationEasingUpdate: props.animationEasingUpdate, + series: props.series.map((series) => { + const s = { ...series }; + s.type = 'gauge'; + return s; + }) + })); + + + return () => { + return ( + + ); + }; + } +}); diff --git a/packages/charts-vue/components/charts-process-gauge/src/designer/use-designer-rules.ts b/packages/charts-vue/components/charts-process-gauge/src/designer/use-designer-rules.ts new file mode 100644 index 00000000000..2ae912a684d --- /dev/null +++ b/packages/charts-vue/components/charts-process-gauge/src/designer/use-designer-rules.ts @@ -0,0 +1,57 @@ +import { ref } from "vue"; +import { DraggingResolveContext } from "@farris/charts-vue/components/charts-common/src/types"; +import { DesignerHostService, DesignerItemContext, UseDesignerRules } from "@farris/charts-vue/components/charts-common/src/types"; +import { ChartsProcessGaugeProperty } from "../property-config/charts-process-gauge.property-config"; + +export function useDesignerRules(designItemContext: DesignerItemContext, designerHostService?: DesignerHostService): UseDesignerRules { + + const triggerBelongedComponentToMoveWhenMoved = ref(false); + + const triggerBelongedComponentToDeleteWhenDeleted = ref(false); + + function canAccepts(draggingContext: DraggingResolveContext): boolean { + + return false; + } + + + function checkCanMoveComponent() { + return true; + } + function checkCanDeleteComponent() { + return true; + } + + function hideNestedPaddingInDesginerView() { + return true; + } + + function getStyles(): string { + return ' '; + } + + function getDesignerClass(): string { + return ' '; + } + + /** + * 获取属性配置 + */ + function getPropsConfig(componentId: string) { + const componentProp = new ChartsProcessGaugeProperty(componentId, designerHostService); + const { schema } = designItemContext; + return componentProp.getPropertyConfig(schema); + } + + return { + canAccepts, + // triggerBelongedComponentToMoveWhenMoved, + // triggerBelongedComponentToDeleteWhenDeleted, + // checkCanMoveComponent, + // checkCanDeleteComponent, + hideNestedPaddingInDesginerView, + // getStyles, + // getDesignerClass, + getPropsConfig + }; +} diff --git a/packages/charts-vue/components/charts-process-gauge/src/property-config/charts-process-gauge.property-config.ts b/packages/charts-vue/components/charts-process-gauge/src/property-config/charts-process-gauge.property-config.ts new file mode 100644 index 00000000000..1cd2382016f --- /dev/null +++ b/packages/charts-vue/components/charts-process-gauge/src/property-config/charts-process-gauge.property-config.ts @@ -0,0 +1,488 @@ +import { BaseControlProperty } from "@farris/charts-vue/components/charts-common/src/props"; +import { gridConverter, titleConverter, sizeConverter, legendConverter } from "@farris/charts-vue/components/dynamic-resolver/src/converter"; + + +export class ChartsProcessGaugeProperty extends BaseControlProperty { + + constructor(componentId: string, designerHostService: any) { + super(componentId, designerHostService); + } + public getPropertyConfig(propertyData: any) { + this.propertyConfig.categories['basic'] = this.getBasicPropConfig(propertyData); + + this.propertyConfig.categories['appearance'] = this.getAppearanceConfig(propertyData); + + this.propertyConfig.categories['behavior'] = this.getChartsProcessGaugeBehaviorConfig(propertyData); + + this.propertyConfig.categories['title'] = this.getChartsProcessGaugeTitleConfig(propertyData); + + this.propertyConfig.categories['legend'] = this.getChartsProcessGaugeLegendConfig(propertyData); + + this.propertyConfig.categories['grid'] = this.getChartsProcessGaugeGridConfig(propertyData); + + return this.propertyConfig; + } + private getChartsProcessGaugeTitleConfig(propertyData) { + return{ + title: 'Title', + $converter: titleConverter, + properties: { + show: { + title: '标题是否展示', + type: 'boolean', + }, + text: { + title: '标题', + }, + link: { + title: '标题链接', + type: 'string', + }, + target: { + title: 'target', + type: 'select', + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'self' , name: '当前窗口打开' }, + { value:'blank' , name: '新窗口打开' }, + ] + } + }, + subtext: { + title: '副标题', + type: 'string', + }, + sublink: { + title: 'sublink', + type: 'string', + }, + subtarget: { + title: 'subtarget', + type: 'select', + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'self' , name: '当前窗口打开' }, + { value:'blank' , name: '新窗口打开' }, + ] + } + }, + itemGap: { + title: '主副标题之间的间距', + type: 'number', + }, + top: { + title: 'top', + type: [ + "string", + "number" + ], + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'top' , name: 'top' }, + { value:'middle' , name: 'middle' }, + { value:'bottom' , name: 'bottom' }, + + ] + } + }, + bottom: { + title: 'bottom', + type: [ + "string", + "number" + ], + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'top' , name: 'top' }, + { value:'middle' , name: 'middle' }, + { value:'bottom' , name: 'bottom' }, + + ] + } + }, + left: { + title: 'left', + type: [ + "string", + "number" + ], + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'left' , name: 'left' }, + { value:'center' , name: 'center' }, + { value:'right' , name: 'right' }, + + ] + } + }, + right: { + title: 'right', + type: [ + "string", + "number" + ], + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'left' , name: 'left' }, + { value:'center' , name: 'center' }, + { value:'right' , name: 'right' }, + + ] + } + }, + triggerEvent: { + title: '是否触发事件triggerEvent', + type: 'boolean', + }, + + } + }; + } + + private getChartsProcessGaugeGridConfig(propertyData) { + return{ + title: 'Grid', + $converter: gridConverter, + properties: { + show: { + title: 'show', + type: 'boolean', + }, + zlevel: { + title: 'zlevel', + type: 'number', + }, + z: { + title: 'z', + type: 'number', + }, + top: { + title: 'top', + type: ['number',"string"] + }, + bottom: { + title: 'bottom', + type: ['number',"string"] + }, + left: { + title: 'left', + type: ['number',"string"] + }, + right: { + title: 'right', + type: ['number',"string"] + }, + width: { + title: 'width', + type: ['number',"string"] + }, + height: { + title: 'height', + type: ['number',"string"] + }, + containLabel: { + title: 'containLabel', + type: 'boolean', + }, + backgroundColor: { + title: 'backgroundColor', + type: 'string', + }, + borderColor: { + title: 'borderColor', + type: 'string', + }, + borderWidth: { + title: 'borderWidth', + type: 'number', + } + + } + }; + } + + private getChartsProcessGaugeLegendConfig(propertyData) { + return{ + title: 'Legend', + $converter: legendConverter, + properties: { + show: { + title: 'show', + type: 'boolean', + }, + type: { + title: 'type', + type: 'string', + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'plain' , name: 'plain' }, + { value:'scroll' , name: 'scroll' }, + ] + } + }, + top: { + title: 'top', + type: [ + "string", + "number" + ], + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'top' , name: 'top' }, + { value:'middle' , name: 'middle' }, + { value:'bottom' , name: 'bottom' }, + + ] + } + }, + bottom: { + title: 'bottom', + type: [ + "string", + "number" + ], + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'top' , name: 'top' }, + { value:'middle' , name: 'middle' }, + { value:'bottom' , name: 'bottom' }, + + ] + } + }, + left: { + title: 'left', + type: [ + "string", + "number" + ], + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'left' , name: 'left' }, + { value:'center' , name: 'center' }, + { value:'right' , name: 'right' }, + + ] + } + }, + right: { + title: 'right', + type: [ + "string", + "number" + ], + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'left' , name: 'left' }, + { value:'center' , name: 'center' }, + { value:'right' , name: 'right' }, + + ] + } + }, + width: { + title: 'width', + type: [ + "string", + "number" + ], + }, + height: { + title: 'height', + type: [ + "string", + "number" + ], + }, + orient: { + title: 'orient', + type: 'string', + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'horizontal' , name: 'horizontal' }, + { value:'vertical' , name: 'vertical' }, + ] + } + }, + align: { + title: 'align', + type: 'string', + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'left' , name: 'left' }, + { value:'right' , name: 'right' }, + + ] + } + }, + padding: { + title: 'padding', + type: 'number', + }, + itemGap: { + title: 'itemGap', + type: 'number', + }, + itemWidth: { + title: 'itemWidth', + type: 'number', + }, + itemHeight: { + title: 'itemHeight', + type: 'number', + }, + tooltip: { + title: 'tooltip', + type: 'boolean', + }, + icon: { + title: 'icon', + type: 'string', + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'circle' , name: 'circle' }, + { value:'rect' , name: 'rect' }, + { value:'roundRect' , name: 'roundRect' }, + { value:'triangle' , name: 'triangle' }, + { value:'diamond' , name: 'diamond' }, + { value:'pin' , name: 'pin' }, + { value:'arrow' , name: 'arrow' }, + { value:'none' , name: 'none' }, + + ] + } + }, + } + }; + } + + private getChartsProcessGaugeBehaviorConfig(propertyData) { + return { + description: "基本信息", + title: "行为", + properties: { + size: { + title: "尺寸", + type: "cascade", + description: "组件的尺寸", + isExpand: true, + properties: { + width: { + title: "宽度（%）", + type: "number", + description: "组件的宽度", + editor: { + min: 0, + decimals: 0, + nullable: true, + }, + $converter: sizeConverter, + }, + height: { + title: "高度（px）", + type: "number", + description: "组件的高度", + editor: { + min: 0, + decimals: 0, + nullable: true, + }, + $converter: sizeConverter, + } + } + }, + name: { + title: "name", + type: 'string', + }, + // series: { + // title: 'series', + // type: "array", + // editor: { + // type: 'item-collection-editor', + // columns: [ + // {field: 'name', title: 'name', dataType: 'string'}, + // {field: 'xAxisIndex', title: 'xAxisIndex', dataType: 'number'}, + // {field: 'yAxisIndex', title: 'yAxisIndex', dataType: 'number'}, + // {field: 'clip', title: 'clip', dataType: 'boolean'}, + // {field: 'data', title: 'data', dataType: 'array', + // editor: { + // type: 'item-collection-editor', + // columns: [{field: 'value', title: 'value', dataType: 'number' }] + // } + // }, + // ], + // }, + // }, + + + } + }; + } + +} diff --git a/packages/charts-vue/components/charts-process-gauge/src/schema/charts-process-gauge.schema.json b/packages/charts-vue/components/charts-process-gauge/src/schema/charts-process-gauge.schema.json new file mode 100644 index 00000000000..57b19080b19 --- /dev/null +++ b/packages/charts-vue/components/charts-process-gauge/src/schema/charts-process-gauge.schema.json @@ -0,0 +1,890 @@ +{ + "$schema": "https://json-schema.org/draft/2020-12/schema", + "$id": "https://farris-design.gitee.io/charts-process-gauge.schema.json", + "title": "charts-process-gauge", + "description": "A Farris ProcessGauge Component", + "type": "object", + "properties": { + "id": { + "description": "The unique identifier for a Input Group", + "type": "string" + }, + "type": { + "description": "The type string of Input Group component", + "type": "string", + "default": "charts-process-gauge" + }, + "name": { + "type": "string", + "default": "charts-process-gauge" + }, + "code": { + "type": "string" + }, + "color": { + "type": "array", + "default": [ + "#5470c6", + "#91cc75", + "#fac858", + "#ee6666", + "#73c0de", + "#3ba272", + "#fc8452", + "#9a60b4", + "#ea7ccc" + ] + }, + "textStyle": { + "type": "object", + "properties": { + "color": { + "type": "string", + "default": "#808080" + }, + "fontStyle": { + "type": "string", + "enum": [ + "normal", + "italic", + "oblique" + ], + "default": "normal" + }, + "fontWeight": { + "type": "string", + "enum": [ + "normal", + "bold", + "bolder", + "lighter" + ], + "default": "normal" + }, + "fontFamily": { + "type": "string", + "enum": [ + "serif", + "monospace", + "Arial", + "Courier New" + ], + "default": "serif" + }, + "fontSize": { + "type": "number", + "default": 12 + }, + "lineHeight": { + "type": "number" + }, + "width": { + "type": "number" + }, + "height": { + "type": "number" + }, + "overflow": { + "type": "string", + "enum": [ + "none", + "truncate", + "break", + "breakAll" + ], + "default": "none" + }, + "ellipsis": { + "type": "string", + "description": "在overflow配置为'truncate'的时候，可以通过该属性配置末尾显示的文本", + "default": "..." + } + } + }, + "title": { + "type": "object", + "properties": { + "id": { + "type": "string", + "default": "" + }, + "show": { + "type": "boolean", + "default": true + }, + "text": { + "type": "string", + "default": "" + }, + "link": { + "type": "string", + "default": "" + }, + "target": { + "type": "string", + "enum": [ + "blank", + "self" + ], + "default": "blank" + }, + "textStyle": { + "type": "object", + "properties": { + "color": { + "type": "string", + "default": "#2D2F33" + }, + "fontStyle": { + "type": "string", + "enum": [ + "normal", + "italic", + "oblique" + ], + "default": "normal" + }, + "fontWeight": { + "type": [ + "string", + "number" + ], + "enum": [ + "normal", + "bold", + "bolder", + "lighter" + ], + "default": 500 + }, + "fontFamily": { + "type": "string", + "enum": [ + "serif", + "monospace", + "Arial", + "Courier New" + ], + "default": "serif" + }, + "lineHeight": { + "type": "number", + "default": 26 + } + } + }, + "subtext": { + "type": "string", + "default": "" + }, + "sublink": { + "type": "string", + "default": "" + }, + "subtarget": { + "type": "string", + "enum": [ + "blank", + "self" + ], + "default": "blank" + }, + "subtextStyle": { + "type": "object", + "properties": { + "color": { + "type": "string", + "default": "#2D2F33" + }, + "fontStyle": { + "type": "string", + "enum": [ + "normal", + "italic", + "oblique" + ], + "default": "normal" + }, + "fontWeight": { + "type": [ + "string", + "number" + ], + "enum": [ + "normal", + "bold", + "bolder", + "lighter" + ], + "default": "normal" + }, + "fontFamily": { + "type": "string", + "enum": [ + "serif", + "monospace", + "Arial", + "Courier New" + ], + "default": "serif" + }, + "lineHeight": { + "type": "number", + "default": 20 + } + } + }, + "triggerEvent": { + "type": "boolean", + "default": true + }, + "padding": { + "type": "array", + "items": { + "type": "number" + }, + "default": [ + 5, + 5, + 5, + 5 + ] + }, + "itemGap": { + "type": "number", + "default": 10 + }, + "top": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "bottom": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "left": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "right": { + "type": [ + "string", + "number" + ], + "default": "auto" + } + } + }, + "legend": { + "type": "object", + "properties": { + "id": { + "type": "string", + "default": "" + }, + "show": { + "type": "boolean", + "default": true + }, + "type": { + "type": "string", + "enum": [ + "plain", + "scroll" + ], + "default": "plain" + }, + "top": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "bottom": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "left": { + "type": [ + "string", + "number" + ], + "default": "center" + }, + "right": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "width": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "height": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "orient": { + "type": [ + "string" + ], + "enum": [ + "horizontal", + "vertical" + ], + "default": "horizontal" + }, + "align": { + "type": "string", + "enum": [ + "auto", + "left", + "right" + ], + "default": "auto" + }, + "padding": { + "type": "number", + "default": 5 + }, + "itemGap": { + "type": "number", + "default": 10 + }, + "itemWidth": { + "type": "number", + "default": 12 + }, + "itemHeight": { + "type": "number", + "default": 12 + }, + "lineStyle": { + "type": "object", + "properties": { + "color": { + "type": "array", + "items": { + "type": "string" + } + } + } + }, + "textStyle": { + "type": "object", + "properties": { + "color": { + "type": "string", + "default": "#666666" + }, + "fontSize": { + "type": "number", + "default": 12 + }, + "fontStyle": { + "type": "string", + "enum": [ + "normal", + "italic", + "oblique" + ], + "default": "normal" + }, + "fontWeight": { + "type": [ + "string", + "number" + ], + "enum": [ + "normal", + "bold", + "bolder", + "lighter" + ], + "default": 400 + }, + "fontFamily": { + "type": "string", + "enum": [ + "serif", + "monospace", + "Arial", + "Courier New" + ], + "default": "serif" + }, + "lineHeight": { + "type": "number", + "default": 16 + } + } + }, + "formatter": { + "type": "object", + "default": "" + }, + "tooltip": { + "type": "boolean", + "default": false + }, + "icon": { + "type": "string", + "default": "" + } + } + }, + "grid": { + "type": "object", + "properties": { + "id": { + "type": "string", + "default": "" + }, + "show": { + "type": "boolean", + "default": false + }, + "zlevel": { + "type": "number", + "default": 0 + }, + "z": { + "type": "number", + "default": 0 + }, + "top": { + "type": [ + "string", + "number" + ], + "default": 60 + }, + "bottom": { + "type": [ + "string", + "number" + ], + "default": 60 + }, + "left": { + "type": [ + "string", + "number" + ], + "default": "10%" + }, + "right": { + "type": [ + "string", + "number" + ], + "default": "10%" + }, + "width": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "height": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "containLabel": { + "type": "boolean", + "description": "grid 区域是否包含坐标轴的刻度标签。containLabel 为 false 的时候：grid.left grid.right grid.top grid.bottom grid.width grid.height 决定的是由坐标轴形成的矩形的尺寸和位置。这比较适用于多个 grid 进行对齐的场景，因为往往多个 grid 对齐的时候，是依据坐标轴来对齐的。containLabel 为 true 的时候：grid.left grid.right grid.top grid.bottom grid.width grid.height 决定的是包括了坐标轴标签在内的所有内容所形成的矩形的位置。这常用于『防止标签溢出』的场景，标签溢出指的是，标签长度动态变化时，可能会溢出容器或者覆盖其他组件", + "default": false + }, + "backgroundColor": { + "type": "string", + "default": "rgba(1,51,100,0.05)" + }, + "borderColor": { + "type": "string", + "default": "#FFFFFF" + }, + "borderWidth": { + "type": "number", + "default": 0 + }, + "tooltip": { + "type": "object", + "properties": { + "show": { + "type": "boolean" + }, + "padding": { + "type": "number" + }, + "trigger": { + "type": "string", + "enum": [ + "item", + "axis", + "none" + ] + }, + "formatter": { + "type": "object" + }, + "valueFormater": { + "type": "object" + }, + "textStyle": { + "type": "object", + "properties": { + "color": { + "type": "string" + }, + "fontStyle": { + "type": "string", + "enum": [ + "normal", + "italic", + "oblique" + ] + }, + "fontWeight": { + "type": [ + "string", + "number" + ], + "enum": [ + "normal", + "bold", + "bolder", + "lighter" + ] + }, + "fontFamily": { + "type": "string", + "enum": [ + "serif", + "monospace", + "Arial", + "Courier New" + ] + }, + "lineHeight": { + "type": "number" + } + } + }, + "axisPointer": { + "type": "object", + "properties": { + "type": { + "type": "string", + "enum": [ + "line", + "shadow", + "none", + "cross" + ], + "description": "指示器类型。" + }, + "axis": { + "type": "string", + "enum": [ + "x", + "y", + "radius", + "angle" + ], + "description": "指示器的坐标轴。默认情况，坐标系会自动选择显示哪个轴的 axisPointer（默认取类目轴或者时间轴）" + }, + "label": { + "type": "object", + "properties": { + "show": { + "type": "boolean", + "description": "是否显示文本标签。" + }, + "precision": { + "type": [ + "number", + "string" + ], + "description": "文本标签中数值的小数点精度。默认根据当前轴的值自动判断。也可以指定如 2 表示保留两位小数" + }, + "margin": { + "type": "number", + "description": "label 距离轴的距离" + }, + "color": { + "type": "string", + "description": "文字的颜色" + }, + "fontStyle": { + "type": "string", + "enum": [ + "normal", + "italic", + "oblique" + ], + "description": "文字字体的风格" + }, + "fontWeight": { + "type": [ + "number", + "string" + ], + "description": "文字字体的粗细. normal bold bolder lighter, 100|200|300|400" + }, + "fontFamily": { + "type": "string", + "description": "文字的字体系列. 'serif' , 'monospace', 'Arial', 'Courier' 'New', 'Microsoft YaHei', ..." + }, + "fontSize": { + "type": "number" + }, + "lineHeight": { + "type": "number" + }, + "width": { + "type": "number" + }, + "height": { + "type": "number" + }, + "overflow": { + "type": "string", + "enum": [ + "none", + "truncate", + "break", + "breakAll" + ], + "description": "文字超出宽度是否截断或者换行。配置width时有效" + }, + "padding": { + "type": "array" + }, + "backgroundColor": { + "type": "string" + }, + "borderColor": { + "type": "string" + }, + "borderWidth": { + "type": "number" + } + } + }, + "lineStyle": { + "type": "object", + "properties": { + "color": { + "type": "string" + }, + "width": { + "type": "number" + }, + "type": { + "type": [ + "string", + "array" + ], + "description": "线的类型" + }, + "cap": { + "type": "string", + "enum": [ + "butt", + "round", + "square" + ], + "description": "用于指定线段的绘制方式" + }, + "join": { + "type": "string", + "enum": [ + "bevel", + "round", + "miter" + ], + "description": "用于设置2个长度不为0的相连部分（线段，圆弧，曲线）如何连接在一起的属性" + } + } + } + } + } + } + } + } + }, + "appearance": { + "description": "", + "type": "object", + "properties": { + "class": { + "type": "string" + }, + "style": { + "type": "string" + } + }, + "default": {} + }, + "series": { + "type": "array", + "properties": { + "type": { + "type": "string", + "default": "process-gauge" + }, + "id": { + "type": "string", + "default": "" + }, + "name": { + "type": "string", + "default": "" + }, + "data": { + "type": "array", + "properties": { + "name": { + "type": "string" + }, + "value": { + "type": "number" + } + }, + "default": [] + } + }, + "default": [ + { + "type": "gauge", + "startAngle": 180, + "endAngle": 0, + "min": 0, + "max": 240, + "splitNumber": 8, + "itemStyle": { + "color": "#58D9F9", + "shadowColor": "rgba(0,138,255,0.45)", + "shadowBlur": 10, + "shadowOffsetX": 2, + "shadowOffsetY": 2 + }, + "progress": { + "show": true, + "roundCap": true, + "width": 18 + }, + "pointer": { + "icon": "path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z", + "length": "75%", + "width": 16, + "offsetCenter": [ + 0, + "5%" + ] + }, + "axisLine": { + "roundCap": true, + "lineStyle": { + "width": 18 + } + }, + "axisTick": { + "splitNumber": 2, + "lineStyle": { + "width": 2, + "color": "#999" + } + }, + "splitLine": { + "length": 12, + "lineStyle": { + "width": 3, + "color": "#999" + } + }, + "axisLabel": { + "distance": 30, + "color": "#999", + "fontSize": 12 + }, + "title": { + "show": false + }, + "detail": { + "backgroundColor": "#fff", + "borderColor": "#999", + "borderWidth": 2, + "width": "60%", + "lineHeight": 40, + "height": 40, + "borderRadius": 8, + "offsetCenter": [ + 0, + "35%" + ], + "valueAnimation": true, + "rich": { + "value": { + "fontSize": 24, + "fontWeight": "bolder", + "color": "#777" + }, + "unit": { + "fontSize": 12, + "color": "#999", + "padding": [ + 0, + 0, + -20, + 10 + ] + } + } + }, + "data": [ + { + "value": 100 + } + ] + } + ] + }, + "size": { + "type": "object", + "default": { + "width": 100, + "height": 350 + } + } + }, + "required": [ + "id", + "type" + ] +} \ No newline at end of file diff --git a/packages/charts-vue/components/charts-process-gauge/src/schema/schema-mapper.ts b/packages/charts-vue/components/charts-process-gauge/src/schema/schema-mapper.ts new file mode 100644 index 00000000000..04d7b384ed9 --- /dev/null +++ b/packages/charts-vue/components/charts-process-gauge/src/schema/schema-mapper.ts @@ -0,0 +1,17 @@ +import { resolveAppearance, MapperFunction } from '@farris/charts-vue/components/dynamic-resolver'; + + +function createTemplatePropResolver(name: string): MapperFunction { + return (key: string, content: string) => { + if (!content) { + return {}; + } + const templateInfo = { name, content }; + + return { text: templateInfo }; + }; +} + +export const schemaMapper = new Map([ + ['appearance', resolveAppearance] +]); diff --git a/packages/charts-vue/components/charts-process-gauge/src/schema/schema-resolver.ts b/packages/charts-vue/components/charts-process-gauge/src/schema/schema-resolver.ts new file mode 100644 index 00000000000..6fb4684c3dd --- /dev/null +++ b/packages/charts-vue/components/charts-process-gauge/src/schema/schema-resolver.ts @@ -0,0 +1,5 @@ +import { DynamicResolver } from '@farris/charts-vue/components/dynamic-resolver'; + +export function schemaResolver(resolver: DynamicResolver, schema: Record, context: Record): Record { + return schema; +} diff --git a/packages/charts-vue/components/charts-radar/index.ts b/packages/charts-vue/components/charts-radar/index.ts index 73e50adda0a..0040b94e45b 100644 --- a/packages/charts-vue/components/charts-radar/index.ts +++ b/packages/charts-vue/components/charts-radar/index.ts @@ -1,6 +1,20 @@ -import FChartsRadar from './src/charts-radar.component'; -import { withInstall } from '@farris/charts-vue/components/charts-common'; +import FChartsRadarInstallless from './src/charts-radar.component'; +import { propsResolverGenerator } from './src/charts-radar.props'; +import { withInstall, withRegister, withRegisterDesigner } from '@farris/charts-vue/components/charts-common'; +import ChartsRadarDesign from './src/designer/charts-radar.design.component'; export * from './src/charts-radar.props'; + +const CHARTS_RADAR_REGISTERED_NAME = 'charts-radar'; +// FChartsRadar.register = (componentMap: Record, propsResolverMap: Record, configResolverMap: Record, resolverMap: Record) => { +// componentMap['charts-radar'] = FChartsRadar; +// propsResolverMap['charts-radar'] = propsResolver; +// }; + +const FChartsRadar = withInstall(FChartsRadarInstallless) + +withRegister(FChartsRadar, {name: CHARTS_RADAR_REGISTERED_NAME, propsResolverGenerator}) +withRegisterDesigner(FChartsRadar, { name: CHARTS_RADAR_REGISTERED_NAME, propsResolverGenerator, designerComponent: ChartsRadarDesign }); + export { FChartsRadar }; -export default withInstall(FChartsRadar); +export default FChartsRadar diff --git a/packages/charts-vue/components/charts-radar/src/charts-radar.component.tsx b/packages/charts-vue/components/charts-radar/src/charts-radar.component.tsx index 4371bde3f00..03e57e55f03 100644 --- a/packages/charts-vue/components/charts-radar/src/charts-radar.component.tsx +++ b/packages/charts-vue/components/charts-radar/src/charts-radar.component.tsx @@ -121,8 +121,8 @@ export default defineComponent({
); diff --git a/packages/charts-vue/components/charts-radar/src/charts-radar.props.ts b/packages/charts-vue/components/charts-radar/src/charts-radar.props.ts index ee42685406b..716df63c7d0 100644 --- a/packages/charts-vue/components/charts-radar/src/charts-radar.props.ts +++ b/packages/charts-vue/components/charts-radar/src/charts-radar.props.ts @@ -7,7 +7,10 @@ import { SelectProps, TooltipProps, SelectedModeType, TextStyleProps, LegendProps, TitleProps, GridProps, DataZoomProps } from '@farris/charts-vue/components/charts-common'; - +import { getPropsResolverGenerator } from '@farris/charts-vue/components/dynamic-resolver'; +import chartsRadarSchema from './schema/charts-radar.schema.json'; +import { schemaMapper } from './schema/schema-mapper'; +import { schemaResolver } from './schema/schema-resolver'; export type RadarType = 'polygon' | 'circle'; export const radarSeriesProps = { @@ -179,7 +182,16 @@ export const chartsRadarProps = { theme: { type: String, default: 'defaultTheme' }, + size: { type: Object }, + ...animationProps }; export type ChartsRadarProps = ExtractPropTypes; + +export const propsResolverGenerator = getPropsResolverGenerator( + chartsRadarProps, + chartsRadarSchema, + schemaMapper, + schemaResolver +); \ No newline at end of file diff --git a/packages/charts-vue/components/charts-radar/src/designer/charts-radar.design.component.tsx b/packages/charts-vue/components/charts-radar/src/designer/charts-radar.design.component.tsx new file mode 100644 index 00000000000..5cd25bc0884 --- /dev/null +++ b/packages/charts-vue/components/charts-radar/src/designer/charts-radar.design.component.tsx @@ -0,0 +1,53 @@ +import { computed, defineComponent, inject, onMounted, ref, SetupContext, watch } from 'vue'; +import { DesignerHostService, DesignerItemContext } from '@farris/charts-vue/components/charts-common/src/types'; +import { useDesignerComponent } from '@farris/charts-vue/components/charts-common/src/compositions/use-designer-component'; + +import { ChartsRadarProps, chartsRadarProps } from '../charts-radar.props'; +import FChartsRadar from '../charts-radar.component'; +import { useDesignerRules } from './use-designer-rules'; + +export default defineComponent({ + name: 'FmChartsRadarDesign', + props: chartsRadarProps, + emits: ['click'], + setup(props: ChartsRadarProps, context: SetupContext) { + const elementRef = ref(); + const designerHostService = inject('designer-host-service'); + const designItemContext = inject('design-item-context') as DesignerItemContext; + const designerRulesComposition = useDesignerRules(designItemContext, designerHostService); + const componentInstance = useDesignerComponent(elementRef, designItemContext, designerRulesComposition); + onMounted(() => { + elementRef.value.componentInstance = componentInstance; + }); + + context.expose(componentInstance.value); + + const chartsRadarProps1 = computed(() => ({ + size: props.size, + title: props.title, + grid: props.grid, + radar: props.radar, + tooltip: props.tooltip, + legend: props.legend, + toolbox: props.toolbox, + animation: props.animation, + animationDuration: props.animationDuration, + animationEasingUpdate: props.animationEasingUpdate, + series: props.series.map((series) => { + const s = { ...series }; + s.type = 'radar'; + return s; + }) + })); + watch(props, () => { + console.log(props) + }) + + + return () => { + return ( + + ); + }; + } +}); diff --git a/packages/charts-vue/components/charts-radar/src/designer/use-designer-rules.ts b/packages/charts-vue/components/charts-radar/src/designer/use-designer-rules.ts new file mode 100644 index 00000000000..75383e6ba17 --- /dev/null +++ b/packages/charts-vue/components/charts-radar/src/designer/use-designer-rules.ts @@ -0,0 +1,57 @@ +import { ref } from "vue"; +import { DraggingResolveContext } from "@farris/charts-vue/components/charts-common/src/types"; +import { DesignerHostService, DesignerItemContext, UseDesignerRules } from "@farris/charts-vue/components/charts-common/src/types"; +import { ChartsRadarProperty } from "../property-config/charts-radar.property-config"; + +export function useDesignerRules(designItemContext: DesignerItemContext, designerHostService?: DesignerHostService): UseDesignerRules { + + const triggerBelongedComponentToMoveWhenMoved = ref(false); + + const triggerBelongedComponentToDeleteWhenDeleted = ref(false); + + function canAccepts(draggingContext: DraggingResolveContext): boolean { + + return false; + } + + + function checkCanMoveComponent() { + return true; + } + function checkCanDeleteComponent() { + return true; + } + + function hideNestedPaddingInDesginerView() { + return true; + } + + function getStyles(): string { + return ' '; + } + + function getDesignerClass(): string { + return ' '; + } + + /** + * 获取属性配置 + */ + function getPropsConfig(componentId: string) { + const componentProp = new ChartsRadarProperty(componentId, designerHostService); + const { schema } = designItemContext; + return componentProp.getPropertyConfig(schema); + } + + return { + canAccepts, + // triggerBelongedComponentToMoveWhenMoved, + // triggerBelongedComponentToDeleteWhenDeleted, + // checkCanMoveComponent, + // checkCanDeleteComponent, + hideNestedPaddingInDesginerView, + // getStyles, + // getDesignerClass, + getPropsConfig + }; +} diff --git a/packages/charts-vue/components/charts-radar/src/property-config/charts-radar.property-config.ts b/packages/charts-vue/components/charts-radar/src/property-config/charts-radar.property-config.ts new file mode 100644 index 00000000000..1b8c0aafc3b --- /dev/null +++ b/packages/charts-vue/components/charts-radar/src/property-config/charts-radar.property-config.ts @@ -0,0 +1,513 @@ +import { BaseControlProperty } from "@farris/charts-vue/components/charts-common/src/props"; +import { gridConverter, titleConverter, sizeConverter, legendConverter, radarConverter } from "@farris/charts-vue/components/dynamic-resolver/src/converter"; + + +export class ChartsRadarProperty extends BaseControlProperty { + + constructor(componentId: string, designerHostService: any) { + super(componentId, designerHostService); + } + public getPropertyConfig(propertyData: any) { + this.propertyConfig.categories['basic'] = this.getBasicPropConfig(propertyData); + + this.propertyConfig.categories['appearance'] = this.getAppearanceConfig(propertyData); + + this.propertyConfig.categories['behavior'] = this.getChartsRadarBehaviorConfig(propertyData); + + this.propertyConfig.categories['radar'] = this.getChartsRadarRadarConfig(propertyData); + + this.propertyConfig.categories['title'] = this.getChartsRadarTitleConfig(propertyData); + + this.propertyConfig.categories['legend'] = this.getChartsRadarLegendConfig(propertyData); + + this.propertyConfig.categories['grid'] = this.getChartsRadarGridConfig(propertyData); + + return this.propertyConfig; + } + private getChartsRadarRadarConfig(propertyData) { + return{ + title: 'radar', + $converter: radarConverter, + properties: { + shape: { + title: 'target', + type: 'select', + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'polygon' , name: 'polygon' }, + { value:'circle' , name: 'circle' }, + ] + } + }, + } + }; + } + + private getChartsRadarTitleConfig(propertyData) { + return{ + title: 'Title', + $converter: titleConverter, + properties: { + show: { + title: '标题是否展示', + type: 'boolean', + }, + text: { + title: '标题', + }, + link: { + title: '标题链接', + type: 'string', + }, + target: { + title: 'target', + type: 'select', + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'self' , name: '当前窗口打开' }, + { value:'blank' , name: '新窗口打开' }, + ] + } + }, + subtext: { + title: '副标题', + type: 'string', + }, + sublink: { + title: 'sublink', + type: 'string', + }, + subtarget: { + title: 'subtarget', + type: 'select', + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'self' , name: '当前窗口打开' }, + { value:'blank' , name: '新窗口打开' }, + ] + } + }, + itemGap: { + title: '主副标题之间的间距', + type: 'number', + }, + top: { + title: 'top', + type: [ + "string", + "number" + ], + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'top' , name: 'top' }, + { value:'middle' , name: 'middle' }, + { value:'bottom' , name: 'bottom' }, + + ] + } + }, + bottom: { + title: 'bottom', + type: [ + "string", + "number" + ], + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'top' , name: 'top' }, + { value:'middle' , name: 'middle' }, + { value:'bottom' , name: 'bottom' }, + + ] + } + }, + left: { + title: 'left', + type: [ + "string", + "number" + ], + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'left' , name: 'left' }, + { value:'center' , name: 'center' }, + { value:'right' , name: 'right' }, + + ] + } + }, + right: { + title: 'right', + type: [ + "string", + "number" + ], + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'left' , name: 'left' }, + { value:'center' , name: 'center' }, + { value:'right' , name: 'right' }, + + ] + } + }, + triggerEvent: { + title: '是否触发事件triggerEvent', + type: 'boolean', + }, + + } + }; + } + + private getChartsRadarGridConfig(propertyData) { + return{ + title: 'Grid', + $converter: gridConverter, + properties: { + show: { + title: 'show', + type: 'boolean', + }, + zlevel: { + title: 'zlevel', + type: 'number', + }, + z: { + title: 'z', + type: 'number', + }, + top: { + title: 'top', + type: ['number',"string"] + }, + bottom: { + title: 'bottom', + type: ['number',"string"] + }, + left: { + title: 'left', + type: ['number',"string"] + }, + right: { + title: 'right', + type: ['number',"string"] + }, + width: { + title: 'width', + type: ['number',"string"] + }, + height: { + title: 'height', + type: ['number',"string"] + }, + containLabel: { + title: 'containLabel', + type: 'boolean', + }, + backgroundColor: { + title: 'backgroundColor', + type: 'string', + }, + borderColor: { + title: 'borderColor', + type: 'string', + }, + borderWidth: { + title: 'borderWidth', + type: 'number', + } + + } + }; + } + + private getChartsRadarLegendConfig(propertyData) { + return{ + title: 'Legend', + $converter: legendConverter, + properties: { + show: { + title: 'show', + type: 'boolean', + }, + type: { + title: 'type', + type: 'string', + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'plain' , name: 'plain' }, + { value:'scroll' , name: 'scroll' }, + ] + } + }, + top: { + title: 'top', + type: [ + "string", + "number" + ], + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'top' , name: 'top' }, + { value:'middle' , name: 'middle' }, + { value:'bottom' , name: 'bottom' }, + + ] + } + }, + bottom: { + title: 'bottom', + type: [ + "string", + "number" + ], + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'top' , name: 'top' }, + { value:'middle' , name: 'middle' }, + { value:'bottom' , name: 'bottom' }, + + ] + } + }, + left: { + title: 'left', + type: [ + "string", + "number" + ], + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'left' , name: 'left' }, + { value:'center' , name: 'center' }, + { value:'right' , name: 'right' }, + + ] + } + }, + right: { + title: 'right', + type: [ + "string", + "number" + ], + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'left' , name: 'left' }, + { value:'center' , name: 'center' }, + { value:'right' , name: 'right' }, + + ] + } + }, + width: { + title: 'width', + type: [ + "string", + "number" + ], + }, + height: { + title: 'height', + type: [ + "string", + "number" + ], + }, + orient: { + title: 'orient', + type: 'string', + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'horizontal' , name: 'horizontal' }, + { value:'vertical' , name: 'vertical' }, + ] + } + }, + align: { + title: 'align', + type: 'string', + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'left' , name: 'left' }, + { value:'right' , name: 'right' }, + + ] + } + }, + padding: { + title: 'padding', + type: 'number', + }, + itemGap: { + title: 'itemGap', + type: 'number', + }, + itemWidth: { + title: 'itemWidth', + type: 'number', + }, + itemHeight: { + title: 'itemHeight', + type: 'number', + }, + tooltip: { + title: 'tooltip', + type: 'boolean', + }, + icon: { + title: 'icon', + type: 'string', + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'circle' , name: 'circle' }, + { value:'rect' , name: 'rect' }, + { value:'roundRect' , name: 'roundRect' }, + { value:'triangle' , name: 'triangle' }, + { value:'diamond' , name: 'diamond' }, + { value:'pin' , name: 'pin' }, + { value:'arrow' , name: 'arrow' }, + { value:'none' , name: 'none' }, + + ] + } + }, + } + }; + } + + private getChartsRadarBehaviorConfig(propertyData) { + return { + description: "基本信息", + title: "行为", + properties: { + size: { + title: "尺寸", + type: "cascade", + description: "组件的尺寸", + isExpand: true, + properties: { + width: { + title: "宽度（%）", + type: "number", + description: "组件的宽度", + editor: { + min: 0, + decimals: 0, + nullable: true, + }, + $converter: sizeConverter, + }, + height: { + title: "高度（px）", + type: "number", + description: "组件的高度", + editor: { + min: 0, + decimals: 0, + nullable: true, + }, + $converter: sizeConverter, + } + } + }, + name: { + title: "name", + type: 'string', + }, + // series: { + // title: 'series', + // type: "array", + // editor: { + // type: 'item-collection-editor', + // columns: [ + // {field: 'name', title: 'name', dataType: 'string'}, + // {field: 'xAxisIndex', title: 'xAxisIndex', dataType: 'number'}, + // {field: 'yAxisIndex', title: 'yAxisIndex', dataType: 'number'}, + // {field: 'clip', title: 'clip', dataType: 'boolean'}, + // {field: 'data', title: 'data', dataType: 'array', + // editor: { + // type: 'item-collection-editor', + // columns: [{field: 'value', title: 'value', dataType: 'number' }] + // } + // }, + // ], + // }, + // }, + + + } + }; + } + +} diff --git a/packages/charts-vue/components/charts-radar/src/schema/charts-radar.schema.json b/packages/charts-vue/components/charts-radar/src/schema/charts-radar.schema.json new file mode 100644 index 00000000000..840fc83aba7 --- /dev/null +++ b/packages/charts-vue/components/charts-radar/src/schema/charts-radar.schema.json @@ -0,0 +1,863 @@ +{ + "$schema": "https://json-schema.org/draft/2020-12/schema", + "$id": "https://farris-design.gitee.io/charts-radar.schema.json", + "title": "charts-radar", + "description": "A Farris Radar Component", + "type": "object", + "properties": { + "id": { + "description": "The unique identifier for a Input Group", + "type": "string" + }, + "type": { + "description": "The type string of Input Group component", + "type": "string", + "default": "charts-radar" + }, + "name": { + "type": "string", + "default": "charts-radar" + }, + "code": { + "type": "string" + }, + "color": { + "type": "array", + "default": [ + "#5470c6", + "#91cc75", + "#fac858", + "#ee6666", + "#73c0de", + "#3ba272", + "#fc8452", + "#9a60b4", + "#ea7ccc" + ] + }, + "textStyle": { + "type": "object", + "properties": { + "color": { + "type": "string", + "default": "#808080" + }, + "fontStyle": { + "type": "string", + "enum": [ + "normal", + "italic", + "oblique" + ], + "default": "normal" + }, + "fontWeight": { + "type": "string", + "enum": [ + "normal", + "bold", + "bolder", + "lighter" + ], + "default": "normal" + }, + "fontFamily": { + "type": "string", + "enum": [ + "serif", + "monospace", + "Arial", + "Courier New" + ], + "default": "serif" + }, + "fontSize": { + "type": "number", + "default": 12 + }, + "lineHeight": { + "type": "number" + }, + "width": { + "type": "number" + }, + "height": { + "type": "number" + }, + "overflow": { + "type": "string", + "enum": [ + "none", + "truncate", + "break", + "breakAll" + ], + "default": "none" + }, + "ellipsis": { + "type": "string", + "description": "在overflow配置为'truncate'的时候，可以通过该属性配置末尾显示的文本", + "default": "..." + } + } + }, + "title": { + "type": "object", + "properties": { + "id": { + "type": "string", + "default": "" + }, + "show": { + "type": "boolean", + "default": true + }, + "text": { + "type": "string", + "default": "" + }, + "link": { + "type": "string", + "default": "" + }, + "target": { + "type": "string", + "enum": [ + "blank", + "self" + ], + "default": "blank" + }, + "textStyle": { + "type": "object", + "properties": { + "color": { + "type": "string", + "default": "#2D2F33" + }, + "fontStyle": { + "type": "string", + "enum": [ + "normal", + "italic", + "oblique" + ], + "default": "normal" + }, + "fontWeight": { + "type": [ + "string", + "number" + ], + "enum": [ + "normal", + "bold", + "bolder", + "lighter" + ], + "default": 500 + }, + "fontFamily": { + "type": "string", + "enum": [ + "serif", + "monospace", + "Arial", + "Courier New" + ], + "default": "serif" + }, + "lineHeight": { + "type": "number", + "default": 26 + } + } + }, + "subtext": { + "type": "string", + "default": "" + }, + "sublink": { + "type": "string", + "default": "" + }, + "subtarget": { + "type": "string", + "enum": [ + "blank", + "self" + ], + "default": "blank" + }, + "subtextStyle": { + "type": "object", + "properties": { + "color": { + "type": "string", + "default": "#2D2F33" + }, + "fontStyle": { + "type": "string", + "enum": [ + "normal", + "italic", + "oblique" + ], + "default": "normal" + }, + "fontWeight": { + "type": [ + "string", + "number" + ], + "enum": [ + "normal", + "bold", + "bolder", + "lighter" + ], + "default": "normal" + }, + "fontFamily": { + "type": "string", + "enum": [ + "serif", + "monospace", + "Arial", + "Courier New" + ], + "default": "serif" + }, + "lineHeight": { + "type": "number", + "default": 20 + } + } + }, + "triggerEvent": { + "type": "boolean", + "default": true + }, + "padding": { + "type": "array", + "items": { + "type": "number" + }, + "default": [ + 5, + 5, + 5, + 5 + ] + }, + "itemGap": { + "type": "number", + "default": 10 + }, + "top": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "bottom": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "left": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "right": { + "type": [ + "string", + "number" + ], + "default": "auto" + } + } + }, + "legend": { + "type": "object", + "properties": { + "id": { + "type": "string", + "default": "" + }, + "show": { + "type": "boolean", + "default": true + }, + "type": { + "type": "string", + "enum": [ + "plain", + "scroll" + ], + "default": "plain" + }, + "top": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "bottom": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "left": { + "type": [ + "string", + "number" + ], + "default": "center" + }, + "right": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "width": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "height": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "orient": { + "type": [ + "string" + ], + "enum": [ + "horizontal", + "vertical" + ], + "default": "horizontal" + }, + "align": { + "type": "string", + "enum": [ + "auto", + "left", + "right" + ], + "default": "auto" + }, + "padding": { + "type": "number", + "default": 5 + }, + "itemGap": { + "type": "number", + "default": 10 + }, + "itemWidth": { + "type": "number", + "default": 12 + }, + "itemHeight": { + "type": "number", + "default": 12 + }, + "lineStyle": { + "type": "object", + "properties": { + "color": { + "type": "array", + "items": { + "type": "string" + } + } + } + }, + "textStyle": { + "type": "object", + "properties": { + "color": { + "type": "string", + "default": "#666666" + }, + "fontSize": { + "type": "number", + "default": 12 + }, + "fontStyle": { + "type": "string", + "enum": [ + "normal", + "italic", + "oblique" + ], + "default": "normal" + }, + "fontWeight": { + "type": [ + "string", + "number" + ], + "enum": [ + "normal", + "bold", + "bolder", + "lighter" + ], + "default": 400 + }, + "fontFamily": { + "type": "string", + "enum": [ + "serif", + "monospace", + "Arial", + "Courier New" + ], + "default": "serif" + }, + "lineHeight": { + "type": "number", + "default": 16 + } + } + }, + "formatter": { + "type": "object", + "default": "" + }, + "tooltip": { + "type": "boolean", + "default": false + }, + "icon": { + "type": "string", + "default": "" + } + } + }, + "grid": { + "type": "object", + "properties": { + "id": { + "type": "string", + "default": "" + }, + "show": { + "type": "boolean", + "default": false + }, + "zlevel": { + "type": "number", + "default": 0 + }, + "z": { + "type": "number", + "default": 0 + }, + "top": { + "type": [ + "string", + "number" + ], + "default": 60 + }, + "bottom": { + "type": [ + "string", + "number" + ], + "default": 60 + }, + "left": { + "type": [ + "string", + "number" + ], + "default": "10%" + }, + "right": { + "type": [ + "string", + "number" + ], + "default": "10%" + }, + "width": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "height": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "containLabel": { + "type": "boolean", + "description": "grid 区域是否包含坐标轴的刻度标签。containLabel 为 false 的时候：grid.left grid.right grid.top grid.bottom grid.width grid.height 决定的是由坐标轴形成的矩形的尺寸和位置。这比较适用于多个 grid 进行对齐的场景，因为往往多个 grid 对齐的时候，是依据坐标轴来对齐的。containLabel 为 true 的时候：grid.left grid.right grid.top grid.bottom grid.width grid.height 决定的是包括了坐标轴标签在内的所有内容所形成的矩形的位置。这常用于『防止标签溢出』的场景，标签溢出指的是，标签长度动态变化时，可能会溢出容器或者覆盖其他组件", + "default": false + }, + "backgroundColor": { + "type": "string", + "default": "rgba(1,51,100,0.05)" + }, + "borderColor": { + "type": "string", + "default": "#FFFFFF" + }, + "borderWidth": { + "type": "number", + "default": 0 + }, + "tooltip": { + "type": "object", + "properties": { + "show": { + "type": "boolean" + }, + "padding": { + "type": "number" + }, + "trigger": { + "type": "string", + "enum": [ + "item", + "axis", + "none" + ] + }, + "formatter": { + "type": "object" + }, + "valueFormater": { + "type": "object" + }, + "textStyle": { + "type": "object", + "properties": { + "color": { + "type": "string" + }, + "fontStyle": { + "type": "string", + "enum": [ + "normal", + "italic", + "oblique" + ] + }, + "fontWeight": { + "type": [ + "string", + "number" + ], + "enum": [ + "normal", + "bold", + "bolder", + "lighter" + ] + }, + "fontFamily": { + "type": "string", + "enum": [ + "serif", + "monospace", + "Arial", + "Courier New" + ] + }, + "lineHeight": { + "type": "number" + } + } + }, + "axisPointer": { + "type": "object", + "properties": { + "type": { + "type": "string", + "enum": [ + "line", + "shadow", + "none", + "cross" + ], + "description": "指示器类型。" + }, + "axis": { + "type": "string", + "enum": [ + "x", + "y", + "radius", + "angle" + ], + "description": "指示器的坐标轴。默认情况，坐标系会自动选择显示哪个轴的 axisPointer（默认取类目轴或者时间轴）" + }, + "label": { + "type": "object", + "properties": { + "show": { + "type": "boolean", + "description": "是否显示文本标签。" + }, + "precision": { + "type": [ + "number", + "string" + ], + "description": "文本标签中数值的小数点精度。默认根据当前轴的值自动判断。也可以指定如 2 表示保留两位小数" + }, + "margin": { + "type": "number", + "description": "label 距离轴的距离" + }, + "color": { + "type": "string", + "description": "文字的颜色" + }, + "fontStyle": { + "type": "string", + "enum": [ + "normal", + "italic", + "oblique" + ], + "description": "文字字体的风格" + }, + "fontWeight": { + "type": [ + "number", + "string" + ], + "description": "文字字体的粗细. normal bold bolder lighter, 100|200|300|400" + }, + "fontFamily": { + "type": "string", + "description": "文字的字体系列. 'serif' , 'monospace', 'Arial', 'Courier' 'New', 'Microsoft YaHei', ..." + }, + "fontSize": { + "type": "number" + }, + "lineHeight": { + "type": "number" + }, + "width": { + "type": "number" + }, + "height": { + "type": "number" + }, + "overflow": { + "type": "string", + "enum": [ + "none", + "truncate", + "break", + "breakAll" + ], + "description": "文字超出宽度是否截断或者换行。配置width时有效" + }, + "padding": { + "type": "array" + }, + "backgroundColor": { + "type": "string" + }, + "borderColor": { + "type": "string" + }, + "borderWidth": { + "type": "number" + } + } + }, + "lineStyle": { + "type": "object", + "properties": { + "color": { + "type": "string" + }, + "width": { + "type": "number" + }, + "type": { + "type": [ + "string", + "array" + ], + "description": "线的类型" + }, + "cap": { + "type": "string", + "enum": [ + "butt", + "round", + "square" + ], + "description": "用于指定线段的绘制方式" + }, + "join": { + "type": "string", + "enum": [ + "bevel", + "round", + "miter" + ], + "description": "用于设置2个长度不为0的相连部分（线段，圆弧，曲线）如何连接在一起的属性" + } + } + } + } + } + } + } + } + }, + "appearance": { + "description": "", + "type": "object", + "properties": { + "class": { + "type": "string" + }, + "style": { + "type": "string" + } + }, + "default": {} + }, + "series": { + "type": "array", + "properties": { + "type": { + "type": "string", + "default": "radar" + }, + "id": { + "type": "string", + "default": "" + }, + "name": { + "type": "string", + "default": "" + }, + "data": { + "type": "array", + "properties": { + "name": { + "type": "string" + }, + "value": { + "type": "number" + } + }, + "default": [] + } + }, + "default": [ + { + "name": "Budget vs spending", + "type": "radar", + "data": [ + { + "value": [ + 4200, + 3000, + 20000, + 35000, + 50000, + 18000 + ], + "name": "Allocated Budget" + }, + { + "value": [ + 5000, + 14000, + 28000, + 26000, + 42000, + 21000 + ], + "name": "Actual Spending" + } + ] + } + ] + }, + "size": { + "type": "object", + "default": { + "width": 100, + "height": 450 + } + }, + "radar": { + "type": "object", + "properties": { + "indicator": { + "type": "array", + "default": [ + { + "name": "AAAAA", + "max": 6500 + }, + { + "name": "BBBBB", + "max": 16000 + }, + { + "name": "CCCCC", + "max": 30000 + }, + { + "name": "DDDDD", + "max": 38000 + }, + { + "name": "EEEEE", + "max": 52000 + }, + { + "name": "FFFFF", + "max": 25000 + } + ] + }, + "shape": { + "type": "string", + "default": "polygon" + } + } + } + }, + "required": [ + "id", + "type" + ] +} \ No newline at end of file diff --git a/packages/charts-vue/components/charts-radar/src/schema/schema-mapper.ts b/packages/charts-vue/components/charts-radar/src/schema/schema-mapper.ts new file mode 100644 index 00000000000..04d7b384ed9 --- /dev/null +++ b/packages/charts-vue/components/charts-radar/src/schema/schema-mapper.ts @@ -0,0 +1,17 @@ +import { resolveAppearance, MapperFunction } from '@farris/charts-vue/components/dynamic-resolver'; + + +function createTemplatePropResolver(name: string): MapperFunction { + return (key: string, content: string) => { + if (!content) { + return {}; + } + const templateInfo = { name, content }; + + return { text: templateInfo }; + }; +} + +export const schemaMapper = new Map([ + ['appearance', resolveAppearance] +]); diff --git a/packages/charts-vue/components/charts-radar/src/schema/schema-resolver.ts b/packages/charts-vue/components/charts-radar/src/schema/schema-resolver.ts new file mode 100644 index 00000000000..6fb4684c3dd --- /dev/null +++ b/packages/charts-vue/components/charts-radar/src/schema/schema-resolver.ts @@ -0,0 +1,5 @@ +import { DynamicResolver } from '@farris/charts-vue/components/dynamic-resolver'; + +export function schemaResolver(resolver: DynamicResolver, schema: Record, context: Record): Record { + return schema; +} diff --git a/packages/charts-vue/components/dynamic-resolver/src/converter/cascade.converter.ts b/packages/charts-vue/components/dynamic-resolver/src/converter/cascade.converter.ts index 8888e523e21..23a6c5da37d 100644 --- a/packages/charts-vue/components/dynamic-resolver/src/converter/cascade.converter.ts +++ b/packages/charts-vue/components/dynamic-resolver/src/converter/cascade.converter.ts @@ -30,3 +30,6 @@ export const titleConverter = generateCascadePropertyConverter('title', { items: export const legendConverter = generateCascadePropertyConverter('legend', { items: [] }); export const xAxisConverter = generateCascadePropertyConverter('xAxis', { items: [] }); export const yAxisConverter = generateCascadePropertyConverter('yAxis', { items: [] }); +export const radarConverter = generateCascadePropertyConverter('radar', { items: [] }); + + diff --git a/packages/charts-vue/components/index.ts b/packages/charts-vue/components/index.ts index 1816146ad34..870936d7682 100644 --- a/packages/charts-vue/components/index.ts +++ b/packages/charts-vue/components/index.ts @@ -31,9 +31,13 @@ export * from './components'; // 导出设计器部分组件及属性 // export * from './designer'; +export {FChartsProcessGauge} from './charts-process-gauge'; export {FChartsPie} from './charts-pie'; export {FChartsCombined} from './charts-combined'; export {FChartsScatter} from './charts-scatter'; +export {FChartsFunnel} from './charts-funnel'; +export {FChartsGraph} from './charts-graph'; +export {FChartsRadar} from './charts-radar'; // 不注册设计时组件 diff --git a/packages/designer/src/components/composition/designer-context/use-mobile-designer-context.ts b/packages/designer/src/components/composition/designer-context/use-mobile-designer-context.ts index 915fa5e20c0..66b41c4ae60 100644 --- a/packages/designer/src/components/composition/designer-context/use-mobile-designer-context.ts +++ b/packages/designer/src/components/composition/designer-context/use-mobile-designer-context.ts @@ -11,7 +11,10 @@ import { HtmlTemplate } from "../../../../../mobile-ui-vue/components/html-templ import { useMobileControlCreator } from "../control-creator/use-mobile-control-creator"; import { PageComponent, UsePageSchema } from "../../../components/types"; import ControllCategories from '../schema-repository/controller/mobile-categories'; -import { FChartsBar, FChartsLine, FChartsPie, FChartsCombined, FChartsScatter } from '@farris/charts-vue/components'; +import { + FChartsBar, FChartsLine, FChartsPie, FChartsCombined, FChartsScatter, + FChartsFunnel, FChartsGraph, FChartsProcessGauge, FChartsRadar +} from '@farris/charts-vue/components'; export function useMobileDesignerContext(): UseDesignerContext { /** 设计器模式 */ @@ -26,8 +29,9 @@ export function useMobileDesignerContext(): UseDesignerContext { ContentContainer, Card, FloatContainer, Textarea, DatePicker, DateTimePicker, Lookup, Navbar, ListView, Picker, NumberInput, Switch, CheckboxGroup, RadioGroup, Form, FormItem, InputGroup, - Button, ButtonGroup, - FChartsBar, FChartsLine, FChartsPie, FChartsCombined, FChartsScatter + Button, ButtonGroup, HtmlTemplate, + FChartsBar, FChartsLine, FChartsPie, FChartsCombined, FChartsScatter, + FChartsFunnel, FChartsGraph, FChartsProcessGauge, FChartsRadar ]; diff --git a/packages/designer/src/components/types/toolbox/mobile-toolbox.json b/packages/designer/src/components/types/toolbox/mobile-toolbox.json index 47def036478..391a23cbce5 100644 --- a/packages/designer/src/components/types/toolbox/mobile-toolbox.json +++ b/packages/designer/src/components/types/toolbox/mobile-toolbox.json @@ -1,40 +1,68 @@ [ -{ + { "type": "charts", "name": "图表控件", "items": [ { "id": "ChartsBar", "type": "charts-bar", - "name": "charts-bar", + "name": "柱状图", "category": "charts", "icon": "charts" }, { "id": "ChartsLine", "type": "charts-line", - "name": "charts-line", + "name": "折线图", "category": "charts", "icon": "charts" }, { "id": "ChartsPie", "type": "charts-pie", - "name": "charts-pie", + "name": "饼图", "category": "charts", "icon": "charts" }, { "id": "ChartsCombined", "type": "charts-combined", - "name": "charts-combined", + "name": "组合图表", "category": "charts", "icon": "charts" }, { "id": "ChartsScatter", "type": "charts-scatter", - "name": "charts-scatter", + "name": "散点图", + "category": "charts", + "icon": "charts" + }, + { + "id": "ChartsFunnel", + "type": "charts-funnel", + "name": "漏斗图", + "category": "charts", + "icon": "charts" + }, + { + "id": "ChartsGraph", + "type": "charts-graph", + "name": "关系图", + "category": "charts", + "icon": "charts" + }, + { + "id": "ChartsProcessGauge", + "type": "charts-process-gauge", + "name": "进度仪表图", + "category": "charts", + "icon": "charts" + }, + { + "id": "ChartsRadar", + "type": "charts-radar", + "name": "雷达图", "category": "charts", "icon": "charts" } @@ -180,7 +208,8 @@ "name": "卡片", "category": "container", "icon": "section" - },{ + }, + { "id": "HtmlTemplate", "type": "html-template", "name": "Html模板", -- Gitee From e307adb8a31603007021ee7dc7cabf560809e55a Mon Sep 17 00:00:00 2001 From: cy <15990550+langchaocy@user.noreply.gitee.com> Date: Tue, 8 Jul 2025 11:38:20 +0800 Subject: [PATCH 20/23] =?UTF-8?q?feature:=20=E4=B8=BA=E7=9F=A9=E5=BD=A2?= =?UTF-8?q?=E6=A0=91=E5=9B=BE=E6=96=B0=E5=A2=9E=E6=8B=96=E6=8B=BD=E6=B7=BB?= =?UTF-8?q?=E5=8A=A0=E5=8A=9F=E8=83=BD=EF=BC=8C=E5=B9=B6=E8=83=BD=E5=9C=A8?= =?UTF-8?q?=E5=B1=9E=E6=80=A7=E9=9D=A2=E6=9D=BF=E8=BF=9B=E8=A1=8C=E7=AE=80?= =?UTF-8?q?=E5=8D=95=E7=9A=84=E5=B1=9E=E6=80=A7=E9=85=8D=E7=BD=AE=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/charts-treemap/index.ts | 20 +- .../src/charts-treemap.component.tsx | 6 +- .../src/charts-treemap.props.ts | 13 + .../charts-treemap.design.component.tsx | 49 + .../src/designer/use-designer-rules.ts | 57 ++ .../charts-treemap.property-config.ts | 488 ++++++++++ .../src/schema/charts-treemap.schema.json | 834 ++++++++++++++++++ .../src/schema/schema-mapper.ts | 17 + .../src/schema/schema-resolver.ts | 5 + packages/charts-vue/components/index.ts | 1 + .../use-mobile-designer-context.ts | 4 +- .../types/toolbox/mobile-toolbox.json | 7 + 12 files changed, 1492 insertions(+), 9 deletions(-) create mode 100644 packages/charts-vue/components/charts-treemap/src/designer/charts-treemap.design.component.tsx create mode 100644 packages/charts-vue/components/charts-treemap/src/designer/use-designer-rules.ts create mode 100644 packages/charts-vue/components/charts-treemap/src/property-config/charts-treemap.property-config.ts create mode 100644 packages/charts-vue/components/charts-treemap/src/schema/charts-treemap.schema.json create mode 100644 packages/charts-vue/components/charts-treemap/src/schema/schema-mapper.ts create mode 100644 packages/charts-vue/components/charts-treemap/src/schema/schema-resolver.ts diff --git a/packages/charts-vue/components/charts-treemap/index.ts b/packages/charts-vue/components/charts-treemap/index.ts index 6d7e575c84b..90bcff7a4c2 100644 --- a/packages/charts-vue/components/charts-treemap/index.ts +++ b/packages/charts-vue/components/charts-treemap/index.ts @@ -1,6 +1,20 @@ -import FChartsTreemap from './src/charts-treemap.component'; -import { withInstall } from '@farris/charts-vue/components/charts-common'; +import FChartsTreemapInstallless from './src/charts-treemap.component'; +import { propsResolverGenerator } from './src/charts-treemap.props'; +import { withInstall, withRegister, withRegisterDesigner } from '@farris/charts-vue/components/charts-common'; +import ChartsTreemapDesign from './src/designer/charts-treemap.design.component'; export * from './src/charts-treemap.props'; + +const CHARTS_TREEMAP_REGISTERED_NAME = 'charts-treemap'; +// FChartsTreemap.register = (componentMap: Record, propsResolverMap: Record, configResolverMap: Record, resolverMap: Record) => { +// componentMap['charts-treemap'] = FChartsTreemap; +// propsResolverMap['charts-treemap'] = propsResolver; +// }; + +const FChartsTreemap = withInstall(FChartsTreemapInstallless) + +withRegister(FChartsTreemap, {name: CHARTS_TREEMAP_REGISTERED_NAME, propsResolverGenerator}) +withRegisterDesigner(FChartsTreemap, { name: CHARTS_TREEMAP_REGISTERED_NAME, propsResolverGenerator, designerComponent: ChartsTreemapDesign }); + export { FChartsTreemap }; -export default withInstall(FChartsTreemap); +export default FChartsTreemap diff --git a/packages/charts-vue/components/charts-treemap/src/charts-treemap.component.tsx b/packages/charts-vue/components/charts-treemap/src/charts-treemap.component.tsx index 2a70d84354b..964e3b5cbf7 100644 --- a/packages/charts-vue/components/charts-treemap/src/charts-treemap.component.tsx +++ b/packages/charts-vue/components/charts-treemap/src/charts-treemap.component.tsx @@ -61,8 +61,6 @@ export default defineComponent({ ...theme, title: props.title || {}, grid: props.grid || {}, - // xAxis: props.xAxis || {}, - // yAxis: props.yAxis || {}, tooltip: props.tooltip || {}, legend: props.legend || {}, toolbox: props.toolbox || {}, @@ -122,8 +120,8 @@ export default defineComponent({
); diff --git a/packages/charts-vue/components/charts-treemap/src/charts-treemap.props.ts b/packages/charts-vue/components/charts-treemap/src/charts-treemap.props.ts index 00a5ba801d0..66618e72cc2 100644 --- a/packages/charts-vue/components/charts-treemap/src/charts-treemap.props.ts +++ b/packages/charts-vue/components/charts-treemap/src/charts-treemap.props.ts @@ -5,6 +5,10 @@ import { SelectProps, TooltipProps, SelectedModeType, ScaleLimitProps, TextStyleProps, LegendProps, TitleProps, GridProps, DataZoomProps } from '@farris/charts-vue/components/charts-common'; +import { getPropsResolverGenerator } from '@farris/charts-vue/components/dynamic-resolver'; +import chartsTreemapSchema from './schema/charts-treemap.schema.json'; +import { schemaMapper } from './schema/schema-mapper'; +import { schemaResolver } from './schema/schema-resolver'; export const breadcrumbProps = { @@ -153,8 +157,17 @@ export const chartsTreemapProps = { height: { type: [String, Number] }, + size: { type: Object }, + ...animationProps } as Record; export type ChartsTreemapProps = ExtractPropTypes; + +export const propsResolverGenerator = getPropsResolverGenerator( + chartsTreemapProps, + chartsTreemapSchema, + schemaMapper, + schemaResolver +); \ No newline at end of file diff --git a/packages/charts-vue/components/charts-treemap/src/designer/charts-treemap.design.component.tsx b/packages/charts-vue/components/charts-treemap/src/designer/charts-treemap.design.component.tsx new file mode 100644 index 00000000000..35ceb24675f --- /dev/null +++ b/packages/charts-vue/components/charts-treemap/src/designer/charts-treemap.design.component.tsx @@ -0,0 +1,49 @@ +import { computed, defineComponent, inject, onMounted, ref, SetupContext, watch } from 'vue'; +import { DesignerHostService, DesignerItemContext } from '@farris/charts-vue/components/charts-common/src/types'; +import { useDesignerComponent } from '@farris/charts-vue/components/charts-common/src/compositions/use-designer-component'; + +import { ChartsTreemapProps, chartsTreemapProps } from '../charts-treemap.props'; +import FChartsTreemap from '../charts-treemap.component'; +import { useDesignerRules } from './use-designer-rules'; + +export default defineComponent({ + name: 'FmChartsTreemapDesign', + props: chartsTreemapProps, + emits: ['click'], + setup(props: ChartsTreemapProps, context: SetupContext) { + const elementRef = ref(); + const designerHostService = inject('designer-host-service'); + const designItemContext = inject('design-item-context') as DesignerItemContext; + const designerRulesComposition = useDesignerRules(designItemContext, designerHostService); + const componentInstance = useDesignerComponent(elementRef, designItemContext, designerRulesComposition); + onMounted(() => { + elementRef.value.componentInstance = componentInstance; + }); + + context.expose(componentInstance.value); + + const chartsTreemapProps1 = computed(() => ({ + size: props.size, + title: props.title, + grid: props.grid, + tooltip: props.tooltip, + legend: props.legend, + toolbox: props.toolbox, + animation: props.animation, + animationDuration: props.animationDuration, + animationEasingUpdate: props.animationEasingUpdate, + series: props.series.map((series) => { + const s = { ...series }; + s.type = 'treemap'; + return s; + }) + })); + + + return () => { + return ( + + ); + }; + } +}); diff --git a/packages/charts-vue/components/charts-treemap/src/designer/use-designer-rules.ts b/packages/charts-vue/components/charts-treemap/src/designer/use-designer-rules.ts new file mode 100644 index 00000000000..5a0dbade2ec --- /dev/null +++ b/packages/charts-vue/components/charts-treemap/src/designer/use-designer-rules.ts @@ -0,0 +1,57 @@ +import { ref } from "vue"; +import { DraggingResolveContext } from "@farris/charts-vue/components/charts-common/src/types"; +import { DesignerHostService, DesignerItemContext, UseDesignerRules } from "@farris/charts-vue/components/charts-common/src/types"; +import { ChartsTreemapProperty } from "../property-config/charts-treemap.property-config"; + +export function useDesignerRules(designItemContext: DesignerItemContext, designerHostService?: DesignerHostService): UseDesignerRules { + + const triggerBelongedComponentToMoveWhenMoved = ref(false); + + const triggerBelongedComponentToDeleteWhenDeleted = ref(false); + + function canAccepts(draggingContext: DraggingResolveContext): boolean { + + return false; + } + + + function checkCanMoveComponent() { + return true; + } + function checkCanDeleteComponent() { + return true; + } + + function hideNestedPaddingInDesginerView() { + return true; + } + + function getStyles(): string { + return ' '; + } + + function getDesignerClass(): string { + return ' '; + } + + /** + * 获取属性配置 + */ + function getPropsConfig(componentId: string) { + const componentProp = new ChartsTreemapProperty(componentId, designerHostService); + const { schema } = designItemContext; + return componentProp.getPropertyConfig(schema); + } + + return { + canAccepts, + // triggerBelongedComponentToMoveWhenMoved, + // triggerBelongedComponentToDeleteWhenDeleted, + // checkCanMoveComponent, + // checkCanDeleteComponent, + hideNestedPaddingInDesginerView, + // getStyles, + // getDesignerClass, + getPropsConfig + }; +} diff --git a/packages/charts-vue/components/charts-treemap/src/property-config/charts-treemap.property-config.ts b/packages/charts-vue/components/charts-treemap/src/property-config/charts-treemap.property-config.ts new file mode 100644 index 00000000000..13f92b3c4a8 --- /dev/null +++ b/packages/charts-vue/components/charts-treemap/src/property-config/charts-treemap.property-config.ts @@ -0,0 +1,488 @@ +import { BaseControlProperty } from "@farris/charts-vue/components/charts-common/src/props"; +import { gridConverter, titleConverter, sizeConverter, legendConverter, xAxisConverter, yAxisConverter } from "@farris/charts-vue/components/dynamic-resolver/src/converter"; + + +export class ChartsTreemapProperty extends BaseControlProperty { + + constructor(componentId: string, designerHostService: any) { + super(componentId, designerHostService); + } + public getPropertyConfig(propertyData: any) { + this.propertyConfig.categories['basic'] = this.getBasicPropConfig(propertyData); + + this.propertyConfig.categories['appearance'] = this.getAppearanceConfig(propertyData); + + this.propertyConfig.categories['behavior'] = this.getChartsTreemapBehaviorConfig(propertyData); + + this.propertyConfig.categories['title'] = this.getChartsTreemapTitleConfig(propertyData); + + this.propertyConfig.categories['legend'] = this.getChartsTreemapLegendConfig(propertyData); + + this.propertyConfig.categories['grid'] = this.getChartsTreemapGridConfig(propertyData); + + return this.propertyConfig; + } + private getChartsTreemapTitleConfig(propertyData) { + return{ + title: 'Title', + $converter: titleConverter, + properties: { + show: { + title: '标题是否展示', + type: 'boolean', + }, + text: { + title: '标题', + }, + link: { + title: '标题链接', + type: 'string', + }, + target: { + title: 'target', + type: 'select', + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'self' , name: '当前窗口打开' }, + { value:'blank' , name: '新窗口打开' }, + ] + } + }, + subtext: { + title: '副标题', + type: 'string', + }, + sublink: { + title: 'sublink', + type: 'string', + }, + subtarget: { + title: 'subtarget', + type: 'select', + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'self' , name: '当前窗口打开' }, + { value:'blank' , name: '新窗口打开' }, + ] + } + }, + itemGap: { + title: '主副标题之间的间距', + type: 'number', + }, + top: { + title: 'top', + type: [ + "string", + "number" + ], + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'top' , name: 'top' }, + { value:'middle' , name: 'middle' }, + { value:'bottom' , name: 'bottom' }, + + ] + } + }, + bottom: { + title: 'bottom', + type: [ + "string", + "number" + ], + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'top' , name: 'top' }, + { value:'middle' , name: 'middle' }, + { value:'bottom' , name: 'bottom' }, + + ] + } + }, + left: { + title: 'left', + type: [ + "string", + "number" + ], + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'left' , name: 'left' }, + { value:'center' , name: 'center' }, + { value:'right' , name: 'right' }, + + ] + } + }, + right: { + title: 'right', + type: [ + "string", + "number" + ], + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'left' , name: 'left' }, + { value:'center' , name: 'center' }, + { value:'right' , name: 'right' }, + + ] + } + }, + triggerEvent: { + title: '是否触发事件triggerEvent', + type: 'boolean', + }, + + } + }; + } + + private getChartsTreemapGridConfig(propertyData) { + return{ + title: 'Grid', + $converter: gridConverter, + properties: { + show: { + title: 'show', + type: 'boolean', + }, + zlevel: { + title: 'zlevel', + type: 'number', + }, + z: { + title: 'z', + type: 'number', + }, + top: { + title: 'top', + type: ['number',"string"] + }, + bottom: { + title: 'bottom', + type: ['number',"string"] + }, + left: { + title: 'left', + type: ['number',"string"] + }, + right: { + title: 'right', + type: ['number',"string"] + }, + width: { + title: 'width', + type: ['number',"string"] + }, + height: { + title: 'height', + type: ['number',"string"] + }, + containLabel: { + title: 'containLabel', + type: 'boolean', + }, + backgroundColor: { + title: 'backgroundColor', + type: 'string', + }, + borderColor: { + title: 'borderColor', + type: 'string', + }, + borderWidth: { + title: 'borderWidth', + type: 'number', + } + + } + }; + } + + private getChartsTreemapLegendConfig(propertyData) { + return{ + title: 'Legend', + $converter: legendConverter, + properties: { + show: { + title: 'show', + type: 'boolean', + }, + type: { + title: 'type', + type: 'string', + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'plain' , name: 'plain' }, + { value:'scroll' , name: 'scroll' }, + ] + } + }, + top: { + title: 'top', + type: [ + "string", + "number" + ], + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'top' , name: 'top' }, + { value:'middle' , name: 'middle' }, + { value:'bottom' , name: 'bottom' }, + + ] + } + }, + bottom: { + title: 'bottom', + type: [ + "string", + "number" + ], + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'top' , name: 'top' }, + { value:'middle' , name: 'middle' }, + { value:'bottom' , name: 'bottom' }, + + ] + } + }, + left: { + title: 'left', + type: [ + "string", + "number" + ], + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'left' , name: 'left' }, + { value:'center' , name: 'center' }, + { value:'right' , name: 'right' }, + + ] + } + }, + right: { + title: 'right', + type: [ + "string", + "number" + ], + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'left' , name: 'left' }, + { value:'center' , name: 'center' }, + { value:'right' , name: 'right' }, + + ] + } + }, + width: { + title: 'width', + type: [ + "string", + "number" + ], + }, + height: { + title: 'height', + type: [ + "string", + "number" + ], + }, + orient: { + title: 'orient', + type: 'string', + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'horizontal' , name: 'horizontal' }, + { value:'vertical' , name: 'vertical' }, + ] + } + }, + align: { + title: 'align', + type: 'string', + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'auto' , name: 'auto' }, + { value:'left' , name: 'left' }, + { value:'right' , name: 'right' }, + + ] + } + }, + padding: { + title: 'padding', + type: 'number', + }, + itemGap: { + title: 'itemGap', + type: 'number', + }, + itemWidth: { + title: 'itemWidth', + type: 'number', + }, + itemHeight: { + title: 'itemHeight', + type: 'number', + }, + tooltip: { + title: 'tooltip', + type: 'boolean', + }, + icon: { + title: 'icon', + type: 'string', + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + editable: false, + data: [ + { value:'circle' , name: 'circle' }, + { value:'rect' , name: 'rect' }, + { value:'roundRect' , name: 'roundRect' }, + { value:'triangle' , name: 'triangle' }, + { value:'diamond' , name: 'diamond' }, + { value:'pin' , name: 'pin' }, + { value:'arrow' , name: 'arrow' }, + { value:'none' , name: 'none' }, + + ] + } + }, + } + }; + } + + private getChartsTreemapBehaviorConfig(propertyData) { + return { + description: "基本信息", + title: "行为", + properties: { + size: { + title: "尺寸", + type: "cascade", + description: "组件的尺寸", + isExpand: true, + properties: { + width: { + title: "宽度（%）", + type: "number", + description: "组件的宽度", + editor: { + min: 0, + decimals: 0, + nullable: true, + }, + $converter: sizeConverter, + }, + height: { + title: "高度（px）", + type: "number", + description: "组件的高度", + editor: { + min: 0, + decimals: 0, + nullable: true, + }, + $converter: sizeConverter, + } + } + }, + name: { + title: "name", + type: 'string', + }, + // series: { + // title: 'series', + // type: "array", + // editor: { + // type: 'item-collection-editor', + // columns: [ + // {field: 'name', title: 'name', dataType: 'string'}, + // {field: 'xAxisIndex', title: 'xAxisIndex', dataType: 'number'}, + // {field: 'yAxisIndex', title: 'yAxisIndex', dataType: 'number'}, + // {field: 'clip', title: 'clip', dataType: 'boolean'}, + // {field: 'data', title: 'data', dataType: 'array', + // editor: { + // type: 'item-collection-editor', + // columns: [{field: 'value', title: 'value', dataType: 'number' }] + // } + // }, + // ], + // }, + // }, + + + } + }; + } + +} diff --git a/packages/charts-vue/components/charts-treemap/src/schema/charts-treemap.schema.json b/packages/charts-vue/components/charts-treemap/src/schema/charts-treemap.schema.json new file mode 100644 index 00000000000..4c380a796dd --- /dev/null +++ b/packages/charts-vue/components/charts-treemap/src/schema/charts-treemap.schema.json @@ -0,0 +1,834 @@ +{ + "$schema": "https://json-schema.org/draft/2020-12/schema", + "$id": "https://farris-design.gitee.io/charts-treemap.schema.json", + "title": "charts-treemap", + "description": "A Farris Treemap Component", + "type": "object", + "properties": { + "id": { + "description": "The unique identifier for a Input Group", + "type": "string" + }, + "type": { + "description": "The type string of Input Group component", + "type": "string", + "default": "charts-treemap" + }, + "name": { + "type": "string", + "default": "charts-treemap" + }, + "code": { + "type": "string" + }, + "color": { + "type": "array", + "default": [ + "#5470c6", + "#91cc75", + "#fac858", + "#ee6666", + "#73c0de", + "#3ba272", + "#fc8452", + "#9a60b4", + "#ea7ccc" + ] + }, + "textStyle": { + "type": "object", + "properties": { + "color": { + "type": "string", + "default": "#808080" + }, + "fontStyle": { + "type": "string", + "enum": [ + "normal", + "italic", + "oblique" + ], + "default": "normal" + }, + "fontWeight": { + "type": "string", + "enum": [ + "normal", + "bold", + "bolder", + "lighter" + ], + "default": "normal" + }, + "fontFamily": { + "type": "string", + "enum": [ + "serif", + "monospace", + "Arial", + "Courier New" + ], + "default": "serif" + }, + "fontSize": { + "type": "number", + "default": 12 + }, + "lineHeight": { + "type": "number" + }, + "width": { + "type": "number" + }, + "height": { + "type": "number" + }, + "overflow": { + "type": "string", + "enum": [ + "none", + "truncate", + "break", + "breakAll" + ], + "default": "none" + }, + "ellipsis": { + "type": "string", + "description": "在overflow配置为'truncate'的时候，可以通过该属性配置末尾显示的文本", + "default": "..." + } + } + }, + "title": { + "type": "object", + "properties": { + "id": { + "type": "string", + "default": "" + }, + "show": { + "type": "boolean", + "default": true + }, + "text": { + "type": "string", + "default": "" + }, + "link": { + "type": "string", + "default": "" + }, + "target": { + "type": "string", + "enum": [ + "blank", + "self" + ], + "default": "blank" + }, + "textStyle": { + "type": "object", + "properties": { + "color": { + "type": "string", + "default": "#2D2F33" + }, + "fontStyle": { + "type": "string", + "enum": [ + "normal", + "italic", + "oblique" + ], + "default": "normal" + }, + "fontWeight": { + "type": [ + "string", + "number" + ], + "enum": [ + "normal", + "bold", + "bolder", + "lighter" + ], + "default": 500 + }, + "fontFamily": { + "type": "string", + "enum": [ + "serif", + "monospace", + "Arial", + "Courier New" + ], + "default": "serif" + }, + "lineHeight": { + "type": "number", + "default": 26 + } + } + }, + "subtext": { + "type": "string", + "default": "" + }, + "sublink": { + "type": "string", + "default": "" + }, + "subtarget": { + "type": "string", + "enum": [ + "blank", + "self" + ], + "default": "blank" + }, + "subtextStyle": { + "type": "object", + "properties": { + "color": { + "type": "string", + "default": "#2D2F33" + }, + "fontStyle": { + "type": "string", + "enum": [ + "normal", + "italic", + "oblique" + ], + "default": "normal" + }, + "fontWeight": { + "type": [ + "string", + "number" + ], + "enum": [ + "normal", + "bold", + "bolder", + "lighter" + ], + "default": "normal" + }, + "fontFamily": { + "type": "string", + "enum": [ + "serif", + "monospace", + "Arial", + "Courier New" + ], + "default": "serif" + }, + "lineHeight": { + "type": "number", + "default": 20 + } + } + }, + "triggerEvent": { + "type": "boolean", + "default": true + }, + "padding": { + "type": "array", + "items": { + "type": "number" + }, + "default": [ + 5, + 5, + 5, + 5 + ] + }, + "itemGap": { + "type": "number", + "default": 10 + }, + "top": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "bottom": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "left": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "right": { + "type": [ + "string", + "number" + ], + "default": "auto" + } + } + }, + "legend": { + "type": "object", + "properties": { + "id": { + "type": "string", + "default": "" + }, + "show": { + "type": "boolean", + "default": true + }, + "type": { + "type": "string", + "enum": [ + "plain", + "scroll" + ], + "default": "plain" + }, + "top": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "bottom": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "left": { + "type": [ + "string", + "number" + ], + "default": "center" + }, + "right": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "width": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "height": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "orient": { + "type": [ + "string" + ], + "enum": [ + "horizontal", + "vertical" + ], + "default": "horizontal" + }, + "align": { + "type": "string", + "enum": [ + "auto", + "left", + "right" + ], + "default": "auto" + }, + "padding": { + "type": "number", + "default": 5 + }, + "itemGap": { + "type": "number", + "default": 10 + }, + "itemWidth": { + "type": "number", + "default": 12 + }, + "itemHeight": { + "type": "number", + "default": 12 + }, + "lineStyle": { + "type": "object", + "properties": { + "color": { + "type": "array", + "items": { + "type": "string" + } + } + } + }, + "textStyle": { + "type": "object", + "properties": { + "color": { + "type": "string", + "default": "#666666" + }, + "fontSize": { + "type": "number", + "default": 12 + }, + "fontStyle": { + "type": "string", + "enum": [ + "normal", + "italic", + "oblique" + ], + "default": "normal" + }, + "fontWeight": { + "type": [ + "string", + "number" + ], + "enum": [ + "normal", + "bold", + "bolder", + "lighter" + ], + "default": 400 + }, + "fontFamily": { + "type": "string", + "enum": [ + "serif", + "monospace", + "Arial", + "Courier New" + ], + "default": "serif" + }, + "lineHeight": { + "type": "number", + "default": 16 + } + } + }, + "formatter": { + "type": "object", + "default": "" + }, + "tooltip": { + "type": "boolean", + "default": false + }, + "icon": { + "type": "string", + "default": "" + } + } + }, + "grid": { + "type": "object", + "properties": { + "id": { + "type": "string", + "default": "" + }, + "show": { + "type": "boolean", + "default": false + }, + "zlevel": { + "type": "number", + "default": 0 + }, + "z": { + "type": "number", + "default": 0 + }, + "top": { + "type": [ + "string", + "number" + ], + "default": 60 + }, + "bottom": { + "type": [ + "string", + "number" + ], + "default": 60 + }, + "left": { + "type": [ + "string", + "number" + ], + "default": "10%" + }, + "right": { + "type": [ + "string", + "number" + ], + "default": "10%" + }, + "width": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "height": { + "type": [ + "string", + "number" + ], + "default": "auto" + }, + "containLabel": { + "type": "boolean", + "description": "grid 区域是否包含坐标轴的刻度标签。containLabel 为 false 的时候：grid.left grid.right grid.top grid.bottom grid.width grid.height 决定的是由坐标轴形成的矩形的尺寸和位置。这比较适用于多个 grid 进行对齐的场景，因为往往多个 grid 对齐的时候，是依据坐标轴来对齐的。containLabel 为 true 的时候：grid.left grid.right grid.top grid.bottom grid.width grid.height 决定的是包括了坐标轴标签在内的所有内容所形成的矩形的位置。这常用于『防止标签溢出』的场景，标签溢出指的是，标签长度动态变化时，可能会溢出容器或者覆盖其他组件", + "default": false + }, + "backgroundColor": { + "type": "string", + "default": "rgba(1,51,100,0.05)" + }, + "borderColor": { + "type": "string", + "default": "#FFFFFF" + }, + "borderWidth": { + "type": "number", + "default": 0 + }, + "tooltip": { + "type": "object", + "properties": { + "show": { + "type": "boolean" + }, + "padding": { + "type": "number" + }, + "trigger": { + "type": "string", + "enum": [ + "item", + "axis", + "none" + ] + }, + "formatter": { + "type": "object" + }, + "valueFormater": { + "type": "object" + }, + "textStyle": { + "type": "object", + "properties": { + "color": { + "type": "string" + }, + "fontStyle": { + "type": "string", + "enum": [ + "normal", + "italic", + "oblique" + ] + }, + "fontWeight": { + "type": [ + "string", + "number" + ], + "enum": [ + "normal", + "bold", + "bolder", + "lighter" + ] + }, + "fontFamily": { + "type": "string", + "enum": [ + "serif", + "monospace", + "Arial", + "Courier New" + ] + }, + "lineHeight": { + "type": "number" + } + } + }, + "axisPointer": { + "type": "object", + "properties": { + "type": { + "type": "string", + "enum": [ + "line", + "shadow", + "none", + "cross" + ], + "description": "指示器类型。" + }, + "axis": { + "type": "string", + "enum": [ + "x", + "y", + "radius", + "angle" + ], + "description": "指示器的坐标轴。默认情况，坐标系会自动选择显示哪个轴的 axisPointer（默认取类目轴或者时间轴）" + }, + "label": { + "type": "object", + "properties": { + "show": { + "type": "boolean", + "description": "是否显示文本标签。" + }, + "precision": { + "type": [ + "number", + "string" + ], + "description": "文本标签中数值的小数点精度。默认根据当前轴的值自动判断。也可以指定如 2 表示保留两位小数" + }, + "margin": { + "type": "number", + "description": "label 距离轴的距离" + }, + "color": { + "type": "string", + "description": "文字的颜色" + }, + "fontStyle": { + "type": "string", + "enum": [ + "normal", + "italic", + "oblique" + ], + "description": "文字字体的风格" + }, + "fontWeight": { + "type": [ + "number", + "string" + ], + "description": "文字字体的粗细. normal bold bolder lighter, 100|200|300|400" + }, + "fontFamily": { + "type": "string", + "description": "文字的字体系列. 'serif' , 'monospace', 'Arial', 'Courier' 'New', 'Microsoft YaHei', ..." + }, + "fontSize": { + "type": "number" + }, + "lineHeight": { + "type": "number" + }, + "width": { + "type": "number" + }, + "height": { + "type": "number" + }, + "overflow": { + "type": "string", + "enum": [ + "none", + "truncate", + "break", + "breakAll" + ], + "description": "文字超出宽度是否截断或者换行。配置width时有效" + }, + "padding": { + "type": "array" + }, + "backgroundColor": { + "type": "string" + }, + "borderColor": { + "type": "string" + }, + "borderWidth": { + "type": "number" + } + } + }, + "lineStyle": { + "type": "object", + "properties": { + "color": { + "type": "string" + }, + "width": { + "type": "number" + }, + "type": { + "type": [ + "string", + "array" + ], + "description": "线的类型" + }, + "cap": { + "type": "string", + "enum": [ + "butt", + "round", + "square" + ], + "description": "用于指定线段的绘制方式" + }, + "join": { + "type": "string", + "enum": [ + "bevel", + "round", + "miter" + ], + "description": "用于设置2个长度不为0的相连部分（线段，圆弧，曲线）如何连接在一起的属性" + } + } + } + } + } + } + } + } + }, + "appearance": { + "description": "", + "type": "object", + "properties": { + "class": { + "type": "string" + }, + "style": { + "type": "string" + } + }, + "default": {} + }, + "series": { + "type": "array", + "properties": { + "type": { + "type": "string", + "default": "treemap" + }, + "id": { + "type": "string", + "default": "" + }, + "name": { + "type": "string", + "default": "" + }, + "data": { + "type": "array", + "properties": { + "name": { + "type": "string" + }, + "value": { + "type": "number" + } + }, + "default": [] + } + }, + "default": [ + { + "type": "treemap", + "data": [ + { + "name": "nodeA", + "value": 40, + "children": [ + { + "name": "nodeA1", + "value": 20 + }, + { + "name": "nodeA2", + "value": 10 + }, + { + "name": "nodeA3", + "value": 10 + } + ] + }, + { + "name": "nodeB", + "value": 20, + "children": [ + { + "name": "nodeB1", + "value": 10 + }, + { + "name": "nodeB2", + "value": 10 + } + ] + } + ] + } + ] + }, + "size": { + "type": "object", + "default": { + "width": 100, + "height": 350 + } + } + }, + "required": [ + "id", + "type" + ] +} \ No newline at end of file diff --git a/packages/charts-vue/components/charts-treemap/src/schema/schema-mapper.ts b/packages/charts-vue/components/charts-treemap/src/schema/schema-mapper.ts new file mode 100644 index 00000000000..04d7b384ed9 --- /dev/null +++ b/packages/charts-vue/components/charts-treemap/src/schema/schema-mapper.ts @@ -0,0 +1,17 @@ +import { resolveAppearance, MapperFunction } from '@farris/charts-vue/components/dynamic-resolver'; + + +function createTemplatePropResolver(name: string): MapperFunction { + return (key: string, content: string) => { + if (!content) { + return {}; + } + const templateInfo = { name, content }; + + return { text: templateInfo }; + }; +} + +export const schemaMapper = new Map([ + ['appearance', resolveAppearance] +]); diff --git a/packages/charts-vue/components/charts-treemap/src/schema/schema-resolver.ts b/packages/charts-vue/components/charts-treemap/src/schema/schema-resolver.ts new file mode 100644 index 00000000000..6fb4684c3dd --- /dev/null +++ b/packages/charts-vue/components/charts-treemap/src/schema/schema-resolver.ts @@ -0,0 +1,5 @@ +import { DynamicResolver } from '@farris/charts-vue/components/dynamic-resolver'; + +export function schemaResolver(resolver: DynamicResolver, schema: Record, context: Record): Record { + return schema; +} diff --git a/packages/charts-vue/components/index.ts b/packages/charts-vue/components/index.ts index 870936d7682..37781a639b7 100644 --- a/packages/charts-vue/components/index.ts +++ b/packages/charts-vue/components/index.ts @@ -38,6 +38,7 @@ export {FChartsScatter} from './charts-scatter'; export {FChartsFunnel} from './charts-funnel'; export {FChartsGraph} from './charts-graph'; export {FChartsRadar} from './charts-radar'; +export {FChartsTreemap} from './charts-treemap'; // 不注册设计时组件 diff --git a/packages/designer/src/components/composition/designer-context/use-mobile-designer-context.ts b/packages/designer/src/components/composition/designer-context/use-mobile-designer-context.ts index 66b41c4ae60..accba543b75 100644 --- a/packages/designer/src/components/composition/designer-context/use-mobile-designer-context.ts +++ b/packages/designer/src/components/composition/designer-context/use-mobile-designer-context.ts @@ -13,7 +13,7 @@ import { PageComponent, UsePageSchema } from "../../../components/types"; import ControllCategories from '../schema-repository/controller/mobile-categories'; import { FChartsBar, FChartsLine, FChartsPie, FChartsCombined, FChartsScatter, - FChartsFunnel, FChartsGraph, FChartsProcessGauge, FChartsRadar + FChartsFunnel, FChartsGraph, FChartsProcessGauge, FChartsRadar, FChartsTreemap } from '@farris/charts-vue/components'; export function useMobileDesignerContext(): UseDesignerContext { @@ -31,7 +31,7 @@ export function useMobileDesignerContext(): UseDesignerContext { Form, FormItem, InputGroup, Button, ButtonGroup, HtmlTemplate, FChartsBar, FChartsLine, FChartsPie, FChartsCombined, FChartsScatter, - FChartsFunnel, FChartsGraph, FChartsProcessGauge, FChartsRadar + FChartsFunnel, FChartsGraph, FChartsProcessGauge, FChartsRadar, FChartsTreemap ]; diff --git a/packages/designer/src/components/types/toolbox/mobile-toolbox.json b/packages/designer/src/components/types/toolbox/mobile-toolbox.json index 391a23cbce5..9672d3e50b3 100644 --- a/packages/designer/src/components/types/toolbox/mobile-toolbox.json +++ b/packages/designer/src/components/types/toolbox/mobile-toolbox.json @@ -65,6 +65,13 @@ "name": "雷达图", "category": "charts", "icon": "charts" + }, + { + "id": "ChartsTreemap", + "type": "charts-treemap", + "name": "矩形树图", + "category": "charts", + "icon": "charts" } ] }, -- Gitee From 2b78ab6736c9374433003bce79b0205ce1a9a3f2 Mon Sep 17 00:00:00 2001 From: cy <15990550+langchaocy@user.noreply.gitee.com> Date: Tue, 8 Jul 2025 12:06:48 +0800 Subject: [PATCH 21/23] =?UTF-8?q?fix:=20=E5=9C=A8dg-control=E4=B8=AD?= =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=90=84=E7=A7=8D=E5=9B=BE=E8=A1=A8=E7=B1=BB?= =?UTF-8?q?=E5=9E=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/charts-common/src/props/dg-control.ts | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/packages/charts-vue/components/charts-common/src/props/dg-control.ts b/packages/charts-vue/components/charts-common/src/props/dg-control.ts index a9ac897e7d6..e24f17dced0 100644 --- a/packages/charts-vue/components/charts-common/src/props/dg-control.ts +++ b/packages/charts-vue/components/charts-common/src/props/dg-control.ts @@ -9,6 +9,16 @@ export const DgControl = { 'charts-scatter': { type: 'charts-scatter', name: '散点图', icon: 'ChartsScatter' }, + 'charts-graph': { type: '关系图', name: '散点图', icon: 'ChartsGraph' }, + + 'charts-process-gauge': { type: '进度仪表图', name: '散点图', icon: 'ChartsProcessGauge' }, + + 'charts-radar': { type: 'charts-radar', name: '雷达图', icon: 'ChartsRadar' }, + + 'charts-treemap': { type: 'charts-treemap', name: '矩形树图', icon: 'ChartsTreemap' }, + + 'charts-funnel': { type: 'charts-funnel', name: '漏斗图', icon: 'ChartsFunnel' }, + 'module': { type: 'Module', name: '模块', icon: 'Module' }, 'component': { type: 'component', name: '组件', icon: 'Component' }, -- Gitee From f2852280911ac867740eb0635a8ef4edcb3f7bf9 Mon Sep 17 00:00:00 2001 From: cy <15990550+langchaocy@user.noreply.gitee.com> Date: Tue, 8 Jul 2025 16:29:18 +0800 Subject: [PATCH 22/23] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E4=BA=86de-cont?= =?UTF-8?q?rol=E4=B8=AD=E7=9A=84=E5=B0=8F=E9=94=99=E8=AF=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/charts-common/src/props/dg-control.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/charts-vue/components/charts-common/src/props/dg-control.ts b/packages/charts-vue/components/charts-common/src/props/dg-control.ts index e24f17dced0..181ce52b10a 100644 --- a/packages/charts-vue/components/charts-common/src/props/dg-control.ts +++ b/packages/charts-vue/components/charts-common/src/props/dg-control.ts @@ -9,9 +9,9 @@ export const DgControl = { 'charts-scatter': { type: 'charts-scatter', name: '散点图', icon: 'ChartsScatter' }, - 'charts-graph': { type: '关系图', name: '散点图', icon: 'ChartsGraph' }, + 'charts-graph': { type: 'charts-graph', name: '关系图', icon: 'ChartsGraph' }, - 'charts-process-gauge': { type: '进度仪表图', name: '散点图', icon: 'ChartsProcessGauge' }, + 'charts-process-gauge': { type: 'charts-process-gauge', name: '进度仪表图', icon: 'ChartsProcessGauge' }, 'charts-radar': { type: 'charts-radar', name: '雷达图', icon: 'ChartsRadar' }, -- Gitee From c728000766485de59ac0070ce146a0f7b9e2a00b Mon Sep 17 00:00:00 2001 From: cy <15990550+langchaocy@user.noreply.gitee.com> Date: Tue, 8 Jul 2025 17:07:09 +0800 Subject: [PATCH 23/23] =?UTF-8?q?feature:=20=E5=AE=89=E8=A3=85=E4=BA=86thr?= =?UTF-8?q?ee=E6=A8=A1=E5=9D=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/ui-vue/package.json | 3 +- pnpm-lock.yaml | 884 +++++++++++++++++++++++------------ 2 files changed, 593 insertions(+), 294 deletions(-) diff --git a/packages/ui-vue/package.json b/packages/ui-vue/package.json index 9838dd43ea2..3519e0bbd97 100644 --- a/packages/ui-vue/package.json +++ b/packages/ui-vue/package.json @@ -50,7 +50,8 @@ "rxjs": "^7.4.0", "vite-plugin-dts": "^2.1.0", "vue": "^3.2.37", - "@farris/designer-dragula": "0.0.5" + "@farris/designer-dragula": "0.0.5", + "three": "^0.152.0" }, "devDependencies": { "@babel/parser": "^7.19.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5ad01d5ddf4..dbf9893f63c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -287,13 +287,13 @@ importers: version: 3.9.1(@types/node@18.19.57)(rollup@4.24.0)(typescript@5.6.3)(vite@5.4.9(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0)) vite-plugin-md: specifier: ^0.21.5 - version: 0.21.5(@vitejs/plugin-vue@5.1.4(vite@5.4.9(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3)))(happy-dom@14.12.3)(jsdom@20.0.3)(sass@1.80.3)(terser@5.36.0)(vite@5.4.9(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0)) + version: 0.21.5(happy-dom@14.12.3)(jsdom@20.0.3)(sass@1.80.3)(terser@5.36.0)(vite@5.4.9(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0)) vite-svg-loader: specifier: ^5.1.0 version: 5.1.0(vue@3.5.12(typescript@5.6.3)) vitepress: specifier: ^1.0.0-alpha.8 - version: 1.0.0-alpha.10(@algolia/client-search@4.24.0)(@types/node@18.19.57)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(sass@1.80.3)(search-insights@2.17.2)(terser@5.36.0)(typescript@5.6.3) + version: 1.0.0-alpha.10(@types/node@18.19.57)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(sass@1.80.3)(terser@5.36.0)(typescript@5.6.3) vitepress-theme-demoblock: specifier: 1.4.2 version: 1.4.2(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(sass@1.80.3)(typescript@5.6.3) @@ -408,7 +408,7 @@ importers: version: 9.3.7 jest: specifier: ^29.0.0 - version: 29.7.0(@types/node@18.19.57)(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.6.3)) + version: 29.7.0(@types/node@18.19.57)(ts-node@10.9.2(@types/node@18.19.57)(typescript@4.9.5)) lodash: specifier: ^4.17.21 version: 4.17.21 @@ -513,7 +513,7 @@ importers: version: 7.8.1 vite-plugin-dts: specifier: ^2.1.0 - version: 2.3.0(@types/node@18.19.57)(rollup@4.24.0)(vite@5.4.9(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0)) + version: 2.3.0(@types/node@20.5.1)(rollup@4.24.0)(vite@5.4.9(@types/node@20.5.1)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0)) vue: specifier: ^3.2.37 version: 3.5.12(typescript@5.6.3) @@ -565,10 +565,10 @@ importers: version: 7.18.0(eslint@9.19.0(jiti@1.21.6))(typescript@5.6.3) '@vitejs/plugin-vue': specifier: ^4.2.3 - version: 4.6.2(vite@5.4.9(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3)) + version: 4.6.2(vite@5.4.9(@types/node@20.5.1)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3)) '@vitejs/plugin-vue-jsx': specifier: ^3.0.1 - version: 3.1.0(vite@5.4.9(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3)) + version: 3.1.0(vite@5.4.9(@types/node@20.5.1)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3)) '@vue/babel-plugin-jsx': specifier: ^1.1.1 version: 1.2.5(@babel/core@7.25.8) @@ -604,7 +604,7 @@ importers: version: 9.3.7 jest: specifier: ^29.0.0 - version: 29.7.0(@types/node@18.19.57)(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.6.3)) + version: 29.7.0(@types/node@20.5.1)(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.6.3)) ora: specifier: ^6.1.2 version: 6.3.1 @@ -622,25 +622,25 @@ importers: version: 5.6.3 vite: specifier: ^5.3.3 - version: 5.4.9(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0) + version: 5.4.9(@types/node@20.5.1)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0) vite-plugin-banner: specifier: ^0.8.0 version: 0.8.0 vite-plugin-md: specifier: ^0.21.5 - version: 0.21.5(@vitejs/plugin-vue@4.6.2(vite@5.4.9(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3)))(happy-dom@8.9.0)(jsdom@20.0.3)(sass@1.80.3)(terser@5.36.0)(vite@5.4.9(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0)) + version: 0.21.5(happy-dom@8.9.0)(jsdom@20.0.3)(sass@1.80.3)(terser@5.36.0)(vite@5.4.9(@types/node@20.5.1)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0)) vite-svg-loader: specifier: ^5.1.0 version: 5.1.0(vue@3.5.12(typescript@5.6.3)) vitepress: specifier: ^1.0.0-alpha.8 - version: 1.0.0-alpha.10(@algolia/client-search@4.24.0)(@types/node@18.19.57)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(sass@1.80.3)(search-insights@2.17.2)(terser@5.36.0)(typescript@5.6.3) + version: 1.0.0-alpha.10(@algolia/client-search@4.24.0)(@types/node@20.5.1)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(sass@1.80.3)(search-insights@2.17.2)(terser@5.36.0)(typescript@5.6.3) vitepress-theme-demoblock: specifier: 1.4.2 version: 1.4.2(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(sass@1.80.3)(typescript@5.6.3) vitest: specifier: ^1.4.0 - version: 1.6.0(@types/node@18.19.57)(happy-dom@8.9.0)(jsdom@20.0.3)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0) + version: 1.6.0(@types/node@20.5.1)(happy-dom@8.9.0)(jsdom@20.0.3)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0) vue-tsc: specifier: ^2.0.0 version: 2.1.6(typescript@5.6.3) @@ -652,10 +652,10 @@ importers: version: 9.0.7 '@vitejs/plugin-vue': specifier: ^4.0.0 - version: 4.6.2(vite@4.5.5(@types/node@18.19.57)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@4.9.5)) + version: 4.6.2(vite@4.5.5(@types/node@20.5.1)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@4.9.5)) '@vitejs/plugin-vue-jsx': specifier: ^3.0.0 - version: 3.1.0(vite@4.5.5(@types/node@18.19.57)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@4.9.5)) + version: 3.1.0(vite@4.5.5(@types/node@20.5.1)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@4.9.5)) commander: specifier: ^9.4.0 version: 9.5.0 @@ -676,13 +676,13 @@ importers: version: 4.9.5 vite: specifier: ^4.4.1 - version: 4.5.5(@types/node@18.19.57)(sass@1.80.3)(terser@5.36.0) + version: 4.5.5(@types/node@20.5.1)(sass@1.80.3)(terser@5.36.0) vite-plugin-css-injected-by-js: specifier: ^3.5.2 - version: 3.5.2(vite@4.5.5(@types/node@18.19.57)(sass@1.80.3)(terser@5.36.0)) + version: 3.5.2(vite@4.5.5(@types/node@20.5.1)(sass@1.80.3)(terser@5.36.0)) vite-plugin-dts: specifier: ^3.9.1 - version: 3.9.1(@types/node@18.19.57)(rollup@4.24.0)(typescript@4.9.5)(vite@4.5.5(@types/node@18.19.57)(sass@1.80.3)(terser@5.36.0)) + version: 3.9.1(@types/node@20.5.1)(rollup@4.24.0)(typescript@4.9.5)(vite@4.5.5(@types/node@20.5.1)(sass@1.80.3)(terser@5.36.0)) devDependencies: rimraf: specifier: ^5.0.7 @@ -771,10 +771,10 @@ importers: version: 7.18.0(eslint@9.19.0(jiti@1.21.6))(typescript@5.6.3) '@vitejs/plugin-vue': specifier: ^4.2.3 - version: 4.6.2(vite@5.4.9(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3)) + version: 4.6.2(vite@5.4.9(@types/node@20.5.1)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3)) '@vitejs/plugin-vue-jsx': specifier: ^3.0.1 - version: 3.1.0(vite@5.4.9(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3)) + version: 3.1.0(vite@5.4.9(@types/node@20.5.1)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3)) '@vue/babel-plugin-jsx': specifier: ^1.1.1 version: 1.2.5(@babel/core@7.25.8) @@ -810,7 +810,7 @@ importers: version: 9.3.7 jest: specifier: ^29.0.0 - version: 29.7.0(@types/node@18.19.57)(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.6.3)) + version: 29.7.0(@types/node@20.5.1)(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.6.3)) ora: specifier: ^6.1.2 version: 6.3.1 @@ -831,28 +831,28 @@ importers: version: 5.6.3 vite: specifier: ^5.3.3 - version: 5.4.9(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0) + version: 5.4.9(@types/node@20.5.1)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0) vite-plugin-banner: specifier: ^0.8.0 version: 0.8.0 vite-plugin-dts: specifier: 3.9.1 - version: 3.9.1(@types/node@18.19.57)(rollup@4.24.0)(typescript@5.6.3)(vite@5.4.9(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0)) + version: 3.9.1(@types/node@20.5.1)(rollup@4.24.0)(typescript@5.6.3)(vite@5.4.9(@types/node@20.5.1)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0)) vite-plugin-md: specifier: ^0.21.5 - version: 0.21.5(@vitejs/plugin-vue@4.6.2(vite@5.4.9(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3)))(happy-dom@8.9.0)(jsdom@20.0.3)(sass@1.80.3)(terser@5.36.0)(vite@5.4.9(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0)) + version: 0.21.5(happy-dom@8.9.0)(jsdom@20.0.3)(sass@1.80.3)(terser@5.36.0)(vite@5.4.9(@types/node@20.5.1)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0)) vite-svg-loader: specifier: ^5.1.0 version: 5.1.0(vue@3.5.12(typescript@5.6.3)) vitepress: specifier: ^1.0.0-alpha.8 - version: 1.0.0-alpha.10(@algolia/client-search@4.24.0)(@types/node@18.19.57)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(sass@1.80.3)(search-insights@2.17.2)(terser@5.36.0)(typescript@5.6.3) + version: 1.0.0-alpha.10(@algolia/client-search@4.24.0)(@types/node@20.5.1)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(sass@1.80.3)(search-insights@2.17.2)(terser@5.36.0)(typescript@5.6.3) vitepress-theme-demoblock: specifier: 1.4.2 version: 1.4.2(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(sass@1.80.3)(typescript@5.6.3) vitest: specifier: ^1.4.0 - version: 1.6.0(@types/node@18.19.57)(happy-dom@8.9.0)(jsdom@20.0.3)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0) + version: 1.6.0(@types/node@20.5.1)(happy-dom@8.9.0)(jsdom@20.0.3)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0) vue-tsc: specifier: ^2.0.0 version: 2.1.6(typescript@5.6.3) @@ -910,7 +910,7 @@ importers: version: 0.4.4(rollup@4.24.0) '@vitejs/plugin-vue': specifier: ^5.1.2 - version: 5.1.4(vite@5.4.9(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3)) + version: 5.1.4(vite@5.4.9(@types/node@20.5.1)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3)) core-js: specifier: ^3.38.1 version: 3.39.0 @@ -934,16 +934,19 @@ importers: version: 5.6.3 vite: specifier: ^5.4.1 - version: 5.4.9(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0) + version: 5.4.9(@types/node@20.5.1)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0) vite-plugin-dts: specifier: ^2.1.0 - version: 2.3.0(@types/node@18.19.57)(rollup@4.24.0)(vite@5.4.9(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0)) + version: 2.3.0(@types/node@20.5.1)(rollup@4.24.0)(vite@5.4.9(@types/node@20.5.1)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0)) vue-tsc: specifier: ^2.0.29 version: 2.1.6(typescript@5.6.3) packages/designer: dependencies: + '@farris/charts-vue': + specifier: workspace:^ + version: link:../charts-vue '@farris/code-editor-vue': specifier: workspace:^ version: link:../code-editor @@ -980,7 +983,7 @@ importers: version: 7.25.7 '@commitlint/cli': specifier: ^19.3.0 - version: 19.5.0(@types/node@18.19.57)(typescript@4.9.5) + version: 19.5.0(@types/node@20.5.1)(typescript@4.9.5) '@commitlint/config-conventional': specifier: ^19.2.0 version: 19.5.0 @@ -1010,10 +1013,10 @@ importers: version: 7.18.0(eslint@9.19.0(jiti@1.21.6))(typescript@4.9.5) '@vitejs/plugin-vue': specifier: ^4.2.3 - version: 4.6.2(vite@4.5.5(@types/node@18.19.57)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@4.9.5)) + version: 4.6.2(vite@4.5.5(@types/node@20.5.1)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@4.9.5)) '@vitejs/plugin-vue-jsx': specifier: ^3.0.1 - version: 3.1.0(vite@4.5.5(@types/node@18.19.57)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@4.9.5)) + version: 3.1.0(vite@4.5.5(@types/node@20.5.1)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@4.9.5)) '@vue/babel-plugin-jsx': specifier: ^1.1.1 version: 1.2.5(@babel/core@7.25.8) @@ -1049,7 +1052,7 @@ importers: version: 9.3.7 jest: specifier: ^29.0.0 - version: 29.7.0(@types/node@18.19.57)(ts-node@10.9.2(@types/node@18.19.57)(typescript@4.9.5)) + version: 29.7.0(@types/node@20.5.1)(ts-node@10.9.2(@types/node@20.5.1)(typescript@4.9.5)) ora: specifier: ^6.1.2 version: 6.3.1 @@ -1067,19 +1070,19 @@ importers: version: 4.9.5 vite: specifier: ^4.4.1 - version: 4.5.5(@types/node@18.19.57)(sass@1.80.3)(terser@5.36.0) + version: 4.5.5(@types/node@20.5.1)(sass@1.80.3)(terser@5.36.0) vite-plugin-dts: specifier: ^2.1.0 - version: 2.3.0(@types/node@18.19.57)(rollup@4.24.0)(vite@4.5.5(@types/node@18.19.57)(sass@1.80.3)(terser@5.36.0)) + version: 2.3.0(@types/node@20.5.1)(rollup@4.24.0)(vite@4.5.5(@types/node@20.5.1)(sass@1.80.3)(terser@5.36.0)) vite-plugin-md: specifier: ^0.20.0 - version: 0.20.6(@vitejs/plugin-vue@4.6.2(vite@4.5.5(@types/node@18.19.57)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@4.9.5)))(happy-dom@8.9.0)(jsdom@20.0.3)(sass@1.80.3)(terser@5.36.0)(vite@4.5.5(@types/node@18.19.57)(sass@1.80.3)(terser@5.36.0)) + version: 0.20.6(jsdom@20.0.3)(sass@1.80.3)(terser@5.36.0) vite-svg-loader: specifier: ^4.0.0 version: 4.0.0 vitepress: specifier: 1.0.0-alpha.8 - version: 1.0.0-alpha.8(@algolia/client-search@4.24.0)(@types/node@18.19.57)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(sass@1.80.3)(search-insights@2.17.2)(terser@5.36.0)(typescript@4.9.5) + version: 1.0.0-alpha.8(@algolia/client-search@4.24.0)(@types/node@20.5.1)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(sass@1.80.3)(search-insights@2.17.2)(terser@5.36.0)(typescript@4.9.5) vitepress-theme-demoblock: specifier: 1.4.2 version: 1.4.2(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(sass@1.80.3)(typescript@4.9.5) @@ -1167,10 +1170,10 @@ importers: version: 7.18.0(eslint@9.19.0(jiti@1.21.6))(typescript@4.9.5) '@vitejs/plugin-vue': specifier: ^4.0.0 - version: 4.6.2(vite@4.5.5(@types/node@18.19.57)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@4.9.5)) + version: 4.6.2(vite@4.5.5(@types/node@20.5.1)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@4.9.5)) '@vitejs/plugin-vue-jsx': specifier: ^3.0.0 - version: 3.1.0(vite@4.5.5(@types/node@18.19.57)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@4.9.5)) + version: 3.1.0(vite@4.5.5(@types/node@20.5.1)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@4.9.5)) '@vue/babel-plugin-jsx': specifier: ^1.1.1 version: 1.2.5(@babel/core@7.25.8) @@ -1209,7 +1212,7 @@ importers: version: 9.3.7 jest: specifier: ^29.0.0 - version: 29.7.0(@types/node@18.19.57)(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.6.3)) + version: 29.7.0(@types/node@20.5.1)(ts-node@10.9.2(@types/node@20.5.1)(typescript@4.9.5)) lodash: specifier: ^4.17.21 version: 4.17.21 @@ -1245,19 +1248,19 @@ importers: version: 4.9.5 vite: specifier: ^4.1.4 - version: 4.5.5(@types/node@18.19.57)(sass@1.80.3)(terser@5.36.0) + version: 4.5.5(@types/node@20.5.1)(sass@1.80.3)(terser@5.36.0) vite-plugin-dts: specifier: ^2.1.0 - version: 2.3.0(@types/node@18.19.57)(rollup@4.24.0)(vite@4.5.5(@types/node@18.19.57)(sass@1.80.3)(terser@5.36.0)) + version: 2.3.0(@types/node@20.5.1)(rollup@4.24.0)(vite@4.5.5(@types/node@20.5.1)(sass@1.80.3)(terser@5.36.0)) vite-plugin-md: specifier: ^0.20.0 - version: 0.20.6(@vitejs/plugin-vue@4.6.2(vite@4.5.5(@types/node@18.19.57)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@4.9.5)))(happy-dom@8.9.0)(jsdom@20.0.3)(sass@1.80.3)(terser@5.36.0)(vite@4.5.5(@types/node@18.19.57)(sass@1.80.3)(terser@5.36.0)) + version: 0.20.6(jsdom@20.0.3)(sass@1.80.3)(terser@5.36.0) vite-svg-loader: specifier: ^4.0.0 version: 4.0.0 vitepress: specifier: 1.0.0-alpha.8 - version: 1.0.0-alpha.8(@algolia/client-search@4.24.0)(@types/node@18.19.57)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(sass@1.80.3)(search-insights@2.17.2)(terser@5.36.0)(typescript@4.9.5) + version: 1.0.0-alpha.8(@algolia/client-search@4.24.0)(@types/node@20.5.1)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(sass@1.80.3)(search-insights@2.17.2)(terser@5.36.0)(typescript@4.9.5) vitepress-theme-demoblock: specifier: 1.4.2 version: 1.4.2(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(sass@1.80.3)(typescript@4.9.5) @@ -1296,17 +1299,17 @@ importers: version: 9.29.1(eslint@9.19.0(jiti@1.21.6)) vite-plugin-dts: specifier: ^2.1.0 - version: 2.3.0(@types/node@18.19.57)(rollup@4.24.0)(vite@3.2.11(@types/node@18.19.57)(sass@1.80.3)(terser@5.36.0)) + version: 2.3.0(@types/node@20.5.1)(rollup@4.24.0)(vite@3.2.11(@types/node@20.5.1)(sass@1.80.3)(terser@5.36.0)) vue: specifier: ^3.2.37 version: 3.5.12(typescript@4.9.5) devDependencies: '@vitejs/plugin-vue': specifier: ^3.1.0 - version: 3.2.0(vite@3.2.11(@types/node@18.19.57)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@4.9.5)) + version: 3.2.0(vite@3.2.11(@types/node@20.5.1)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@4.9.5)) '@vitejs/plugin-vue-jsx': specifier: ^2.0.1 - version: 2.1.1(vite@3.2.11(@types/node@18.19.57)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@4.9.5)) + version: 2.1.1(vite@3.2.11(@types/node@20.5.1)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@4.9.5)) '@vue/babel-plugin-jsx': specifier: ^1.1.1 version: 1.2.5(@babel/core@7.25.8) @@ -1318,7 +1321,7 @@ importers: version: 4.9.5 vite: specifier: ^3.1.0 - version: 3.2.11(@types/node@18.19.57)(sass@1.80.3)(terser@5.36.0) + version: 3.2.11(@types/node@20.5.1)(sass@1.80.3)(terser@5.36.0) vue-tsc: specifier: ^0.40.4 version: 0.40.13(typescript@4.9.5) @@ -1388,7 +1391,7 @@ importers: version: 7.25.7 '@commitlint/cli': specifier: ^19.3.0 - version: 19.5.0(@types/node@18.19.57)(typescript@4.9.5) + version: 19.5.0(@types/node@20.5.1)(typescript@4.9.5) '@commitlint/config-conventional': specifier: ^19.2.0 version: 19.5.0 @@ -1418,10 +1421,10 @@ importers: version: 7.18.0(eslint@9.19.0(jiti@1.21.6))(typescript@4.9.5) '@vitejs/plugin-vue': specifier: ^4.2.3 - version: 4.6.2(vite@4.5.5(@types/node@18.19.57)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@4.9.5)) + version: 4.6.2(vite@4.5.5(@types/node@20.5.1)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@4.9.5)) '@vitejs/plugin-vue-jsx': specifier: ^3.0.1 - version: 3.1.0(vite@4.5.5(@types/node@18.19.57)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@4.9.5)) + version: 3.1.0(vite@4.5.5(@types/node@20.5.1)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@4.9.5)) '@vue/babel-plugin-jsx': specifier: ^1.1.1 version: 1.2.5(@babel/core@7.25.8) @@ -1457,7 +1460,7 @@ importers: version: 9.3.7 jest: specifier: ^29.0.0 - version: 29.7.0(@types/node@18.19.57)(ts-node@10.9.2(@types/node@18.19.57)(typescript@4.9.5)) + version: 29.7.0(@types/node@20.5.1)(ts-node@10.9.2(@types/node@20.5.1)(typescript@4.9.5)) ora: specifier: ^6.1.2 version: 6.3.1 @@ -1475,19 +1478,19 @@ importers: version: 4.9.5 vite: specifier: ^4.4.1 - version: 4.5.5(@types/node@18.19.57)(sass@1.80.3)(terser@5.36.0) + version: 4.5.5(@types/node@20.5.1)(sass@1.80.3)(terser@5.36.0) vite-plugin-dts: specifier: ^2.1.0 - version: 2.3.0(@types/node@18.19.57)(rollup@4.24.0)(vite@4.5.5(@types/node@18.19.57)(sass@1.80.3)(terser@5.36.0)) + version: 2.3.0(@types/node@20.5.1)(rollup@4.24.0)(vite@4.5.5(@types/node@20.5.1)(sass@1.80.3)(terser@5.36.0)) vite-plugin-md: specifier: ^0.20.0 - version: 0.20.6(@vitejs/plugin-vue@4.6.2(vite@4.5.5(@types/node@18.19.57)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@4.9.5)))(happy-dom@8.9.0)(jsdom@20.0.3)(sass@1.80.3)(terser@5.36.0)(vite@4.5.5(@types/node@18.19.57)(sass@1.80.3)(terser@5.36.0)) + version: 0.20.6(jsdom@20.0.3)(sass@1.80.3)(terser@5.36.0) vite-svg-loader: specifier: ^4.0.0 version: 4.0.0 vitepress: specifier: 1.0.0-alpha.8 - version: 1.0.0-alpha.8(@algolia/client-search@4.24.0)(@types/node@18.19.57)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(sass@1.80.3)(search-insights@2.17.2)(terser@5.36.0)(typescript@4.9.5) + version: 1.0.0-alpha.8(@algolia/client-search@4.24.0)(@types/node@20.5.1)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(sass@1.80.3)(search-insights@2.17.2)(terser@5.36.0)(typescript@4.9.5) vitepress-theme-demoblock: specifier: 1.4.2 version: 1.4.2(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(sass@1.80.3)(typescript@4.9.5) @@ -1621,10 +1624,10 @@ importers: version: 7.18.0(eslint@9.19.0(jiti@1.21.6))(typescript@4.9.5) '@vitejs/plugin-vue': specifier: ^4.0.0 - version: 4.6.2(vite@4.5.5(@types/node@18.19.57)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@4.9.5)) + version: 4.6.2(vite@4.5.5(@types/node@20.5.1)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@4.9.5)) '@vitejs/plugin-vue-jsx': specifier: ^3.0.0 - version: 3.1.0(vite@4.5.5(@types/node@18.19.57)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@4.9.5)) + version: 3.1.0(vite@4.5.5(@types/node@20.5.1)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@4.9.5)) '@vue/babel-plugin-jsx': specifier: ^1.1.1 version: 1.2.5(@babel/core@7.25.8) @@ -1663,7 +1666,7 @@ importers: version: 9.3.7 jest: specifier: ^29.0.0 - version: 29.7.0(@types/node@18.19.57)(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.6.3)) + version: 29.7.0(@types/node@20.5.1)(ts-node@10.9.2(@types/node@20.5.1)(typescript@4.9.5)) lodash: specifier: ^4.17.21 version: 4.17.21 @@ -1696,19 +1699,19 @@ importers: version: 4.9.5 vite: specifier: ^4.1.4 - version: 4.5.5(@types/node@18.19.57)(sass@1.80.3)(terser@5.36.0) + version: 4.5.5(@types/node@20.5.1)(sass@1.80.3)(terser@5.36.0) vite-plugin-dts: specifier: ^2.1.0 - version: 2.3.0(@types/node@18.19.57)(rollup@4.24.0)(vite@4.5.5(@types/node@18.19.57)(sass@1.80.3)(terser@5.36.0)) + version: 2.3.0(@types/node@20.5.1)(rollup@4.24.0)(vite@4.5.5(@types/node@20.5.1)(sass@1.80.3)(terser@5.36.0)) vite-plugin-md: specifier: ^0.20.0 - version: 0.20.6(@vitejs/plugin-vue@4.6.2(vite@4.5.5(@types/node@18.19.57)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@4.9.5)))(happy-dom@8.9.0)(jsdom@20.0.3)(sass@1.80.3)(terser@5.36.0)(vite@4.5.5(@types/node@18.19.57)(sass@1.80.3)(terser@5.36.0)) + version: 0.20.6(jsdom@20.0.3)(sass@1.80.3)(terser@5.36.0) vite-svg-loader: specifier: ^4.0.0 version: 4.0.0 vitepress: specifier: 1.0.0-alpha.8 - version: 1.0.0-alpha.8(@algolia/client-search@4.24.0)(@types/node@18.19.57)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(sass@1.80.3)(search-insights@2.17.2)(terser@5.36.0)(typescript@4.9.5) + version: 1.0.0-alpha.8(@algolia/client-search@4.24.0)(@types/node@20.5.1)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(sass@1.80.3)(search-insights@2.17.2)(terser@5.36.0)(typescript@4.9.5) vitepress-theme-demoblock: specifier: 1.4.2 version: 1.4.2(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(sass@1.80.3)(typescript@4.9.5) @@ -1793,7 +1796,7 @@ importers: version: 9.29.1(eslint@9.19.0(jiti@1.21.6)) jest: specifier: ^29.0.0 - version: 29.7.0(@types/node@18.19.57)(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.6.3)) + version: 29.7.0(@types/node@20.5.1)(ts-node@10.9.2(@types/node@20.5.1)(typescript@4.9.5)) prettier: specifier: ^3.2.5 version: 3.5.3 @@ -1869,7 +1872,7 @@ importers: version: 2.2.2 jest: specifier: ^29.0.0 - version: 29.7.0(@types/node@18.19.57)(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.6.3)) + version: 29.7.0(@types/node@20.5.1)(ts-node@10.9.2(@types/node@20.5.1)(typescript@4.9.5)) patch-vue-directive-ssr: specifier: ^0.0.1 version: 0.0.1 @@ -1881,7 +1884,7 @@ importers: version: 4.9.5 vitepress: specifier: 1.0.0-alpha.10 - version: 1.0.0-alpha.10(@algolia/client-search@4.24.0)(@types/node@18.19.57)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(sass@1.80.3)(search-insights@2.17.2)(terser@5.36.0)(typescript@4.9.5) + version: 1.0.0-alpha.10(@algolia/client-search@4.24.0)(@types/node@20.5.1)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(sass@1.80.3)(search-insights@2.17.2)(terser@5.36.0)(typescript@4.9.5) vitepress-theme-demoblock: specifier: 1.4.2 version: 1.4.2(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(sass@1.80.3)(typescript@4.9.5) @@ -1896,7 +1899,7 @@ importers: dependencies: '@edp-bif/runtime-api-vue': specifier: 0.0.1 - version: 0.0.1(@algolia/client-search@4.24.0)(@types/node@18.19.57)(monaco-editor@0.52.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(rollup@4.24.0)(search-insights@2.17.2)(typescript@4.9.5)(vite@4.5.5(@types/node@18.19.57)(sass@1.80.3)(terser@5.36.0)) + version: 0.0.1(@algolia/client-search@4.24.0)(@types/node@20.5.1)(monaco-editor@0.52.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(rollup@4.24.0)(search-insights@2.17.2)(typescript@4.9.5)(vite@4.5.5(@types/node@20.5.1)(sass@1.80.3)(terser@5.36.0)) '@farris/bef-vue': specifier: workspace:^ version: link:../bef @@ -1917,7 +1920,7 @@ importers: version: link:../ui-vue '@gsp-wf/wf-task-handler-vue': specifier: 0.0.1 - version: 0.0.1(@algolia/client-search@4.24.0)(@types/node@18.19.57)(monaco-editor@0.52.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(rollup@4.24.0)(search-insights@2.17.2)(typescript@4.9.5)(vite@4.5.5(@types/node@18.19.57)(sass@1.80.3)(terser@5.36.0)) + version: 0.0.1(@algolia/client-search@4.24.0)(@types/node@20.5.1)(monaco-editor@0.52.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(rollup@4.24.0)(search-insights@2.17.2)(typescript@4.9.5)(vite@4.5.5(@types/node@20.5.1)(sass@1.80.3)(terser@5.36.0)) '@types/lodash-es': specifier: ^4.17.4 version: 4.17.12 @@ -1990,10 +1993,10 @@ importers: version: 7.18.0(eslint@9.19.0(jiti@1.21.6))(typescript@4.9.5) '@vitejs/plugin-vue': specifier: ^4.0.0 - version: 4.6.2(vite@4.5.5(@types/node@18.19.57)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@4.9.5)) + version: 4.6.2(vite@4.5.5(@types/node@20.5.1)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@4.9.5)) '@vitejs/plugin-vue-jsx': specifier: ^3.0.0 - version: 3.1.0(vite@4.5.5(@types/node@18.19.57)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@4.9.5)) + version: 3.1.0(vite@4.5.5(@types/node@20.5.1)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@4.9.5)) '@vue/babel-plugin-jsx': specifier: ^1.1.1 version: 1.2.5(@babel/core@7.25.8) @@ -2029,7 +2032,7 @@ importers: version: 9.3.7 jest: specifier: ^29.0.0 - version: 29.7.0(@types/node@18.19.57)(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.6.3)) + version: 29.7.0(@types/node@20.5.1)(ts-node@10.9.2(@types/node@20.5.1)(typescript@4.9.5)) ora: specifier: ^6.1.2 version: 6.3.1 @@ -2047,22 +2050,22 @@ importers: version: 4.9.5 vite: specifier: ^4.1.4 - version: 4.5.5(@types/node@18.19.57)(sass@1.80.3)(terser@5.36.0) + version: 4.5.5(@types/node@20.5.1)(sass@1.80.3)(terser@5.36.0) vite-plugin-banner: specifier: ^0.8.0 version: 0.8.0 vite-plugin-dts: specifier: ^2.1.0 - version: 2.3.0(@types/node@18.19.57)(rollup@4.24.0)(vite@4.5.5(@types/node@18.19.57)(sass@1.80.3)(terser@5.36.0)) + version: 2.3.0(@types/node@20.5.1)(rollup@4.24.0)(vite@4.5.5(@types/node@20.5.1)(sass@1.80.3)(terser@5.36.0)) vite-plugin-md: specifier: ^0.20.0 - version: 0.20.6(@vitejs/plugin-vue@4.6.2(vite@4.5.5(@types/node@18.19.57)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@4.9.5)))(happy-dom@8.9.0)(jsdom@20.0.3)(sass@1.80.3)(terser@5.36.0)(vite@4.5.5(@types/node@18.19.57)(sass@1.80.3)(terser@5.36.0)) + version: 0.20.6(jsdom@20.0.3)(sass@1.80.3)(terser@5.36.0) vite-svg-loader: specifier: ^4.0.0 version: 4.0.0 vitepress: specifier: 1.0.0-alpha.8 - version: 1.0.0-alpha.8(@algolia/client-search@4.24.0)(@types/node@18.19.57)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(sass@1.80.3)(search-insights@2.17.2)(terser@5.36.0)(typescript@4.9.5) + version: 1.0.0-alpha.8(@algolia/client-search@4.24.0)(@types/node@20.5.1)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(sass@1.80.3)(search-insights@2.17.2)(terser@5.36.0)(typescript@4.9.5) vitepress-theme-demoblock: specifier: 1.4.2 version: 1.4.2(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(sass@1.80.3)(typescript@4.9.5) @@ -2123,7 +2126,7 @@ importers: version: 0.4.4(rollup@4.24.0) '@vitejs/plugin-vue': specifier: ^5.1.2 - version: 5.1.4(vite@5.4.9(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3)) + version: 5.1.4(vite@5.4.9(@types/node@20.5.1)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3)) core-js: specifier: ^3.38.1 version: 3.39.0 @@ -2147,10 +2150,10 @@ importers: version: 5.6.3 vite: specifier: ^5.4.1 - version: 5.4.9(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0) + version: 5.4.9(@types/node@20.5.1)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0) vite-plugin-dts: specifier: ^2.1.0 - version: 2.3.0(@types/node@18.19.57)(rollup@4.24.0)(vite@5.4.9(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0)) + version: 2.3.0(@types/node@20.5.1)(rollup@4.24.0)(vite@5.4.9(@types/node@20.5.1)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0)) vue-tsc: specifier: ^2.0.29 version: 2.1.6(typescript@5.6.3) @@ -2199,9 +2202,12 @@ importers: rxjs: specifier: ^7.4.0 version: 7.8.1 + three: + specifier: ^0.152.0 + version: 0.152.2 vite-plugin-dts: specifier: ^2.1.0 - version: 2.3.0(@types/node@18.19.57)(rollup@4.24.0)(vite@5.4.9(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0)) + version: 2.3.0(@types/node@20.5.1)(rollup@4.24.0)(vite@5.4.9(@types/node@20.5.1)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0)) vue: specifier: ^3.2.37 version: 3.5.12(typescript@5.6.3) @@ -2247,10 +2253,10 @@ importers: version: 7.18.0(eslint@9.19.0(jiti@1.21.6))(typescript@5.6.3) '@vitejs/plugin-vue': specifier: ^4.2.3 - version: 4.6.2(vite@5.4.9(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3)) + version: 4.6.2(vite@5.4.9(@types/node@20.5.1)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3)) '@vitejs/plugin-vue-jsx': specifier: ^3.0.1 - version: 3.1.0(vite@5.4.9(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3)) + version: 3.1.0(vite@5.4.9(@types/node@20.5.1)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3)) '@vue/babel-plugin-jsx': specifier: ^1.1.1 version: 1.2.5(@babel/core@7.25.8) @@ -2286,7 +2292,7 @@ importers: version: 9.3.7 jest: specifier: ^29.0.0 - version: 29.7.0(@types/node@18.19.57)(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.6.3)) + version: 29.7.0(@types/node@20.5.1)(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.6.3)) ora: specifier: ^6.1.2 version: 6.3.1 @@ -2304,25 +2310,25 @@ importers: version: 5.6.3 vite: specifier: ^5.3.3 - version: 5.4.9(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0) + version: 5.4.9(@types/node@20.5.1)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0) vite-plugin-banner: specifier: ^0.8.0 version: 0.8.0 vite-plugin-md: specifier: ^0.21.5 - version: 0.21.5(@vitejs/plugin-vue@4.6.2(vite@5.4.9(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3)))(happy-dom@8.9.0)(jsdom@20.0.3)(sass@1.80.3)(terser@5.36.0)(vite@5.4.9(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0)) + version: 0.21.5(happy-dom@8.9.0)(jsdom@20.0.3)(sass@1.80.3)(terser@5.36.0)(vite@5.4.9(@types/node@20.5.1)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0)) vite-svg-loader: specifier: ^5.1.0 version: 5.1.0(vue@3.5.12(typescript@5.6.3)) vitepress: specifier: ^1.0.0-alpha.8 - version: 1.0.0-alpha.10(@algolia/client-search@4.24.0)(@types/node@18.19.57)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(sass@1.80.3)(search-insights@2.17.2)(terser@5.36.0)(typescript@5.6.3) + version: 1.0.0-alpha.10(@algolia/client-search@4.24.0)(@types/node@20.5.1)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(sass@1.80.3)(search-insights@2.17.2)(terser@5.36.0)(typescript@5.6.3) vitepress-theme-demoblock: specifier: 1.4.2 version: 1.4.2(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(sass@1.80.3)(typescript@5.6.3) vitest: specifier: ^1.4.0 - version: 1.6.0(@types/node@18.19.57)(happy-dom@8.9.0)(jsdom@20.0.3)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0) + version: 1.6.0(@types/node@20.5.1)(happy-dom@8.9.0)(jsdom@20.0.3)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0) vue-tsc: specifier: ^2.0.0 version: 2.1.6(typescript@5.6.3) @@ -4059,6 +4065,7 @@ packages: '@ls-lint/ls-lint@2.2.3': resolution: {integrity: sha512-ekM12jNm/7O2I/hsRv9HvYkRdfrHpiV1epVuI2NP+eTIcEgdIdKkKCs9KgQydu/8R5YXTov9aHdOgplmCHLupw==} + cpu: [x64, arm64, s390x] os: [darwin, linux, win32] hasBin: true @@ -10860,6 +10867,9 @@ packages: resolution: {integrity: sha512-te/NtwBwfiNRLf9Ijqx3T0nlqZiQ2XrrtBvu+cLL8ZRrGkO0NHTug8MYFKyoSrv/sHTaSKfilUkizV6XhxMJ3g==} engines: {node: '>=8'} + three@0.152.2: + resolution: {integrity: sha512-Ff9zIpSfkkqcBcpdiFo2f35vA9ZucO+N8TNacJOqaEE6DrB0eufItVMib8bK8Pcju/ZNT6a7blE1GhTpkdsILw==} + through2-filter@3.0.0: resolution: {integrity: sha512-jaRjI2WxN3W1V8/FMZ9HKIBXixtiqs3SQSX4/YGIiP3gL6djW48VoZq9tDqeCWs3MT8YY5wb/zli8VW8snY1CA==} @@ -12916,11 +12926,11 @@ snapshots: - '@swc/core' - '@swc/wasm' - '@commitlint/cli@19.5.0(@types/node@18.19.57)(typescript@4.9.5)': + '@commitlint/cli@19.5.0(@types/node@18.19.57)(typescript@5.6.3)': dependencies: '@commitlint/format': 19.5.0 '@commitlint/lint': 19.5.0 - '@commitlint/load': 19.5.0(@types/node@18.19.57)(typescript@4.9.5) + '@commitlint/load': 19.5.0(@types/node@18.19.57)(typescript@5.6.3) '@commitlint/read': 19.5.0 '@commitlint/types': 19.5.0 tinyexec: 0.3.1 @@ -12929,11 +12939,11 @@ snapshots: - '@types/node' - typescript - '@commitlint/cli@19.5.0(@types/node@18.19.57)(typescript@5.6.3)': + '@commitlint/cli@19.5.0(@types/node@20.5.1)(typescript@4.9.5)': dependencies: '@commitlint/format': 19.5.0 '@commitlint/lint': 19.5.0 - '@commitlint/load': 19.5.0(@types/node@18.19.57)(typescript@5.6.3) + '@commitlint/load': 19.5.0(@types/node@20.5.1)(typescript@4.9.5) '@commitlint/read': 19.5.0 '@commitlint/types': 19.5.0 tinyexec: 0.3.1 @@ -13025,27 +13035,27 @@ snapshots: '@commitlint/types': 17.8.1 '@types/node': 20.5.1 chalk: 4.1.2 - cosmiconfig: 8.3.6(typescript@4.9.5) - cosmiconfig-typescript-loader: 4.4.0(@types/node@20.5.1)(cosmiconfig@8.3.6(typescript@5.6.3))(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.6.3))(typescript@5.6.3) + cosmiconfig: 8.3.6(typescript@5.6.3) + cosmiconfig-typescript-loader: 4.4.0(@types/node@20.5.1)(cosmiconfig@8.3.6(typescript@5.6.3))(ts-node@10.9.2(@types/node@18.19.57)(typescript@4.9.5))(typescript@5.6.3) lodash.isplainobject: 4.0.6 lodash.merge: 4.6.2 lodash.uniq: 4.5.0 resolve-from: 5.0.0 - ts-node: 10.9.2(@types/node@18.19.57)(typescript@4.9.5) + ts-node: 10.9.2(@types/node@20.5.1)(typescript@5.6.3) typescript: 5.6.3 transitivePeerDependencies: - '@swc/core' - '@swc/wasm' - '@commitlint/load@19.5.0(@types/node@18.19.57)(typescript@4.9.5)': + '@commitlint/load@19.5.0(@types/node@18.19.57)(typescript@5.6.3)': dependencies: '@commitlint/config-validator': 19.5.0 '@commitlint/execute-rule': 19.5.0 '@commitlint/resolve-extends': 19.5.0 '@commitlint/types': 19.5.0 chalk: 5.3.0 - cosmiconfig: 9.0.0(typescript@4.9.5) - cosmiconfig-typescript-loader: 5.1.0(@types/node@18.19.57)(cosmiconfig@9.0.0(typescript@4.9.5))(typescript@4.9.5) + cosmiconfig: 9.0.0(typescript@5.6.3) + cosmiconfig-typescript-loader: 5.1.0(@types/node@18.19.57)(cosmiconfig@9.0.0(typescript@5.6.3))(typescript@5.6.3) lodash.isplainobject: 4.0.6 lodash.merge: 4.6.2 lodash.uniq: 4.5.0 @@ -13053,15 +13063,15 @@ snapshots: - '@types/node' - typescript - '@commitlint/load@19.5.0(@types/node@18.19.57)(typescript@5.6.3)': + '@commitlint/load@19.5.0(@types/node@20.5.1)(typescript@4.9.5)': dependencies: '@commitlint/config-validator': 19.5.0 '@commitlint/execute-rule': 19.5.0 '@commitlint/resolve-extends': 19.5.0 '@commitlint/types': 19.5.0 chalk: 5.3.0 - cosmiconfig: 9.0.0(typescript@5.6.3) - cosmiconfig-typescript-loader: 5.1.0(@types/node@18.19.57)(cosmiconfig@9.0.0(typescript@5.6.3))(typescript@5.6.3) + cosmiconfig: 9.0.0(typescript@4.9.5) + cosmiconfig-typescript-loader: 5.1.0(@types/node@20.5.1)(cosmiconfig@9.0.0(typescript@4.9.5))(typescript@4.9.5) lodash.isplainobject: 4.0.6 lodash.merge: 4.6.2 lodash.uniq: 4.5.0 @@ -13264,7 +13274,7 @@ snapshots: '@edp-aif/common-api': 1.1.0 tslib: 1.14.1 - '@edp-bif/runtime-api-vue@0.0.1(@algolia/client-search@4.24.0)(@types/node@18.19.57)(monaco-editor@0.52.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(rollup@4.24.0)(search-insights@2.17.2)(typescript@4.9.5)(vite@4.5.5(@types/node@18.19.57)(sass@1.80.3)(terser@5.36.0))': + '@edp-bif/runtime-api-vue@0.0.1(@algolia/client-search@4.24.0)(@types/node@20.5.1)(monaco-editor@0.52.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(rollup@4.24.0)(search-insights@2.17.2)(typescript@4.9.5)(vite@4.5.5(@types/node@20.5.1)(sass@1.80.3)(terser@5.36.0))': dependencies: '@edp-aif/common-api': 1.1.0 '@edp-bif/common-api': 1.2.2(@edp-aif/common-api@1.1.0) @@ -13272,7 +13282,7 @@ snapshots: '@farris/bef-vue': 0.0.3 '@farris/command-services-vue': 0.0.3(typescript@4.9.5) '@farris/devkit-vue': 0.0.5(typescript@4.9.5) - '@farris/ui-vue': 1.5.3(@algolia/client-search@4.24.0)(@types/node@18.19.57)(monaco-editor@0.52.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(rollup@4.24.0)(search-insights@2.17.2)(vite@4.5.5(@types/node@18.19.57)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@4.9.5)) + '@farris/ui-vue': 1.5.3(@algolia/client-search@4.24.0)(@types/node@20.5.1)(monaco-editor@0.52.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(rollup@4.24.0)(search-insights@2.17.2)(vite@4.5.5(@types/node@20.5.1)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@4.9.5)) '@vue/shared': 3.5.12 '@vueuse/core': 9.2.0(vue@3.5.12(typescript@4.9.5)) async-validator: 4.2.5 @@ -13605,7 +13615,7 @@ snapshots: - debug - typescript - '@farris/ui-vue@1.5.3(@algolia/client-search@4.24.0)(@types/node@18.19.57)(monaco-editor@0.52.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(rollup@4.24.0)(search-insights@2.17.2)(vite@4.5.5(@types/node@18.19.57)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@4.9.5))': + '@farris/ui-vue@1.5.3(@algolia/client-search@4.24.0)(@types/node@20.5.1)(monaco-editor@0.52.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(rollup@4.24.0)(search-insights@2.17.2)(vite@4.5.5(@types/node@20.5.1)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@4.9.5))': dependencies: '@docsearch/js': 3.6.0(@algolia/client-search@4.24.0)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(search-insights@2.17.2) '@monaco-editor/loader': 1.4.0(monaco-editor@0.52.2) @@ -13620,7 +13630,7 @@ snapshots: lodash: 4.17.21 lodash-es: 4.17.21 rxjs: 7.8.1 - vite-plugin-dts: 2.3.0(@types/node@18.19.57)(rollup@4.24.0)(vite@4.5.5(@types/node@18.19.57)(sass@1.80.3)(terser@5.36.0)) + vite-plugin-dts: 2.3.0(@types/node@20.5.1)(rollup@4.24.0)(vite@4.5.5(@types/node@20.5.1)(sass@1.80.3)(terser@5.36.0)) transitivePeerDependencies: - '@algolia/client-search' - '@types/node' @@ -13650,11 +13660,11 @@ snapshots: '@francoischalifour/autocomplete-preset-algolia@1.0.0-alpha.28': {} - '@gsp-wf/wf-task-handler-vue@0.0.1(@algolia/client-search@4.24.0)(@types/node@18.19.57)(monaco-editor@0.52.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(rollup@4.24.0)(search-insights@2.17.2)(typescript@4.9.5)(vite@4.5.5(@types/node@18.19.57)(sass@1.80.3)(terser@5.36.0))': + '@gsp-wf/wf-task-handler-vue@0.0.1(@algolia/client-search@4.24.0)(@types/node@20.5.1)(monaco-editor@0.52.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(rollup@4.24.0)(search-insights@2.17.2)(typescript@4.9.5)(vite@4.5.5(@types/node@20.5.1)(sass@1.80.3)(terser@5.36.0))': dependencies: '@farris/bef-vue': 0.0.3 '@farris/devkit-vue': 0.0.5(typescript@4.9.5) - '@farris/ui-vue': 1.5.3(@algolia/client-search@4.24.0)(@types/node@18.19.57)(monaco-editor@0.52.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(rollup@4.24.0)(search-insights@2.17.2)(vite@4.5.5(@types/node@18.19.57)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@4.9.5)) + '@farris/ui-vue': 1.5.3(@algolia/client-search@4.24.0)(@types/node@20.5.1)(monaco-editor@0.52.2)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(rollup@4.24.0)(search-insights@2.17.2)(vite@4.5.5(@types/node@20.5.1)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@4.9.5)) '@vue/shared': 3.5.12 '@vueuse/core': 9.2.0(vue@3.5.12(typescript@4.9.5)) async-validator: 4.2.5 @@ -13900,7 +13910,7 @@ snapshots: - supports-color - ts-node - '@jest/core@29.7.0(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.6.3))': + '@jest/core@29.7.0(ts-node@10.9.2(@types/node@20.5.1)(typescript@4.9.5))': dependencies: '@jest/console': 29.7.0 '@jest/reporters': 29.7.0 @@ -13914,7 +13924,7 @@ snapshots: exit: 0.1.2 graceful-fs: 4.2.11 jest-changed-files: 29.7.0 - jest-config: 29.7.0(@types/node@18.19.57)(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.6.3)) + jest-config: 29.7.0(@types/node@18.19.57)(ts-node@10.9.2(@types/node@20.5.1)(typescript@4.9.5)) jest-haste-map: 29.7.0 jest-message-util: 29.7.0 jest-regex-util: 29.6.3 @@ -14121,6 +14131,14 @@ snapshots: transitivePeerDependencies: - '@types/node' + '@microsoft/api-extractor-model@7.28.13(@types/node@20.5.1)': + dependencies: + '@microsoft/tsdoc': 0.14.2 + '@microsoft/tsdoc-config': 0.16.2 + '@rushstack/node-core-library': 4.0.2(@types/node@20.5.1) + transitivePeerDependencies: + - '@types/node' + '@microsoft/api-extractor-model@7.29.8(@types/node@18.19.57)': dependencies: '@microsoft/tsdoc': 0.15.0 @@ -14129,6 +14147,14 @@ snapshots: transitivePeerDependencies: - '@types/node' + '@microsoft/api-extractor-model@7.29.8(@types/node@20.5.1)': + dependencies: + '@microsoft/tsdoc': 0.15.0 + '@microsoft/tsdoc-config': 0.17.0 + '@rushstack/node-core-library': 5.9.0(@types/node@20.5.1) + transitivePeerDependencies: + - '@types/node' + '@microsoft/api-extractor@7.43.0(@types/node@18.19.57)': dependencies: '@microsoft/api-extractor-model': 7.28.13(@types/node@18.19.57) @@ -14147,6 +14173,24 @@ snapshots: transitivePeerDependencies: - '@types/node' + '@microsoft/api-extractor@7.43.0(@types/node@20.5.1)': + dependencies: + '@microsoft/api-extractor-model': 7.28.13(@types/node@20.5.1) + '@microsoft/tsdoc': 0.14.2 + '@microsoft/tsdoc-config': 0.16.2 + '@rushstack/node-core-library': 4.0.2(@types/node@20.5.1) + '@rushstack/rig-package': 0.5.2 + '@rushstack/terminal': 0.10.0(@types/node@20.5.1) + '@rushstack/ts-command-line': 4.19.1(@types/node@20.5.1) + lodash: 4.17.21 + minimatch: 3.0.8 + resolve: 1.22.8 + semver: 7.5.4 + source-map: 0.6.1 + typescript: 5.4.2 + transitivePeerDependencies: + - '@types/node' + '@microsoft/api-extractor@7.47.11(@types/node@18.19.57)': dependencies: '@microsoft/api-extractor-model': 7.29.8(@types/node@18.19.57) @@ -14165,6 +14209,24 @@ snapshots: transitivePeerDependencies: - '@types/node' + '@microsoft/api-extractor@7.47.11(@types/node@20.5.1)': + dependencies: + '@microsoft/api-extractor-model': 7.29.8(@types/node@20.5.1) + '@microsoft/tsdoc': 0.15.0 + '@microsoft/tsdoc-config': 0.17.0 + '@rushstack/node-core-library': 5.9.0(@types/node@20.5.1) + '@rushstack/rig-package': 0.5.3 + '@rushstack/terminal': 0.14.2(@types/node@20.5.1) + '@rushstack/ts-command-line': 4.23.0(@types/node@20.5.1) + lodash: 4.17.21 + minimatch: 3.0.8 + resolve: 1.22.8 + semver: 7.5.4 + source-map: 0.6.1 + typescript: 5.4.2 + transitivePeerDependencies: + - '@types/node' + '@microsoft/tsdoc-config@0.16.2': dependencies: '@microsoft/tsdoc': 0.14.2 @@ -14398,6 +14460,18 @@ snapshots: optionalDependencies: '@types/node': 18.19.57 + '@rushstack/node-core-library@3.66.1(@types/node@20.5.1)': + dependencies: + colors: 1.2.5 + fs-extra: 7.0.1 + import-lazy: 4.0.0 + jju: 1.4.0 + resolve: 1.22.8 + semver: 7.5.4 + z-schema: 5.0.5 + optionalDependencies: + '@types/node': 20.5.1 + '@rushstack/node-core-library@4.0.2(@types/node@18.19.57)': dependencies: fs-extra: 7.0.1 @@ -14409,6 +14483,17 @@ snapshots: optionalDependencies: '@types/node': 18.19.57 + '@rushstack/node-core-library@4.0.2(@types/node@20.5.1)': + dependencies: + fs-extra: 7.0.1 + import-lazy: 4.0.0 + jju: 1.4.0 + resolve: 1.22.8 + semver: 7.5.4 + z-schema: 5.0.5 + optionalDependencies: + '@types/node': 20.5.1 + '@rushstack/node-core-library@5.9.0(@types/node@18.19.57)': dependencies: ajv: 8.13.0 @@ -14422,6 +14507,19 @@ snapshots: optionalDependencies: '@types/node': 18.19.57 + '@rushstack/node-core-library@5.9.0(@types/node@20.5.1)': + dependencies: + ajv: 8.13.0 + ajv-draft-04: 1.0.0(ajv@8.13.0) + ajv-formats: 3.0.1(ajv@8.13.0) + fs-extra: 7.0.1 + import-lazy: 4.0.0 + jju: 1.4.0 + resolve: 1.22.8 + semver: 7.5.4 + optionalDependencies: + '@types/node': 20.5.1 + '@rushstack/rig-package@0.5.2': dependencies: resolve: 1.22.8 @@ -14439,6 +14537,13 @@ snapshots: optionalDependencies: '@types/node': 18.19.57 + '@rushstack/terminal@0.10.0(@types/node@20.5.1)': + dependencies: + '@rushstack/node-core-library': 4.0.2(@types/node@20.5.1) + supports-color: 8.1.1 + optionalDependencies: + '@types/node': 20.5.1 + '@rushstack/terminal@0.14.2(@types/node@18.19.57)': dependencies: '@rushstack/node-core-library': 5.9.0(@types/node@18.19.57) @@ -14446,6 +14551,13 @@ snapshots: optionalDependencies: '@types/node': 18.19.57 + '@rushstack/terminal@0.14.2(@types/node@20.5.1)': + dependencies: + '@rushstack/node-core-library': 5.9.0(@types/node@20.5.1) + supports-color: 8.1.1 + optionalDependencies: + '@types/node': 20.5.1 + '@rushstack/ts-command-line@4.19.1(@types/node@18.19.57)': dependencies: '@rushstack/terminal': 0.10.0(@types/node@18.19.57) @@ -14455,6 +14567,15 @@ snapshots: transitivePeerDependencies: - '@types/node' + '@rushstack/ts-command-line@4.19.1(@types/node@20.5.1)': + dependencies: + '@rushstack/terminal': 0.10.0(@types/node@20.5.1) + '@types/argparse': 1.0.38 + argparse: 1.0.10 + string-argv: 0.3.2 + transitivePeerDependencies: + - '@types/node' + '@rushstack/ts-command-line@4.23.0(@types/node@18.19.57)': dependencies: '@rushstack/terminal': 0.14.2(@types/node@18.19.57) @@ -14464,6 +14585,15 @@ snapshots: transitivePeerDependencies: - '@types/node' + '@rushstack/ts-command-line@4.23.0(@types/node@20.5.1)': + dependencies: + '@rushstack/terminal': 0.14.2(@types/node@20.5.1) + '@types/argparse': 1.0.38 + argparse: 1.0.10 + string-argv: 0.3.2 + transitivePeerDependencies: + - '@types/node' + '@sentry/core@5.30.0': dependencies: '@sentry/hub': 5.30.0 @@ -14979,12 +15109,12 @@ snapshots: '@typescript-eslint/types': 8.18.0 eslint-visitor-keys: 4.2.0 - '@vitejs/plugin-vue-jsx@2.1.1(vite@3.2.11(@types/node@18.19.57)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@4.9.5))': + '@vitejs/plugin-vue-jsx@2.1.1(vite@3.2.11(@types/node@20.5.1)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@4.9.5))': dependencies: '@babel/core': 7.25.8 '@babel/plugin-transform-typescript': 7.25.7(@babel/core@7.25.8) '@vue/babel-plugin-jsx': 1.2.5(@babel/core@7.25.8) - vite: 3.2.11(@types/node@18.19.57)(sass@1.80.3)(terser@5.36.0) + vite: 3.2.11(@types/node@20.5.1)(sass@1.80.3)(terser@5.36.0) vue: 3.5.12(typescript@4.9.5) transitivePeerDependencies: - supports-color @@ -14999,12 +15129,22 @@ snapshots: transitivePeerDependencies: - supports-color - '@vitejs/plugin-vue-jsx@3.1.0(vite@5.4.9(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))': + '@vitejs/plugin-vue-jsx@3.1.0(vite@4.5.5(@types/node@20.5.1)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@4.9.5))': dependencies: '@babel/core': 7.25.8 '@babel/plugin-transform-typescript': 7.25.7(@babel/core@7.25.8) '@vue/babel-plugin-jsx': 1.2.5(@babel/core@7.25.8) - vite: 5.4.9(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0) + vite: 4.5.5(@types/node@20.5.1)(sass@1.80.3)(terser@5.36.0) + vue: 3.5.12(typescript@4.9.5) + transitivePeerDependencies: + - supports-color + + '@vitejs/plugin-vue-jsx@3.1.0(vite@5.4.9(@types/node@20.5.1)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))': + dependencies: + '@babel/core': 7.25.8 + '@babel/plugin-transform-typescript': 7.25.7(@babel/core@7.25.8) + '@vue/babel-plugin-jsx': 1.2.5(@babel/core@7.25.8) + vite: 5.4.9(@types/node@20.5.1)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0) vue: 3.5.12(typescript@5.6.3) transitivePeerDependencies: - supports-color @@ -15033,14 +15173,29 @@ snapshots: vite: 3.2.11(@types/node@18.19.57)(sass@1.80.3)(terser@5.36.0) vue: 3.5.12(typescript@5.6.3) + '@vitejs/plugin-vue@3.2.0(vite@3.2.11(@types/node@20.5.1)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@4.9.5))': + dependencies: + vite: 3.2.11(@types/node@20.5.1)(sass@1.80.3)(terser@5.36.0) + vue: 3.5.12(typescript@4.9.5) + + '@vitejs/plugin-vue@3.2.0(vite@3.2.11(@types/node@20.5.1)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))': + dependencies: + vite: 3.2.11(@types/node@20.5.1)(sass@1.80.3)(terser@5.36.0) + vue: 3.5.12(typescript@5.6.3) + '@vitejs/plugin-vue@4.6.2(vite@4.5.5(@types/node@18.19.57)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@4.9.5))': dependencies: vite: 4.5.5(@types/node@18.19.57)(sass@1.80.3)(terser@5.36.0) vue: 3.5.12(typescript@4.9.5) - '@vitejs/plugin-vue@4.6.2(vite@5.4.9(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))': + '@vitejs/plugin-vue@4.6.2(vite@4.5.5(@types/node@20.5.1)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@4.9.5))': dependencies: - vite: 5.4.9(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0) + vite: 4.5.5(@types/node@20.5.1)(sass@1.80.3)(terser@5.36.0) + vue: 3.5.12(typescript@4.9.5) + + '@vitejs/plugin-vue@4.6.2(vite@5.4.9(@types/node@20.5.1)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))': + dependencies: + vite: 5.4.9(@types/node@20.5.1)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0) vue: 3.5.12(typescript@5.6.3) '@vitejs/plugin-vue@5.1.4(vite@5.4.9(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))': @@ -15048,6 +15203,11 @@ snapshots: vite: 5.4.9(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0) vue: 3.5.12(typescript@5.6.3) + '@vitejs/plugin-vue@5.1.4(vite@5.4.9(@types/node@20.5.1)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))': + dependencies: + vite: 5.4.9(@types/node@20.5.1)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0) + vue: 3.5.12(typescript@5.6.3) + '@vitest/expect@0.29.8': dependencies: '@vitest/spy': 0.29.8 @@ -15474,87 +15634,14 @@ snapshots: - terser - vite - '@yankeeinlondon/builder-api@1.4.1(@vitejs/plugin-vue@4.6.2(vite@5.4.9(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3)))(happy-dom@8.9.0)(jsdom@20.0.3)(sass@1.80.3)(terser@5.36.0)(vite@5.4.9(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0))': - dependencies: - '@types/markdown-it': 12.2.3 - '@yankeeinlondon/happy-wrapper': 2.10.1(jsdom@20.0.3)(sass@1.80.3)(terser@5.36.0) - fp-ts: 2.16.9 - inferred-types: 0.37.6(happy-dom@8.9.0)(jsdom@20.0.3)(sass@1.80.3)(terser@5.36.0) - markdown-it: 13.0.2 - vite-plugin-md: 0.22.5(@vitejs/plugin-vue@4.6.2(vite@5.4.9(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3)))(happy-dom@8.9.0)(jsdom@20.0.3)(sass@1.80.3)(terser@5.36.0)(vite@5.4.9(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0)) - transitivePeerDependencies: - - '@edge-runtime/vm' - - '@vitejs/plugin-vue' - - '@vitest/browser' - - '@vitest/ui' - - encoding - - happy-dom - - jsdom - - less - - lightningcss - - sass - - stylus - - sugarss - - supports-color - - terser - - vite - - '@yankeeinlondon/builder-api@1.4.1(@vitejs/plugin-vue@5.1.4(vite@5.4.9(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3)))(happy-dom@14.12.3)(jsdom@20.0.3)(sass@1.80.3)(terser@5.36.0)(vite@5.4.9(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0))': + '@yankeeinlondon/builder-api@1.4.1(jsdom@20.0.3)(sass@1.80.3)(terser@5.36.0)': dependencies: '@types/markdown-it': 12.2.3 '@yankeeinlondon/happy-wrapper': 2.10.1(jsdom@20.0.3)(sass@1.80.3)(terser@5.36.0) fp-ts: 2.16.9 inferred-types: 0.37.6(happy-dom@14.12.3)(jsdom@20.0.3)(sass@1.80.3)(terser@5.36.0) markdown-it: 13.0.2 - vite-plugin-md: 0.22.5(@vitejs/plugin-vue@5.1.4(vite@5.4.9(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3)))(jsdom@20.0.3)(sass@1.80.3)(terser@5.36.0)(vite@5.4.9(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0)) - transitivePeerDependencies: - - '@edge-runtime/vm' - - '@vitejs/plugin-vue' - - '@vitest/browser' - - '@vitest/ui' - - encoding - - happy-dom - - jsdom - - less - - lightningcss - - sass - - stylus - - sugarss - - supports-color - - terser - - vite - - '@yankeeinlondon/builder-api@1.4.1(happy-dom@8.9.0)(jsdom@20.0.3)(sass@1.80.3)(terser@5.36.0)': - dependencies: - '@types/markdown-it': 12.2.3 - '@yankeeinlondon/happy-wrapper': 2.10.1(jsdom@20.0.3)(sass@1.80.3)(terser@5.36.0) - fp-ts: 2.16.9 - inferred-types: 0.37.6(happy-dom@8.9.0)(jsdom@20.0.3)(sass@1.80.3)(terser@5.36.0) - markdown-it: 13.0.2 vite-plugin-md: 0.22.5(@vitejs/plugin-vue@4.6.2(vite@4.5.5(@types/node@18.19.57)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@4.9.5)))(happy-dom@8.9.0)(jsdom@20.0.3)(sass@1.80.3)(terser@5.36.0)(vite@4.5.5(@types/node@18.19.57)(sass@1.80.3)(terser@5.36.0)) - transitivePeerDependencies: - - '@edge-runtime/vm' - - '@vitest/browser' - - '@vitest/ui' - - encoding - - happy-dom - - jsdom - - less - - lightningcss - - sass - - stylus - - sugarss - - supports-color - - terser - - '@yankeeinlondon/builder-api@1.4.1(jsdom@20.0.3)(sass@1.80.3)(terser@5.36.0)': - dependencies: - '@types/markdown-it': 12.2.3 - '@yankeeinlondon/happy-wrapper': 2.10.1(jsdom@20.0.3)(sass@1.80.3)(terser@5.36.0) - fp-ts: 2.16.9 - inferred-types: 0.37.6 - markdown-it: 13.0.2 - vite-plugin-md: 0.22.5(@vitejs/plugin-vue@5.1.4(vite@5.4.9(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3)))(jsdom@20.0.3)(sass@1.80.3)(terser@5.36.0)(vite@5.4.9(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0)) transitivePeerDependencies: - '@edge-runtime/vm' - '@vitest/browser' @@ -15569,14 +15656,6 @@ snapshots: - supports-color - terser - '@yankeeinlondon/gray-matter@6.2.1': - dependencies: - inferred-types: 0.37.6 - js-yaml: 4.1.0 - kind-of: 6.0.3 - section-matter: 1.0.0 - strip-bom-string: 1.0.0 - '@yankeeinlondon/gray-matter@6.2.1(happy-dom@14.12.3)(jsdom@20.0.3)(sass@1.80.3)(terser@5.36.0)': dependencies: inferred-types: 0.37.6(happy-dom@14.12.3)(jsdom@20.0.3)(sass@1.80.3)(terser@5.36.0) @@ -16321,7 +16400,7 @@ snapshots: dependencies: bumpp: 8.2.1 callsites: 4.2.0 - inferred-types: 0.37.6 + inferred-types: 0.37.6(happy-dom@14.12.3)(jsdom@20.0.3)(sass@1.80.3)(terser@5.36.0) vitest: 0.25.8(happy-dom@14.12.3)(jsdom@20.0.3)(sass@1.80.3)(terser@5.36.0) transitivePeerDependencies: - '@edge-runtime/vm' @@ -16341,7 +16420,7 @@ snapshots: dependencies: bumpp: 8.2.1 callsites: 4.2.0 - inferred-types: 0.37.6(happy-dom@8.9.0)(jsdom@20.0.3)(sass@1.80.3)(terser@5.36.0) + inferred-types: 0.37.6(happy-dom@14.12.3)(jsdom@20.0.3)(sass@1.80.3)(terser@5.36.0) vitest: 0.25.8(happy-dom@8.9.0)(jsdom@20.0.3)(sass@1.80.3)(terser@5.36.0) transitivePeerDependencies: - '@edge-runtime/vm' @@ -17075,35 +17154,35 @@ snapshots: object-assign: 4.1.1 vary: 1.1.2 - cosmiconfig-typescript-loader@4.4.0(@types/node@20.5.1)(cosmiconfig@8.3.6(typescript@5.6.3))(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.6.3))(typescript@5.6.3): + cosmiconfig-typescript-loader@4.4.0(@types/node@20.5.1)(cosmiconfig@8.3.6(typescript@5.6.3))(ts-node@10.9.2(@types/node@18.19.57)(typescript@4.9.5))(typescript@5.6.3): dependencies: '@types/node': 20.5.1 - cosmiconfig: 8.3.6(typescript@4.9.5) - ts-node: 10.9.2(@types/node@18.19.57)(typescript@4.9.5) + cosmiconfig: 8.3.6(typescript@5.6.3) + ts-node: 10.9.2(@types/node@20.5.1)(typescript@5.6.3) typescript: 5.6.3 - cosmiconfig-typescript-loader@5.1.0(@types/node@18.19.57)(cosmiconfig@9.0.0(typescript@4.9.5))(typescript@4.9.5): + cosmiconfig-typescript-loader@5.1.0(@types/node@18.19.57)(cosmiconfig@9.0.0(typescript@5.6.3))(typescript@5.6.3): dependencies: '@types/node': 18.19.57 - cosmiconfig: 9.0.0(typescript@4.9.5) + cosmiconfig: 9.0.0(typescript@5.6.3) jiti: 1.21.6 - typescript: 4.9.5 + typescript: 5.6.3 - cosmiconfig-typescript-loader@5.1.0(@types/node@18.19.57)(cosmiconfig@9.0.0(typescript@5.6.3))(typescript@5.6.3): + cosmiconfig-typescript-loader@5.1.0(@types/node@20.5.1)(cosmiconfig@9.0.0(typescript@4.9.5))(typescript@4.9.5): dependencies: - '@types/node': 18.19.57 - cosmiconfig: 9.0.0(typescript@5.6.3) + '@types/node': 20.5.1 + cosmiconfig: 9.0.0(typescript@4.9.5) jiti: 1.21.6 - typescript: 5.6.3 + typescript: 4.9.5 - cosmiconfig@8.3.6(typescript@4.9.5): + cosmiconfig@8.3.6(typescript@5.6.3): dependencies: import-fresh: 3.3.0 js-yaml: 4.1.0 parse-json: 5.2.0 path-type: 4.0.0 optionalDependencies: - typescript: 4.9.5 + typescript: 5.6.3 cosmiconfig@9.0.0(typescript@4.9.5): dependencies: @@ -17175,13 +17254,28 @@ snapshots: - supports-color - ts-node - create-jest@29.7.0(@types/node@18.19.57)(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.6.3)): + create-jest@29.7.0(@types/node@20.5.1)(ts-node@10.9.2(@types/node@20.5.1)(typescript@4.9.5)): dependencies: '@jest/types': 29.6.3 chalk: 4.1.2 exit: 0.1.2 graceful-fs: 4.2.11 - jest-config: 29.7.0(@types/node@18.19.57)(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.6.3)) + jest-config: 29.7.0(@types/node@20.5.1)(ts-node@10.9.2(@types/node@20.5.1)(typescript@4.9.5)) + jest-util: 29.7.0 + prompts: 2.4.2 + transitivePeerDependencies: + - '@types/node' + - babel-plugin-macros + - supports-color + - ts-node + + create-jest@29.7.0(@types/node@20.5.1)(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.6.3)): + dependencies: + '@jest/types': 29.6.3 + chalk: 4.1.2 + exit: 0.1.2 + graceful-fs: 4.2.11 + jest-config: 29.7.0(@types/node@20.5.1)(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.6.3)) jest-util: 29.7.0 prompts: 2.4.2 transitivePeerDependencies: @@ -19193,10 +19287,6 @@ snapshots: index-to-position@0.1.2: {} - inferred-types@0.37.6: - dependencies: - brilliant-errors: 0.7.3(happy-dom@14.12.3)(jsdom@20.0.3)(sass@1.80.3)(terser@5.36.0) - inferred-types@0.37.6(happy-dom@14.12.3)(jsdom@20.0.3)(sass@1.80.3)(terser@5.36.0): dependencies: brilliant-errors: 0.7.3(happy-dom@14.12.3)(jsdom@20.0.3)(sass@1.80.3)(terser@5.36.0) @@ -19670,16 +19760,35 @@ snapshots: - supports-color - ts-node - jest-cli@29.7.0(@types/node@18.19.57)(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.6.3)): + jest-cli@29.7.0(@types/node@20.5.1)(ts-node@10.9.2(@types/node@20.5.1)(typescript@4.9.5)): dependencies: - '@jest/core': 29.7.0(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.6.3)) + '@jest/core': 29.7.0(ts-node@10.9.2(@types/node@20.5.1)(typescript@4.9.5)) '@jest/test-result': 29.7.0 '@jest/types': 29.6.3 chalk: 4.1.2 - create-jest: 29.7.0(@types/node@18.19.57)(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.6.3)) + create-jest: 29.7.0(@types/node@20.5.1)(ts-node@10.9.2(@types/node@20.5.1)(typescript@4.9.5)) exit: 0.1.2 import-local: 3.2.0 - jest-config: 29.7.0(@types/node@18.19.57)(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.6.3)) + jest-config: 29.7.0(@types/node@20.5.1)(ts-node@10.9.2(@types/node@20.5.1)(typescript@4.9.5)) + jest-util: 29.7.0 + jest-validate: 29.7.0 + yargs: 17.7.2 + transitivePeerDependencies: + - '@types/node' + - babel-plugin-macros + - supports-color + - ts-node + + jest-cli@29.7.0(@types/node@20.5.1)(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.6.3)): + dependencies: + '@jest/core': 29.7.0(ts-node@10.9.2(@types/node@18.19.57)(typescript@4.9.5)) + '@jest/test-result': 29.7.0 + '@jest/types': 29.6.3 + chalk: 4.1.2 + create-jest: 29.7.0(@types/node@20.5.1)(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.6.3)) + exit: 0.1.2 + import-local: 3.2.0 + jest-config: 29.7.0(@types/node@20.5.1)(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.6.3)) jest-util: 29.7.0 jest-validate: 29.7.0 yargs: 17.7.2 @@ -19715,7 +19824,7 @@ snapshots: strip-json-comments: 3.1.1 optionalDependencies: '@types/node': 18.19.57 - ts-node: 10.9.2(@types/node@18.19.57)(typescript@4.9.5) + ts-node: 10.9.2(@types/node@20.5.1)(typescript@5.6.3) transitivePeerDependencies: - babel-plugin-macros - supports-color @@ -19751,7 +19860,7 @@ snapshots: - babel-plugin-macros - supports-color - jest-config@29.7.0(@types/node@18.19.57)(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.6.3)): + jest-config@29.7.0(@types/node@18.19.57)(ts-node@10.9.2(@types/node@20.5.1)(typescript@4.9.5)): dependencies: '@babel/core': 7.25.8 '@jest/test-sequencer': 29.7.0 @@ -19777,7 +19886,69 @@ snapshots: strip-json-comments: 3.1.1 optionalDependencies: '@types/node': 18.19.57 - ts-node: 10.9.2(@types/node@18.19.57)(typescript@4.9.5) + ts-node: 10.9.2(@types/node@20.5.1)(typescript@4.9.5) + transitivePeerDependencies: + - babel-plugin-macros + - supports-color + + jest-config@29.7.0(@types/node@20.5.1)(ts-node@10.9.2(@types/node@20.5.1)(typescript@4.9.5)): + dependencies: + '@babel/core': 7.25.8 + '@jest/test-sequencer': 29.7.0 + '@jest/types': 29.6.3 + babel-jest: 29.7.0(@babel/core@7.25.8) + chalk: 4.1.2 + ci-info: 3.9.0 + deepmerge: 4.3.1 + glob: 7.2.3 + graceful-fs: 4.2.11 + jest-circus: 29.7.0 + jest-environment-node: 29.7.0 + jest-get-type: 29.6.3 + jest-regex-util: 29.6.3 + jest-resolve: 29.7.0 + jest-runner: 29.7.0 + jest-util: 29.7.0 + jest-validate: 29.7.0 + micromatch: 4.0.8 + parse-json: 5.2.0 + pretty-format: 29.7.0 + slash: 3.0.0 + strip-json-comments: 3.1.1 + optionalDependencies: + '@types/node': 20.5.1 + ts-node: 10.9.2(@types/node@20.5.1)(typescript@4.9.5) + transitivePeerDependencies: + - babel-plugin-macros + - supports-color + + jest-config@29.7.0(@types/node@20.5.1)(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.6.3)): + dependencies: + '@babel/core': 7.25.8 + '@jest/test-sequencer': 29.7.0 + '@jest/types': 29.6.3 + babel-jest: 29.7.0(@babel/core@7.25.8) + chalk: 4.1.2 + ci-info: 3.9.0 + deepmerge: 4.3.1 + glob: 7.2.3 + graceful-fs: 4.2.11 + jest-circus: 29.7.0 + jest-environment-node: 29.7.0 + jest-get-type: 29.6.3 + jest-regex-util: 29.6.3 + jest-resolve: 29.7.0 + jest-runner: 29.7.0 + jest-util: 29.7.0 + jest-validate: 29.7.0 + micromatch: 4.0.8 + parse-json: 5.2.0 + pretty-format: 29.7.0 + slash: 3.0.0 + strip-json-comments: 3.1.1 + optionalDependencies: + '@types/node': 20.5.1 + ts-node: 10.9.2(@types/node@20.5.1)(typescript@5.6.3) transitivePeerDependencies: - babel-plugin-macros - supports-color @@ -20045,12 +20216,24 @@ snapshots: - supports-color - ts-node - jest@29.7.0(@types/node@18.19.57)(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.6.3)): + jest@29.7.0(@types/node@20.5.1)(ts-node@10.9.2(@types/node@20.5.1)(typescript@4.9.5)): dependencies: - '@jest/core': 29.7.0(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.6.3)) + '@jest/core': 29.7.0(ts-node@10.9.2(@types/node@20.5.1)(typescript@4.9.5)) '@jest/types': 29.6.3 import-local: 3.2.0 - jest-cli: 29.7.0(@types/node@18.19.57)(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.6.3)) + jest-cli: 29.7.0(@types/node@20.5.1)(ts-node@10.9.2(@types/node@20.5.1)(typescript@4.9.5)) + transitivePeerDependencies: + - '@types/node' + - babel-plugin-macros + - supports-color + - ts-node + + jest@29.7.0(@types/node@20.5.1)(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.6.3)): + dependencies: + '@jest/core': 29.7.0(ts-node@10.9.2(@types/node@18.19.57)(typescript@4.9.5)) + '@jest/types': 29.6.3 + import-local: 3.2.0 + jest-cli: 29.7.0(@types/node@20.5.1)(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.6.3)) transitivePeerDependencies: - '@types/node' - babel-plugin-macros @@ -22648,6 +22831,8 @@ snapshots: text-extensions@2.4.0: {} + three@0.152.2: {} + through2-filter@3.0.0: dependencies: through2: 2.0.5 @@ -22792,7 +22977,7 @@ snapshots: '@ts-morph/common': 0.19.0 code-block-writer: 12.0.0 - ts-node@10.9.2(@types/node@18.19.57)(typescript@4.9.5): + ts-node@10.9.2(@types/node@18.19.57)(typescript@5.6.3): dependencies: '@cspotcode/source-map-support': 0.8.1 '@tsconfig/node10': 1.0.11 @@ -22806,27 +22991,28 @@ snapshots: create-require: 1.1.1 diff: 4.0.2 make-error: 1.3.6 - typescript: 4.9.5 + typescript: 5.6.3 v8-compile-cache-lib: 3.0.1 yn: 3.1.1 - ts-node@10.9.2(@types/node@18.19.57)(typescript@5.6.3): + ts-node@10.9.2(@types/node@20.5.1)(typescript@4.9.5): dependencies: '@cspotcode/source-map-support': 0.8.1 '@tsconfig/node10': 1.0.11 '@tsconfig/node12': 1.0.11 '@tsconfig/node14': 1.0.3 '@tsconfig/node16': 1.0.4 - '@types/node': 18.19.57 + '@types/node': 20.5.1 acorn: 8.13.0 acorn-walk: 8.3.4 arg: 4.1.3 create-require: 1.1.1 diff: 4.0.2 make-error: 1.3.6 - typescript: 5.6.3 + typescript: 4.9.5 v8-compile-cache-lib: 3.0.1 yn: 3.1.1 + optional: true ts-node@10.9.2(@types/node@20.5.1)(typescript@5.6.3): dependencies: @@ -23169,13 +23355,31 @@ snapshots: - supports-color - terser + vite-node@1.6.0(@types/node@20.5.1)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0): + dependencies: + cac: 6.7.14 + debug: 4.3.7 + pathe: 1.1.2 + picocolors: 1.1.1 + vite: 5.4.9(@types/node@20.5.1)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0) + transitivePeerDependencies: + - '@types/node' + - less + - lightningcss + - sass + - sass-embedded + - stylus + - sugarss + - supports-color + - terser + vite-plugin-banner@0.8.0: {} - vite-plugin-css-injected-by-js@3.5.2(vite@4.5.5(@types/node@18.19.57)(sass@1.80.3)(terser@5.36.0)): + vite-plugin-css-injected-by-js@3.5.2(vite@4.5.5(@types/node@20.5.1)(sass@1.80.3)(terser@5.36.0)): dependencies: - vite: 4.5.5(@types/node@18.19.57)(sass@1.80.3)(terser@5.36.0) + vite: 4.5.5(@types/node@20.5.1)(sass@1.80.3)(terser@5.36.0) - vite-plugin-dts@2.3.0(@types/node@18.19.57)(rollup@4.24.0)(vite@3.2.11(@types/node@18.19.57)(sass@1.80.3)(terser@5.36.0)): + vite-plugin-dts@2.3.0(@types/node@18.19.57)(rollup@4.24.0)(vite@4.5.5(@types/node@18.19.57)(sass@1.80.3)(terser@5.36.0)): dependencies: '@babel/parser': 7.25.8 '@microsoft/api-extractor': 7.47.11(@types/node@18.19.57) @@ -23187,52 +23391,87 @@ snapshots: kolorist: 1.8.0 magic-string: 0.29.0 ts-morph: 18.0.0 - vite: 3.2.11(@types/node@18.19.57)(sass@1.80.3)(terser@5.36.0) + vite: 4.5.5(@types/node@18.19.57)(sass@1.80.3)(terser@5.36.0) transitivePeerDependencies: - '@types/node' - rollup - supports-color - vite-plugin-dts@2.3.0(@types/node@18.19.57)(rollup@4.24.0)(vite@4.5.5(@types/node@18.19.57)(sass@1.80.3)(terser@5.36.0)): + vite-plugin-dts@2.3.0(@types/node@20.5.1)(rollup@4.24.0)(vite@3.2.11(@types/node@20.5.1)(sass@1.80.3)(terser@5.36.0)): dependencies: '@babel/parser': 7.25.8 - '@microsoft/api-extractor': 7.47.11(@types/node@18.19.57) + '@microsoft/api-extractor': 7.47.11(@types/node@20.5.1) '@rollup/pluginutils': 5.1.2(rollup@4.24.0) - '@rushstack/node-core-library': 3.66.1(@types/node@18.19.57) + '@rushstack/node-core-library': 3.66.1(@types/node@20.5.1) debug: 4.3.7 fast-glob: 3.3.2 fs-extra: 10.1.0 kolorist: 1.8.0 magic-string: 0.29.0 ts-morph: 18.0.0 - vite: 4.5.5(@types/node@18.19.57)(sass@1.80.3)(terser@5.36.0) + vite: 3.2.11(@types/node@20.5.1)(sass@1.80.3)(terser@5.36.0) transitivePeerDependencies: - '@types/node' - rollup - supports-color - vite-plugin-dts@2.3.0(@types/node@18.19.57)(rollup@4.24.0)(vite@5.4.9(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0)): + vite-plugin-dts@2.3.0(@types/node@20.5.1)(rollup@4.24.0)(vite@4.5.5(@types/node@20.5.1)(sass@1.80.3)(terser@5.36.0)): dependencies: '@babel/parser': 7.25.8 - '@microsoft/api-extractor': 7.47.11(@types/node@18.19.57) + '@microsoft/api-extractor': 7.47.11(@types/node@20.5.1) '@rollup/pluginutils': 5.1.2(rollup@4.24.0) - '@rushstack/node-core-library': 3.66.1(@types/node@18.19.57) + '@rushstack/node-core-library': 3.66.1(@types/node@20.5.1) debug: 4.3.7 fast-glob: 3.3.2 fs-extra: 10.1.0 kolorist: 1.8.0 magic-string: 0.29.0 ts-morph: 18.0.0 - vite: 5.4.9(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0) + vite: 4.5.5(@types/node@20.5.1)(sass@1.80.3)(terser@5.36.0) transitivePeerDependencies: - '@types/node' - rollup - supports-color - vite-plugin-dts@3.9.1(@types/node@18.19.57)(rollup@4.24.0)(typescript@4.9.5)(vite@4.5.5(@types/node@18.19.57)(sass@1.80.3)(terser@5.36.0)): + vite-plugin-dts@2.3.0(@types/node@20.5.1)(rollup@4.24.0)(vite@5.4.9(@types/node@20.5.1)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0)): + dependencies: + '@babel/parser': 7.25.8 + '@microsoft/api-extractor': 7.47.11(@types/node@20.5.1) + '@rollup/pluginutils': 5.1.2(rollup@4.24.0) + '@rushstack/node-core-library': 3.66.1(@types/node@20.5.1) + debug: 4.3.7 + fast-glob: 3.3.2 + fs-extra: 10.1.0 + kolorist: 1.8.0 + magic-string: 0.29.0 + ts-morph: 18.0.0 + vite: 5.4.9(@types/node@20.5.1)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0) + transitivePeerDependencies: + - '@types/node' + - rollup + - supports-color + + vite-plugin-dts@3.9.1(@types/node@18.19.57)(rollup@4.24.0)(typescript@5.6.3)(vite@5.4.9(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0)): dependencies: '@microsoft/api-extractor': 7.43.0(@types/node@18.19.57) '@rollup/pluginutils': 5.1.2(rollup@4.24.0) + '@vue/language-core': 1.8.27(typescript@5.6.3) + debug: 4.3.7 + kolorist: 1.8.0 + magic-string: 0.30.12 + typescript: 5.6.3 + vue-tsc: 1.8.27(typescript@5.6.3) + optionalDependencies: + vite: 5.4.9(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0) + transitivePeerDependencies: + - '@types/node' + - rollup + - supports-color + + vite-plugin-dts@3.9.1(@types/node@20.5.1)(rollup@4.24.0)(typescript@4.9.5)(vite@4.5.5(@types/node@20.5.1)(sass@1.80.3)(terser@5.36.0)): + dependencies: + '@microsoft/api-extractor': 7.43.0(@types/node@20.5.1) + '@rollup/pluginutils': 5.1.2(rollup@4.24.0) '@vue/language-core': 1.8.27(typescript@4.9.5) debug: 4.3.7 kolorist: 1.8.0 @@ -23240,15 +23479,15 @@ snapshots: typescript: 4.9.5 vue-tsc: 1.8.27(typescript@4.9.5) optionalDependencies: - vite: 4.5.5(@types/node@18.19.57)(sass@1.80.3)(terser@5.36.0) + vite: 4.5.5(@types/node@20.5.1)(sass@1.80.3)(terser@5.36.0) transitivePeerDependencies: - '@types/node' - rollup - supports-color - vite-plugin-dts@3.9.1(@types/node@18.19.57)(rollup@4.24.0)(typescript@5.6.3)(vite@5.4.9(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0)): + vite-plugin-dts@3.9.1(@types/node@20.5.1)(rollup@4.24.0)(typescript@5.6.3)(vite@5.4.9(@types/node@20.5.1)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0)): dependencies: - '@microsoft/api-extractor': 7.43.0(@types/node@18.19.57) + '@microsoft/api-extractor': 7.43.0(@types/node@20.5.1) '@rollup/pluginutils': 5.1.2(rollup@4.24.0) '@vue/language-core': 1.8.27(typescript@5.6.3) debug: 4.3.7 @@ -23257,7 +23496,7 @@ snapshots: typescript: 5.6.3 vue-tsc: 1.8.27(typescript@5.6.3) optionalDependencies: - vite: 5.4.9(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0) + vite: 5.4.9(@types/node@20.5.1)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0) transitivePeerDependencies: - '@types/node' - rollup @@ -23287,21 +23526,18 @@ snapshots: - terser - vite - vite-plugin-md@0.21.5(@vitejs/plugin-vue@4.6.2(vite@5.4.9(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3)))(happy-dom@8.9.0)(jsdom@20.0.3)(sass@1.80.3)(terser@5.36.0)(vite@5.4.9(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0)): + vite-plugin-md@0.20.6(jsdom@20.0.3)(sass@1.80.3)(terser@5.36.0): dependencies: - '@yankeeinlondon/builder-api': 1.4.1(@vitejs/plugin-vue@4.6.2(vite@5.4.9(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3)))(happy-dom@8.9.0)(jsdom@20.0.3)(sass@1.80.3)(terser@5.36.0)(vite@5.4.9(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0)) - '@yankeeinlondon/gray-matter': 6.2.1(happy-dom@8.9.0)(jsdom@20.0.3)(sass@1.80.3)(terser@5.36.0) + '@yankeeinlondon/builder-api': 1.4.1(jsdom@20.0.3)(sass@1.80.3)(terser@5.36.0) '@yankeeinlondon/happy-wrapper': 2.10.1(jsdom@20.0.3)(sass@1.80.3)(terser@5.36.0) + gray-matter: 4.0.3 markdown-it: 13.0.2 source-map-js: 1.2.1 - vite: 5.4.9(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0) transitivePeerDependencies: - '@edge-runtime/vm' - - '@vitejs/plugin-vue' - '@vitest/browser' - '@vitest/ui' - encoding - - happy-dom - jsdom - less - lightningcss @@ -23311,9 +23547,9 @@ snapshots: - supports-color - terser - vite-plugin-md@0.21.5(@vitejs/plugin-vue@5.1.4(vite@5.4.9(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3)))(happy-dom@14.12.3)(jsdom@20.0.3)(sass@1.80.3)(terser@5.36.0)(vite@5.4.9(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0)): + vite-plugin-md@0.21.5(happy-dom@14.12.3)(jsdom@20.0.3)(sass@1.80.3)(terser@5.36.0)(vite@5.4.9(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0)): dependencies: - '@yankeeinlondon/builder-api': 1.4.1(@vitejs/plugin-vue@5.1.4(vite@5.4.9(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3)))(happy-dom@14.12.3)(jsdom@20.0.3)(sass@1.80.3)(terser@5.36.0)(vite@5.4.9(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0)) + '@yankeeinlondon/builder-api': 1.4.1(jsdom@20.0.3)(sass@1.80.3)(terser@5.36.0) '@yankeeinlondon/gray-matter': 6.2.1(happy-dom@14.12.3)(jsdom@20.0.3)(sass@1.80.3)(terser@5.36.0) '@yankeeinlondon/happy-wrapper': 2.10.1(jsdom@20.0.3)(sass@1.80.3)(terser@5.36.0) markdown-it: 13.0.2 @@ -23321,7 +23557,6 @@ snapshots: vite: 5.4.9(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0) transitivePeerDependencies: - '@edge-runtime/vm' - - '@vitejs/plugin-vue' - '@vitest/browser' - '@vitest/ui' - encoding @@ -23335,15 +23570,14 @@ snapshots: - supports-color - terser - vite-plugin-md@0.22.5(@vitejs/plugin-vue@4.6.2(vite@4.5.5(@types/node@18.19.57)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@4.9.5)))(happy-dom@8.9.0)(jsdom@20.0.3)(sass@1.80.3)(terser@5.36.0)(vite@4.5.5(@types/node@18.19.57)(sass@1.80.3)(terser@5.36.0)): + vite-plugin-md@0.21.5(happy-dom@8.9.0)(jsdom@20.0.3)(sass@1.80.3)(terser@5.36.0)(vite@5.4.9(@types/node@20.5.1)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0)): dependencies: - '@vitejs/plugin-vue': 4.6.2(vite@4.5.5(@types/node@18.19.57)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@4.9.5)) - '@yankeeinlondon/builder-api': 1.4.1(happy-dom@8.9.0)(jsdom@20.0.3)(sass@1.80.3)(terser@5.36.0) + '@yankeeinlondon/builder-api': 1.4.1(jsdom@20.0.3)(sass@1.80.3)(terser@5.36.0) '@yankeeinlondon/gray-matter': 6.2.1(happy-dom@8.9.0)(jsdom@20.0.3)(sass@1.80.3)(terser@5.36.0) '@yankeeinlondon/happy-wrapper': 2.10.1(jsdom@20.0.3)(sass@1.80.3)(terser@5.36.0) markdown-it: 13.0.2 source-map-js: 1.2.1 - vite: 4.5.5(@types/node@18.19.57)(sass@1.80.3)(terser@5.36.0) + vite: 5.4.9(@types/node@20.5.1)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0) transitivePeerDependencies: - '@edge-runtime/vm' - '@vitest/browser' @@ -23359,15 +23593,15 @@ snapshots: - supports-color - terser - vite-plugin-md@0.22.5(@vitejs/plugin-vue@4.6.2(vite@5.4.9(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3)))(happy-dom@8.9.0)(jsdom@20.0.3)(sass@1.80.3)(terser@5.36.0)(vite@5.4.9(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0)): + vite-plugin-md@0.22.5(@vitejs/plugin-vue@4.6.2(vite@4.5.5(@types/node@18.19.57)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@4.9.5)))(happy-dom@8.9.0)(jsdom@20.0.3)(sass@1.80.3)(terser@5.36.0)(vite@4.5.5(@types/node@18.19.57)(sass@1.80.3)(terser@5.36.0)): dependencies: - '@vitejs/plugin-vue': 4.6.2(vite@5.4.9(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3)) - '@yankeeinlondon/builder-api': 1.4.1(happy-dom@8.9.0)(jsdom@20.0.3)(sass@1.80.3)(terser@5.36.0) + '@vitejs/plugin-vue': 4.6.2(vite@4.5.5(@types/node@18.19.57)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@4.9.5)) + '@yankeeinlondon/builder-api': 1.4.1(@vitejs/plugin-vue@4.6.2(vite@4.5.5(@types/node@18.19.57)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@4.9.5)))(happy-dom@8.9.0)(jsdom@20.0.3)(sass@1.80.3)(terser@5.36.0)(vite@4.5.5(@types/node@18.19.57)(sass@1.80.3)(terser@5.36.0)) '@yankeeinlondon/gray-matter': 6.2.1(happy-dom@8.9.0)(jsdom@20.0.3)(sass@1.80.3)(terser@5.36.0) '@yankeeinlondon/happy-wrapper': 2.10.1(jsdom@20.0.3)(sass@1.80.3)(terser@5.36.0) markdown-it: 13.0.2 source-map-js: 1.2.1 - vite: 5.4.9(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0) + vite: 4.5.5(@types/node@18.19.57)(sass@1.80.3)(terser@5.36.0) transitivePeerDependencies: - '@edge-runtime/vm' - '@vitest/browser' @@ -23383,29 +23617,6 @@ snapshots: - supports-color - terser - vite-plugin-md@0.22.5(@vitejs/plugin-vue@5.1.4(vite@5.4.9(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3)))(jsdom@20.0.3)(sass@1.80.3)(terser@5.36.0)(vite@5.4.9(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0)): - dependencies: - '@vitejs/plugin-vue': 5.1.4(vite@5.4.9(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3)) - '@yankeeinlondon/builder-api': 1.4.1(jsdom@20.0.3)(sass@1.80.3)(terser@5.36.0) - '@yankeeinlondon/gray-matter': 6.2.1 - '@yankeeinlondon/happy-wrapper': 2.10.1(jsdom@20.0.3)(sass@1.80.3)(terser@5.36.0) - markdown-it: 13.0.2 - source-map-js: 1.2.1 - vite: 5.4.9(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0) - transitivePeerDependencies: - - '@edge-runtime/vm' - - '@vitest/browser' - - '@vitest/ui' - - encoding - - jsdom - - less - - lightningcss - - sass - - stylus - - sugarss - - supports-color - - terser - vite-svg-loader@4.0.0: dependencies: '@vue/compiler-sfc': 3.5.12 @@ -23438,6 +23649,18 @@ snapshots: sass: 1.80.3 terser: 5.36.0 + vite@3.2.11(@types/node@20.5.1)(sass@1.80.3)(terser@5.36.0): + dependencies: + esbuild: 0.15.18 + postcss: 8.4.47 + resolve: 1.22.8 + rollup: 2.79.2 + optionalDependencies: + '@types/node': 20.5.1 + fsevents: 2.3.3 + sass: 1.80.3 + terser: 5.36.0 + vite@4.5.5(@types/node@18.19.57)(sass@1.80.3)(terser@5.36.0): dependencies: esbuild: 0.18.20 @@ -23449,6 +23672,17 @@ snapshots: sass: 1.80.3 terser: 5.36.0 + vite@4.5.5(@types/node@20.5.1)(sass@1.80.3)(terser@5.36.0): + dependencies: + esbuild: 0.18.20 + postcss: 8.4.47 + rollup: 3.29.5 + optionalDependencies: + '@types/node': 20.5.1 + fsevents: 2.3.3 + sass: 1.80.3 + terser: 5.36.0 + vite@5.4.9(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0): dependencies: esbuild: 0.21.5 @@ -23461,6 +23695,18 @@ snapshots: sass-embedded: 1.80.3 terser: 5.36.0 + vite@5.4.9(@types/node@20.5.1)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0): + dependencies: + esbuild: 0.21.5 + postcss: 8.4.47 + rollup: 4.24.0 + optionalDependencies: + '@types/node': 20.5.1 + fsevents: 2.3.3 + sass: 1.80.3 + sass-embedded: 1.80.3 + terser: 5.36.0 + vitepress-theme-demoblock@1.4.2(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(sass@1.80.3)(typescript@4.9.5): dependencies: camelcase: 6.3.0 @@ -23575,16 +23821,16 @@ snapshots: - supports-color - typescript - vitepress@1.0.0-alpha.10(@algolia/client-search@4.24.0)(@types/node@18.19.57)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(sass@1.80.3)(search-insights@2.17.2)(terser@5.36.0)(typescript@4.9.5): + vitepress@1.0.0-alpha.10(@algolia/client-search@4.24.0)(@types/node@20.5.1)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(sass@1.80.3)(search-insights@2.17.2)(terser@5.36.0)(typescript@4.9.5): dependencies: '@docsearch/css': 3.6.2 '@docsearch/js': 3.6.0(@algolia/client-search@4.24.0)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(search-insights@2.17.2) - '@vitejs/plugin-vue': 3.2.0(vite@3.2.11(@types/node@18.19.57)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@4.9.5)) + '@vitejs/plugin-vue': 3.2.0(vite@3.2.11(@types/node@20.5.1)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@4.9.5)) '@vue/devtools-api': 6.6.4 '@vueuse/core': 9.2.0(vue@3.5.12(typescript@4.9.5)) body-scroll-lock: 4.0.0-beta.0 shiki: 0.11.1 - vite: 3.2.11(@types/node@18.19.57)(sass@1.80.3)(terser@5.36.0) + vite: 3.2.11(@types/node@20.5.1)(sass@1.80.3)(terser@5.36.0) vue: 3.5.12(typescript@4.9.5) transitivePeerDependencies: - '@algolia/client-search' @@ -23601,7 +23847,33 @@ snapshots: - terser - typescript - vitepress@1.0.0-alpha.10(@algolia/client-search@4.24.0)(@types/node@18.19.57)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(sass@1.80.3)(search-insights@2.17.2)(terser@5.36.0)(typescript@5.6.3): + vitepress@1.0.0-alpha.10(@algolia/client-search@4.24.0)(@types/node@20.5.1)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(sass@1.80.3)(search-insights@2.17.2)(terser@5.36.0)(typescript@5.6.3): + dependencies: + '@docsearch/css': 3.6.2 + '@docsearch/js': 3.6.0(@algolia/client-search@4.24.0)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(search-insights@2.17.2) + '@vitejs/plugin-vue': 3.2.0(vite@3.2.11(@types/node@20.5.1)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3)) + '@vue/devtools-api': 6.6.4 + '@vueuse/core': 9.2.0(vue@3.5.12(typescript@5.6.3)) + body-scroll-lock: 4.0.0-beta.0 + shiki: 0.11.1 + vite: 3.2.11(@types/node@20.5.1)(sass@1.80.3)(terser@5.36.0) + vue: 3.5.12(typescript@5.6.3) + transitivePeerDependencies: + - '@algolia/client-search' + - '@types/node' + - '@types/react' + - '@vue/composition-api' + - less + - react + - react-dom + - sass + - search-insights + - stylus + - sugarss + - terser + - typescript + + vitepress@1.0.0-alpha.10(@types/node@18.19.57)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(sass@1.80.3)(terser@5.36.0)(typescript@5.6.3): dependencies: '@docsearch/css': 3.6.2 '@docsearch/js': 3.6.0(@algolia/client-search@4.24.0)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(search-insights@2.17.2) @@ -23653,6 +23925,32 @@ snapshots: - terser - typescript + vitepress@1.0.0-alpha.8(@algolia/client-search@4.24.0)(@types/node@20.5.1)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(sass@1.80.3)(search-insights@2.17.2)(terser@5.36.0)(typescript@4.9.5): + dependencies: + '@docsearch/css': 3.6.2 + '@docsearch/js': 3.6.2(@algolia/client-search@4.24.0)(react-dom@16.14.0(react@16.14.0))(react@16.14.0)(search-insights@2.17.2) + '@vitejs/plugin-vue': 3.2.0(vite@3.2.11(@types/node@20.5.1)(sass@1.80.3)(terser@5.36.0))(vue@3.5.12(typescript@4.9.5)) + '@vue/devtools-api': 6.6.4 + '@vueuse/core': 9.2.0(vue@3.5.12(typescript@4.9.5)) + body-scroll-lock: 4.0.0-beta.0 + shiki: 0.11.1 + vite: 3.2.11(@types/node@20.5.1)(sass@1.80.3)(terser@5.36.0) + vue: 3.5.12(typescript@4.9.5) + transitivePeerDependencies: + - '@algolia/client-search' + - '@types/node' + - '@types/react' + - '@vue/composition-api' + - less + - react + - react-dom + - sass + - search-insights + - stylus + - sugarss + - terser + - typescript + vitest@0.25.8(happy-dom@14.12.3)(jsdom@20.0.3)(sass@1.80.3)(terser@5.36.0): dependencies: '@types/chai': 4.3.20 @@ -23821,7 +24119,7 @@ snapshots: - supports-color - terser - vitest@1.6.0(@types/node@18.19.57)(happy-dom@8.9.0)(jsdom@20.0.3)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0): + vitest@1.6.0(@types/node@20.5.1)(happy-dom@8.9.0)(jsdom@20.0.3)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0): dependencies: '@vitest/expect': 1.6.0 '@vitest/runner': 1.6.0 @@ -23840,11 +24138,11 @@ snapshots: strip-literal: 2.1.0 tinybench: 2.9.0 tinypool: 0.8.4 - vite: 5.4.9(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0) - vite-node: 1.6.0(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0) + vite: 5.4.9(@types/node@20.5.1)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0) + vite-node: 1.6.0(@types/node@20.5.1)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0) why-is-node-running: 2.3.0 optionalDependencies: - '@types/node': 18.19.57 + '@types/node': 20.5.1 happy-dom: 8.9.0 jsdom: 20.0.3 transitivePeerDependencies: -- Gitee