mirror of
https://github.com/smartxworks/sunmao-ui.git
synced 2024-11-27 08:39:59 +08:00
update all components' spec and example
This commit is contained in:
Bowen Tan
parent
b5a2a7eba2
commit
28623964d9
@ -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": []
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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": {
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
|
||||
@ -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": []
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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<Static<typeof StyleSchema>> = ({
|
||||
slotsMap,
|
||||
customStyle,
|
||||
...restProps
|
||||
}) => {
|
||||
const styleProps = pick(restProps, StyleProps);
|
||||
@ -286,6 +288,7 @@ const Box: ComponentImplementation<Static<typeof StyleSchema>> = ({
|
||||
borderColor="gray.200"
|
||||
borderRadius="base"
|
||||
{...styleProps}
|
||||
css={css`${customStyle?.content}`}
|
||||
>
|
||||
<Slot slotsMap={slotsMap} slot="content" />
|
||||
</BaseBox>
|
||||
@ -313,7 +316,7 @@ export default {
|
||||
state: {},
|
||||
methods: [],
|
||||
slots: ['content'],
|
||||
styleSlots: [],
|
||||
styleSlots: ['content'],
|
||||
events: [],
|
||||
},
|
||||
}),
|
||||
|
||||
@ -34,7 +34,6 @@ const Button: ComponentImplementation<Static<typeof PropsSchema>> = ({
|
||||
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'],
|
||||
},
|
||||
}),
|
||||
|
||||
@ -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<Static<typeof PropsSchema>> = ({
|
||||
spacing,
|
||||
colorScheme,
|
||||
mergeState,
|
||||
customStyle,
|
||||
}) => {
|
||||
const groupContext = useCheckboxGroupContext();
|
||||
let _defaultIsChecked = false;
|
||||
@ -84,6 +86,7 @@ const Checkbox: ComponentImplementation<Static<typeof PropsSchema>> = ({
|
||||
onChange={e => {
|
||||
setChecked(e.target.checked);
|
||||
}}
|
||||
css={css`${customStyle?.content}`}
|
||||
>
|
||||
<Text value={text} />
|
||||
</BaseCheckbox>
|
||||
@ -130,7 +133,7 @@ export default {
|
||||
state: CheckboxStateSchema,
|
||||
methods: [],
|
||||
slots: [],
|
||||
styleSlots: [],
|
||||
styleSlots: ['content'],
|
||||
events: [],
|
||||
},
|
||||
}),
|
||||
|
||||
@ -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<Static<typeof PropsSchema>> = ({
|
||||
isDisabled,
|
||||
slotsMap,
|
||||
mergeState,
|
||||
customStyle,
|
||||
}) => {
|
||||
const [value, setValue] = useState(defaultValue);
|
||||
useEffect(() => {
|
||||
@ -32,6 +34,7 @@ const CheckboxGroup: ComponentImplementation<Static<typeof PropsSchema>> = ({
|
||||
defaultValue={defaultValue}
|
||||
isDisabled={isDisabled}
|
||||
onChange={val => setValue(val)}
|
||||
css={css`${customStyle?.content}`}
|
||||
>
|
||||
<Slot slotsMap={slotsMap} slot="content" />
|
||||
</BaseCheckboxGroup>
|
||||
@ -63,7 +66,7 @@ export default {
|
||||
state: StateSchema,
|
||||
methods: [],
|
||||
slots: ['content'],
|
||||
styleSlots: [],
|
||||
styleSlots: ['content'],
|
||||
events: [],
|
||||
},
|
||||
}),
|
||||
|
||||
@ -36,6 +36,7 @@ const Dialog: ComponentImplementation<Static<typeof PropsSchema>> = ({
|
||||
text: 'cancel',
|
||||
colorScheme: 'blue',
|
||||
},
|
||||
customStyle
|
||||
}) => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [title, setTitle] = useState(customerTitle || '');
|
||||
@ -86,6 +87,7 @@ const Dialog: ComponentImplementation<Static<typeof PropsSchema>> = ({
|
||||
onClose={() => setIsOpen(false)}
|
||||
trapFocus={false}
|
||||
portalProps={containerRef.current ? portalProps : undefined}
|
||||
css={`${customStyle?.content}`}
|
||||
>
|
||||
<AlertDialogOverlay {...(containerRef.current ? dialogOverlayProps : {})}>
|
||||
<AlertDialogContent {...(containerRef.current ? dialogContentProps : {})}>
|
||||
@ -160,7 +162,7 @@ export default {
|
||||
},
|
||||
],
|
||||
slots: ['content'],
|
||||
styleSlots: [],
|
||||
styleSlots: ['content'],
|
||||
events: ['cancelDialog', 'confirmDialog'],
|
||||
},
|
||||
}),
|
||||
|
||||
@ -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 <Divider />;
|
||||
const DividerImpl: ComponentImplementation = ({customStyle}) => {
|
||||
return <Divider css={css`${customStyle?.content}`} />;
|
||||
};
|
||||
|
||||
export default {
|
||||
@ -23,7 +24,7 @@ export default {
|
||||
state: {},
|
||||
methods: [],
|
||||
slots: [],
|
||||
styleSlots: [],
|
||||
styleSlots: ['content'],
|
||||
events: [],
|
||||
},
|
||||
}),
|
||||
|
||||
@ -67,7 +67,7 @@ export default {
|
||||
state: {},
|
||||
methods: [],
|
||||
slots: ['content'],
|
||||
styleSlots: [],
|
||||
styleSlots: ['content'],
|
||||
events: [],
|
||||
},
|
||||
}),
|
||||
|
||||
@ -76,12 +76,14 @@ const Image: ComponentImplementation<Static<typeof PropsSchema>> = ({
|
||||
htmlHeight,
|
||||
crossOrigin,
|
||||
callbackMap,
|
||||
customStyle
|
||||
}) => {
|
||||
const style = boxSize
|
||||
? undefined
|
||||
? css`${customStyle?.content}`
|
||||
: css`
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
${customStyle?.content}
|
||||
`;
|
||||
return (
|
||||
<BaseImage
|
||||
@ -148,8 +150,8 @@ export default {
|
||||
properties: PropsSchema,
|
||||
state: StateSchema,
|
||||
methods: [],
|
||||
slots: [],
|
||||
styleSlots: [],
|
||||
slots: ['content'],
|
||||
styleSlots: ['content'],
|
||||
events: ['onLoad', 'onError'],
|
||||
},
|
||||
}),
|
||||
|
||||
@ -10,6 +10,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 AppendElementPropertySchema = Type.Union([
|
||||
Type.Object({
|
||||
@ -36,6 +37,7 @@ const Input: ComponentImplementation<Static<typeof PropsSchema>> = ({
|
||||
mergeState,
|
||||
subscribeMethods,
|
||||
defaultValue,
|
||||
customStyle
|
||||
}) => {
|
||||
const [value, setValue] = React.useState(defaultValue || ''); // TODO: pin input
|
||||
const onChange = (event: React.ChangeEvent<HTMLInputElement>) =>
|
||||
@ -81,6 +83,7 @@ const Input: ComponentImplementation<Static<typeof PropsSchema>> = ({
|
||||
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: [],
|
||||
},
|
||||
}),
|
||||
|
||||
@ -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<Static<typeof PropsSchema>> = ({
|
||||
text,
|
||||
mergeState,
|
||||
customStyle
|
||||
}) => {
|
||||
useEffect(() => {
|
||||
mergeState({ value: text.raw });
|
||||
}, [text.raw]);
|
||||
|
||||
return (
|
||||
<BaseKbd>
|
||||
<BaseKbd css={css`${customStyle?.content}`}>
|
||||
<Text value={text} />
|
||||
</BaseKbd>
|
||||
);
|
||||
@ -50,7 +52,7 @@ export default {
|
||||
state: StateSchema,
|
||||
methods: [],
|
||||
slots: [],
|
||||
styleSlots: [],
|
||||
styleSlots: ['content'],
|
||||
events: [],
|
||||
},
|
||||
}),
|
||||
|
||||
@ -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<Static<typeof PropsSchema>> = ({
|
||||
text,
|
||||
href,
|
||||
isExternal,
|
||||
customStyle,
|
||||
}) => {
|
||||
return (
|
||||
<Link href={href} isExternal={isExternal} color="blue.500">
|
||||
<Link
|
||||
href={href}
|
||||
isExternal={isExternal}
|
||||
color="blue.500"
|
||||
css={css`
|
||||
${customStyle?.content}
|
||||
`}
|
||||
>
|
||||
<Text value={text} />
|
||||
</Link>
|
||||
);
|
||||
@ -45,7 +54,7 @@ export default {
|
||||
state: {},
|
||||
methods: [],
|
||||
slots: [],
|
||||
styleSlots: [],
|
||||
styleSlots: ['content'],
|
||||
events: [],
|
||||
},
|
||||
}),
|
||||
|
||||
@ -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<Static<typeof PropsSchema>> = ({
|
||||
listData,
|
||||
template,
|
||||
app,
|
||||
services,
|
||||
customStyle
|
||||
}) => {
|
||||
if (!listData) {
|
||||
return null;
|
||||
@ -38,7 +40,7 @@ const List: ComponentImplementation<Static<typeof PropsSchema>> = ({
|
||||
return listItemEle;
|
||||
});
|
||||
|
||||
return <BaseList>{listItems}</BaseList>;
|
||||
return <BaseList css={css`${customStyle?.content}`}>{listItems}</BaseList>;
|
||||
};
|
||||
|
||||
const PropsSchema = Type.Object({
|
||||
@ -85,7 +87,7 @@ export default {
|
||||
methods: [],
|
||||
state: {},
|
||||
slots: [],
|
||||
styleSlots: [],
|
||||
styleSlots: ['content'],
|
||||
events: [],
|
||||
},
|
||||
}),
|
||||
|
||||
@ -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<Static<typeof PropsSchema>> = ({
|
||||
defaultValue = 0,
|
||||
@ -23,6 +24,7 @@ const NumberInput: ComponentImplementation<Static<typeof PropsSchema>> = ({
|
||||
customerDecrement,
|
||||
mergeState,
|
||||
subscribeMethods,
|
||||
customStyle
|
||||
}) => {
|
||||
const [value, setValue] = useState(defaultValue);
|
||||
const onChange = (_: string, valueAsNumber: number) => setValue(valueAsNumber || 0);
|
||||
@ -59,6 +61,7 @@ const NumberInput: ComponentImplementation<Static<typeof PropsSchema>> = ({
|
||||
allowMouseWheel={allowMouseWheel}
|
||||
size={size}
|
||||
onChange={onChange}
|
||||
css={css`${customStyle?.content}`}
|
||||
>
|
||||
<NumberInputField />
|
||||
<NumberInputStepper>
|
||||
@ -130,7 +133,7 @@ export default {
|
||||
},
|
||||
],
|
||||
slots: [],
|
||||
styleSlots: [],
|
||||
styleSlots: ['content'],
|
||||
events: [],
|
||||
},
|
||||
}),
|
||||
|
||||
@ -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<Static<typeof PropsSchema>> = ({
|
||||
spacing,
|
||||
colorScheme,
|
||||
mergeState,
|
||||
customStyle
|
||||
}) => {
|
||||
useEffect(() => {
|
||||
mergeState({ text: text.raw });
|
||||
@ -45,6 +47,7 @@ const Radio: ComponentImplementation<Static<typeof PropsSchema>> = ({
|
||||
size={size}
|
||||
spacing={spacing}
|
||||
colorScheme={colorScheme}
|
||||
css={css`${customStyle?.content}`}
|
||||
>
|
||||
<Text value={text} />
|
||||
</BaseRadio>
|
||||
@ -96,7 +99,7 @@ export default {
|
||||
state: StateSchema,
|
||||
methods: [],
|
||||
slots: [],
|
||||
styleSlots: [],
|
||||
styleSlots: ['content'],
|
||||
events: [],
|
||||
},
|
||||
}),
|
||||
|
||||
@ -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<Static<typeof PropsSchema>> = ({
|
||||
isNumerical,
|
||||
slotsMap,
|
||||
mergeState,
|
||||
customStyle
|
||||
}) => {
|
||||
const [value, setValue] = useState(defaultValue);
|
||||
|
||||
@ -29,6 +31,7 @@ const RadioGroup: ComponentImplementation<Static<typeof PropsSchema>> = ({
|
||||
<BaseRadioGroup
|
||||
value={value}
|
||||
onChange={val => setValue(isNumerical ? Number(val) : val)}
|
||||
css={css`${customStyle?.content}`}
|
||||
>
|
||||
<Slot slotsMap={slotsMap} slot="content" />
|
||||
</BaseRadioGroup>
|
||||
@ -60,7 +63,7 @@ export default {
|
||||
state: StateSchema,
|
||||
methods: [],
|
||||
slots: ['content'],
|
||||
styleSlots: [],
|
||||
styleSlots: ['content'],
|
||||
events: [],
|
||||
},
|
||||
}),
|
||||
|
||||
@ -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<Static<typeof PropsSchema>> = ({
|
||||
size,
|
||||
variant,
|
||||
mergeState,
|
||||
customStyle
|
||||
}) => {
|
||||
const [value, setValue] = useState<string | undefined>(defaultValue);
|
||||
|
||||
@ -46,6 +48,7 @@ const Select: ComponentImplementation<Static<typeof PropsSchema>> = ({
|
||||
size={size}
|
||||
variant={variant}
|
||||
onChange={e => setValue(e.target.value)}
|
||||
css={css`${customStyle?.content}`}
|
||||
>
|
||||
{options.map(opt => (
|
||||
<option key={opt.value} value={opt.value}>
|
||||
@ -123,7 +126,7 @@ export default {
|
||||
state: StateSchema,
|
||||
methods: [],
|
||||
slots: [],
|
||||
styleSlots: [],
|
||||
styleSlots: ['content'],
|
||||
events: [],
|
||||
},
|
||||
}),
|
||||
|
||||
@ -68,7 +68,7 @@ export default {
|
||||
state: {},
|
||||
methods: [],
|
||||
slots: ['content'],
|
||||
styleSlots: [],
|
||||
styleSlots: ['content'],
|
||||
events: [],
|
||||
},
|
||||
}),
|
||||
|
||||
@ -4,6 +4,7 @@ import { createComponent } from '@sunmao-ui/core';
|
||||
import { getSlots } from '../_internal/Slot';
|
||||
import { Static, Type } from '@sinclair/typebox';
|
||||
import { partial } from 'lodash-es';
|
||||
import { css } from '@emotion/react';
|
||||
|
||||
const BaseGridLayout = React.lazy(() => import('../_internal/GridLayout'));
|
||||
|
||||
@ -12,6 +13,7 @@ const GridLayout: ComponentImplementation<Static<typeof PropsSchema>> = ({
|
||||
layout = [],
|
||||
gridCallbacks,
|
||||
component,
|
||||
customStyle,
|
||||
}) => {
|
||||
const onDragStop = gridCallbacks?.onDragStop
|
||||
? partial(gridCallbacks.onDragStop, component.id)
|
||||
@ -28,6 +30,7 @@ const GridLayout: ComponentImplementation<Static<typeof PropsSchema>> = ({
|
||||
onDragStop={onDragStop}
|
||||
onDrop={onDrop}
|
||||
layout={layout}
|
||||
css={css`${customStyle?.content}`}
|
||||
>
|
||||
{getSlots(slotsMap, 'content')}
|
||||
</BaseGridLayout>
|
||||
@ -67,7 +70,7 @@ export default {
|
||||
state: {},
|
||||
methods: [],
|
||||
slots: ['content'],
|
||||
styleSlots: [],
|
||||
styleSlots: ['content'],
|
||||
events: [],
|
||||
},
|
||||
}),
|
||||
|
||||
@ -3,6 +3,7 @@ import { Static } from '@sinclair/typebox';
|
||||
import { ComponentImplementation } from '../../services/registry';
|
||||
import { RuntimeModuleSchema } from '../../types/RuntimeSchema';
|
||||
import { ModuleRenderer } from '../_internal/ModuleRenderer';
|
||||
import { css } from '@emotion/react';
|
||||
|
||||
type Props = Static<typeof RuntimeModuleSchema>;
|
||||
|
||||
@ -13,6 +14,7 @@ const ModuleContainer: ComponentImplementation<Props> = ({
|
||||
handlers,
|
||||
services,
|
||||
app,
|
||||
customStyle
|
||||
}) => {
|
||||
return (
|
||||
<ModuleRenderer
|
||||
@ -22,6 +24,7 @@ const ModuleContainer: ComponentImplementation<Props> = ({
|
||||
handlers={handlers}
|
||||
services={services}
|
||||
app={app}
|
||||
css={css`${customStyle?.content}`}
|
||||
/>
|
||||
);
|
||||
};
|
||||
@ -43,7 +46,7 @@ export default {
|
||||
state: {},
|
||||
methods: [],
|
||||
slots: [],
|
||||
styleSlots: [],
|
||||
styleSlots: ['content'],
|
||||
events: [],
|
||||
},
|
||||
}),
|
||||
|
||||
@ -40,7 +40,7 @@ export default {
|
||||
state: StateSchema,
|
||||
methods: [],
|
||||
slots: [],
|
||||
styleSlots: [],
|
||||
styleSlots: ['content'],
|
||||
events: [],
|
||||
},
|
||||
}),
|
||||
|
||||
@ -9,6 +9,7 @@ const Button: ComponentImplementation<Static<typeof PropsSchema>> = ({
|
||||
mergeState,
|
||||
subscribeMethods,
|
||||
callbackMap,
|
||||
customStyle
|
||||
}) => {
|
||||
useEffect(() => {
|
||||
mergeState({ value: text.raw });
|
||||
@ -24,7 +25,7 @@ const Button: ComponentImplementation<Static<typeof PropsSchema>> = ({
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<button ref={ref} onClick={callbackMap?.onClick}>
|
||||
<button ref={ref} onClick={callbackMap?.onClick} css={`${customStyle?.content}`}>
|
||||
<Text value={text} />
|
||||
</button>
|
||||
);
|
||||
@ -64,7 +65,7 @@ export default {
|
||||
},
|
||||
],
|
||||
slots: [],
|
||||
styleSlots: [],
|
||||
styleSlots: ['content'],
|
||||
events: ['onClick'],
|
||||
},
|
||||
}),
|
||||
|
||||
Loading…
Reference in New Issue
Block a user