mirror of
https://github.com/smartxworks/sunmao-ui.git
synced 2024-12-03 09:09:52 +08:00
Merge pull request #56 from webzard-io/feat/style-trait
add style trait
This commit is contained in:
tanbowensg
GitHub
commit
7e7d4ade72
109
packages/runtime/example/style/index.html
Normal file
109
packages/runtime/example/style/index.html
Normal file
@ -0,0 +1,109 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>meta-ui runtime example: nested components</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module">
|
||||
import renderApp from '../../src/main.tsx';
|
||||
renderApp({
|
||||
version: 'example/v1',
|
||||
metadata: {
|
||||
name: 'style_trait',
|
||||
description: 'style trait demo',
|
||||
},
|
||||
spec: {
|
||||
components: [
|
||||
{
|
||||
id: 'root',
|
||||
type: 'chakra_ui/v1/root',
|
||||
properties: {},
|
||||
traits: [],
|
||||
},
|
||||
{
|
||||
id: 'tabs',
|
||||
type: 'chakra_ui/v1/tabs',
|
||||
properties: {
|
||||
tabNames: ['Tab One', 'Tab Two'],
|
||||
initialSelectedTabIndex: 1,
|
||||
},
|
||||
traits: [
|
||||
{
|
||||
type: 'core/v1/slot',
|
||||
properties: {
|
||||
container: {
|
||||
id: 'root',
|
||||
slot: 'root',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'core/v1/style',
|
||||
properties: {
|
||||
style: {
|
||||
tabItem: {
|
||||
'&:hover': {
|
||||
color: 'red',
|
||||
},
|
||||
},
|
||||
tabContent: {
|
||||
'&:hover': {
|
||||
color: 'green',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'text1',
|
||||
type: 'core/v1/text',
|
||||
properties: {
|
||||
value: {
|
||||
raw: 'hover me',
|
||||
format: 'plain',
|
||||
},
|
||||
},
|
||||
traits: [
|
||||
{
|
||||
type: 'core/v1/slot',
|
||||
properties: {
|
||||
container: {
|
||||
id: 'tabs',
|
||||
slot: 'tab_content_0',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'text2',
|
||||
type: 'core/v1/text',
|
||||
properties: {
|
||||
value: {
|
||||
raw: 'hover me',
|
||||
format: 'plain',
|
||||
},
|
||||
},
|
||||
traits: [
|
||||
{
|
||||
type: 'core/v1/slot',
|
||||
properties: {
|
||||
container: {
|
||||
id: 'tabs',
|
||||
slot: 'tab_content_1',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -16,7 +16,7 @@ const Tabs: ComponentImplementation<{
|
||||
initialSelectedTabIndex?: Static<
|
||||
typeof InitialSelectedTabIndexPropertySchema
|
||||
>;
|
||||
}> = ({ tabNames, mergeState, initialSelectedTabIndex, slotsMap }) => {
|
||||
}> = ({ tabNames, mergeState, initialSelectedTabIndex, slotsMap, style }) => {
|
||||
const [selectedTabIndex, setSelectedTabIndex] = useState(
|
||||
initialSelectedTabIndex ?? 0
|
||||
);
|
||||
@ -31,12 +31,14 @@ const Tabs: ComponentImplementation<{
|
||||
onChange={idx => setSelectedTabIndex(idx)}>
|
||||
<TabList>
|
||||
{tabNames.map((name, idx) => (
|
||||
<Tab key={idx}>{name}</Tab>
|
||||
<Tab key={idx} css={style?.tabItem}>
|
||||
{name}
|
||||
</Tab>
|
||||
))}
|
||||
</TabList>
|
||||
<TabPanels>
|
||||
{tabNames.map((_, idx) => (
|
||||
<TabPanel key={idx}>
|
||||
<TabPanel key={idx} css={style?.tabContent}>
|
||||
<Slot slotsMap={slotsMap} slot={`tab_content_${idx}`} />
|
||||
</TabPanel>
|
||||
))}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React, { CSSProperties } from 'react';
|
||||
import React from 'react';
|
||||
import {
|
||||
RuntimeApplication,
|
||||
RuntimeComponent,
|
||||
@ -35,6 +35,7 @@ import CoreArrayState from './traits/core/arrayState';
|
||||
import CoreState from './traits/core/state';
|
||||
import CoreEvent from './traits/core/event';
|
||||
import CoreSlot from './traits/core/slot';
|
||||
import CoreStyle from './traits/core/style';
|
||||
import CoreHidden from './traits/core/hidden';
|
||||
import CoreFetch from './traits/core/fetch';
|
||||
import CoreValidation from './traits/core/validation';
|
||||
@ -60,8 +61,8 @@ export type ComponentMergedProps = {
|
||||
mergeState: MergeState;
|
||||
subscribeMethods: SubscribeMethods;
|
||||
slotsMap: SlotsMap | undefined;
|
||||
style?: CSSProperties;
|
||||
data?: Record<string, any>;
|
||||
style?: Record<string, any>;
|
||||
data?: Record<string, unknown>;
|
||||
callbackMap?: CallbackMap;
|
||||
app?: RuntimeApplication;
|
||||
};
|
||||
@ -73,7 +74,7 @@ export type ComponentImplementation<T = any> = React.FC<
|
||||
export type TraitResult = {
|
||||
props: {
|
||||
data?: unknown;
|
||||
style?: CSSProperties;
|
||||
style?: Record<string, any>;
|
||||
callbackMap?: CallbackMap;
|
||||
} | null;
|
||||
};
|
||||
@ -159,6 +160,7 @@ registry.registerTrait(CoreState);
|
||||
registry.registerTrait(CoreArrayState);
|
||||
registry.registerTrait(CoreEvent);
|
||||
registry.registerTrait(CoreSlot);
|
||||
registry.registerTrait(CoreStyle);
|
||||
registry.registerTrait(CoreHidden);
|
||||
registry.registerTrait(CoreFetch);
|
||||
registry.registerTrait(CoreValidation);
|
||||
|
||||
35
packages/runtime/src/traits/core/style.tsx
Normal file
35
packages/runtime/src/traits/core/style.tsx
Normal file
@ -0,0 +1,35 @@
|
||||
import { createTrait } from '@meta-ui/core';
|
||||
import { Static, Type } from '@sinclair/typebox';
|
||||
import { TraitImplementation } from '../../registry';
|
||||
|
||||
const StyleTrait: TraitImplementation<{
|
||||
style: Static<typeof StylesPropertySchema>;
|
||||
}> = ({ style }) => {
|
||||
return {
|
||||
props: {
|
||||
style: style,
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
const StylesPropertySchema = Type.Array(Type.Object(Type.String()));
|
||||
export default {
|
||||
...createTrait({
|
||||
version: 'core/v1',
|
||||
metadata: {
|
||||
name: 'style',
|
||||
description: 'add style to component',
|
||||
},
|
||||
spec: {
|
||||
properties: [
|
||||
{
|
||||
name: 'style',
|
||||
...StylesPropertySchema,
|
||||
},
|
||||
],
|
||||
state: {},
|
||||
methods: [],
|
||||
},
|
||||
}),
|
||||
impl: StyleTrait,
|
||||
};
|
||||
@ -1,11 +1,16 @@
|
||||
import { defineConfig } from "vite";
|
||||
import reactRefresh from "@vitejs/plugin-react-refresh";
|
||||
import { defineConfig } from 'vite';
|
||||
import reactRefresh from '@vitejs/plugin-react-refresh';
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [reactRefresh()],
|
||||
define: {
|
||||
// https://github.com/satya164/react-simple-code-editor/issues/86
|
||||
global: "globalThis",
|
||||
global: 'globalThis',
|
||||
},
|
||||
esbuild: {
|
||||
// https://dev.to/ajitsinghkamal/using-emotionjs-with-vite-2ndj
|
||||
jsxFactory: `jsx`,
|
||||
jsxInject: `import { jsx } from '@emotion/react'`,
|
||||
},
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user