mirror/sunmao-ui
2
0
Fork 0
mirror of https://github.com/smartxworks/sunmao-ui.git synced 2024-11-21 03:15:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'main' of github.com:webzard-io/sunmao-ui into feat/avatar

Browse Source
This commit is contained in:
xzdry 2022-04-08 10:08:58 +08:00
commit f802302f5a
158 changed files with 1041 additions and 1043 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/arco-lib/src/components/Alert.tsx
View File

@ -3,12 +3,12 @@ import { ComponentImpl, implementRuntimeComponent } from "@sunmao-ui/runtime";
import { css } from "@emotion/css";
import { Type, Static } from "@sinclair/typebox";
import { FALLBACK_METADATA, getComponentProps } from "../sunmao-helper";
import { AlertPropsSchema as BaseAlertPropsSchema } from "../generated/types/Alert";
import { AlertPropsSpec as BaseAlertPropsSpec } from "../generated/types/Alert";
const AlertPropsSchema = Type.Object(BaseAlertPropsSchema);
const AlertStateSchema = Type.Object({});
const AlertPropsSpec = Type.Object(BaseAlertPropsSpec);
const AlertStateSpec = Type.Object({});
const AlertImpl: ComponentImpl<Static<typeof AlertPropsSchema>> = (props) => {
const AlertImpl: ComponentImpl<Static<typeof AlertPropsSpec>> = (props) => {
const { visible, content, title, elementRef, ...cProps } =
getComponentProps(props);
const { customStyle, slotsElements } = props;
@ -36,7 +36,7 @@ const AlertImpl: ComponentImpl<Static<typeof AlertPropsSchema>> = (props) => {
) : null;
};
const exampleProperties: Static<typeof AlertPropsSchema> = {
const exampleProperties: Static<typeof AlertPropsSpec> = {
disabled: false,
closable: true,
title: "info",
@ -59,8 +59,8 @@ const options = {
},
},
spec: {
properties: AlertPropsSchema,
state: AlertStateSchema,
properties: AlertPropsSpec,
state: AlertStateSpec,
methods: {},
slots: ["content", "action", "icon", "title"],
styleSlots: ["content"],

16
packages/arco-lib/src/components/Avatar.tsx
View File

@ -3,14 +3,14 @@ import { ComponentImpl, implementRuntimeComponent } from '@sunmao-ui/runtime';
import { css } from '@emotion/css';
import { Type, Static } from '@sinclair/typebox';
import { FALLBACK_METADATA, getComponentProps } from '../sunmao-helper';
import { AvatarPropsSchema as BaseAvatarPropsSchema } from '../generated/types/Avatar';
import { AvatarPropsSpec as BaseAvatarPropsSpec } from '../generated/types/Avatar';
const AvatarPropsSchema = Type.Object({
...BaseAvatarPropsSchema,
const AvatarPropsSpec = Type.Object({
...BaseAvatarPropsSpec,
});
const AvatarStateSchema = Type.Object({});
const AvatarStateSpec = Type.Object({});
const AvatarImpl: ComponentImpl<Static<typeof AvatarPropsSchema>> = props => {
const AvatarImpl: ComponentImpl<Static<typeof AvatarPropsSpec>> = props => {
const { slotsElements, elementRef, customStyle } = props;
const { type, src, text, ...cProps } = getComponentProps(props);
@ -26,7 +26,7 @@ const AvatarImpl: ComponentImpl<Static<typeof AvatarPropsSchema>> = props => {
);
};
const exampleProperties: Static<typeof AvatarPropsSchema> = {
const exampleProperties: Static<typeof AvatarPropsSpec> = {
shape: 'circle',
triggerType: 'button',
size: 50,
@ -45,8 +45,8 @@ const options = {
},
},
spec: {
properties: AvatarPropsSchema,
state: AvatarStateSchema,
properties: AvatarPropsSpec,
state: AvatarStateSpec,
methods: {},
slots: ['triggerIcon'],
styleSlots: ['content'],

14
packages/arco-lib/src/components/Badge.tsx
View File

@ -3,12 +3,12 @@ import { ComponentImpl, implementRuntimeComponent } from "@sunmao-ui/runtime";
import { css } from "@emotion/css";
import { Type, Static } from "@sinclair/typebox";
import { FALLBACK_METADATA, getComponentProps } from "../sunmao-helper";
import { BadgePropsSchema as BaseBadgePropsSchema } from "../generated/types/Badge";
import { BadgePropsSpec as BaseBadgePropsSpec } from "../generated/types/Badge";
const BadgePropsSchema = Type.Object(BaseBadgePropsSchema);
const BadgeStateSchema = Type.Object({});
const BadgePropsSpec = Type.Object(BaseBadgePropsSpec);
const BadgeStateSpec = Type.Object({});
const BadgeImpl: ComponentImpl<Static<typeof BadgePropsSchema>> = (props) => {
const BadgeImpl: ComponentImpl<Static<typeof BadgePropsSpec>> = (props) => {
const { ...cProps } = getComponentProps(props);
const { elementRef, customStyle, slotsElements } = props;
@ -27,7 +27,7 @@ const BadgeImpl: ComponentImpl<Static<typeof BadgePropsSchema>> = (props) => {
</BaseBadge>
);
};
const exampleProperties: Static<typeof BadgePropsSchema> = {
const exampleProperties: Static<typeof BadgePropsSpec> = {
// TODO handle dotStyle and color
text: "",
dot: true,
@ -49,8 +49,8 @@ const options = {
}
},
spec: {
properties: BadgePropsSchema,
state: BadgeStateSchema,
properties: BadgePropsSpec,
state: BadgeStateSpec,
methods: {},
slots: ["content"],
styleSlots: ["content"],

16
packages/arco-lib/src/components/Button.tsx
View File

@ -3,14 +3,14 @@ import { ComponentImpl, implementRuntimeComponent } from "@sunmao-ui/runtime";
import { css } from "@emotion/css";
import { Type, Static } from "@sinclair/typebox";
import { FALLBACK_METADATA, getComponentProps } from "../sunmao-helper";
import { ButtonPropsSchema as BaseButtonPropsSchema } from "../generated/types/Button";
import { ButtonPropsSpec as BaseButtonPropsSpec } from "../generated/types/Button";
const ButtonPropsSchema = Type.Object({
...BaseButtonPropsSchema,
const ButtonPropsSpec = Type.Object({
...BaseButtonPropsSpec,
});
const ButtonStateSchema = Type.Object({});
const ButtonStateSpec = Type.Object({});
const ButtonImpl: ComponentImpl<Static<typeof ButtonPropsSchema>> = (props) => {
const ButtonImpl: ComponentImpl<Static<typeof ButtonPropsSpec>> = (props) => {
const { elementRef, slotsElements, customStyle, text, callbackMap } = props;
const { ...cProps } = getComponentProps(props);
@ -27,7 +27,7 @@ const ButtonImpl: ComponentImpl<Static<typeof ButtonPropsSchema>> = (props) => {
);
};
const exampleProperties: Static<typeof ButtonPropsSchema> = {
const exampleProperties: Static<typeof ButtonPropsSpec> = {
type: "default",
status: "default",
long: false,
@ -50,8 +50,8 @@ const options = {
}
},
spec: {
properties: ButtonPropsSchema,
state: ButtonStateSchema,
properties: ButtonPropsSpec,
state: ButtonStateSpec,
methods: {},
slots: ["content"],
styleSlots: ["content"],

21
packages/arco-lib/src/components/Cascader.tsx
View File

@ -4,17 +4,16 @@ import { css } from "@emotion/css";
import { Type, Static } from "@sinclair/typebox";
import { FALLBACK_METADATA, getComponentProps } from "../sunmao-helper";
import {
CascaderPropsSchema as BaseCascaderPropsSchema,
CascaderValueSchema,
CascaderPropsSpec as BaseCascaderPropsSpec,
CascaderValueSpec,
} from "../generated/types/Cascader";
import { useState, useEffect } from "react";
import { useState, useEffect , useRef } from "react";
import { isArray } from "lodash-es";
import { SelectViewHandle } from "@arco-design/web-react/es/_class/select-view";
import { useRef } from "react";
const CascaderPropsSchema = Type.Object(BaseCascaderPropsSchema);
const CascaderStateSchema = Type.Object({
value: CascaderValueSchema,
const CascaderPropsSpec = Type.Object(BaseCascaderPropsSpec);
const CascaderStateSpec = Type.Object({
value: CascaderValueSpec,
});
type MapItem = {
@ -64,7 +63,7 @@ const convertArrToTree = (arr: Array<Array<string>>) => {
return getTree(map);
};
const CascaderImpl: ComponentImpl<Static<typeof CascaderPropsSchema>> = (
const CascaderImpl: ComponentImpl<Static<typeof CascaderPropsSpec>> = (
props
) => {
const { getElement, callbackMap, multiple, placeholder, ...cProps } =
@ -134,7 +133,7 @@ const CascaderExampleOptions = [
["jiangsu", "nanjing", "qinhuai", "yuhuatai", "andemen"],
["jiangsu", "nanjing", "qinhuai", "yuhuatai", "tiexinqiao"],
];
const exampleProperties: Static<typeof CascaderPropsSchema> = {
const exampleProperties: Static<typeof CascaderPropsSpec> = {
defaultValue: ["beijing", "haidian", "smartx"],
expandTrigger: "click",
multiple: false,
@ -159,8 +158,8 @@ const options = {
exampleProperties,
},
spec: {
properties: CascaderPropsSchema,
state: CascaderStateSchema,
properties: CascaderPropsSpec,
state: CascaderStateSpec,
methods: {},
slots: ["content"],
styleSlots: ["content"],

20
packages/arco-lib/src/components/Checkbox.tsx
View File

@ -2,22 +2,22 @@ import { Checkbox as BaseCheckbox } from '@arco-design/web-react';
import { Type, Static } from '@sinclair/typebox';
import { ComponentImpl, implementRuntimeComponent } from '@sunmao-ui/runtime';
import {
CheckboxPropsSchema as BaseCheckboxPropsSchema,
CheckboxOptionSchema as BaseCheckboxOptionSchema,
CheckboxPropsSpec as BaseCheckboxPropsSpec,
CheckboxOptionSpec as BaseCheckboxOptionSpec,
} from '../generated/types/Checkbox';
import { FALLBACK_METADATA, getComponentProps } from '../sunmao-helper';
import { css } from '@emotion/css';
import { useState, useEffect, useMemo, useCallback } from 'react';
const CheckboxPropsSchema = Type.Object({
...BaseCheckboxPropsSchema,
const CheckboxPropsSpec = Type.Object({
...BaseCheckboxPropsSpec,
});
const CheckboxStateSchema = Type.Object({
const CheckboxStateSpec = Type.Object({
checkedValues: Type.Array(Type.String()),
isCheckAll: Type.Boolean(),
});
const CheckboxImpl: ComponentImpl<Static<typeof CheckboxPropsSchema>> = props => {
const CheckboxImpl: ComponentImpl<Static<typeof CheckboxPropsSpec>> = props => {
const { elementRef, mergeState, subscribeMethods, callbackMap, customStyle } = props;
const {
options = [],
@ -104,7 +104,7 @@ const CheckboxImpl: ComponentImpl<Static<typeof CheckboxPropsSchema>> = props =>
toggleValues: ({
values = [],
}: {
values: Static<typeof BaseCheckboxOptionSchema>;
values: Static<typeof BaseCheckboxOptionSpec>;
}) => {
const currentCheckedValues = [...checkedValues];
@ -202,8 +202,8 @@ const options = {
},
},
spec: {
properties: CheckboxPropsSchema,
state: CheckboxStateSchema,
properties: CheckboxPropsSpec,
state: CheckboxStateSpec,
methods: Type.Object({
setCheckedValues: Type.Object({
values: Type.Array(Type.String()),
@ -211,7 +211,7 @@ const options = {
checkAll: Type.Object({}),
uncheckAll: Type.Object({}),
toggleValues: Type.Object({
values: BaseCheckboxOptionSchema,
values: BaseCheckboxOptionSpec,
}),
}),
styleSlots: ['content'],

26
packages/arco-lib/src/components/Collapse.tsx
View File

@ -4,17 +4,17 @@ import { css } from "@emotion/css";
import { Type, Static } from "@sinclair/typebox";
import { FALLBACK_METADATA, getComponentProps } from "../sunmao-helper";
import {
CollapsePropsSchema as BaseCollapsePropsSchema,
CollapseItemPropsSchema as BaseCollapseItemPropsSchema,
CollapsePropsSpec as BaseCollapsePropsSpec,
CollapseItemPropsSpec as BaseCollapseItemPropsSpec,
} from "../generated/types/Collapse";
import { useEffect, useState } from "react";
const CollapsePropsSchema = Type.Object(BaseCollapsePropsSchema);
const CollapseStateSchema = Type.Object({
const CollapsePropsSpec = Type.Object(BaseCollapsePropsSpec);
const CollapseStateSpec = Type.Object({
activeKey: Type.Array(Type.String()),
});
const CollapseImpl: ComponentImpl<Static<typeof CollapsePropsSchema>> = (
const CollapseImpl: ComponentImpl<Static<typeof CollapsePropsSpec>> = (
props
) => {
const { defaultActiveKey, ...cProps } = getComponentProps(props);
@ -46,7 +46,7 @@ const CollapseImpl: ComponentImpl<Static<typeof CollapsePropsSchema>> = (
</BaseCollapse>
);
};
const exampleProperties: Static<typeof CollapsePropsSchema> = {
const exampleProperties: Static<typeof CollapsePropsSpec> = {
defaultActiveKey: ["1"],
accordion: false,
expandIconPosition: "left",
@ -62,8 +62,8 @@ const options = {
exampleProperties,
},
spec: {
properties: CollapsePropsSchema,
state: CollapseStateSchema,
properties: CollapsePropsSpec,
state: CollapseStateSpec,
methods: {
setActiveKey: Type.String(),
},
@ -77,10 +77,10 @@ export const Collapse = implementRuntimeComponent(options)(
CollapseImpl as typeof CollapseImpl & undefined
);
const CollapseItemPropsSchema = Type.Object(BaseCollapseItemPropsSchema);
const CollapseItemStateSchema = Type.Object({});
const CollapseItemPropsSpec = Type.Object(BaseCollapseItemPropsSpec);
const CollapseItemStateSpec = Type.Object({});
const CollapseItemImpl: ComponentImpl<Static<typeof CollapseItemPropsSchema>> =
const CollapseItemImpl: ComponentImpl<Static<typeof CollapseItemPropsSpec>> =
(props) => {
const { elementRef, name, ...cProps } = getComponentProps(props);
const { slotsElements, customStyle } = props;
@ -112,8 +112,8 @@ export const CollapseItem = implementRuntimeComponent({
},
},
spec: {
properties: CollapseItemPropsSchema,
state: CollapseItemStateSchema,
properties: CollapseItemPropsSpec,
state: CollapseItemStateSpec,
methods: {},
slots: ["content"],
styleSlots: ["content"],

18
packages/arco-lib/src/components/Divider.tsx
View File

@ -3,14 +3,14 @@ import { ComponentImpl, implementRuntimeComponent } from "@sunmao-ui/runtime";
import { css } from "@emotion/css";
import { Type, Static } from "@sinclair/typebox";
import { FALLBACK_METADATA, getComponentProps } from "../sunmao-helper";
import { DividerPropsSchema as BaseDividerPropsSchema } from "../generated/types/Divider";
import { DividerPropsSpec as BaseDividerPropsSpec } from "../generated/types/Divider";
const DividerPropsSchema = Type.Object({
...BaseDividerPropsSchema,
const DividerPropsSpec = Type.Object({
...BaseDividerPropsSpec,
});
const DividerStateSchema = Type.Object({});
const DividerStateSpec = Type.Object({});
const DividerImpl: ComponentImpl<Static<typeof DividerPropsSchema>> = (
const DividerImpl: ComponentImpl<Static<typeof DividerPropsSpec>> = (
props
) => {
const { elementRef, customStyle } = props;
@ -21,11 +21,11 @@ const DividerImpl: ComponentImpl<Static<typeof DividerPropsSchema>> = (
ref={elementRef}
className={css(customStyle?.content)}
{...cProps}
></BaseDivider>
/>
);
};
const exampleProperties: Static<typeof DividerPropsSchema> = {
const exampleProperties: Static<typeof DividerPropsSpec> = {
type: "horizontal",
orientation: "center",
};
@ -42,8 +42,8 @@ const options = {
}
},
spec: {
properties: DividerPropsSchema,
state: DividerStateSchema,
properties: DividerPropsSpec,
state: DividerStateSpec,
methods: {},
slots: [],
styleSlots: ["content"],

14
packages/arco-lib/src/components/Dropdown.tsx
View File

@ -6,16 +6,16 @@ import {
import { ComponentImpl, implementRuntimeComponent } from "@sunmao-ui/runtime";
import { Type, Static } from "@sinclair/typebox";
import { FALLBACK_METADATA, getComponentProps } from "../sunmao-helper";
import { DropdownPropsSchema as BaseDropdownPropsSchema } from "../generated/types/Dropdown";
import { DropdownPropsSpec as BaseDropdownPropsSpec } from "../generated/types/Dropdown";
const DropdownPropsSchema = Type.Object(BaseDropdownPropsSchema);
const DropdownStateSchema = Type.Object({
const DropdownPropsSpec = Type.Object(BaseDropdownPropsSpec);
const DropdownStateSpec = Type.Object({
selectedItemKey: Type.String(),
keyPath: Type.Optional(Type.Array(Type.String())),
visible: Type.Boolean(),
});
const DropdownImpl: ComponentImpl<Static<typeof DropdownPropsSchema>> = (
const DropdownImpl: ComponentImpl<Static<typeof DropdownPropsSpec>> = (
props
) => {
const { elementRef, slotsElements, callbackMap, mergeState } = props;
@ -62,7 +62,7 @@ const DropdownImpl: ComponentImpl<Static<typeof DropdownPropsSchema>> = (
);
};
const exampleProperties: Static<typeof DropdownPropsSchema> = {
const exampleProperties: Static<typeof DropdownPropsSpec> = {
dropdownType: "default",
trigger: "click",
position: "bl",
@ -87,8 +87,8 @@ const options = {
},
},
spec: {
properties: DropdownPropsSchema,
state: DropdownStateSchema,
properties: DropdownPropsSpec,
state: DropdownStateSpec,
methods: {},
slots: ["trigger"],
styleSlots: [],

14
packages/arco-lib/src/components/Form/Form.tsx
View File

@ -3,13 +3,13 @@ import { ComponentImpl, implementRuntimeComponent } from '@sunmao-ui/runtime';
import { css } from '@emotion/css';
import { Type, Static } from '@sinclair/typebox';
import { FALLBACK_METADATA, getComponentProps } from '../../sunmao-helper';
import { FormPropsSchema as BaseFormPropsSchema } from '../../generated/types/Form';
import { FormPropsSpec as BaseFormPropsSpec } from '../../generated/types/Form';
import { EmptyPlaceholder } from './EmptyPlaceholder';
const FormPropsSchema = Type.Object(BaseFormPropsSchema);
const FormStateSchema = Type.Object({});
const FormPropsSpec = Type.Object(BaseFormPropsSpec);
const FormStateSpec = Type.Object({});
const FormImpl: ComponentImpl<Static<typeof FormPropsSchema>> = props => {
const FormImpl: ComponentImpl<Static<typeof FormPropsSpec>> = props => {
const { inline, bordered, ...cProps } = getComponentProps(props);
const { elementRef, customStyle, slotsElements } = props;
@ -37,7 +37,7 @@ const FormImpl: ComponentImpl<Static<typeof FormPropsSchema>> = props => {
);
};
const exampleProperties: Static<typeof FormPropsSchema> = {
const exampleProperties: Static<typeof FormPropsSpec> = {
inline: false,
size: 'default',
bordered: true,
@ -55,8 +55,8 @@ const options = {
},
},
spec: {
properties: FormPropsSchema,
state: FormStateSchema,
properties: FormPropsSpec,
state: FormStateSpec,
methods: {},
slots: ['content'],
styleSlots: ['content'],

10
packages/arco-lib/src/components/Form/FormControl.tsx
View File

@ -3,11 +3,11 @@ import { ComponentImpl, implementRuntimeComponent, Text } from '@sunmao-ui/runti
import { css, cx } from '@emotion/css';
import { Type, Static } from '@sinclair/typebox';
import { FALLBACK_METADATA, getComponentProps } from '../../sunmao-helper';
import { FormControlPropsSchema as BaseFormControlPropsSchema } from '../../generated/types/Form';
import { FormControlPropsSpec as BaseFormControlPropsSpec } from '../../generated/types/Form';
import { EmptyPlaceholder } from './EmptyPlaceholder';
import { FormControlErrorMessage } from './FormControlErrorMessage';
const FormControlPropsSchema = Type.Object(BaseFormControlPropsSchema);
const FormControlPropsSpec = Type.Object(BaseFormControlPropsSpec);
const BaseFormControl = Form.Item;
const FormControlStyle = css`
@ -23,7 +23,7 @@ const FormControlStyle = css`
}
`;
const FormControlImpl: ComponentImpl<Static<typeof FormControlPropsSchema>> = props => {
const FormControlImpl: ComponentImpl<Static<typeof FormControlPropsSpec>> = props => {
const { label, errorMsg, ...cProps } = getComponentProps(props);
const { elementRef, slotsElements, customStyle } = props;
@ -49,7 +49,7 @@ const FormControlImpl: ComponentImpl<Static<typeof FormControlPropsSchema>> = pr
);
};
const exampleProperties: Static<typeof FormControlPropsSchema> = {
const exampleProperties: Static<typeof FormControlPropsSpec> = {
label: {
format: 'plain',
raw: 'label',
@ -78,7 +78,7 @@ export const FormControl = implementRuntimeComponent({
},
},
spec: {
properties: FormControlPropsSchema,
properties: FormControlPropsSpec,
state: Type.Object({}),
methods: {},
slots: ['content'],

6
packages/arco-lib/src/components/Icon.tsx
View File

@ -4,12 +4,12 @@ import { css, cx } from "@emotion/css";
import { Type, Static } from "@sinclair/typebox";
import { FALLBACK_METADATA } from "../sunmao-helper";
const IconPropsSchema = Type.Object({
const IconPropsSpec = Type.Object({
name: Type.KeyOf(Type.Object(Icons as Record<keyof typeof Icons, any>)),
spin: Type.Boolean(),
});
const impl: ComponentImpl<Static<typeof IconPropsSchema>> = (props) => {
const impl: ComponentImpl<Static<typeof IconPropsSpec>> = (props) => {
const { elementRef, name, spin, customStyle } = props;
const _Icon = Icons[name];
@ -37,7 +37,7 @@ export const Icon = implementRuntimeComponent({
}
},
spec: {
properties: IconPropsSchema,
properties: IconPropsSpec,
state: Type.Object({}),
methods: {},
slots: ["slot"],

14
packages/arco-lib/src/components/Image.tsx
View File

@ -3,12 +3,12 @@ import { ComponentImpl, implementRuntimeComponent } from "@sunmao-ui/runtime";
import { css } from "@emotion/css";
import { Type, Static } from "@sinclair/typebox";
import { FALLBACK_METADATA, getComponentProps } from "../sunmao-helper";
import { ImagePropsSchema as BaseImagePropsSchema } from "../generated/types/Image";
import { ImagePropsSpec as BaseImagePropsSpec } from "../generated/types/Image";
const ImagePropsSchema = Type.Object(BaseImagePropsSchema);
const ImageStateSchema = Type.Object({});
const ImagePropsSpec = Type.Object(BaseImagePropsSpec);
const ImageStateSpec = Type.Object({});
const ImageImpl: ComponentImpl<Static<typeof ImagePropsSchema>> = (props) => {
const ImageImpl: ComponentImpl<Static<typeof ImagePropsSpec>> = (props) => {
const { elementRef, customStyle, callbackMap } = props;
const cProps = getComponentProps(props);
@ -21,7 +21,7 @@ const ImageImpl: ComponentImpl<Static<typeof ImagePropsSchema>> = (props) => {
/>
);
};
const exampleProperties: Static<typeof ImagePropsSchema> = {
const exampleProperties: Static<typeof ImagePropsSpec> = {
src :'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp',
title:"A user’s avatar",
description:"Present by Arco Design",
@ -42,8 +42,8 @@ const options = {
}
},
spec: {
properties: ImagePropsSchema,
state: ImageStateSchema,
properties: ImagePropsSpec,
state: ImageStateSpec,
methods: {},
slots: [],
styleSlots: ["content"],

16
packages/arco-lib/src/components/Input.tsx
View File

@ -3,18 +3,18 @@ import { ComponentImpl, implementRuntimeComponent } from "@sunmao-ui/runtime";
import { css } from "@emotion/css";
import { Type, Static } from "@sinclair/typebox";
import { FALLBACK_METADATA, getComponentProps } from "../sunmao-helper";
import { InputPropsSchema as BaseInputPropsSchema } from "../generated/types/Input";
import { InputPropsSpec as BaseInputPropsSpec } from "../generated/types/Input";
import { useEffect, useState, useRef } from "react";
import { RefInputType } from "@arco-design/web-react/es/Input/interface";
const InputPropsSchema = Type.Object({
...BaseInputPropsSchema,
const InputPropsSpec = Type.Object({
...BaseInputPropsSpec,
});
const InputStateSchema = Type.Object({
const InputStateSpec = Type.Object({
value: Type.String(),
});
const InputImpl: ComponentImpl<Static<typeof InputPropsSchema>> = (props) => {
const InputImpl: ComponentImpl<Static<typeof InputPropsSpec>> = (props) => {
const { getElement, slotsElements, customStyle, callbackMap, mergeState } =
props;
const { defaultValue, ...cProps } = getComponentProps(props);
@ -53,7 +53,7 @@ const InputImpl: ComponentImpl<Static<typeof InputPropsSchema>> = (props) => {
);
};
const exampleProperties: Static<typeof InputPropsSchema> = {
const exampleProperties: Static<typeof InputPropsSpec> = {
allowClear: false,
disabled: false,
readOnly: false,
@ -75,8 +75,8 @@ const options = {
},
},
spec: {
properties: InputPropsSchema,
state: InputStateSchema,
properties: InputPropsSpec,
state: InputStateSpec,
methods: {},
slots: ["addAfter", "prefix", "suffix", "addBefore"],
styleSlots: ["input"],

4
packages/arco-lib/src/components/Layout.tsx
View File

@ -4,7 +4,7 @@ import { css } from '@emotion/css';
import { Type } from '@sinclair/typebox';
import { FALLBACK_METADATA, getComponentProps } from '../sunmao-helper';
const LayoutStateSchema = Type.Object({});
const LayoutStateSpec = Type.Object({});
export const Layout = implementRuntimeComponent({
version: 'arco/v1',
@ -46,7 +46,7 @@ export const Layout = implementRuntimeComponent({
category: 'Basic',
}),
}),
state: LayoutStateSchema,
state: LayoutStateSpec,
methods: {},
slots: ['header', 'content', 'sidebar', 'footer'],
styleSlots: ['layout', 'header', 'content', 'sidebar', 'footer'],

14
packages/arco-lib/src/components/Link.tsx
View File

@ -3,12 +3,12 @@ import { ComponentImpl, implementRuntimeComponent } from "@sunmao-ui/runtime";
import { css } from "@emotion/css";
import { Type, Static } from "@sinclair/typebox";
import { FALLBACK_METADATA, getComponentProps } from "../sunmao-helper";
import { LinkPropsSchema as BaseLinkPropsSchema } from "../generated/types/Link";
import { LinkPropsSpec as BaseLinkPropsSpec } from "../generated/types/Link";
const LinkPropsSchema = Type.Object(BaseLinkPropsSchema);
const LinkStateSchema = Type.Object({});
const LinkPropsSpec = Type.Object(BaseLinkPropsSpec);
const LinkStateSpec = Type.Object({});
const LinkImpl: ComponentImpl<Static<typeof LinkPropsSchema>> = (props) => {
const LinkImpl: ComponentImpl<Static<typeof LinkPropsSpec>> = (props) => {
const { elementRef, content, status, ...cProps } = getComponentProps(props);
const { customStyle } = props;
@ -24,7 +24,7 @@ const LinkImpl: ComponentImpl<Static<typeof LinkPropsSchema>> = (props) => {
);
};
const exampleProperties: Static<typeof LinkPropsSchema> = {
const exampleProperties: Static<typeof LinkPropsSpec> = {
disabled: false,
hoverable: true,
status: "warning",
@ -44,8 +44,8 @@ const options = {
exampleProperties,
},
spec: {
properties: LinkPropsSchema,
state: LinkStateSchema,
properties: LinkPropsSpec,
state: LinkStateSpec,
methods: {},
slots: [],
styleSlots: ["content"],

14
packages/arco-lib/src/components/Mentions.tsx
View File

@ -3,15 +3,15 @@ import { ComponentImpl, implementRuntimeComponent } from "@sunmao-ui/runtime";
import { css } from "@emotion/css";
import { Type, Static } from "@sinclair/typebox";
import { FALLBACK_METADATA, getComponentProps } from "../sunmao-helper";
import { MentionsPropsSchema as BaseMentionsPropsSchema } from "../generated/types/Mentions";
import { MentionsPropsSpec as BaseMentionsPropsSpec } from "../generated/types/Mentions";
import { useState, useEffect } from "react";
const MentionsPropsSchema = Type.Object(BaseMentionsPropsSchema);
const MentionsStateSchema = Type.Object({
const MentionsPropsSpec = Type.Object(BaseMentionsPropsSpec);
const MentionsStateSpec = Type.Object({
value: Type.String(),
});
const MentionsImpl: ComponentImpl<Static<typeof MentionsPropsSchema>> = (
const MentionsImpl: ComponentImpl<Static<typeof MentionsPropsSpec>> = (
props
) => {
const { elementRef, defaultValue, ...cProps } = getComponentProps(props);
@ -49,7 +49,7 @@ const MentionsImpl: ComponentImpl<Static<typeof MentionsPropsSchema>> = (
/>
);
};
const exampleProperties: Static<typeof MentionsPropsSchema> = {
const exampleProperties: Static<typeof MentionsPropsSpec> = {
defaultValue: "smartx",
options: ["smartx", "byte and dance", "baidu"],
prefix: "@",
@ -70,8 +70,8 @@ const options = {
exampleProperties,
},
spec: {
properties: MentionsPropsSchema,
state: MentionsStateSchema,
properties: MentionsPropsSpec,
state: MentionsStateSpec,
methods: {},
slots: [],
styleSlots: ["content"],

16
packages/arco-lib/src/components/Menu.tsx
View File

@ -3,12 +3,12 @@ import { ComponentImpl, implementRuntimeComponent } from '@sunmao-ui/runtime';
import { css } from '@emotion/css';
import { Type, Static } from '@sinclair/typebox';
import { FALLBACK_METADATA, getComponentProps } from '../sunmao-helper';
import { MenuPropsSchema as BaseMenuPropsSchema } from '../generated/types/Menu';
import { MenuPropsSpec as BaseMenuPropsSpec } from '../generated/types/Menu';
import { useEffect, useState } from 'react';
import { Category } from '../constants/category';
const MenuPropsSchema = Type.Object({
...BaseMenuPropsSchema,
const MenuPropsSpec = Type.Object({
...BaseMenuPropsSpec,
defaultActiveKey: Type.String({
title: 'Default Active Key',
category: Category.Basic,
@ -24,11 +24,11 @@ const MenuPropsSchema = Type.Object({
}
),
});
const MenuStateSchema = Type.Object({
const MenuStateSpec = Type.Object({
activeKey: Type.Optional(Type.String()),
});
const MenuImpl: ComponentImpl<Static<typeof MenuPropsSchema>> = props => {
const MenuImpl: ComponentImpl<Static<typeof MenuPropsSpec>> = props => {
const { elementRef, customStyle, callbackMap, mergeState } = props;
const { items = [], defaultActiveKey, ...cProps } = getComponentProps(props);
const [activeKey, setActiveKey] = useState<string>(defaultActiveKey);
@ -59,7 +59,7 @@ const MenuImpl: ComponentImpl<Static<typeof MenuPropsSchema>> = props => {
);
};
const exampleProperties: Static<typeof MenuPropsSchema> = {
const exampleProperties: Static<typeof MenuPropsSpec> = {
mode: 'vertical',
autoOpen: false,
collapse: false,
@ -81,8 +81,8 @@ export const Menu = implementRuntimeComponent({
exampleProperties,
},
spec: {
properties: MenuPropsSchema,
state: MenuStateSchema,
properties: MenuPropsSpec,
state: MenuStateSpec,
methods: {},
slots: [],
styleSlots: ['content'],

14
packages/arco-lib/src/components/Modal.tsx
View File

@ -7,13 +7,13 @@ import {
import { css } from "@emotion/css";
import { Type, Static } from "@sinclair/typebox";
import { FALLBACK_METADATA, getComponentProps } from "../sunmao-helper";
import { ModalPropsSchema as BaseModalPropsSchema } from "../generated/types/Modal";
import { ModalPropsSpec as BaseModalPropsSpec } from "../generated/types/Modal";
import { useEffect, useRef, useState } from "react";
const ModalPropsSchema = Type.Object(BaseModalPropsSchema);
const ModalStateSchema = Type.Object({});
const ModalPropsSpec = Type.Object(BaseModalPropsSpec);
const ModalStateSpec = Type.Object({});
const ModalImpl: ComponentImpl<Static<typeof ModalPropsSchema>> = (props) => {
const ModalImpl: ComponentImpl<Static<typeof ModalPropsSpec>> = (props) => {
const { subscribeMethods, slotsElements, customStyle, callbackMap } = props;
const { getElement, title, ...cProps } = getComponentProps(props);
const [visible, setVisible] = useState(true);
@ -69,7 +69,7 @@ const ModalImpl: ComponentImpl<Static<typeof ModalPropsSchema>> = (props) => {
);
};
const exampleProperties: Static<typeof ModalPropsSchema> = {
const exampleProperties: Static<typeof ModalPropsSpec> = {
title: "Modal title",
mask: true,
simple: false,
@ -91,8 +91,8 @@ export const Modal = implementRuntimeComponent({
},
},
spec: {
properties: ModalPropsSchema,
state: ModalStateSchema,
properties: ModalPropsSpec,
state: ModalStateSpec,
methods: {
openModal: Type.String(),
closeModal: Type.String(),

14
packages/arco-lib/src/components/Pagination.tsx
View File

@ -3,15 +3,15 @@ import { ComponentImpl, implementRuntimeComponent } from "@sunmao-ui/runtime";
import { css, cx } from "@emotion/css";
import { Type, Static } from "@sinclair/typebox";
import { FALLBACK_METADATA, getComponentProps } from "../sunmao-helper";
import { PaginationPropsSchema as BasePaginationPropsSchema } from "../generated/types/Pagination";
import { PaginationPropsSpec as BasePaginationPropsSpec } from "../generated/types/Pagination";
import { useState } from "react";
const PaginationPropsSchema = Type.Object(BasePaginationPropsSchema);
const PaginationStateSchema = Type.Object({
const PaginationPropsSpec = Type.Object(BasePaginationPropsSpec);
const PaginationStateSpec = Type.Object({
currentPage: Type.Number(),
});
const PaginationImpl: ComponentImpl<Static<typeof PaginationPropsSchema>> = (
const PaginationImpl: ComponentImpl<Static<typeof PaginationPropsSpec>> = (
props
) => {
const { elementRef, defaultCurrent, ...cProps } = getComponentProps(props);
@ -40,7 +40,7 @@ const PaginationImpl: ComponentImpl<Static<typeof PaginationPropsSchema>> = (
);
};
const exampleProperties: Static<typeof PaginationPropsSchema> = {
const exampleProperties: Static<typeof PaginationPropsSpec> = {
pageSize: 10,
total: 300,
defaultCurrent: 3,
@ -64,8 +64,8 @@ const options = {
}
},
spec: {
properties: PaginationPropsSchema,
state: PaginationStateSchema,
properties: PaginationPropsSpec,
state: PaginationStateSpec,
methods: {},
slots: [],
styleSlots: ["content"],

16
packages/arco-lib/src/components/PasswordInput.tsx
View File

@ -3,20 +3,20 @@ import { ComponentImpl, implementRuntimeComponent } from "@sunmao-ui/runtime";
import { css } from "@emotion/css";
import { Type, Static } from "@sinclair/typebox";
import { FALLBACK_METADATA, getComponentProps } from "../sunmao-helper";
import { PasswordInputPropsSchema as BasePasswordInputPropsSchema } from "../generated/types/PasswordInput";
import { PasswordInputPropsSpec as BasePasswordInputPropsSpec } from "../generated/types/PasswordInput";
import { useEffect, useState, useRef } from "react";
import { RefInputType } from "@arco-design/web-react/es/Input/interface";
const InputPropsSchema = Type.Object({
...BasePasswordInputPropsSchema,
const InputPropsSpec = Type.Object({
...BasePasswordInputPropsSpec,
});
const InputStateSchema = Type.Object({
const InputStateSpec = Type.Object({
value: Type.String(),
});
const BasePasswordInput = Input.Password;
const PasswordInputImpl: ComponentImpl<Static<typeof InputPropsSchema>> = (
const PasswordInputImpl: ComponentImpl<Static<typeof InputPropsSpec>> = (
props
) => {
const { getElement,customStyle, callbackMap, mergeState } = props;
@ -51,7 +51,7 @@ const PasswordInputImpl: ComponentImpl<Static<typeof InputPropsSchema>> = (
);
};
const exampleProperties: Static<typeof InputPropsSchema> = {
const exampleProperties: Static<typeof InputPropsSpec> = {
disabled: false,
placeholder: "please input",
error: false,
@ -71,8 +71,8 @@ const options = {
},
},
spec: {
properties: InputPropsSchema,
state: InputStateSchema,
properties: InputPropsSpec,
state: InputStateSpec,
methods: {},
slots: [],
styleSlots: ["input"],

14
packages/arco-lib/src/components/Popover.tsx
View File

@ -3,14 +3,14 @@ import { ComponentImpl, implementRuntimeComponent } from "@sunmao-ui/runtime";
import { css } from "@emotion/css";
import { Type, Static } from "@sinclair/typebox";
import { FALLBACK_METADATA, getComponentProps } from "../sunmao-helper";
import { PopoverPropsSchema as BasePopoverPropsSchema } from "../generated/types/Popover";
import { PopoverPropsSpec as BasePopoverPropsSpec } from "../generated/types/Popover";
import { useEffect, useState } from "react";
import { isArray } from "lodash-es";
const PopoverPropsSchema = Type.Object(BasePopoverPropsSchema);
const PopoverStateSchema = Type.Object({});
const PopoverPropsSpec = Type.Object(BasePopoverPropsSpec);
const PopoverStateSpec = Type.Object({});
const PopoverImpl: ComponentImpl<Static<typeof PopoverPropsSchema>> = (
const PopoverImpl: ComponentImpl<Static<typeof PopoverPropsSpec>> = (
props
) => {
const { elementRef, controlled, ...cProps } = getComponentProps(props);
@ -56,7 +56,7 @@ const PopoverImpl: ComponentImpl<Static<typeof PopoverPropsSchema>> = (
</BasePopover>
);
};
const exampleProperties: Static<typeof PopoverPropsSchema> = {
const exampleProperties: Static<typeof PopoverPropsSpec> = {
color: "#eee",
position: "bottom",
disabled: false,
@ -78,8 +78,8 @@ const options = {
},
},
spec: {
properties: PopoverPropsSchema,
state: PopoverStateSchema,
properties: PopoverPropsSpec,
state: PopoverStateSpec,
methods: {
openPopover: Type.String(),
closePopover: Type.String(),

14
packages/arco-lib/src/components/Progress.tsx
View File

@ -3,12 +3,12 @@ import { ComponentImpl, implementRuntimeComponent } from "@sunmao-ui/runtime";
import { css } from "@emotion/css";
import { Type, Static } from "@sinclair/typebox";
import { FALLBACK_METADATA, getComponentProps } from "../sunmao-helper";
import { ProgressPropsSchema as BaseProgressPropsSchema } from "../generated/types/Progress";
import { ProgressPropsSpec as BaseProgressPropsSpec } from "../generated/types/Progress";
const ProgressPropsSchema = Type.Object(BaseProgressPropsSchema);
const ProgressStateSchema = Type.Object({});
const ProgressPropsSpec = Type.Object(BaseProgressPropsSpec);
const ProgressStateSpec = Type.Object({});
const ProgressImpl: ComponentImpl<Static<typeof ProgressPropsSchema>> = (
const ProgressImpl: ComponentImpl<Static<typeof ProgressPropsSpec>> = (
props
) => {
const { elementRef, ...cProps } = getComponentProps(props);
@ -22,7 +22,7 @@ const ProgressImpl: ComponentImpl<Static<typeof ProgressPropsSchema>> = (
/>
);
};
const exampleProperties: Static<typeof ProgressPropsSchema> = {
const exampleProperties: Static<typeof ProgressPropsSpec> = {
type: "line",
status: "normal",
color: "#3c92dc",
@ -45,8 +45,8 @@ const options = {
}
},
spec: {
properties: ProgressPropsSchema,
state: ProgressStateSchema,
properties: ProgressPropsSpec,
state: ProgressStateSpec,
methods: {},
slots: [],
styleSlots: ["content"],

16
packages/arco-lib/src/components/Radio.tsx
View File

@ -3,17 +3,17 @@ import { ComponentImpl, implementRuntimeComponent } from '@sunmao-ui/runtime';
import { css } from '@emotion/css';
import { Type, Static } from '@sinclair/typebox';
import { FALLBACK_METADATA, getComponentProps } from '../sunmao-helper';
import { RadioPropsSchema as BaseRadioPropsSchema } from '../generated/types/Radio';
import { RadioPropsSpec as BaseRadioPropsSpec } from '../generated/types/Radio';
import { useEffect, useState } from 'react';
const RadioPropsSchema = Type.Object({
...BaseRadioPropsSchema,
const RadioPropsSpec = Type.Object({
...BaseRadioPropsSpec,
});
const RadioStateSchema = Type.Object({
const RadioStateSpec = Type.Object({
checkedValue: Type.String(),
});
const RadioImpl: ComponentImpl<Static<typeof RadioPropsSchema>> = props => {
const RadioImpl: ComponentImpl<Static<typeof RadioPropsSpec>> = props => {
const { customStyle, callbackMap, mergeState, subscribeMethods } = props;
const { defaultCheckedValue, elementRef, ...cProps } = getComponentProps(props);
const [checkedValue, setCheckedValue] = useState<string>('');
@ -56,7 +56,7 @@ const RadioImpl: ComponentImpl<Static<typeof RadioPropsSchema>> = props => {
);
};
const exampleProperties: Static<typeof RadioPropsSchema> = {
const exampleProperties: Static<typeof RadioPropsSpec> = {
options: [
{ label: 'A', value: 'a' },
{ label: 'B', value: 'b' },
@ -80,8 +80,8 @@ const options = {
},
},
spec: {
properties: RadioPropsSchema,
state: RadioStateSchema,
properties: RadioPropsSpec,
state: RadioStateSpec,
methods: {
setCheckedValue: Type.Object({
value: Type.String(),

16
packages/arco-lib/src/components/Select.tsx
View File

@ -3,18 +3,18 @@ import { ComponentImpl, implementRuntimeComponent } from '@sunmao-ui/runtime';
import { css } from '@emotion/css';
import { Type, Static } from '@sinclair/typebox';
import { FALLBACK_METADATA, getComponentProps } from '../sunmao-helper';
import { SelectPropsSchema as BaseSelectPropsSchema } from '../generated/types/Select';
import { SelectPropsSpec as BaseSelectPropsSpec } from '../generated/types/Select';
import { useEffect, useState, useRef } from 'react';
import { SelectHandle } from '@arco-design/web-react/es/Select/interface';
const SelectPropsSchema = Type.Object({
...BaseSelectPropsSchema,
const SelectPropsSpec = Type.Object({
...BaseSelectPropsSpec,
});
const SelectStateSchema = Type.Object({
const SelectStateSpec = Type.Object({
value: Type.String(),
});
const SelectImpl: ComponentImpl<Static<typeof SelectPropsSchema>> = props => {
const SelectImpl: ComponentImpl<Static<typeof SelectPropsSpec>> = props => {
const { getElement, customStyle, callbackMap, mergeState, defaultValue = '' } = props;
const { options = [], ...cProps } = getComponentProps(props);
const [value, setValue] = useState<string>(defaultValue);
@ -52,7 +52,7 @@ const SelectImpl: ComponentImpl<Static<typeof SelectPropsSchema>> = props => {
);
};
const exampleProperties: Static<typeof SelectPropsSchema> = {
const exampleProperties: Static<typeof SelectPropsSpec> = {
allowClear: false,
multiple: false,
allowCreate: false,
@ -82,8 +82,8 @@ export const Select = implementRuntimeComponent({
},
},
spec: {
properties: SelectPropsSchema,
state: SelectStateSchema,
properties: SelectPropsSpec,
state: SelectStateSpec,
methods: {},
slots: [],
styleSlots: ['content'],

14
packages/arco-lib/src/components/Skeleton.tsx
View File

@ -3,12 +3,12 @@ import { ComponentImpl, implementRuntimeComponent } from "@sunmao-ui/runtime";
import { css } from "@emotion/css";
import { Type, Static } from "@sinclair/typebox";
import { FALLBACK_METADATA, getComponentProps } from "../sunmao-helper";
import { SkeletonPropsSchema as BaseSkeletonPropsSchema } from "../generated/types/Skeleton";
import { SkeletonPropsSpec as BaseSkeletonPropsSpec } from "../generated/types/Skeleton";
const SkeletonPropsSchema = Type.Object(BaseSkeletonPropsSchema);
const SkeletonStateSchema = Type.Object({});
const SkeletonPropsSpec = Type.Object(BaseSkeletonPropsSpec);
const SkeletonStateSpec = Type.Object({});
const SkeletonImpl: ComponentImpl<Static<typeof SkeletonPropsSchema>> = (
const SkeletonImpl: ComponentImpl<Static<typeof SkeletonPropsSpec>> = (
props
) => {
const { elementRef, ...cProps } = getComponentProps(props);
@ -25,7 +25,7 @@ const SkeletonImpl: ComponentImpl<Static<typeof SkeletonPropsSchema>> = (
);
};
const exampleProperties: Static<typeof SkeletonPropsSchema> = {
const exampleProperties: Static<typeof SkeletonPropsSpec> = {
animation: true,
loading: true,
image: false,
@ -44,8 +44,8 @@ const options = {
}
},
spec: {
properties: SkeletonPropsSchema,
state: SkeletonStateSchema,
properties: SkeletonPropsSpec,
state: SkeletonStateSpec,
methods: {},
slots: ["content"],
styleSlots: ["content"],

16
packages/arco-lib/src/components/Space.tsx
View File

@ -6,14 +6,14 @@ import {
FALLBACK_METADATA,
getComponentProps,
} from "../sunmao-helper";
import { SpacePropsSchema as BaseSpacePropsSchema } from "../generated/types/Space";
import { SpacePropsSpec as BaseSpacePropsSpec } from "../generated/types/Space";
const SpacePropsSchema = Type.Object({
...BaseSpacePropsSchema,
const SpacePropsSpec = Type.Object({
...BaseSpacePropsSpec,
});
const SpaceStateSchema = Type.Object({});
const SpaceStateSpec = Type.Object({});
const SpaceImpl: ComponentImpl<Static<typeof SpacePropsSchema>> = (props) => {
const SpaceImpl: ComponentImpl<Static<typeof SpacePropsSpec>> = (props) => {
const { elementRef, slotsElements, customStyle } = props;
const cProps = getComponentProps(props);
@ -24,7 +24,7 @@ const SpaceImpl: ComponentImpl<Static<typeof SpacePropsSchema>> = (props) => {
);
};
const exampleProperties: Static<typeof SpacePropsSchema> = {
const exampleProperties: Static<typeof SpacePropsSpec> = {
align: "center",
direction: "vertical",
wrap: false,
@ -42,8 +42,8 @@ export const Space = implementRuntimeComponent({
displayName: "Space",
},
spec: {
properties: SpacePropsSchema,
state: SpaceStateSchema,
properties: SpacePropsSpec,
state: SpaceStateSpec,
methods: {},
slots: ["content"],
styleSlots: ["content"],

18
packages/arco-lib/src/components/Steps.tsx
View File

@ -4,16 +4,16 @@ import { css } from "@emotion/css";
import { Type, Static } from "@sinclair/typebox";
import { FALLBACK_METADATA, getComponentProps } from "../sunmao-helper";
import {
StepsPropsSchema as BaseStepsPropsSchema,
StepItemSchema,
StepsPropsSpec as BaseStepsPropsSpec,
StepItemSpec,
} from "../generated/types/Steps";
const StepsPropsSchema = Type.Object(BaseStepsPropsSchema);
const StepsStateSchema = Type.Object({});
const StepsPropsSpec = Type.Object(BaseStepsPropsSpec);
const StepsStateSpec = Type.Object({});
type StepItem = Static<typeof StepItemSchema>;
type StepItem = Static<typeof StepItemSpec>;
const StepsImpl: ComponentImpl<Static<typeof StepsPropsSchema>> = (props) => {
const StepsImpl: ComponentImpl<Static<typeof StepsPropsSpec>> = (props) => {
const { items, ...cProps } = getComponentProps(props);
const { elementRef, customStyle, slotsElements } = props;
@ -42,7 +42,7 @@ const StepsImpl: ComponentImpl<Static<typeof StepsPropsSchema>> = (props) => {
);
};
const exampleProperties: Static<typeof StepsPropsSchema> = {
const exampleProperties: Static<typeof StepsPropsSpec> = {
type: "default",
size: "default",
direction: "horizontal",
@ -68,8 +68,8 @@ const options = {
},
},
spec: {
properties: StepsPropsSchema,
state: StepsStateSchema,
properties: StepsPropsSpec,
state: StepsStateSpec,
methods: {},
slots: ["icons"],
styleSlots: ["content"],

16
packages/arco-lib/src/components/Switch.tsx
View File

@ -3,17 +3,17 @@ import { ComponentImpl, implementRuntimeComponent } from "@sunmao-ui/runtime";
import { css } from "@emotion/css";
import { Type, Static } from "@sinclair/typebox";
import { FALLBACK_METADATA, getComponentProps } from "../sunmao-helper";
import { SwitchPropsSchema as BaseSwitchPropsSchema } from "../generated/types/Switch";
import { SwitchPropsSpec as BaseSwitchPropsSpec } from "../generated/types/Switch";
import { useEffect, useState } from "react";
const SwitchPropsSchema = Type.Object({
...BaseSwitchPropsSchema,
const SwitchPropsSpec = Type.Object({
...BaseSwitchPropsSpec,
});
const SwitchStateSchema = Type.Object({
const SwitchStateSpec = Type.Object({
value: Type.Boolean(),
});
const SwitchImpl: ComponentImpl<Static<typeof SwitchPropsSchema>> = (props) => {
const SwitchImpl: ComponentImpl<Static<typeof SwitchPropsSpec>> = (props) => {
const {elementRef, customStyle, mergeState } = props;
const { defaultChecked, ...cProps } = getComponentProps(props);
const [value, setValue] = useState<boolean>(defaultChecked);
@ -39,7 +39,7 @@ const SwitchImpl: ComponentImpl<Static<typeof SwitchPropsSchema>> = (props) => {
);
};
const exampleProperties: Static<typeof SwitchPropsSchema> = {
const exampleProperties: Static<typeof SwitchPropsSpec> = {
defaultChecked: false,
disabled: false,
loading: false,
@ -59,8 +59,8 @@ const options = {
},
},
spec: {
properties: SwitchPropsSchema,
state: SwitchStateSchema,
properties: SwitchPropsSpec,
state: SwitchStateSpec,
methods: {},
slots: [],
styleSlots: [],

12
packages/arco-lib/src/components/Table.tsx
View File

@ -9,7 +9,7 @@ import {
import { css } from '@emotion/css';
import { Type, Static } from '@sinclair/typebox';
import { FALLBACK_METADATA, getComponentProps } from '../sunmao-helper';
import { TablePropsSchema, ColumnSchema } from '../generated/types/Table';
import { TablePropsSpec, ColumnSpec } from '../generated/types/Table';
import React, {
ReactNode,
useEffect,
@ -26,7 +26,7 @@ import {
} from '@sunmao-ui/runtime';
import { TableInstance } from '@arco-design/web-react/es/Table/table';
const TableStateSchema = Type.Object({
const TableStateSpec = Type.Object({
clickedRow:Type.Optional(Type.Any()),
selectedRows: Type.Array(Type.Any()),
selectedRow: Type.Optional(Type.Any()),
@ -38,7 +38,7 @@ type SortRule = {
direction?: 'ascend' | 'descend';
};
type ColumnProperty = Static<typeof ColumnSchema> & {
type ColumnProperty = Static<typeof ColumnSpec> & {
filterDropdown?: ({
filterKeys,
setFilterKeys,
@ -69,7 +69,7 @@ const rowClickStyle = css`
}
`;
export const exampleProperties: Static<typeof TablePropsSchema> = {
export const exampleProperties: Static<typeof TablePropsSpec> = {
columns: [
{
title: 'Name',
@ -156,8 +156,8 @@ export const Table = implementRuntimeComponent({
displayName: 'Table',
},
spec: {
properties: TablePropsSchema,
state: TableStateSchema,
properties: TablePropsSpec,
state: TableStateSpec,
methods: {},
slots: [],
styleSlots: ['content'],

14
packages/arco-lib/src/components/Tabs.tsx
View File

@ -3,15 +3,15 @@ import { ComponentImpl, implementRuntimeComponent } from '@sunmao-ui/runtime';
import { css } from '@emotion/css';
import { Type, Static } from '@sinclair/typebox';
import { FALLBACK_METADATA, getComponentProps } from '../sunmao-helper';
import { TabsPropsSchema as BaseTabsPropsSchema } from '../generated/types/Tabs';
import { TabsPropsSpec as BaseTabsPropsSpec } from '../generated/types/Tabs';
import React, { useEffect, useRef, useState } from 'react';
const TabsPropsSchema = Type.Object(BaseTabsPropsSchema);
const TabsStateSchema = Type.Object({
const TabsPropsSpec = Type.Object(BaseTabsPropsSpec);
const TabsStateSpec = Type.Object({
activeTab: Type.String(),
});
const TabPane = BaseTabs.TabPane;
const TabsImpl: ComponentImpl<Static<typeof TabsPropsSchema>> = props => {
const TabsImpl: ComponentImpl<Static<typeof TabsPropsSpec>> = props => {
const { defaultActiveTab, tabNames, ...cProps } = getComponentProps(props);
const { getElement, customStyle, mergeState, slotsElements } = props;
const ref = useRef<{ current: HTMLDivElement }>(null);
@ -48,7 +48,7 @@ const TabsImpl: ComponentImpl<Static<typeof TabsPropsSchema>> = props => {
);
};
const exampleProperties: Static<typeof TabsPropsSchema> = {
const exampleProperties: Static<typeof TabsPropsSpec> = {
type: 'line',
defaultActiveTab: '0',
tabPosition: 'top',
@ -68,8 +68,8 @@ const options = {
},
},
spec: {
properties: TabsPropsSchema,
state: TabsStateSchema,
properties: TabsPropsSpec,
state: TabsStateSpec,
methods: {},
slots: ['content'],
styleSlots: ['content'],

16
packages/arco-lib/src/components/TextArea.tsx
View File

@ -3,20 +3,20 @@ import { ComponentImpl, implementRuntimeComponent } from "@sunmao-ui/runtime";
import { css } from "@emotion/css";
import { Type, Static } from "@sinclair/typebox";
import { FALLBACK_METADATA, getComponentProps } from "../sunmao-helper";
import { TextAreaPropsSchema as BaseTextAreaPropsSchema } from "../generated/types/TextArea";
import { TextAreaPropsSpec as BaseTextAreaPropsSpec } from "../generated/types/TextArea";
import { useEffect, useState, useRef } from "react";
import { RefInputType } from "@arco-design/web-react/es/Input/interface";
const TextAreaPropsSchema = Type.Object({
...BaseTextAreaPropsSchema,
const TextAreaPropsSpec = Type.Object({
...BaseTextAreaPropsSpec,
});
const TextAreaStateSchema = Type.Object({
const TextAreaStateSpec = Type.Object({
value: Type.String(),
});
const BaseTextArea = Input.TextArea;
const TextAreaImpl: ComponentImpl<Static<typeof TextAreaPropsSchema>> = (
const TextAreaImpl: ComponentImpl<Static<typeof TextAreaPropsSpec>> = (
props
) => {
const { getElement, customStyle, callbackMap, mergeState } = props;
@ -51,7 +51,7 @@ const TextAreaImpl: ComponentImpl<Static<typeof TextAreaPropsSchema>> = (
);
};
const exampleProperties: Static<typeof TextAreaPropsSchema> = {
const exampleProperties: Static<typeof TextAreaPropsSpec> = {
allowClear: false,
disabled: false,
defaultValue: "",
@ -73,8 +73,8 @@ const options = {
},
},
spec: {
properties: TextAreaPropsSchema,
state: TextAreaStateSchema,
properties: TextAreaPropsSpec,
state: TextAreaStateSpec,
methods: {},
slots: [],
styleSlots: ["TextArea"],

14
packages/arco-lib/src/components/Timeline.tsx
View File

@ -3,12 +3,12 @@ import { ComponentImpl, implementRuntimeComponent } from "@sunmao-ui/runtime";
import { css } from "@emotion/css";
import { Type, Static } from "@sinclair/typebox";
import { FALLBACK_METADATA, getComponentProps } from "../sunmao-helper";
import { TimelinePropsSchema as BaseTimelinePropsSchema } from "../generated/types/Timeline";
import { TimelinePropsSpec as BaseTimelinePropsSpec } from "../generated/types/Timeline";
const TimelinePropsSchema = Type.Object(BaseTimelinePropsSchema);
const TimelineStateSchema = Type.Object({});
const TimelinePropsSpec = Type.Object(BaseTimelinePropsSpec);
const TimelineStateSpec = Type.Object({});
const TimelineImpl: ComponentImpl<Static<typeof TimelinePropsSchema>> = (
const TimelineImpl: ComponentImpl<Static<typeof TimelinePropsSpec>> = (
props
) => {
const { items, ...cProps } = getComponentProps(props);
@ -31,7 +31,7 @@ const TimelineImpl: ComponentImpl<Static<typeof TimelinePropsSchema>> = (
</BaseTimeline>
);
};
const exampleProperties: Static<typeof TimelinePropsSchema> = {
const exampleProperties: Static<typeof TimelinePropsSpec> = {
reverse: false,
direction: "vertical",
mode: "alternate",
@ -81,8 +81,8 @@ const options = {
exampleProperties,
},
spec: {
properties: TimelinePropsSchema,
state: TimelineStateSchema,
properties: TimelinePropsSpec,
state: TimelineStateSpec,
methods: {},
slots: [],
styleSlots: ["content"],

14
packages/arco-lib/src/components/Tooltip.tsx
View File

@ -3,14 +3,14 @@ import { ComponentImpl, implementRuntimeComponent } from "@sunmao-ui/runtime";
import { css } from "@emotion/css";
import { Type, Static } from "@sinclair/typebox";
import { FALLBACK_METADATA, getComponentProps } from "../sunmao-helper";
import { TooltipPropsSchema as BaseTooltipPropsSchema } from "../generated/types/Tooltip";
import { TooltipPropsSpec as BaseTooltipPropsSpec } from "../generated/types/Tooltip";
import { isArray } from "lodash-es";
import { useState, useEffect } from "react";
const TooltipPropsSchema = Type.Object(BaseTooltipPropsSchema);
const TooltipStateSchema = Type.Object({});
const TooltipPropsSpec = Type.Object(BaseTooltipPropsSpec);
const TooltipStateSpec = Type.Object({});
const TooltipImpl: ComponentImpl<Static<typeof TooltipPropsSchema>> = (
const TooltipImpl: ComponentImpl<Static<typeof TooltipPropsSpec>> = (
props
) => {
const { controlled, ...cProps } = getComponentProps(props);
@ -51,7 +51,7 @@ const TooltipImpl: ComponentImpl<Static<typeof TooltipPropsSchema>> = (
</BaseTooltip>
);
};
const exampleProperties: Static<typeof TooltipPropsSchema> = {
const exampleProperties: Static<typeof TooltipPropsSpec> = {
color: "#bbb",
position: "bottom",
mini: false,
@ -71,8 +71,8 @@ const options = {
exampleProperties,
},
spec: {
properties: TooltipPropsSchema,
state: TooltipStateSchema,
properties: TooltipPropsSpec,
state: TooltipStateSpec,
methods: {
openTooltip: Type.String(),
closeTooltip: Type.String(),

22
packages/arco-lib/src/components/Tree.tsx
View File

@ -3,16 +3,16 @@ import { ComponentImpl, implementRuntimeComponent } from "@sunmao-ui/runtime";
import { css } from "@emotion/css";
import { Type, Static } from "@sinclair/typebox";
import { FALLBACK_METADATA } from "../sunmao-helper";
import { TreePropsSchema, TreeNodeSchema } from "../generated/types/Tree";
import { TreePropsSpec, TreeNodeSpec } from "../generated/types/Tree";
import { useEffect, useState } from "react";
import { NodeInstance } from "@arco-design/web-react/es/Tree/interface";
const TreeStateSchema = Type.Object({
selectedNode: TreeNodeSchema,
selectedNodes: Type.Array(TreeNodeSchema),
const TreeStateSpec = Type.Object({
selectedNode: TreeNodeSpec,
selectedNodes: Type.Array(TreeNodeSpec),
});
const TreeImpl: ComponentImpl<Static<typeof TreePropsSchema>> = (props) => {
const TreeImpl: ComponentImpl<Static<typeof TreePropsSpec>> = (props) => {
const {
elementRef,
data,
@ -22,7 +22,7 @@ const TreeImpl: ComponentImpl<Static<typeof TreePropsSchema>> = (props) => {
mergeState,
} = props;
const [selectedNodes, setSelectedNodes] = useState<
Static<typeof TreeNodeSchema>[]
Static<typeof TreeNodeSpec>[]
>([]);
useEffect(() => {
@ -46,7 +46,7 @@ const TreeImpl: ComponentImpl<Static<typeof TreePropsSchema>> = (props) => {
);
};
function formatNode(node: NodeInstance): Static<typeof TreeNodeSchema> {
function formatNode(node: NodeInstance): Static<typeof TreeNodeSpec> {
return {
title: node.props.title as string,
key: node.props._key!,
@ -54,11 +54,11 @@ function formatNode(node: NodeInstance): Static<typeof TreeNodeSchema> {
checkable: node.props.checkable,
path:[...node.props.pathParentKeys!,node.props._key!],
children:
node.props.dataRef?.children || ([] as Static<typeof TreeNodeSchema>[]),
node.props.dataRef?.children || ([] as Static<typeof TreeNodeSpec>[]),
};
}
const exampleProperties: Static<typeof TreePropsSchema> = {
const exampleProperties: Static<typeof TreePropsSpec> = {
multiple: false,
size: "medium",
autoExpandParent: true,
@ -119,8 +119,8 @@ const options = {
exampleProperties,
},
spec: {
properties: TreePropsSchema,
state: TreeStateSchema,
properties: TreePropsSpec,
state: TreeStateSpec,
methods: {},
slots: [],
styleSlots: ["content"],

17
packages/arco-lib/src/components/TreeSelect.tsx
View File

@ -3,17 +3,16 @@ import { ComponentImpl, implementRuntimeComponent } from "@sunmao-ui/runtime";
import { css } from "@emotion/css";
import { Type, Static } from "@sinclair/typebox";
import { FALLBACK_METADATA, getComponentProps } from "../sunmao-helper";
import { TreeSelectPropsSchema as BaseTreeSelectPropsSchema } from "../generated/types/TreeSelect";
import { useState, useEffect } from "react";
import { useRef } from "react";
import { TreeSelectPropsSpec as BaseTreeSelectPropsSpec } from "../generated/types/TreeSelect";
import { useState, useEffect , useRef } from "react";
import { RefTreeSelectType } from "@arco-design/web-react/es/TreeSelect";
const TreeSelectPropsSchema = Type.Object(BaseTreeSelectPropsSchema);
const TreeSelectStateSchema = Type.Object({
const TreeSelectPropsSpec = Type.Object(BaseTreeSelectPropsSpec);
const TreeSelectStateSpec = Type.Object({
selectedOptions: Type.String(),
});
const TreeSelectImpl: ComponentImpl<Static<typeof TreeSelectPropsSchema>> = (
const TreeSelectImpl: ComponentImpl<Static<typeof TreeSelectPropsSpec>> = (
props
) => {
const { defaultValue, ...cProps } = getComponentProps(props);
@ -60,7 +59,7 @@ const TreeSelectImpl: ComponentImpl<Static<typeof TreeSelectPropsSchema>> = (
);
};
const exampleProperties: Static<typeof TreeSelectPropsSchema> = {
const exampleProperties: Static<typeof TreeSelectPropsSpec> = {
multiple: false,
defaultValue: ["node1"],
treeData: [
@ -111,8 +110,8 @@ const options = {
exampleProperties,
},
spec: {
properties: TreeSelectPropsSchema,
state: TreeSelectStateSchema,
properties: TreeSelectPropsSpec,
state: TreeSelectStateSpec,
methods: {},
slots: [],
styleSlots: ["content"],

4
packages/arco-lib/src/generated/types/Alert.ts
View File

@ -2,7 +2,7 @@ import { Type } from '@sinclair/typebox';
import { Category } from '../../constants/category';
import { StringUnion } from '../../sunmao-helper';
export const AlertPropsSchema = {
export const AlertPropsSpec = {
disabled: Type.Boolean({
title:'Disabled',
category:Category.Basic
@ -38,4 +38,4 @@ export const AlertPropsSchema = {
title:'Closable',
category:Category.Basic
}),
}
}

2
packages/arco-lib/src/generated/types/Avatar.ts
View File

@ -3,7 +3,7 @@ import { Type } from "@sinclair/typebox";
import { Category } from "../../constants/category";
import { StringUnion } from '../../sunmao-helper';
export const AvatarPropsSchema = {
export const AvatarPropsSpec = {
shape: StringUnion(['circle', 'square'], {
title: 'Shape',
category: Category.Style

4
packages/arco-lib/src/generated/types/Badge.ts
View File

@ -3,7 +3,7 @@ import { Type } from '@sinclair/typebox';
import { Category } from '../../constants/category';
import { StringUnion } from '../../sunmao-helper';
export const BadgePropsSchema = {
export const BadgePropsSpec = {
text: Type.String({
title:'Text',
category: Category.Basic,
@ -31,4 +31,4 @@ export const BadgePropsSchema = {
description: 'Set the badge color in dot mode',
category: Category.Style,
}),
}
}

2
packages/arco-lib/src/generated/types/Button.ts
View File

@ -3,7 +3,7 @@ import { Type } from "@sinclair/typebox";
import { StringUnion } from '../../sunmao-helper';
import { Category } from '../../constants/category'
export const ButtonPropsSchema = {
export const ButtonPropsSpec = {
text: Type.String({
title:'Text',
category:Category.Basic,

10
packages/arco-lib/src/generated/types/Cascader.ts
View File

@ -2,22 +2,22 @@ import { Type } from '@sinclair/typebox';
import { StringUnion } from '../../sunmao-helper';
import { Category } from '../../constants/category';
export const CascaderValueSchema = Type.Array(
export const CascaderValueSpec = Type.Array(
Type.Union([Type.String(), Type.Array(Type.String())]),
{
title: 'Default Value',
category: Category.Data,
widget: 'core/v1/Expression',
widget: 'core/v1/expression',
}
);
export const CascaderPropsSchema = {
export const CascaderPropsSpec = {
options: Type.Array(Type.Array(Type.String()), {
title: 'Options',
weight: 10,
description: `An array of arrays`,
category: Category.Data,
widget: 'core/v1/Expression',
widget: 'core/v1/expression',
}),
expandTrigger: StringUnion(['click', 'hover'], {
title: 'Expand Trigger',
@ -64,5 +64,5 @@ export const CascaderPropsSchema = {
title: 'Max Tag Count',
category: Category.Basic,
}),
defaultValue: CascaderValueSchema,
defaultValue: CascaderValueSpec,
};

10
packages/arco-lib/src/generated/types/Checkbox.ts
View File

@ -2,7 +2,7 @@ import { Type } from '@sinclair/typebox';
import { Category } from '../../constants/category';
import { StringUnion } from '../../sunmao-helper';
export const CheckboxOptionSchema = Type.Array(
export const CheckboxOptionSpec = Type.Array(
Type.Object({
label: Type.String(),
value: Type.String(),
@ -12,16 +12,16 @@ export const CheckboxOptionSchema = Type.Array(
{
title: 'Options',
category: Category.Data,
widget: 'core/v1/Expression',
widget: 'core/v1/expression',
}
);
export const CheckboxPropsSchema = {
options: CheckboxOptionSchema,
export const CheckboxPropsSpec = {
options: CheckboxOptionSpec,
defaultCheckedValues: Type.Array(Type.String(), {
title: 'Default Value',
category: Category.Data,
widget: 'expression',
widget: 'core/v1/expression',
}),
direction: StringUnion(['horizontal', 'vertical'], {
title: 'Direction',

4
packages/arco-lib/src/generated/types/Collapse.ts
View File

@ -3,7 +3,7 @@ import { Type } from '@sinclair/typebox';
import { Category } from '../../constants/category';
import { StringUnion } from '../../sunmao-helper';
export const CollapsePropsSchema = {
export const CollapsePropsSpec = {
defaultActiveKey: Type.Array(Type.String(), {
title:'Default Active Key',
category: Category.Basic
@ -22,7 +22,7 @@ export const CollapsePropsSchema = {
})
}
export const CollapseItemPropsSchema = {
export const CollapseItemPropsSpec = {
name: Type.String({
title:'Name',
category: Category.Basic,

2
packages/arco-lib/src/generated/types/Divider.ts
View File

@ -2,7 +2,7 @@
import { Category } from '../../constants/category';
import { StringUnion } from '../../sunmao-helper';
export const DividerPropsSchema = {
export const DividerPropsSpec = {
type: StringUnion(['vertical', 'horizontal'], {
category: Category.Layout
}),

2
packages/arco-lib/src/generated/types/Dropdown.ts
View File

@ -3,7 +3,7 @@ import { Type } from "@sinclair/typebox";
import { Category } from "../../constants/category";
import { StringUnion } from '../../sunmao-helper';
export const DropdownPropsSchema = {
export const DropdownPropsSpec = {
dropdownType: StringUnion(['default', 'button'], {
title:'Type',
category: Category.Basic

8
packages/arco-lib/src/generated/types/Form.ts
View File

@ -1,10 +1,10 @@
import { Type } from "@sinclair/typebox";
import { StringUnion } from '../../sunmao-helper';
import { Category } from '../../constants/category';
import { TextPropertySchema } from "@sunmao-ui/runtime";
import { TextPropertySpec } from "@sunmao-ui/runtime";
export const FormControlPropsSchema = {
label: TextPropertySchema,
export const FormControlPropsSpec = {
label: TextPropertySpec,
required: Type.Boolean({
title: 'Required',
category: Category.Basic
@ -53,7 +53,7 @@ export const FormControlPropsSchema = {
})
}
export const FormPropsSchema = {
export const FormPropsSpec = {
inline: Type.Boolean({
title: 'Inline',
category: Category.Layout

2
packages/arco-lib/src/generated/types/Image.ts
View File

@ -3,7 +3,7 @@ import { Type } from "@sinclair/typebox";
import { Category } from "../../constants/category";
import { StringUnion } from '../../sunmao-helper';
export const ImagePropsSchema = {
export const ImagePropsSpec = {
src: Type.String({
title:'Src',
category: Category.Basic

2
packages/arco-lib/src/generated/types/Input.ts
View File

@ -3,7 +3,7 @@ import { Type } from "@sinclair/typebox";
import { StringUnion } from '../../sunmao-helper';
import { Category } from '../../constants/category'
export const InputPropsSchema = {
export const InputPropsSpec = {
defaultValue: Type.String({
title:'Default Value',
category:Category.Basic,

2
packages/arco-lib/src/generated/types/Layout.ts
View File

@ -3,7 +3,7 @@ import { Type } from "@sinclair/typebox";
import { StringUnion } from '../../sunmao-helper';
import { Category } from '../../constants/category'
export const SiderPropsSchema = {
export const SiderPropsSpec = {
theme: StringUnion(['dark', 'light'],{
category:Category.Style
}),

2
packages/arco-lib/src/generated/types/Link.ts
View File

@ -3,7 +3,7 @@ import { StringUnion } from '../../sunmao-helper';
import { Category } from '../../constants/category'
export const LinkPropsSchema = {
export const LinkPropsSpec = {
href: Type.String({
title:'Href',
category: Category.Basic,

4
packages/arco-lib/src/generated/types/Mentions.ts
View File

@ -2,12 +2,12 @@ import { Type } from '@sinclair/typebox';
import { Category } from '../../constants/category';
import { StringUnion } from '../../sunmao-helper';
export const MentionsPropsSchema = {
export const MentionsPropsSpec = {
options: Type.Array(Type.String(), {
title: 'Options',
weight: 3,
category: Category.Data,
widget: 'core/v1/Expression',
widget: 'core/v1/expression',
}),
defaultValue: Type.String({
title: 'Default Value',

2
packages/arco-lib/src/generated/types/Menu.ts
View File

@ -3,7 +3,7 @@ import { StringUnion } from '../../sunmao-helper';
import { Category } from '../../constants/category';
// TODO properties can be further optimise and supplemented
export const MenuPropsSchema = {
export const MenuPropsSpec = {
// theme: StringUnion(['dark', 'light'], {
// title: 'theme',
// category: Category.Style,

2
packages/arco-lib/src/generated/types/Modal.ts
View File

@ -3,7 +3,7 @@ import { Type } from '@sinclair/typebox';
import { Category } from '../../constants/category'
export const ModalPropsSchema = {
export const ModalPropsSpec = {
title: Type.String({
title:'Title',
category:Category.Basic,

2
packages/arco-lib/src/generated/types/Pagination.ts
View File

@ -3,7 +3,7 @@ import { Type } from "@sinclair/typebox";
import { StringUnion } from '../../sunmao-helper';
import { Category } from '../../constants/category'
export const PaginationPropsSchema = {
export const PaginationPropsSpec = {
pageSize: Type.Number({
title:'Page Size',
category:Category.Basic,

2
packages/arco-lib/src/generated/types/PasswordInput.ts
View File

@ -3,7 +3,7 @@ import { Type } from "@sinclair/typebox";
import { StringUnion } from '../../sunmao-helper';
import { Category } from '../../constants/category'
export const PasswordInputPropsSchema = {
export const PasswordInputPropsSpec = {
placeholder: Type.String({
title: 'Placeholder',
category: Category.Basic,

4
packages/arco-lib/src/generated/types/Popover.ts
View File

@ -4,7 +4,7 @@ import { StringUnion } from '../../sunmao-helper';
import { Category } from '../../constants/category'
export const PopoverPropsSchema = {
export const PopoverPropsSpec = {
title: Type.String({
title:'Title',
category: Category.Basic,
@ -29,4 +29,4 @@ export const PopoverPropsSchema = {
title:'Controlled',
category: Category.Basic,
})
}
}

4
packages/arco-lib/src/generated/types/Progress.ts
View File

@ -4,7 +4,7 @@ import { StringUnion } from '../../sunmao-helper';
import { Category } from '../../constants/category'
export const ProgressPropsSchema = {
export const ProgressPropsSpec = {
percent: Type.Number({
title:'Percent',
category:Category.Basic
@ -38,4 +38,4 @@ export const ProgressPropsSchema = {
title:'Size',
category:Category.Style
}),
}
}

6
packages/arco-lib/src/generated/types/Radio.ts
View File

@ -2,17 +2,17 @@ import { Type } from '@sinclair/typebox';
import { StringUnion } from '../../sunmao-helper';
import { Category } from '../../constants/category';
const RadioItemSchema = Type.Object({
const RadioItemSpec = Type.Object({
value: Type.String(),
label: Type.String(),
disabled: Type.Optional(Type.Boolean()),
});
export const RadioPropsSchema = {
export const RadioPropsSpec = {
defaultCheckedValue: Type.String({
category: Category.Data,
}),
options: Type.Array(RadioItemSchema, {
options: Type.Array(RadioItemSpec, {
category: Category.Data,
}),
type: StringUnion(['radio', 'button'], {

4
packages/arco-lib/src/generated/types/Select.ts
View File

@ -2,7 +2,7 @@ import { Type } from '@sinclair/typebox';
import { StringUnion } from '../../sunmao-helper';
import { Category } from '../../constants/category';
export const SelectPropsSchema = {
export const SelectPropsSpec = {
defaultValue: Type.String({
title: 'Default Value',
category: Category.Data,
@ -24,7 +24,7 @@ export const SelectPropsSchema = {
{
title: 'Options',
category: Category.Data,
widget: 'expression',
widget: 'core/v1/expression',
}
),
multiple: Type.Boolean({

10
packages/arco-lib/src/generated/types/Skeleton.ts
View File

@ -3,7 +3,7 @@ import { StringUnion } from "../../sunmao-helper";
import { Category } from '../../constants/category'
export const SkeletonTextPropsSchema = {
export const SkeletonTextPropsSpec = {
rows: Type.Number(),
width: Type.Optional(
Type.Union([
@ -16,13 +16,13 @@ export const SkeletonTextPropsSchema = {
),
};
export const SkeletonImagePropsSchema = {
export const SkeletonImagePropsSpec = {
shape: StringUnion(["circle", "square"]),
size: StringUnion(["small", "default", "large"]),
position: StringUnion(["left", "right"]),
};
export const SkeletonPropsSchema = {
export const SkeletonPropsSpec = {
animation: Type.Boolean({
title:'Animation',
category:Category.Basic
@ -32,12 +32,12 @@ export const SkeletonPropsSchema = {
category:Category.Basic
}),
// TODO remove union type
image: Type.Union([Type.Boolean(), Type.Object(SkeletonImagePropsSchema)],{
image: Type.Union([Type.Boolean(), Type.Object(SkeletonImagePropsSpec)],{
title:'Image Placeholder',
description:'Whether to show the picture placeholder',
category:Category.Basic
}),
text: Type.Union([Type.Boolean(), Type.Object(SkeletonTextPropsSchema)],{
text: Type.Union([Type.Boolean(), Type.Object(SkeletonTextPropsSpec)],{
title:'Text Placeholder',
description:'Whether to show text placeholder',
category:Category.Basic

2
packages/arco-lib/src/generated/types/Space.ts
View File

@ -3,7 +3,7 @@ import { Type } from "@sinclair/typebox";
import { Category } from "../../constants/category";
import { StringUnion } from '../../sunmao-helper';
export const SpacePropsSchema = {
export const SpacePropsSpec = {
align: StringUnion(['start', 'end', 'center', 'baseline'], {
category: Category.Layout
}),

6
packages/arco-lib/src/generated/types/Steps.ts
View File

@ -3,12 +3,12 @@ import { Type } from "@sinclair/typebox";
import { Category } from "../../constants/category";
import { StringUnion } from '../../sunmao-helper';
export const StepItemSchema = Type.Object({
export const StepItemSpec = Type.Object({
title: Type.String(),
description: Type.String()
})
export const StepsPropsSchema = {
export const StepsPropsSpec = {
type: StringUnion(['default', 'arrow', 'dot', 'navigation'], {
title: 'Type',
category: Category.Basic
@ -33,7 +33,7 @@ export const StepsPropsSchema = {
title: 'Lineless',
category: Category.Style
}),
items: Type.Array(StepItemSchema, {
items: Type.Array(StepItemSpec, {
title: 'Items',
category: Category.Basic,
weight: 10

4
packages/arco-lib/src/generated/types/Switch.ts
View File

@ -3,7 +3,7 @@ import { Type } from '@sinclair/typebox';
import { Category } from '../../constants/category';
import { StringUnion } from '../../sunmao-helper';
export const SwitchPropsSchema = {
export const SwitchPropsSpec = {
defaultChecked:Type.Boolean({
title:'Default Checked',
category:Category.Basic,
@ -24,4 +24,4 @@ export const SwitchPropsSchema = {
title:'Loading',
category:Category.Basic,
}),
}
}

12
packages/arco-lib/src/generated/types/Table.ts
View File

@ -1,9 +1,9 @@
import { Type } from '@sinclair/typebox';
import { StringUnion } from '../../sunmao-helper';
import { EventHandlerSchema, ModuleSchema } from '@sunmao-ui/runtime';
import { EventHandlerSpec, ModuleSpec } from '@sunmao-ui/runtime';
import { Category } from '../../constants/category';
export const ColumnSchema = Type.Object({
export const ColumnSpec = Type.Object({
title: Type.String({
title: 'Title',
category: Category.Basic,
@ -42,19 +42,19 @@ export const ColumnSchema = Type.Object({
btnCfg: Type.Optional(
Type.Object({
text: Type.String(),
handlers: Type.Array(EventHandlerSchema),
handlers: Type.Array(EventHandlerSpec),
})
),
module: Type.Optional(ModuleSchema),
module: Type.Optional(ModuleSpec),
});
export const TablePropsSchema = Type.Object({
export const TablePropsSpec = Type.Object({
data: Type.Array(Type.Any(), {
title: 'Data',
category: Category.Data,
weight: 0,
}),
columns: Type.Array(ColumnSchema, {
columns: Type.Array(ColumnSpec, {
title: 'Columns',
widget: 'ColumnsForm',
description: '',

2
packages/arco-lib/src/generated/types/Tabs.ts
View File

@ -2,7 +2,7 @@ import { Type } from '@sinclair/typebox';
import { StringUnion } from '../../sunmao-helper';
import { Category } from '../../constants/category';
export const TabsPropsSchema = {
export const TabsPropsSpec = {
defaultActiveTab: Type.String({
title: 'Default Active Tab Index',
category: Category.Basic,

2
packages/arco-lib/src/generated/types/TextArea.ts
View File

@ -3,7 +3,7 @@ import { Type } from "@sinclair/typebox";
import { StringUnion } from '../../sunmao-helper';
import { Category } from '../../constants/category'
export const TextAreaPropsSchema = {
export const TextAreaPropsSpec = {
defaultValue: Type.String({
title: 'Default Value',
category: Category.Basic,

6
packages/arco-lib/src/generated/types/Timeline.ts
View File

@ -3,7 +3,7 @@ import { StringUnion } from '../../sunmao-helper';
import { Category } from '../../constants/category';
export const TimelineItemPropsSchema = {
export const TimelineItemPropsSpec = {
label: Type.String(),
content: Type.String(),
dotColor: Type.String(),
@ -12,9 +12,9 @@ export const TimelineItemPropsSchema = {
dotType: StringUnion(['hollow', 'solid'])
}
export const TimelinePropsSchema = {
export const TimelinePropsSpec = {
items: Type.Array(Type.Object(
TimelineItemPropsSchema
TimelineItemPropsSpec
),{
category:Category.Data
}),

2
packages/arco-lib/src/generated/types/Tooltip.ts
View File

@ -3,7 +3,7 @@ import { Type } from '@sinclair/typebox';
import { Category } from '../../constants/category';
import { StringUnion } from '../../sunmao-helper';
export const TooltipPropsSchema = {
export const TooltipPropsSpec = {
color: Type.String({
title:'Color',
category: Category.Style

6
packages/arco-lib/src/generated/types/Tree.ts
View File

@ -2,7 +2,7 @@ import { Type } from "@sinclair/typebox";
import { Category } from "../../constants/category";
import { StringUnion } from "../../sunmao-helper";
export const TreeNodeSchema = Type.Object({
export const TreeNodeSpec = Type.Object({
title: Type.String(),
key: Type.String(),
children: Type.Optional(Type.Array(Type.Any())),
@ -11,8 +11,8 @@ export const TreeNodeSchema = Type.Object({
path:Type.Optional(Type.Array(Type.String()))
});
export const TreePropsSchema = Type.Object({
data: Type.Array(TreeNodeSchema, {
export const TreePropsSpec = Type.Object({
data: Type.Array(TreeNodeSpec, {
category: Category.Data,
title: "Tree Data",
}),

6
packages/arco-lib/src/generated/types/TreeSelect.ts
View File

@ -2,7 +2,7 @@ import { Type } from '@sinclair/typebox';
import { Category } from '../../constants/category';
import { StringUnion } from '../../sunmao-helper';
export const TreeSelectPropsSchema = {
export const TreeSelectPropsSpec = {
treeData: Type.Array(
Type.Object({
key: Type.String(),
@ -13,13 +13,13 @@ export const TreeSelectPropsSchema = {
{
title: 'Options',
category: Category.Data,
widget: 'core/v1/Expression',
widget: 'core/v1/expression',
}
),
defaultValue: Type.Array(Type.String(), {
title: 'Default Value',
category: Category.Data,
widget: 'core/v1/Expression',
widget: 'core/v1/expression',
}),
multiple: Type.Boolean({
title: 'Multiple',

6
packages/chakra-ui-lib/src/components/Box.tsx
View File

@ -5,7 +5,7 @@ import { pick } from 'lodash-es';
import { css } from '@emotion/css';
import { LAYOUT, BACKGROUND, BORDER } from './constants/category';
const StyleSchema = Type.Partial(
const StyleSpec = Type.Partial(
Type.Object({
// Layout
w: Type.Union([Type.String(), Type.Number()], {
@ -101,7 +101,7 @@ const StyleSchema = Type.Partial(
}),
})
);
const StyleProps = Object.keys(StyleSchema.properties);
const StyleProps = Object.keys(StyleSpec.properties);
export default implementRuntimeComponent({
version: 'chakra_ui/v1',
@ -141,7 +141,7 @@ export default implementRuntimeComponent({
},
},
spec: {
properties: StyleSchema,
properties: StyleSpec,
state: Type.Object({}),
methods: {},
slots: ['content'],

16
packages/chakra-ui-lib/src/components/Button.tsx
View File

@ -2,22 +2,22 @@ import { useEffect, useRef } from 'react';
import { css } from '@emotion/css';
import { Type } from '@sinclair/typebox';
import { Button as BaseButton } from '@chakra-ui/react';
import { Text, TextPropertySchema, implementRuntimeComponent } from '@sunmao-ui/runtime';
import { getColorSchemePropertySchema } from './Types/ColorScheme';
import { Text, TextPropertySpec, implementRuntimeComponent } from '@sunmao-ui/runtime';
import { getColorSchemePropertySpec } from './Types/ColorScheme';
import { BEHAVIOR, APPEARANCE } from './constants/category';
const StateSchema = Type.Object({
const StateSpec = Type.Object({
value: Type.String(),
});
const PropsSchema = Type.Object({
text: TextPropertySchema,
const PropsSpec = Type.Object({
text: TextPropertySpec,
isLoading: Type.Boolean({
title: 'Loading',
description: 'Whether the button is in a loading state',
category: BEHAVIOR,
}),
colorScheme: getColorSchemePropertySchema({
colorScheme: getColorSchemePropertySpec({
title: 'Color Scheme',
category: APPEARANCE,
}),
@ -45,8 +45,8 @@ export default implementRuntimeComponent({
},
},
spec: {
properties: PropsSchema,
state: StateSchema,
properties: PropsSpec,
state: StateSpec,
methods: {
click: undefined,
},

28
packages/chakra-ui-lib/src/components/Checkbox.tsx
View File

@ -1,16 +1,16 @@
import { useState, useEffect } from 'react';
import { Static, Type } from '@sinclair/typebox';
import { Checkbox as BaseCheckbox, useCheckboxGroupContext } from '@chakra-ui/react';
import { implementRuntimeComponent, Text, TextPropertySchema } from '@sunmao-ui/runtime';
import { getColorSchemePropertySchema } from './Types/ColorScheme';
import { implementRuntimeComponent, Text, TextPropertySpec } from '@sunmao-ui/runtime';
import { getColorSchemePropertySpec } from './Types/ColorScheme';
import { css } from '@emotion/css';
import { BASIC, BEHAVIOR, LAYOUT, APPEARANCE } from './constants/category';
export const IsDisabledSchema = Type.Boolean({
export const IsDisabledSpec = Type.Boolean({
title: 'Disabled',
category: BEHAVIOR,
});
export const SizePropertySchema = Type.KeyOf(
export const SizePropertySpec = Type.KeyOf(
Type.Object({
sm: Type.String(),
md: Type.String(),
@ -22,14 +22,14 @@ export const SizePropertySchema = Type.KeyOf(
}
);
export const CheckboxStateSchema = Type.Object({
export const CheckboxStateSpec = Type.Object({
value: Type.Union([Type.String(), Type.Number()]),
text: Type.String(),
checked: Type.Boolean(),
});
const PropsSchema = Type.Object({
text: TextPropertySchema,
const PropsSpec = Type.Object({
text: TextPropertySpec,
value: Type.Union([Type.String(), Type.Number()], {
title: 'Value',
description: 'The value of the checkbox which is used by check group.',
@ -39,7 +39,7 @@ const PropsSchema = Type.Object({
title: 'Default Checked',
category: BASIC,
}),
isDisabled: IsDisabledSchema,
isDisabled: IsDisabledSpec,
isFocusable: Type.Boolean({
title: 'Focusable',
category: BEHAVIOR,
@ -60,8 +60,8 @@ const PropsSchema = Type.Object({
title: 'Spacing',
category: LAYOUT,
}),
size: SizePropertySchema,
colorScheme: getColorSchemePropertySchema({
size: SizePropertySpec,
colorScheme: getColorSchemePropertySpec({
title: 'Color Scheme',
category: APPEARANCE,
}),
@ -97,8 +97,8 @@ export default implementRuntimeComponent({
},
},
spec: {
properties: PropsSchema,
state: CheckboxStateSchema,
properties: PropsSpec,
state: CheckboxStateSpec,
methods: {},
slots: [],
styleSlots: ['content'],
@ -147,8 +147,8 @@ export default implementRuntimeComponent({
}, [setChecked, defaultIsChecked]);
const args: {
colorScheme?: Static<ReturnType<typeof getColorSchemePropertySchema>>;
size?: Static<typeof SizePropertySchema>;
colorScheme?: Static<ReturnType<typeof getColorSchemePropertySpec>>;
size?: Static<typeof SizePropertySpec>;
} = {};
if (colorScheme) args.colorScheme = colorScheme;

20
packages/chakra-ui-lib/src/components/CheckboxGroup.tsx
View File

@ -2,23 +2,23 @@ import { useState, useEffect } from 'react';
import { Type } from '@sinclair/typebox';
import { Box, CheckboxGroup as BaseCheckboxGroup } from '@chakra-ui/react';
import { implementRuntimeComponent } from '@sunmao-ui/runtime';
import { SizePropertySchema, IsDisabledSchema } from './Checkbox';
import { SizePropertySpec, IsDisabledSpec } from './Checkbox';
import { BASIC } from './constants/category';
const DefaultValueSchema = Type.Array(Type.Union([Type.String(), Type.Number()]), {
const DefaultValueSpec = Type.Array(Type.Union([Type.String(), Type.Number()]), {
title: 'Default Value',
description: 'The default value of the checkbox group to be checked',
category: BASIC,
});
const StateSchema = Type.Object({
value: DefaultValueSchema,
const StateSpec = Type.Object({
value: DefaultValueSpec,
});
const PropsSchema = Type.Object({
defaultValue: DefaultValueSchema,
isDisabled: IsDisabledSchema,
size: SizePropertySchema,
const PropsSpec = Type.Object({
defaultValue: DefaultValueSpec,
isDisabled: IsDisabledSpec,
size: SizePropertySpec,
});
export default implementRuntimeComponent({
@ -40,8 +40,8 @@ export default implementRuntimeComponent({
},
},
spec: {
properties: PropsSchema,
state: StateSchema,
properties: PropsSpec,
state: StateSpec,
methods: {},
slots: ['content'],
styleSlots: [],

14
packages/chakra-ui-lib/src/components/Dialog.tsx
View File

@ -12,32 +12,32 @@ import {
ModalOverlayProps,
} from '@chakra-ui/react';
import { Type } from '@sinclair/typebox';
import { getColorSchemePropertySchema } from './Types/ColorScheme';
import { getColorSchemePropertySpec } from './Types/ColorScheme';
import { BASIC, BEHAVIOR } from './constants/category';
const getHandleButtonPropertySchema = (options?: Record<string, any>) =>
const getHandleButtonPropertySpec = (options?: Record<string, any>) =>
Type.Object(
{
text: Type.String({
title: 'Text',
}),
colorScheme: getColorSchemePropertySchema({
colorScheme: getColorSchemePropertySpec({
title: 'Color Scheme',
}),
},
options
);
const PropsSchema = Type.Object({
const PropsSpec = Type.Object({
title: Type.String({
title: 'Title',
category: BASIC,
}),
confirmButton: getHandleButtonPropertySchema({
confirmButton: getHandleButtonPropertySpec({
title: 'Confirm Button',
category: BASIC,
}),
cancelButton: getHandleButtonPropertySchema({
cancelButton: getHandleButtonPropertySpec({
title: 'Cancel Button',
category: BASIC,
}),
@ -67,7 +67,7 @@ export default implementRuntimeComponent({
},
},
spec: {
properties: PropsSchema,
properties: PropsSpec,
state: Type.Object({}),
methods: {
openDialog: Type.Object({

4
packages/chakra-ui-lib/src/components/Form/Form.tsx
View File

@ -5,7 +5,7 @@ import { Button, VStack } from '@chakra-ui/react';
import { implementRuntimeComponent, watch } from '@sunmao-ui/runtime';
import { BEHAVIOR } from '../constants/category';
const PropsSchema = Type.Object({
const PropsSpec = Type.Object({
hideSubmit: Type.Boolean({
title: 'Hide Submit',
category: BEHAVIOR,
@ -29,7 +29,7 @@ export default implementRuntimeComponent({
},
},
spec: {
properties: PropsSchema,
properties: PropsSpec,
state: Type.Object({
data: Type.Any(),
disableSubmit: Type.Boolean(),

8
packages/chakra-ui-lib/src/components/Form/FormControl.tsx
View File

@ -11,7 +11,7 @@ import {
} from '@chakra-ui/react';
import { css } from '@emotion/css';
import { implementRuntimeComponent, watch } from '@sunmao-ui/runtime';
import { CheckboxStateSchema } from '../Checkbox';
import { CheckboxStateSpec } from '../Checkbox';
import { BASIC, BEHAVIOR } from '../constants/category';
const FormItemCSS = {
@ -19,7 +19,7 @@ const FormItemCSS = {
width: '66%',
};
const PropsSchema = Type.Object({
const PropsSpec = Type.Object({
label: Type.String({
title: 'Label',
category: BASIC,
@ -58,7 +58,7 @@ export default implementRuntimeComponent({
},
},
spec: {
properties: PropsSchema,
properties: PropsSpec,
state: Type.Object({
inputId: Type.String(),
fieldName: Type.String(),
@ -105,7 +105,7 @@ export default implementRuntimeComponent({
if (!inputState) return '';
if (inputState.checked !== undefined) {
// special treatment for checkbox
return (inputState as Static<typeof CheckboxStateSchema>).checked;
return (inputState as Static<typeof CheckboxStateSpec>).checked;
} else {
return inputState.value;
}

24
packages/chakra-ui-lib/src/components/HStack.tsx
View File

@ -3,19 +3,19 @@ import { Type } from '@sinclair/typebox';
import { HStack as BaseHStack } from '@chakra-ui/react';
import { implementRuntimeComponent } from '@sunmao-ui/runtime';
import {
DirectionSchema,
FlexWrapSchema,
AlignItemsSchema,
JustifyContentSchema,
SpacingSchema,
DirectionSpec,
FlexWrapSpec,
AlignItemsSpec,
JustifyContentSpec,
SpacingSpec,
} from './Stack';
const PropsSchema = Type.Object({
direction: DirectionSchema,
wrap: FlexWrapSchema,
align: AlignItemsSchema,
justify: JustifyContentSchema,
spacing: SpacingSchema,
const PropsSpec = Type.Object({
direction: DirectionSpec,
wrap: FlexWrapSpec,
align: AlignItemsSpec,
justify: JustifyContentSpec,
spacing: SpacingSpec,
});
export default implementRuntimeComponent({
@ -39,7 +39,7 @@ export default implementRuntimeComponent({
},
},
spec: {
properties: PropsSchema,
properties: PropsSpec,
state: Type.Object({}),
slots: ['content'],
styleSlots: ['content'],

26
packages/chakra-ui-lib/src/components/Image.tsx
View File

@ -4,7 +4,7 @@ import { Type } from '@sinclair/typebox';
import { implementRuntimeComponent } from '@sunmao-ui/runtime';
import { BASIC, LAYOUT, BEHAVIOR, APPEARANCE } from './constants/category';
const BoxSizePropertySchema = Type.Union(
const BoxSizePropertySpec = Type.Union(
[
Type.KeyOf(
Type.Object({
@ -22,7 +22,7 @@ const BoxSizePropertySchema = Type.Union(
}
);
const GlobalCssSchema = Type.KeyOf(
const GlobalCssSpec = Type.KeyOf(
Type.Object({
'-moz-initial': Type.String(),
inherit: Type.String(),
@ -32,9 +32,9 @@ const GlobalCssSchema = Type.KeyOf(
})
);
const ObjectFitSchema = Type.Union(
const ObjectFitSpec = Type.Union(
[
GlobalCssSchema,
GlobalCssSpec,
Type.KeyOf(
Type.Object({
contain: Type.String(),
@ -52,9 +52,9 @@ const ObjectFitSchema = Type.Union(
}
);
const BorderRadiusSchema = Type.Union(
const BorderRadiusSpec = Type.Union(
[
GlobalCssSchema,
GlobalCssSpec,
Type.Number(),
Type.String(),
Type.KeyOf(
@ -77,11 +77,11 @@ const BorderRadiusSchema = Type.Union(
}
);
const StateSchema = Type.Object({
const StateSpec = Type.Object({
value: Type.String(),
});
const PropsSchema = Type.Object({
const PropsSpec = Type.Object({
// basic
src: Type.String({
title: 'Src',
@ -104,7 +104,7 @@ const PropsSchema = Type.Object({
description: 'Whether to ignore the fallback image when the src fails to load',
category: BEHAVIOR,
}),
objectFit: ObjectFitSchema,
objectFit: ObjectFitSpec,
crossOrigin: Type.KeyOf(
Type.Object({
anonymous: Type.String(),
@ -126,8 +126,8 @@ const PropsSchema = Type.Object({
category: LAYOUT,
}),
// style
boxSize: BoxSizePropertySchema,
borderRadius: BorderRadiusSchema,
boxSize: BoxSizePropertySpec,
borderRadius: BorderRadiusSpec,
});
export default implementRuntimeComponent({
@ -156,8 +156,8 @@ export default implementRuntimeComponent({
},
},
spec: {
properties: PropsSchema,
state: StateSchema,
properties: PropsSpec,
state: StateSpec,
methods: {},
slots: [],
styleSlots: ['content'],

14
packages/chakra-ui-lib/src/components/Input.tsx
View File

@ -12,7 +12,7 @@ import { implementRuntimeComponent } from '@sunmao-ui/runtime';
import { css } from '@emotion/css';
import { BASIC, APPEARANCE, BEHAVIOR } from './constants/category';
const getAppendElementPropertySchema = (options?: Record<string, any>) =>
const getAppendElementPropertySpec = (options?: Record<string, any>) =>
Type.Optional(
Type.Union(
[
@ -43,11 +43,11 @@ const getAppendElementPropertySchema = (options?: Record<string, any>) =>
)
);
const StateSchema = Type.Object({
const StateSpec = Type.Object({
value: Type.String(),
});
const PropsSchema = Type.Object({
const PropsSpec = Type.Object({
defaultValue: Type.String({
title: 'Default Value',
category: BASIC,
@ -88,11 +88,11 @@ const PropsSchema = Type.Object({
category: APPEARANCE,
}
),
left: getAppendElementPropertySchema({
left: getAppendElementPropertySpec({
title: 'Left Append',
category: APPEARANCE,
}),
right: getAppendElementPropertySchema({
right: getAppendElementPropertySpec({
title: 'Right Append',
category: APPEARANCE,
}),
@ -125,8 +125,8 @@ export default implementRuntimeComponent({
},
},
spec: {
properties: PropsSchema,
state: StateSchema,
properties: PropsSpec,
state: StateSpec,
methods: {
setInputValue: Type.Object({
value: Type.String(),

12
packages/chakra-ui-lib/src/components/Kbd.tsx
View File

@ -1,15 +1,15 @@
import { useEffect } from 'react';
import { Kbd as BaseKbd } from '@chakra-ui/react';
import { Type } from '@sinclair/typebox';
import { implementRuntimeComponent, Text, TextPropertySchema } from '@sunmao-ui/runtime';
import { implementRuntimeComponent, Text, TextPropertySpec } from '@sunmao-ui/runtime';
import { css } from '@emotion/css';
const StateSchema = Type.Object({
const StateSpec = Type.Object({
value: Type.String(),
});
const PropsSchema = Type.Object({
text: TextPropertySchema,
const PropsSpec = Type.Object({
text: TextPropertySpec,
});
export default implementRuntimeComponent({
@ -32,8 +32,8 @@ export default implementRuntimeComponent({
},
},
spec: {
properties: PropsSchema,
state: StateSchema,
properties: PropsSpec,
state: StateSpec,
methods: {},
slots: [],
styleSlots: ['content'],

8
packages/chakra-ui-lib/src/components/Link.tsx
View File

@ -1,11 +1,11 @@
import { Link } from '@chakra-ui/react';
import { css } from '@emotion/css';
import { Type } from '@sinclair/typebox';
import { implementRuntimeComponent, Text, TextPropertySchema } from '@sunmao-ui/runtime';
import { implementRuntimeComponent, Text, TextPropertySpec } from '@sunmao-ui/runtime';
import { BASIC, BEHAVIOR } from './constants/category';
const PropsSchema = Type.Object({
text: TextPropertySchema,
const PropsSpec = Type.Object({
text: TextPropertySpec,
href: Type.String({
title: 'Href',
description: 'The URL to link to.',
@ -40,7 +40,7 @@ export default implementRuntimeComponent({
},
},
spec: {
properties: PropsSchema,
properties: PropsSpec,
state: Type.Object({}),
methods: {},
slots: [],

8
packages/chakra-ui-lib/src/components/List.tsx
View File

@ -4,18 +4,18 @@ import {
implementRuntimeComponent,
LIST_ITEM_EXP,
LIST_ITEM_INDEX_EXP,
ModuleSchema,
ModuleSpec,
ModuleRenderer,
} from '@sunmao-ui/runtime';
import { css } from '@emotion/css';
import { BASIC } from './constants/category';
const PropsSchema = Type.Object({
const PropsSpec = Type.Object({
listData: Type.Array(Type.Record(Type.String(), Type.String()), {
title: 'Data',
category: BASIC,
}),
template: ModuleSchema,
template: ModuleSpec,
});
const exampleProperties = {
@ -53,7 +53,7 @@ export default implementRuntimeComponent({
},
},
spec: {
properties: PropsSchema,
properties: PropsSpec,
methods: {},
state: Type.Object({}),
slots: [],

14
packages/chakra-ui-lib/src/components/MultiSelect.tsx
View File

@ -6,11 +6,11 @@ import { Box } from '@chakra-ui/react';
import { css } from '@emotion/css';
import { BASIC, BEHAVIOR, APPEARANCE } from './constants/category';
const StateSchema = Type.Object({
const StateSpec = Type.Object({
value: Type.Array(Type.String()),
});
const OptionsSchema = Type.Array(
const OptionsSpec = Type.Array(
Type.Object({
label: Type.String({
title: 'Label',
@ -25,8 +25,8 @@ const OptionsSchema = Type.Array(
}
);
const PropsSchema = Type.Object({
options: OptionsSchema,
const PropsSpec = Type.Object({
options: OptionsSpec,
placeholder: Type.String({
title: 'Placeholder',
category: BASIC,
@ -112,8 +112,8 @@ export default implementRuntimeComponent({
},
},
spec: {
properties: PropsSchema,
state: StateSchema,
properties: PropsSpec,
state: StateSpec,
methods: {},
slots: [],
styleSlots: ['content'],
@ -137,7 +137,7 @@ export default implementRuntimeComponent({
mergeState({ value: newValue });
}, [defaultValue, mergeState]);
const onChange = (options: Static<typeof OptionsSchema>) => {
const onChange = (options: Static<typeof OptionsSpec>) => {
const newValue = options.map(o => o.value);
mergeState({ value: newValue });
};

8
packages/chakra-ui-lib/src/components/NumberInput.tsx
View File

@ -11,7 +11,7 @@ import { implementRuntimeComponent } from '@sunmao-ui/runtime';
import { css } from '@emotion/css';
import { BASIC, BEHAVIOR, APPEARANCE } from './constants/category';
const PropsSchema = Type.Object({
const PropsSpec = Type.Object({
defaultValue: Type.Number({
title: 'Default Value',
category: BASIC,
@ -101,7 +101,7 @@ const PropsSchema = Type.Object({
)),
});
const StateSchema = Type.Object({
const StateSpec = Type.Object({
value: Type.Number(),
});
@ -129,8 +129,8 @@ export default implementRuntimeComponent({
},
},
spec: {
properties: PropsSchema,
state: StateSchema,
properties: PropsSpec,
state: StateSpec,
methods: {
setInputValue: Type.Object({
value: Type.Number(),

16
packages/chakra-ui-lib/src/components/Radio.tsx
View File

@ -1,17 +1,17 @@
import { useEffect } from 'react';
import { Type } from '@sinclair/typebox';
import { Radio as BaseRadio } from '@chakra-ui/react';
import { implementRuntimeComponent, Text, TextPropertySchema } from '@sunmao-ui/runtime';
import { getColorSchemePropertySchema } from './Types/ColorScheme';
import { implementRuntimeComponent, Text, TextPropertySpec } from '@sunmao-ui/runtime';
import { getColorSchemePropertySpec } from './Types/ColorScheme';
import { css } from '@emotion/css';
import { BASIC, BEHAVIOR, APPEARANCE, LAYOUT } from './constants/category';
const StateSchema = Type.Object({
const StateSpec = Type.Object({
value: Type.Union([Type.String(), Type.Number()]),
});
const PropsSchema = Type.Object({
text: TextPropertySchema,
const PropsSpec = Type.Object({
text: TextPropertySpec,
value: Type.Union([Type.String(), Type.Number()], {
title: 'Value',
category: BASIC,
@ -44,7 +44,7 @@ const PropsSchema = Type.Object({
title: 'Spacing',
category: LAYOUT,
}),
colorScheme: getColorSchemePropertySchema({
colorScheme: getColorSchemePropertySpec({
title: 'Color Scheme',
category: APPEARANCE,
}),
@ -84,8 +84,8 @@ export default implementRuntimeComponent({
},
},
spec: {
properties: PropsSchema,
state: StateSchema,
properties: PropsSpec,
state: StateSpec,
methods: {},
slots: [],
styleSlots: ['content'],

8
packages/chakra-ui-lib/src/components/RadioGroup.tsx
View File

@ -5,11 +5,11 @@ import { implementRuntimeComponent } from '@sunmao-ui/runtime';
import { css } from '@emotion/css';
import { BASIC, BEHAVIOR } from './constants/category';
const StateSchema = Type.Object({
const StateSpec = Type.Object({
value: Type.Union([Type.String(), Type.Number()]),
});
const PropsSchema = Type.Object({
const PropsSpec = Type.Object({
defaultValue: Type.Union([Type.String(), Type.Number()], {
title: 'Default Value',
category: BASIC,
@ -39,8 +39,8 @@ export default implementRuntimeComponent({
},
},
spec: {
properties: PropsSchema,
state: StateSchema,
properties: PropsSpec,
state: StateSpec,
methods: {},
slots: ['content'],
styleSlots: ['content'],

8
packages/chakra-ui-lib/src/components/Select.tsx
View File

@ -5,11 +5,11 @@ import { implementRuntimeComponent } from '@sunmao-ui/runtime';
import { css } from '@emotion/css';
import { BASIC, BEHAVIOR, APPEARANCE } from './constants/category';
const StateSchema = Type.Object({
const StateSpec = Type.Object({
value: Type.String(),
});
const PropsSchema = Type.Object({
const PropsSpec = Type.Object({
options: Type.Array(
Type.Object({
label: Type.String({
@ -124,8 +124,8 @@ export default implementRuntimeComponent({
},
},
spec: {
properties: PropsSchema,
state: StateSchema,
properties: PropsSpec,
state: StateSpec,
methods: {},
slots: [],
styleSlots: ['content'],

24
packages/chakra-ui-lib/src/components/Stack.tsx
View File

@ -3,7 +3,7 @@ import { Stack as BaseStack } from '@chakra-ui/react';
import { implementRuntimeComponent } from '@sunmao-ui/runtime';
import { LAYOUT } from './constants/category';
export const DirectionSchema = Type.Union(
export const DirectionSpec = Type.Union(
[
Type.KeyOf(
Type.Object({
@ -29,7 +29,7 @@ export const DirectionSchema = Type.Union(
category: LAYOUT,
}
);
export const FlexWrapSchema = Type.KeyOf(
export const FlexWrapSpec = Type.KeyOf(
Type.Object({
nowrap: Type.String(),
wrap: Type.String(),
@ -40,25 +40,25 @@ export const FlexWrapSchema = Type.KeyOf(
category: LAYOUT,
}
);
export const AlignItemsSchema = Type.String({
export const AlignItemsSpec = Type.String({
title: 'Align Items',
category: LAYOUT,
});
export const JustifyContentSchema = Type.String({
export const JustifyContentSpec = Type.String({
title: 'Justify Content',
category: LAYOUT,
});
export const SpacingSchema = Type.Union([Type.String(), Type.Number()], {
export const SpacingSpec = Type.Union([Type.String(), Type.Number()], {
title: 'Spacing',
category: LAYOUT,
});
const PropsSchema = Type.Object({
direction: DirectionSchema,
wrap: FlexWrapSchema,
align: AlignItemsSchema,
justify: JustifyContentSchema,
spacing: SpacingSchema,
const PropsSpec = Type.Object({
direction: DirectionSpec,
wrap: FlexWrapSpec,
align: AlignItemsSpec,
justify: JustifyContentSpec,
spacing: SpacingSpec,
});
export default implementRuntimeComponent({
@ -79,7 +79,7 @@ export default implementRuntimeComponent({
},
},
spec: {
properties: PropsSchema,
properties: PropsSpec,
state: Type.Object({}),
methods: {},
slots: ['content'],

8
packages/chakra-ui-lib/src/components/Switch.tsx
View File

@ -5,7 +5,7 @@ import { implementRuntimeComponent } from '@sunmao-ui/runtime';
import { useEffect, useState } from 'react';
import { BASIC } from './constants/category';
const PropsSchema = Type.Object({
const PropsSpec = Type.Object({
size: Type.KeyOf(
Type.Object({
sm: Type.String(),
@ -24,7 +24,7 @@ const PropsSchema = Type.Object({
}),
});
const StateSchema = Type.Object({
const StateSpec = Type.Object({
value: Type.Boolean(),
});
@ -45,8 +45,8 @@ export default implementRuntimeComponent({
},
},
spec: {
properties: PropsSchema,
state: StateSchema,
properties: PropsSpec,
state: StateSpec,
methods: {},
slots: [],
styleSlots: ['content'],

4
packages/chakra-ui-lib/src/components/Table/Table.tsx
View File

@ -15,7 +15,7 @@ import { TablePagination } from './Pagination';
import { TableTd } from './TableTd';
import { implementTable } from './spec';
import { ColumnsPropertySchema } from './TableTypes';
import { ColumnsPropertySpec } from './TableTypes';
import { Static } from '@sinclair/typebox';
type SortRule = {
@ -193,7 +193,7 @@ export const TableImpl = implementTable(
key={column.key}
item={item}
onClickItem={() => selectItem(item)}
rawColumn={(component.properties.columns as Static<typeof ColumnsPropertySchema>)[j]}
rawColumn={(component.properties.columns as Static<typeof ColumnsPropertySpec>)[j]}
column={column}
services={services}
app={app}

6
packages/chakra-ui-lib/src/components/Table/TableTd.tsx
View File

@ -1,6 +1,6 @@
import { RuntimeApplication } from '@sunmao-ui/core';
import { Static } from '@sinclair/typebox';
import { ColumnSchema, ColumnsPropertySchema } from './TableTypes';
import { ColumnSpec, ColumnsPropertySpec } from './TableTypes';
import { Button, Link, Td, Text } from '@chakra-ui/react';
import {
LIST_ITEM_EXP,
@ -12,8 +12,8 @@ import {
export const TableTd: React.FC<{
index: number;
item: any;
column: Static<typeof ColumnSchema>;
rawColumn: Static<typeof ColumnsPropertySchema>[0]
column: Static<typeof ColumnSpec>;
rawColumn: Static<typeof ColumnsPropertySpec>[0]
onClickItem: () => void;
services: UIServices;
app?: RuntimeApplication;

26
packages/chakra-ui-lib/src/components/Table/TableTypes.ts
View File

@ -1,21 +1,21 @@
import { Type } from '@sinclair/typebox';
import { ModuleSchema, BaseEventSchema } from '@sunmao-ui/runtime';
import { ModuleSpec, BaseEventSpec } from '@sunmao-ui/runtime';
import { BASIC, APPEARANCE, BEHAVIOR } from '../constants/category';
export const MajorKeyPropertySchema = Type.String({
export const MajorKeyPropertySpec = Type.String({
title: 'Major key',
description: 'The key of the data item object to use as the major key',
category: BASIC,
});
export const RowsPerPagePropertySchema = Type.Number({
export const RowsPerPagePropertySpec = Type.Number({
title: 'Per Page Number',
category: BEHAVIOR,
});
export const DataPropertySchema = Type.Array(Type.Any(), {
export const DataPropertySpec = Type.Array(Type.Any(), {
title: 'Data',
category: BASIC,
});
export const TableSizePropertySchema = Type.KeyOf(
export const TableSizePropertySpec = Type.KeyOf(
Type.Object({
sm: Type.String(),
md: Type.String(),
@ -27,7 +27,7 @@ export const TableSizePropertySchema = Type.KeyOf(
}
);
export const TdTypeSchema = Type.KeyOf(
export const TdTypeSpec = Type.KeyOf(
Type.Object({
text: Type.String(),
image: Type.String(),
@ -40,7 +40,7 @@ export const TdTypeSchema = Type.KeyOf(
category: APPEARANCE,
}
);
export const ColumnSchema = Type.Object(
export const ColumnSpec = Type.Object(
{
key: Type.String({
title: 'Key',
@ -51,13 +51,13 @@ export const ColumnSchema = Type.Object(
displayValue: Type.String({
title: 'Display value',
}),
type: TdTypeSchema,
type: TdTypeSpec,
buttonConfig: Type.Object(
{
text: Type.String({
title: 'Button Text',
}),
handlers: Type.Array(Type.Object(BaseEventSchema, { widget: 'core/v1/Event' }), {
handlers: Type.Array(Type.Object(BaseEventSpec, { widget: 'core/v1/event' }), {
title: 'Button Handlers',
}),
},
@ -71,26 +71,26 @@ export const ColumnSchema = Type.Object(
],
}
),
module: { ...ModuleSchema, conditions: [{ key: 'type', value: 'module' }] },
module: { ...ModuleSpec, conditions: [{ key: 'type', value: 'module' }] },
},
{
title: 'Column',
}
);
export const ColumnsPropertySchema = Type.Array(ColumnSchema, {
export const ColumnsPropertySpec = Type.Array(ColumnSpec, {
title: 'Columns',
category: BASIC,
widgetOptions: {
displayedKeys: ['title'],
},
});
export const IsMultiSelectPropertySchema = Type.Boolean({
export const IsMultiSelectPropertySpec = Type.Boolean({
title: 'Enable Multiple Select',
category: BEHAVIOR,
});
export const TableStateSchema = Type.Object({
export const TableStateSpec = Type.Object({
selectedItem: Type.Optional(Type.Object({})),
selectedItems: Type.Array(Type.Object({})),
});

32
packages/chakra-ui-lib/src/components/Table/spec.ts
View File

@ -1,22 +1,22 @@
import { Type } from '@sinclair/typebox';
import { implementRuntimeComponent } from '@sunmao-ui/runtime';
import {
ColumnsPropertySchema,
DataPropertySchema,
MajorKeyPropertySchema,
RowsPerPagePropertySchema,
TableStateSchema,
TableSizePropertySchema,
IsMultiSelectPropertySchema,
ColumnsPropertySpec,
DataPropertySpec,
MajorKeyPropertySpec,
RowsPerPagePropertySpec,
TableStateSpec,
TableSizePropertySpec,
IsMultiSelectPropertySpec,
} from './TableTypes';
const PropsSchema = Type.Object({
data: DataPropertySchema,
majorKey: MajorKeyPropertySchema,
columns: ColumnsPropertySchema,
isMultiSelect: IsMultiSelectPropertySchema,
rowsPerPage: RowsPerPagePropertySchema,
size: TableSizePropertySchema,
const PropsSpec = Type.Object({
data: DataPropertySpec,
majorKey: MajorKeyPropertySpec,
columns: ColumnsPropertySpec,
isMultiSelect: IsMultiSelectPropertySpec,
rowsPerPage: RowsPerPagePropertySpec,
size: TableSizePropertySpec,
});
const exampleProperties = {
@ -59,8 +59,8 @@ export const implementTable = implementRuntimeComponent({
},
},
spec: {
properties: PropsSchema,
state: TableStateSchema,
properties: PropsSpec,
state: TableStateSpec,
methods: {},
slots: [],
styleSlots: [],

8
packages/chakra-ui-lib/src/components/Tabs.tsx
View File

@ -12,11 +12,11 @@ import { Type } from '@sinclair/typebox';
import { implementRuntimeComponent } from '@sunmao-ui/runtime';
import { BASIC } from './constants/category';
const StateSchema = Type.Object({
const StateSpec = Type.Object({
selectedTabIndex: Type.Number(),
});
const PropsSchema = Type.Object({
const PropsSpec = Type.Object({
tabNames: Type.Array(Type.String(), {
title: 'Tab Names',
category: BASIC,
@ -45,8 +45,8 @@ export default implementRuntimeComponent({
},
},
spec: {
properties: PropsSchema,
state: StateSchema,
properties: PropsSpec,
state: StateSpec,
methods: {},
// tab slot is dynamic
slots: ['content'],

12
packages/chakra-ui-lib/src/components/Tooltip.tsx
View File

@ -1,11 +1,11 @@
import { Type } from '@sinclair/typebox';
import { Tooltip } from '@chakra-ui/react';
import { implementRuntimeComponent, TextPropertySchema } from '@sunmao-ui/runtime';
import { getColorSchemePropertySchema } from './Types/ColorScheme';
import { implementRuntimeComponent, TextPropertySpec } from '@sunmao-ui/runtime';
import { getColorSchemePropertySpec } from './Types/ColorScheme';
import { BASIC, LAYOUT, BEHAVIOR, APPEARANCE } from './constants/category';
const PropsSchema = Type.Object({
text: TextPropertySchema,
const PropsSpec = Type.Object({
text: TextPropertySpec,
defaultIsOpen: Type.Boolean({
title: 'Default Is Open',
category: BASIC,
@ -49,7 +49,7 @@ const PropsSchema = Type.Object({
title: 'Has Arrow',
category: APPEARANCE,
}),
colorScheme: getColorSchemePropertySchema({
colorScheme: getColorSchemePropertySpec({
title: 'Color Scheme',
category: APPEARANCE,
}),
@ -79,7 +79,7 @@ export default implementRuntimeComponent({
},
},
spec: {
properties: PropsSchema,
properties: PropsSpec,
state: Type.Object({}),
methods: {},
slots: ['content'],

2
packages/chakra-ui-lib/src/components/Types/ColorScheme.ts
View File

@ -1,6 +1,6 @@
import { Type } from '@sinclair/typebox';
export const getColorSchemePropertySchema = (options?: Record<string, any>) =>
export const getColorSchemePropertySpec = (options?: Record<string, any>) =>
Type.KeyOf(
Type.Object({
whiteAlpha: Type.String(),

20
packages/chakra-ui-lib/src/components/Types/Toast.ts
View File

@ -15,7 +15,7 @@ const ToastPosition = Type.KeyOf(
defaultValue: 'top',
}
);
export const ToastOpenParameterSchema = Type.Object({
export const ToastOpenParameterSpec = Type.Object({
position: ToastPosition,
duration: Type.Number({ defaultValue: 1000 }),
title: Type.String(),
@ -46,15 +46,15 @@ export const ToastOpenParameterSchema = Type.Object({
id: Type.String(),
});
export const ToastCloseParameterSchema = Type.Object({
export const ToastCloseParameterSpec = Type.Object({
id: Type.String(),
positions: Type.Array(ToastPosition, {
defaultValue: []
}),
});
export type ToastOpenParameter = Static<typeof ToastOpenParameterSchema>;
export type ToastCloseParameter = Static<typeof ToastCloseParameterSchema>;
export type ToastOpenParameter = Static<typeof ToastOpenParameterSpec>;
export type ToastCloseParameter = Static<typeof ToastCloseParameterSpec>;
const pickProperty = <T, U extends Record<string, any>>(
schema: TObject<T>,
@ -70,20 +70,20 @@ const pickProperty = <T, U extends Record<string, any>>(
export default function ToastUtilMethodFactory() {
let toast: ReturnType<typeof createStandaloneToast> | undefined;
const toastOpen: UtilMethod<typeof ToastOpenParameterSchema> = {
const toastOpen: UtilMethod<typeof ToastOpenParameterSpec> = {
name: 'toast.open',
method(parameters) {
if (!toast) {
toast = createStandaloneToast();
}
if (parameters) {
toast(pickProperty(ToastOpenParameterSchema, parameters));
toast(pickProperty(ToastOpenParameterSpec, parameters));
}
},
parameters: ToastOpenParameterSchema,
parameters: ToastOpenParameterSpec,
};
const toastClose: UtilMethod<typeof ToastCloseParameterSchema> = {
const toastClose: UtilMethod<typeof ToastCloseParameterSpec> = {
name: 'toast.close',
method(parameters) {
if (!toast) {
@ -92,7 +92,7 @@ export default function ToastUtilMethodFactory() {
if (!parameters) {
toast.closeAll();
} else {
const closeParameters = pickProperty(ToastCloseParameterSchema, parameters);
const closeParameters = pickProperty(ToastCloseParameterSpec, parameters);
if (closeParameters.id !== undefined) {
toast.close(closeParameters.id);
} else {
@ -100,7 +100,7 @@ export default function ToastUtilMethodFactory() {
}
}
},
parameters: ToastCloseParameterSchema,
parameters: ToastCloseParameterSpec,
};
return [toastOpen, toastClose];
}

24
packages/chakra-ui-lib/src/components/VStack.tsx
View File

@ -3,19 +3,19 @@ import { Type } from '@sinclair/typebox';
import { VStack as BaseVStack } from '@chakra-ui/react';
import { implementRuntimeComponent } from '@sunmao-ui/runtime';
import {
DirectionSchema,
FlexWrapSchema,
AlignItemsSchema,
JustifyContentSchema,
SpacingSchema,
DirectionSpec,
FlexWrapSpec,
AlignItemsSpec,
JustifyContentSpec,
SpacingSpec,
} from './Stack';
const PropsSchema = Type.Object({
direction: DirectionSchema,
wrap: FlexWrapSchema,
align: AlignItemsSchema,
justify: JustifyContentSchema,
spacing: SpacingSchema,
const PropsSpec = Type.Object({
direction: DirectionSpec,
wrap: FlexWrapSpec,
align: AlignItemsSpec,
justify: JustifyContentSpec,
spacing: SpacingSpec,
});
export default implementRuntimeComponent({
@ -39,7 +39,7 @@ export default implementRuntimeComponent({
},
},
spec: {
properties: PropsSchema,
properties: PropsSpec,
state: Type.Object({}),
slots: ['content'],
styleSlots: ['content'],

18
packages/editor-sdk/src/components/Form/ArrayTable.tsx
View File

@ -9,7 +9,7 @@ import { ArrayButtonGroup } from './ArrayButtonGroup';
import { PopoverWidget } from '../Widgets/PopoverWidget';
import { WidgetProps } from '../../types';
import { isJSONSchema } from '../../utils/schema';
import { mergeWidgetOptionsIntoSchema } from '../../utils/widget';
import { mergeWidgetOptionsIntoSpec } from '../../utils/widget';
const TableWrapperStyle = css`
border: 1px solid var(--chakra-colors-gray-200);
@ -29,12 +29,12 @@ const TableRowStyle = css`
`;
type Props = WidgetProps & {
itemSchema: JSONSchema7;
itemSpec: JSONSchema7;
};
export const ArrayTable: React.FC<Props> = props => {
const { value, itemSchema, schema, level, path, children, onChange } = props;
const { expressionOptions, displayedKeys = [] } = schema.widgetOptions || {};
const { value, itemSpec, spec, level, path, children, onChange } = props;
const { expressionOptions, displayedKeys = [] } = spec.widgetOptions || {};
const keys = displayedKeys.length ? displayedKeys : ['index'];
return (
@ -44,8 +44,8 @@ export const ArrayTable: React.FC<Props> = props => {
<Tr className={TableRowStyle}>
<Th width="24px" />
{keys.map((key: string) => {
const propertySchema = itemSchema.properties?.[key];
const title = isJSONSchema(propertySchema) ? propertySchema.title : key;
const propertySpec = itemSpec.properties?.[key];
const title = isJSONSchema(propertySpec) ? propertySpec.title : key;
return <Th key={key}>{title}</Th>;
})}
@ -56,7 +56,7 @@ export const ArrayTable: React.FC<Props> = props => {
size="xs"
variant="ghost"
onClick={() => {
onChange(value.concat(parseTypeBox(itemSchema as TSchema)));
onChange(value.concat(parseTypeBox(itemSpec as TSchema)));
}}
/>
</Th>
@ -69,9 +69,9 @@ export const ArrayTable: React.FC<Props> = props => {
<PopoverWidget
{...props}
value={itemValue}
schema={mergeWidgetOptionsIntoSchema(
spec={mergeWidgetOptionsIntoSpec(
{
...itemSchema,
...itemSpec,
title: '',
},
{

Some files were not shown because too many files have changed in this diff Show More