diff --git a/examples/delete-button/index.json b/examples/delete-button/index.json deleted file mode 100644 index bbd36eec..00000000 --- a/examples/delete-button/index.json +++ /dev/null @@ -1,89 +0,0 @@ -{ - "app": { - "version": "example/v1", - "metadata": { - "name": "delete-button", - "description": "delete button example" - }, - "spec": { - "components": [ - { - "id": "del_btn", - "type": "plain/v1/button", - "properties": { - "text": { - "raw": "{{ del_btn.count > 0 ? 'CLICK TO CONFIRM' : '**DELETE** Button' }}", - "format": "md" - } - }, - "traits": [ - { - "type": "core/v1/state", - "properties": { - "key": "count", - "initialValue": 0 - } - }, - { - "type": "core/v1/event", - "properties": { - "handlers": [ - { - "type": "onClick", - "componentId": "$utils", - "method": { - "name": "alert", - "parameters": "{{ 'deleted!' }}" - }, - "wait": {}, - "disabled": "{{ del_btn.count === 0 }}" - }, - { - "type": "onClick", - "componentId": "del_btn", - "method": { - "name": "setValue", - "parameters": { - "key": "count", - "value": "{{ del_btn.count > 0 ? 0 : del_btn.count + 1 }}" - } - }, - "wait": {}, - "disabled": false - }, - { - "type": "onClick", - "componentId": "del_btn", - "method": { - "name": "setValue", - "parameters": { - "key": "count", - "value": "0" - } - }, - "wait": { - "type": "delay", - "time": 2000 - }, - "disabled": "{{ del_btn.count === 0 }}" - } - ] - } - } - ] - }, - { - "id": "debug_text", - "type": "core/v1/text", - "properties": { - "value": { - "raw": "{{ del_btn.value + '---' + del_btn.count }}", - "format": "md" - } - }, - "traits": [] - } - ] - } - } -} diff --git a/examples/dialog/list.json b/examples/dialog/dialogInList.json similarity index 83% rename from examples/dialog/list.json rename to examples/dialog/dialogInList.json index 110a2239..b6f99e32 100644 --- a/examples/dialog/list.json +++ b/examples/dialog/dialogInList.json @@ -16,148 +16,148 @@ "email": "" }, "events": ["onClickDelete", "onClickEdit"], - "stateMap": {}, - "components": [ - { - "id": "{{$moduleId}}hstack", - "type": "chakra_ui/v1/hstack", - "properties": { - "spacing": "24px" - }, - "traits": [] + "stateMap": {} + }, + "components": [ + { + "id": "{{$moduleId}}hstack", + "type": "chakra_ui/v1/hstack", + "properties": { + "spacing": "24px" }, - { - "id": "{{$moduleId}}name", - "type": "core/v1/text", - "properties": { - "value": { - "raw": "姓名：{{name}}", - "format": "plain" - } - }, - "traits": [ - { - "type": "core/v1/slot", - "properties": { - "container": { - "id": "{{$moduleId}}hstack", - "slot": "content" - } + "traits": [] + }, + { + "id": "{{$moduleId}}name", + "type": "core/v1/text", + "properties": { + "value": { + "raw": "姓名：{{name}}", + "format": "plain" + } + }, + "traits": [ + { + "type": "core/v1/slot", + "properties": { + "container": { + "id": "{{$moduleId}}hstack", + "slot": "content" } } - ] + } + ] + }, + { + "id": "{{$moduleId}}email", + "type": "core/v1/text", + "properties": { + "value": { + "raw": "email：{{email}}", + "format": "plain" + } }, - { - "id": "{{$moduleId}}email", - "type": "core/v1/text", - "properties": { - "value": { - "raw": "email：{{email}}", - "format": "plain" - } - }, - "traits": [ - { - "type": "core/v1/slot", - "properties": { - "container": { - "id": "{{$moduleId}}hstack", - "slot": "content" - } + "traits": [ + { + "type": "core/v1/slot", + "properties": { + "container": { + "id": "{{$moduleId}}hstack", + "slot": "content" } } - ] + } + ] + }, + { + "id": "{{$moduleId}}deleteButton", + "type": "chakra_ui/v1/button", + "properties": { + "text": { + "raw": "删除", + "format": "plain" + } }, - { - "id": "{{$moduleId}}deleteButton", - "type": "chakra_ui/v1/button", - "properties": { - "text": { - "raw": "删除", - "format": "plain" - } - }, - "traits": [ - { - "type": "core/v1/event", - "parsedType": { - "version": "core/v1", - "name": "event" - }, - "properties": { - "handlers": [ - { - "type": "onClick", - "componentId": "$module", - "method": { - "name": "onClickDelete", - "parameters": { - "moduleId": "{{$moduleId}}" - } - }, - "wait": {}, - "disabled": "false" - } - ] - } + "traits": [ + { + "type": "core/v1/event", + "parsedType": { + "version": "core/v1", + "name": "event" }, - { - "type": "core/v1/slot", - "properties": { - "container": { - "id": "{{$moduleId}}hstack", - "slot": "content" + "properties": { + "handlers": [ + { + "type": "onClick", + "componentId": "$module", + "method": { + "name": "onClickDelete", + "parameters": { + "moduleId": "{{$moduleId}}" + } + }, + "wait": {}, + "disabled": "false" } - } - } - ] - }, - { - "id": "{{$moduleId}}editButton", - "type": "chakra_ui/v1/button", - "properties": { - "text": { - "raw": "编辑", - "format": "plain" + ] } }, - "traits": [ - { - "type": "core/v1/event", - "parsedType": { - "version": "core/v1", - "name": "event" - }, - "properties": { - "handlers": [ - { - "type": "onClick", - "componentId": "$module", - "method": { - "name": "onClickEdit", - "parameters": { - "moduleId": "{{$moduleId}}" - } - }, - "wait": {}, - "disabled": "false" - } - ] - } - }, - { - "type": "core/v1/slot", - "properties": { - "container": { - "id": "{{$moduleId}}hstack", - "slot": "content" - } + { + "type": "core/v1/slot", + "properties": { + "container": { + "id": "{{$moduleId}}hstack", + "slot": "content" } } - ] - } - ] - } + } + ] + }, + { + "id": "{{$moduleId}}editButton", + "type": "chakra_ui/v1/button", + "properties": { + "text": { + "raw": "编辑", + "format": "plain" + } + }, + "traits": [ + { + "type": "core/v1/event", + "parsedType": { + "version": "core/v1", + "name": "event" + }, + "properties": { + "handlers": [ + { + "type": "onClick", + "componentId": "$module", + "method": { + "name": "onClickEdit", + "parameters": { + "moduleId": "{{$moduleId}}" + } + }, + "wait": {}, + "disabled": "false" + } + ] + } + }, + { + "type": "core/v1/slot", + "properties": { + "container": { + "id": "{{$moduleId}}hstack", + "slot": "content" + } + } + } + ] + } + ] } ], "app": { diff --git a/examples/fetch-list/lazy.json b/examples/fetch-list/lazy.json index 6dc40c59..045dc48e 100644 --- a/examples/fetch-list/lazy.json +++ b/examples/fetch-list/lazy.json @@ -12,7 +12,7 @@ "type": "plain/v1/button", "properties": { "text": { - "raw": "fetching", + "raw": "Click to Fetch!", "format": "md" } }, @@ -46,13 +46,6 @@ } }, "traits": [ - { - "type": "core/v1/state", - "properties": { - "key": "country", - "initialValue": "CN" - } - }, { "type": "core/v1/state", "properties": { @@ -64,12 +57,8 @@ "type": "core/v1/fetch", "properties": { "name": "query", - "url": "{{ \"https://skyscanner-skyscanner-flight-search-v1.p.rapidapi.com/apiservices/browseroutes/v1.0/\"+fetch_list.country+\"/CNY/zh-CN/CSHA/SZX/anytime/anytime\"}}", + "url": "https://61373521eac1410017c18209.mockapi.io/Volume", "method": "get", - "headers": { - "x-rapidapi-key": "{{fetch_list.token}}", - "x-rapidapi-host": "skyscanner-skyscanner-flight-search-v1.p.rapidapi.com" - }, "lazy": true } } diff --git a/examples/fetch-list/nonLazy.json b/examples/fetch-list/nonLazy.json deleted file mode 100644 index 12aac56a..00000000 --- a/examples/fetch-list/nonLazy.json +++ /dev/null @@ -1,94 +0,0 @@ -{ - "app": { - "version": "example/v1", - "metadata": { - "name": "fetch-list", - "description": "fetch trait example" - }, - "spec": { - "components": [ - { - "id": "fetch_btn", - "type": "plain/v1/button", - "properties": { - "text": { - "raw": "switch token", - "format": "md" - } - }, - "traits": [ - { - "type": "core/v1/state", - "properties": { - "key": "token", - "initialValue": "01f0f6265bmsh0efd88b5c7dfa93p136d2ajsn8be6074b61b2" - } - }, - { - "type": "core/v1/event", - "properties": { - "handlers": [ - { - "type": "onClick", - "componentId": "fetch_btn", - "method": { - "name": "setValue", - "parameters": { - "key": "token", - "value": "{{ fetch_btn.token ? '' : '01f0f6265bmsh0efd88b5c7dfa93p136d2ajsn8be6074b61b2' }}" - } - }, - "wait": {}, - "disabled": false - } - ] - } - } - ] - }, - { - "id": "fetch_list", - "type": "core/v1/text", - "properties": { - "value": { - "raw": "{{fetch_list.fetch.loading? \"Fetching\": fetch_list.fetch.data? JSON.stringify(fetch_list.fetch.data): fetch_list.fetch.error? fetch_list.fetch.error.message: \"No data\"}}", - "format": "md" - } - }, - "traits": [ - { - "type": "core/v1/state", - "properties": { - "key": "country", - "initialValue": "CN" - } - }, - { - "type": "core/v1/fetch", - "properties": { - "name": "query", - "url": "{{ \"https://skyscanner-skyscanner-flight-search-v1.p.rapidapi.com/apiservices/browseroutes/v1.0/\" + fetch_list.country + \"/CNY/zh-CN/CSHA/SZX/anytime/anytime\"}}", - "method": "get", - "headers": { - "x-rapidapi-key": "{{fetch_btn.token}}", - "x-rapidapi-host": "skyscanner-skyscanner-flight-search-v1.p.rapidapi.com" - } - } - } - ] - }, - { - "id": "debug_text", - "type": "core/v1/text", - "properties": { - "value": { - "raw": "{{ fetch.data }}", - "format": "md" - } - }, - "traits": [] - } - ] - } - } -} diff --git a/examples/nested-components/index.json b/examples/tabs/index.json similarity index 91% rename from examples/nested-components/index.json rename to examples/tabs/index.json index 9564f296..5769d304 100644 --- a/examples/nested-components/index.json +++ b/examples/tabs/index.json @@ -47,7 +47,7 @@ "properties": { "container": { "id": "tabs", - "slot": "tab_content_0" + "slot": "content" } } } @@ -58,7 +58,7 @@ "type": "core/v1/text", "properties": { "value": { - "raw": "in tab2", + "raw": "in tab3", "format": "plain" } }, @@ -67,8 +67,8 @@ "type": "core/v1/slot", "properties": { "container": { - "id": "tabs", - "slot": "tab_content_1" + "id": "nested_tabs", + "slot": "content" } } } @@ -86,7 +86,7 @@ "properties": { "container": { "id": "tabs", - "slot": "tab_content_1" + "slot": "content" } } } diff --git a/packages/runtime/src/components/chakra-ui/Box.tsx b/packages/runtime/src/components/chakra-ui/Box.tsx index b6ebe7f4..6f33accf 100644 --- a/packages/runtime/src/components/chakra-ui/Box.tsx +++ b/packages/runtime/src/components/chakra-ui/Box.tsx @@ -5,6 +5,7 @@ import { ComponentImplementation } from '../../services/registry'; import Slot from '../_internal/Slot'; import { pick } from 'lodash-es'; import { GRID_HEIGHT } from '../../constants'; +import { css } from '@emotion/react'; const CssGlobals = Type.KeyOf( Type.Object({ @@ -274,6 +275,7 @@ const StyleProps = Object.keys(StyleSchema.properties); const Box: ComponentImplementation> = ({ slotsMap, + customStyle, ...restProps }) => { const styleProps = pick(restProps, StyleProps); @@ -286,6 +288,7 @@ const Box: ComponentImplementation> = ({ borderColor="gray.200" borderRadius="base" {...styleProps} + css={css`${customStyle?.content}`} > @@ -313,7 +316,7 @@ export default { state: {}, methods: [], slots: ['content'], - styleSlots: [], + styleSlots: ['content'], events: [], }, }), diff --git a/packages/runtime/src/components/chakra-ui/Button.tsx b/packages/runtime/src/components/chakra-ui/Button.tsx index f36bdf6f..ee41d41a 100644 --- a/packages/runtime/src/components/chakra-ui/Button.tsx +++ b/packages/runtime/src/components/chakra-ui/Button.tsx @@ -34,7 +34,6 @@ const Button: ComponentImplementation> = ({ css={css` ${customStyle?.content} `} - height="full" {...{ colorScheme, isLoading }} ref={ref} onClick={callbacks?.onClick} @@ -82,7 +81,7 @@ export default { }, ], slots: [], - styleSlots: [], + styleSlots: ['content'], events: ['onClick'], }, }), diff --git a/packages/runtime/src/components/chakra-ui/Checkbox.tsx b/packages/runtime/src/components/chakra-ui/Checkbox.tsx index 1c58e2e0..87bd90b4 100644 --- a/packages/runtime/src/components/chakra-ui/Checkbox.tsx +++ b/packages/runtime/src/components/chakra-ui/Checkbox.tsx @@ -5,6 +5,7 @@ import { Checkbox as BaseCheckbox, useCheckboxGroupContext } from '@chakra-ui/re import { ComponentImplementation } from '../../services/registry'; import Text, { TextPropertySchema } from '../_internal/Text'; import { ColorSchemePropertySchema } from './Types/ColorScheme'; +import { css } from '@emotion/react'; export const IsDisabledSchema = Type.Optional(Type.Boolean()); export const SizePropertySchema = Type.KeyOf( @@ -34,6 +35,7 @@ const Checkbox: ComponentImplementation> = ({ spacing, colorScheme, mergeState, + customStyle, }) => { const groupContext = useCheckboxGroupContext(); let _defaultIsChecked = false; @@ -84,6 +86,7 @@ const Checkbox: ComponentImplementation> = ({ onChange={e => { setChecked(e.target.checked); }} + css={css`${customStyle?.content}`} > @@ -130,7 +133,7 @@ export default { state: CheckboxStateSchema, methods: [], slots: [], - styleSlots: [], + styleSlots: ['content'], events: [], }, }), diff --git a/packages/runtime/src/components/chakra-ui/CheckboxGroup.tsx b/packages/runtime/src/components/chakra-ui/CheckboxGroup.tsx index 6eab4905..73b07c4f 100644 --- a/packages/runtime/src/components/chakra-ui/CheckboxGroup.tsx +++ b/packages/runtime/src/components/chakra-ui/CheckboxGroup.tsx @@ -5,6 +5,7 @@ import { CheckboxGroup as BaseCheckboxGroup } from '@chakra-ui/react'; import { ComponentImplementation } from '../../services/registry'; import Slot from '../_internal/Slot'; import { SizePropertySchema, IsDisabledSchema } from './Checkbox'; +import { css } from '@emotion/react'; const DefaultValueSchema = Type.Optional( Type.Array(Type.Union([Type.String(), Type.Number()])) @@ -20,6 +21,7 @@ const CheckboxGroup: ComponentImplementation> = ({ isDisabled, slotsMap, mergeState, + customStyle, }) => { const [value, setValue] = useState(defaultValue); useEffect(() => { @@ -32,6 +34,7 @@ const CheckboxGroup: ComponentImplementation> = ({ defaultValue={defaultValue} isDisabled={isDisabled} onChange={val => setValue(val)} + css={css`${customStyle?.content}`} > @@ -63,7 +66,7 @@ export default { state: StateSchema, methods: [], slots: ['content'], - styleSlots: [], + styleSlots: ['content'], events: [], }, }), diff --git a/packages/runtime/src/components/chakra-ui/Dialog.tsx b/packages/runtime/src/components/chakra-ui/Dialog.tsx index a9f5c45e..f4d0b491 100644 --- a/packages/runtime/src/components/chakra-ui/Dialog.tsx +++ b/packages/runtime/src/components/chakra-ui/Dialog.tsx @@ -36,6 +36,7 @@ const Dialog: ComponentImplementation> = ({ text: 'cancel', colorScheme: 'blue', }, + customStyle }) => { const [isOpen, setIsOpen] = useState(false); const [title, setTitle] = useState(customerTitle || ''); @@ -86,6 +87,7 @@ const Dialog: ComponentImplementation> = ({ onClose={() => setIsOpen(false)} trapFocus={false} portalProps={containerRef.current ? portalProps : undefined} + css={`${customStyle?.content}`} > @@ -160,7 +162,7 @@ export default { }, ], slots: ['content'], - styleSlots: [], + styleSlots: ['content'], events: ['cancelDialog', 'confirmDialog'], }, }), diff --git a/packages/runtime/src/components/chakra-ui/Divider.tsx b/packages/runtime/src/components/chakra-ui/Divider.tsx index ae87735b..6316b611 100644 --- a/packages/runtime/src/components/chakra-ui/Divider.tsx +++ b/packages/runtime/src/components/chakra-ui/Divider.tsx @@ -1,9 +1,10 @@ import { Divider } from '@chakra-ui/react'; +import { css } from '@emotion/react'; import { createComponent } from '@sunmao-ui/core'; import { ComponentImplementation } from '../../services/registry'; -const DividerImpl: ComponentImplementation = () => { - return ; +const DividerImpl: ComponentImplementation = ({customStyle}) => { + return ; }; export default { @@ -23,7 +24,7 @@ export default { state: {}, methods: [], slots: [], - styleSlots: [], + styleSlots: ['content'], events: [], }, }), diff --git a/packages/runtime/src/components/chakra-ui/HStack.tsx b/packages/runtime/src/components/chakra-ui/HStack.tsx index d2725ba6..dbbdd8b7 100644 --- a/packages/runtime/src/components/chakra-ui/HStack.tsx +++ b/packages/runtime/src/components/chakra-ui/HStack.tsx @@ -67,7 +67,7 @@ export default { state: {}, methods: [], slots: ['content'], - styleSlots: [], + styleSlots: ['content'], events: [], }, }), diff --git a/packages/runtime/src/components/chakra-ui/Image.tsx b/packages/runtime/src/components/chakra-ui/Image.tsx index f18f45ce..58f9bb0e 100644 --- a/packages/runtime/src/components/chakra-ui/Image.tsx +++ b/packages/runtime/src/components/chakra-ui/Image.tsx @@ -76,12 +76,14 @@ const Image: ComponentImplementation> = ({ htmlHeight, crossOrigin, callbackMap, + customStyle }) => { const style = boxSize - ? undefined + ? css`${customStyle?.content}` : css` height: 100%; width: 100%; + ${customStyle?.content} `; return ( > = ({ mergeState, subscribeMethods, defaultValue, + customStyle }) => { const [value, setValue] = React.useState(defaultValue || ''); // TODO: pin input const onChange = (event: React.ChangeEvent) => @@ -81,6 +83,7 @@ const Input: ComponentImplementation> = ({ isDisabled={isDisabled} isRequired={isRequired} onChange={onChange} + css={css`${customStyle?.content}`} /> {right ? ( right.type === 'addon' ? ( @@ -161,7 +164,7 @@ export default { }, ], slots: [], - styleSlots: [], + styleSlots: ['content'], events: [], }, }), diff --git a/packages/runtime/src/components/chakra-ui/Kbd.tsx b/packages/runtime/src/components/chakra-ui/Kbd.tsx index 9a6d1994..88d30283 100644 --- a/packages/runtime/src/components/chakra-ui/Kbd.tsx +++ b/packages/runtime/src/components/chakra-ui/Kbd.tsx @@ -4,17 +4,19 @@ import { Static, Type } from '@sinclair/typebox'; import { createComponent } from '@sunmao-ui/core'; import { ComponentImplementation } from '../../services/registry'; import Text, { TextPropertySchema } from '../_internal/Text'; +import { css } from '@emotion/react'; const Kbd: ComponentImplementation> = ({ text, mergeState, + customStyle }) => { useEffect(() => { mergeState({ value: text.raw }); }, [text.raw]); return ( - + ); @@ -50,7 +52,7 @@ export default { state: StateSchema, methods: [], slots: [], - styleSlots: [], + styleSlots: ['content'], events: [], }, }), diff --git a/packages/runtime/src/components/chakra-ui/Link.tsx b/packages/runtime/src/components/chakra-ui/Link.tsx index c64c0523..d2b382b6 100644 --- a/packages/runtime/src/components/chakra-ui/Link.tsx +++ b/packages/runtime/src/components/chakra-ui/Link.tsx @@ -1,4 +1,5 @@ import { Link } from '@chakra-ui/react'; +import { css } from '@emotion/react'; import { Static, Type } from '@sinclair/typebox'; import { createComponent } from '@sunmao-ui/core'; import { ComponentImplementation } from '../../services/registry'; @@ -8,9 +9,17 @@ const LinkImpl: ComponentImplementation> = ({ text, href, isExternal, + customStyle, }) => { return ( - + ); @@ -45,7 +54,7 @@ export default { state: {}, methods: [], slots: [], - styleSlots: [], + styleSlots: ['content'], events: [], }, }), diff --git a/packages/runtime/src/components/chakra-ui/List.tsx b/packages/runtime/src/components/chakra-ui/List.tsx index fd9ba925..440b1eb6 100644 --- a/packages/runtime/src/components/chakra-ui/List.tsx +++ b/packages/runtime/src/components/chakra-ui/List.tsx @@ -5,12 +5,14 @@ import { ComponentImplementation } from '../../services/registry'; import { LIST_ITEM_EXP, LIST_ITEM_INDEX_EXP } from '../../constants'; import { RuntimeModuleSchema } from '../../types/RuntimeSchema'; import { ModuleRenderer } from '../_internal/ModuleRenderer'; +import { css } from '@emotion/react'; const List: ComponentImplementation> = ({ listData, template, app, services, + customStyle }) => { if (!listData) { return null; @@ -38,7 +40,7 @@ const List: ComponentImplementation> = ({ return listItemEle; }); - return {listItems}; + return {listItems}; }; const PropsSchema = Type.Object({ @@ -85,7 +87,7 @@ export default { methods: [], state: {}, slots: [], - styleSlots: [], + styleSlots: ['content'], events: [], }, }), diff --git a/packages/runtime/src/components/chakra-ui/NumberInput.tsx b/packages/runtime/src/components/chakra-ui/NumberInput.tsx index 70bbc515..a5b0dba7 100644 --- a/packages/runtime/src/components/chakra-ui/NumberInput.tsx +++ b/packages/runtime/src/components/chakra-ui/NumberInput.tsx @@ -9,6 +9,7 @@ import { import { createComponent } from '@sunmao-ui/core'; import { Static, Type } from '@sinclair/typebox'; import { ComponentImplementation } from '../../services/registry'; +import { css } from '@emotion/react'; const NumberInput: ComponentImplementation> = ({ defaultValue = 0, @@ -23,6 +24,7 @@ const NumberInput: ComponentImplementation> = ({ customerDecrement, mergeState, subscribeMethods, + customStyle }) => { const [value, setValue] = useState(defaultValue); const onChange = (_: string, valueAsNumber: number) => setValue(valueAsNumber || 0); @@ -59,6 +61,7 @@ const NumberInput: ComponentImplementation> = ({ allowMouseWheel={allowMouseWheel} size={size} onChange={onChange} + css={css`${customStyle?.content}`} > @@ -130,7 +133,7 @@ export default { }, ], slots: [], - styleSlots: [], + styleSlots: ['content'], events: [], }, }), diff --git a/packages/runtime/src/components/chakra-ui/Radio.tsx b/packages/runtime/src/components/chakra-ui/Radio.tsx index 9f14adaf..0ea77017 100644 --- a/packages/runtime/src/components/chakra-ui/Radio.tsx +++ b/packages/runtime/src/components/chakra-ui/Radio.tsx @@ -5,6 +5,7 @@ import { Radio as BaseRadio } from '@chakra-ui/react'; import { ComponentImplementation } from '../../services/registry'; import Text, { TextPropertySchema } from '../_internal/Text'; import { ColorSchemePropertySchema } from './Types/ColorScheme'; +import { css } from '@emotion/react'; const StateSchema = Type.Object({ value: Type.String(), @@ -23,6 +24,7 @@ const Radio: ComponentImplementation> = ({ spacing, colorScheme, mergeState, + customStyle }) => { useEffect(() => { mergeState({ text: text.raw }); @@ -45,6 +47,7 @@ const Radio: ComponentImplementation> = ({ size={size} spacing={spacing} colorScheme={colorScheme} + css={css`${customStyle?.content}`} > @@ -96,7 +99,7 @@ export default { state: StateSchema, methods: [], slots: [], - styleSlots: [], + styleSlots: ['content'], events: [], }, }), diff --git a/packages/runtime/src/components/chakra-ui/RadioGroup.tsx b/packages/runtime/src/components/chakra-ui/RadioGroup.tsx index d6ba3bf9..afd7d15a 100644 --- a/packages/runtime/src/components/chakra-ui/RadioGroup.tsx +++ b/packages/runtime/src/components/chakra-ui/RadioGroup.tsx @@ -4,6 +4,7 @@ import { Static, Type } from '@sinclair/typebox'; import { RadioGroup as BaseRadioGroup } from '@chakra-ui/react'; import { ComponentImplementation } from '../../services/registry'; import Slot from '../_internal/Slot'; +import { css } from '@emotion/react'; const StateSchema = Type.Object({ value: Type.String(), @@ -14,6 +15,7 @@ const RadioGroup: ComponentImplementation> = ({ isNumerical, slotsMap, mergeState, + customStyle }) => { const [value, setValue] = useState(defaultValue); @@ -29,6 +31,7 @@ const RadioGroup: ComponentImplementation> = ({ setValue(isNumerical ? Number(val) : val)} + css={css`${customStyle?.content}`} > @@ -60,7 +63,7 @@ export default { state: StateSchema, methods: [], slots: ['content'], - styleSlots: [], + styleSlots: ['content'], events: [], }, }), diff --git a/packages/runtime/src/components/chakra-ui/Select.tsx b/packages/runtime/src/components/chakra-ui/Select.tsx index 774178e4..e4a8e642 100644 --- a/packages/runtime/src/components/chakra-ui/Select.tsx +++ b/packages/runtime/src/components/chakra-ui/Select.tsx @@ -3,6 +3,7 @@ import { createComponent } from '@sunmao-ui/core'; import { Static, Type } from '@sinclair/typebox'; import { Select as BaseSelect } from '@chakra-ui/react'; import { ComponentImplementation } from '../../services/registry'; +import { css } from '@emotion/react'; const StateSchema = Type.Object({ value: Type.String(), @@ -21,6 +22,7 @@ const Select: ComponentImplementation> = ({ size, variant, mergeState, + customStyle }) => { const [value, setValue] = useState(defaultValue); @@ -46,6 +48,7 @@ const Select: ComponentImplementation> = ({ size={size} variant={variant} onChange={e => setValue(e.target.value)} + css={css`${customStyle?.content}`} > {options.map(opt => (