add link component

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`,
                   },
                 },

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<Static<typeof PropsSchema>> = ({
+  text,
+  href,
+  isExternal,
+}) => {
+  return (
+    <Link href={href} isExternal={isExternal} color="blue.500">
+      <Text value={text} />
+    </Link>
+  );
+};
+
+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,
+};

packages/runtime/src/components/chakra-ui/List.tsx

@@ -95,8 +95,8 @@ const List: ComponentImplementation<Static<typeof PropsSchema>> = ({
 };
 
 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 = {

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);

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';

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<Static<typeof PropsSchema>> = ({ slot, style }) => {
+const StyleTrait: TraitImplementation<Static<typeof PropsSchema>> = ({
+  styleSlot,
+  style,
+}) => {
   return {
     props: {
       customStyle: {
-        [slot]: style,
+        [styleSlot]: style,
       },
     },
   };
 };
 
 const PropsSchema = Type.Object({
-  slot: Type.String(),
+  styleSlot: Type.String(),
   style: Type.String(),
 });