diff --git a/packages/runtime/example/style/index.html b/packages/runtime/example/style/index.html index 8cf8dc97..a7bde1ab 100644 --- a/packages/runtime/example/style/index.html +++ b/packages/runtime/example/style/index.html @@ -43,14 +43,14 @@ { type: 'core/v1/style', properties: { - slot: 'tabItem', + styleSlot: 'tabItem', style: `color: red`, }, }, { type: 'core/v1/style', properties: { - slot: 'tabContent', + styleSlot: 'tabContent', style: `color: green`, }, }, diff --git a/packages/runtime/src/components/chakra-ui/Link.tsx b/packages/runtime/src/components/chakra-ui/Link.tsx new file mode 100644 index 00000000..142eba0d --- /dev/null +++ b/packages/runtime/src/components/chakra-ui/Link.tsx @@ -0,0 +1,53 @@ +import { Link } from '@chakra-ui/react'; +import { Static, Type } from '@sinclair/typebox'; +import { createComponent } from '@meta-ui/core'; +import { ComponentImplementation } from '../../services/registry'; +import Text, { TextPropertySchema } from '../_internal/Text'; + +const LinkImpl: ComponentImplementation> = ({ + text, + href, + isExternal, +}) => { + return ( + + + + ); +}; + +const PropsSchema = Type.Object({ + text: TextPropertySchema, + href: Type.String(), + isExternal: Type.Optional(Type.Boolean()), +}); + +export default { + ...createComponent({ + version: 'chakra_ui/v1', + metadata: { + name: 'link', + displayName: 'Link', + description: 'chakra-ui link', + isDraggable: true, + isResizable: true, + exampleProperties: { + text: { + raw: 'link', + format: 'plain', + }, + href: 'https://www.google.com', + }, + exampleSize: [2, 1], + }, + spec: { + properties: PropsSchema, + state: {}, + methods: [], + slots: [], + styleSlots: [], + events: [], + }, + }), + impl: LinkImpl, +}; diff --git a/packages/runtime/src/components/chakra-ui/List.tsx b/packages/runtime/src/components/chakra-ui/List.tsx index 7cc2150e..8067759b 100644 --- a/packages/runtime/src/components/chakra-ui/List.tsx +++ b/packages/runtime/src/components/chakra-ui/List.tsx @@ -95,8 +95,8 @@ const List: ComponentImplementation> = ({ }; const PropsSchema = Type.Object({ - listData: Type.Array(Type.Object(Type.String(), Type.String())), - template: Type.Object(Type.String(), Type.Array(Type.Object(Type.String()))), + listData: Type.Array(Type.Record(Type.String(), Type.String())), + template: Type.Array(Type.Any()), }); const exampleProperties = { diff --git a/packages/runtime/src/services/registry.tsx b/packages/runtime/src/services/registry.tsx index 408590c7..725b17d4 100644 --- a/packages/runtime/src/services/registry.tsx +++ b/packages/runtime/src/services/registry.tsx @@ -18,6 +18,7 @@ import ChakraUIFormControl from '../components/chakra-ui/Form/FormControl'; import ChakraUIForm from '../components/chakra-ui/Form/Form'; import ChakraUIKbd from '../components/chakra-ui/Kbd'; import ChakraUIList from '../components/chakra-ui/List'; +import ChakraUILink from '../components/chakra-ui/Link'; import ChakraUINumberInput from '../components/chakra-ui/NumberInput'; import ChakraUICheckboxGroup from '../components/chakra-ui/CheckboxGroup'; import ChakraUICheckbox from '../components/chakra-ui/Checkbox'; @@ -136,6 +137,7 @@ export function initRegistry(): Registry { registry.registerComponent(ChakraUIForm); registry.registerComponent(ChakraUIKbd); registry.registerComponent(ChakraUIList); + registry.registerComponent(ChakraUILink); registry.registerComponent(ChakraUINumberInput); registry.registerComponent(ChakraUICheckbox); registry.registerComponent(ChakraUICheckboxGroup); diff --git a/packages/runtime/src/services/stateStore.ts b/packages/runtime/src/services/stateStore.ts index b5245a5c..98a8207c 100644 --- a/packages/runtime/src/services/stateStore.ts +++ b/packages/runtime/src/services/stateStore.ts @@ -3,7 +3,7 @@ import dayjs from 'dayjs'; import 'dayjs/locale/zh-cn'; import isLeapYear from 'dayjs/plugin/isLeapYear'; import relativeTime from 'dayjs/plugin/relativeTime'; -import LocalizedFormat from 'dayjs/plugin/LocalizedFormat'; +import LocalizedFormat from 'dayjs/plugin/localizedFormat'; import { reactive } from '@vue/reactivity'; import { watch } from '../utils/watchReactivity'; import { LIST_ITEM_EXP, LIST_ITEM_INDEX_EXP } from '../constants'; diff --git a/packages/runtime/src/traits/core/style.tsx b/packages/runtime/src/traits/core/style.tsx index 8c9e0c56..21d44e41 100644 --- a/packages/runtime/src/traits/core/style.tsx +++ b/packages/runtime/src/traits/core/style.tsx @@ -2,18 +2,21 @@ import { createTrait } from '@meta-ui/core'; import { Static, Type } from '@sinclair/typebox'; import { TraitImplementation } from 'src/types/RuntimeSchema'; -const StyleTrait: TraitImplementation> = ({ slot, style }) => { +const StyleTrait: TraitImplementation> = ({ + styleSlot, + style, +}) => { return { props: { customStyle: { - [slot]: style, + [styleSlot]: style, }, }, }; }; const PropsSchema = Type.Object({ - slot: Type.String(), + styleSlot: Type.String(), style: Type.String(), });