Skip to content

Commit

Permalink
refactor(admin/components): 重构 demo 相关功能
Browse files Browse the repository at this point in the history
  • Loading branch information
caixw committed Aug 3, 2024
1 parent e6dd0d8 commit 74d18d0
Show file tree
Hide file tree
Showing 15 changed files with 236 additions and 196 deletions.
30 changes: 15 additions & 15 deletions admin/src/components/badge/demo.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,26 +5,26 @@
import { createSignal, For } from 'solid-js';

import { corners } from '@/components/base';
import { paletteSelector } from '@/components/base/demo';
import { paletteSelector, Demo } from '@/components/base/demo';
import { Button } from '@/components/button';
import { default as Badge } from './badge';

export default function () {
const [text, setText] = createSignal('');
const [paletteS, palette] = paletteSelector();

return <div class="w-80 p-5 flex flex-col justify-around gap-5">
{paletteS}

<input type="text" placeholder='text' onInput={(e)=>setText(e.target.value)} />
<div class="flex items-center gap-5 flex-wrap">
<For each={corners}>
{(pos) => (
<Badge pos={ pos } palette={ palette() } text={ text() }>
<Button palette='primary'>{pos}</Button>
</Badge>
)}
</For>
</div>
</div>;
return <Demo settings={
<>
{paletteS}
<input type="text" placeholder='text' onInput={(e)=>setText(e.target.value)} />
</>
} stages={
<For each={corners}>
{(pos) => (
<Badge pos={ pos } palette={ palette() } text={ text() }>
<Button palette='primary'>{pos}</Button>
</Badge>
)}
</For>
} />;
}
43 changes: 34 additions & 9 deletions admin/src/components/base/demo.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -64,27 +64,52 @@ export function cornerSelector(preset: Corner = 'bottomleft'): [JSX.Element, Acc
return [elem, get, set];
}

export interface DemoProps {
/**
* 设置项的内容
*/
settings: JSX.Element;

/**
* 展示区的内容
*/
stages: JSX.Element;
}

/**
* demo 展示组件
*/
export function Demo(props: DemoProps) {
return <div class="flex flex-col gap-y-5">
<div class="settings flex flex-wrap justify-between">
{props.settings}
</div>

<div class="stages flex flex-wrap justify-between gap-5">
{props.stages}
</div>
</div>;
}

export default function() {
const [paletteS, palette] = paletteSelector('primary');

return <div>
{ paletteS }

<div class="flex flex-col gap-y-5 mt-5">
<button class="text-[var(--fg)] bg-[var(--bg)]" classList={{
return <Demo settings={paletteS} stages={
<>
<button class="w-full text-[var(--fg)] bg-[var(--bg)]" classList={{
[`palette--${palette()}`]: !!palette()
}}>button</button>

<span class="text-[var(--fg)] bg-[var(--bg)]" classList={{
<span class="w-full text-[var(--fg)] bg-[var(--bg)]" classList={{
[`palette--${palette()}`]: !!palette()
}}>span</span>

<fieldset class="text-[var(--fg)] bg-[var(--bg)]" classList={{
<fieldset class="w-full text-[var(--fg)] bg-[var(--bg)]" classList={{
[`palette--${palette()}`]: !!palette()
}}>
<legend>fieldset</legend>
content
</fieldset>
</div>
</div>;
</>
} />;
}
48 changes: 30 additions & 18 deletions admin/src/components/button/demo.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
import { Accessor, createSignal, For, JSX, Setter } from 'solid-js';

import { Button, ButtonGroup, IconButton } from '@/components';
import { boolSelector, colorsWithUndefined } from '@/components/base/demo';
import { boolSelector, colorsWithUndefined, Demo } from '@/components/base/demo';
import { Style, styles } from './types';

export function styleSelector(v: Style = 'fill'): [JSX.Element, Accessor<Style>, Setter<Style>] {
Expand Down Expand Up @@ -87,21 +87,33 @@ export default function() {
</ButtonGroup>
</div>;

return <div class="m-10">
{styleS}
{disabledS}
{roundedS}

<h1 class="my-4">button</h1>
<Buttons />

<h1 class="my-4">icon-button</h1>
<IconButtons />

<h1 class="my-4">button-group</h1>
<ButtonGroups />

<h1 class="my-4">block</h1>
<Block />
</div>;
return <Demo settings={
<>
{styleS}
{disabledS}
{roundedS}
</>
} stages={
<>
<div class="w-full">
<h1 class="my-4">button</h1>
<Buttons />
</div>

<div class="w-full">
<h1 class="my-4">icon-button</h1>
<IconButtons />
</div>

<div class="w-full">
<h1 class="my-4">button-group</h1>
<ButtonGroups />
</div>

<div class="w-full">
<h1 class="my-4">block</h1>
<Block />
</div>
</>
} />;
}
50 changes: 27 additions & 23 deletions admin/src/components/divider/demo.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

import { Accessor, createSignal, For, JSX, Setter } from 'solid-js';

import { paletteSelector } from '@/components/base/demo';
import { paletteSelector,Demo } from '@/components/base/demo';
import { default as Divider, Props } from './divider';
import { Style, styles } from './types';

Expand Down Expand Up @@ -33,26 +33,30 @@ export default function() {
const [styleS, style] = styleSelector();
const [pos, setPos] = createSignal<Props['pos']>('start');

return <div class="w-80 p-5">
{paletteS}
{styleS}

<fieldset class="border-2">
<legend>位置</legend>
<For each={new Array<Props['pos']>('start','center','end')}>
{(item)=>(
<label class="mr-4">
<input class="mr-1" type="radio" name="type" value={item} onClick={()=>setPos(item)} checked={pos()===item} />{item}
</label>
)}
</For>
</fieldset>

<br /><br />

<Divider style={style()} palette={palette()} pos={pos()}><span class="material-symbols-outlined">face</span>起始位置</Divider>

<br /><br />
<Divider style={style()} palette={palette()} pos={pos()}></Divider>
</div>;
return <Demo settings={
<>
{paletteS}
{styleS}
<fieldset class="border-2">
<legend>位置</legend>
<For each={new Array<Props['pos']>('start','center','end')}>
{(item)=>(
<label class="mr-4">
<input class="mr-1" type="radio" name="type" value={item} onClick={()=>setPos(item)} checked={pos()===item} />{item}
</label>
)}
</For>
</fieldset>
</>
} stages={
<>
<div class="w-56">
<Divider style={style()} palette={palette()} pos={pos()}><span class="material-symbols-outlined">face</span>起始位置</Divider>
</div>

<div class="w-56">
<Divider style={style()} palette={palette()} pos={pos()}></Divider>
</div>
</>
} />;
}
2 changes: 1 addition & 1 deletion admin/src/components/divider/divider.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ export default function(props: Props) {
'c--divider': true,
[`palette--${props.palette}`]: !!props.palette,
}}>
<Switch fallback={<hr class="w-full" />}>
<Switch fallback={<hr style={{'border-style': props.style}} class="w-full" />}>
<Match when={props.pos === 'start' && props.children}>
{props.children}<hr style={{ 'border-style': props.style }} class="flex-1 ml-2" />
</Match>
Expand Down
45 changes: 25 additions & 20 deletions admin/src/components/dropdown/demo.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

import { createSignal } from 'solid-js';

import { cornerSelector, paletteSelector } from '@/components/base/demo';
import { cornerSelector, paletteSelector, Demo } from '@/components/base/demo';
import { Button } from '@/components/button';
import { default as Dropdown } from './dropdown';

Expand All @@ -14,25 +14,30 @@ export default function() {
const [visible1, setVisible1] = createSignal(false);
const [visible2, setVisible2] = createSignal(false);

return <div class="p-5 flex flex-col items-center gap-5">
<div class="flex justify-around gap-2">

return <Demo settings={
<>
{paletteS}
{posS}
</div>

<Dropdown wrapperClass="border-2" pos={pos()} palette={palette()} visible={visible1()} activator={
<Button palette='primary' onClick={()=>setVisible1(!visible1())}>dropdown</Button>
}>
<div class="p-4 z-5 bg-palette-bg text-palette-fg">dropdown</div>
</Dropdown>

<p>自动关闭</p>

<Dropdown wrapperClass="w-full border-2" setVisible={setVisible2} pos={pos()} palette={palette()} visible={visible2()} activator={
<Button palette='primary' onClick={()=>setVisible2(!visible2())}>dropdown</Button>
}>
<div class="p-4 z-5 bg-palette-bg text-palette-fg">点击空白区别,自动关闭。</div>
</Dropdown>

</div>;
</>
} stages={
<>
<div class="w-full">
<Dropdown wrapperClass="border-2" pos={pos()} palette={palette()} visible={visible1()} activator={
<Button palette='primary' onClick={()=>setVisible1(!visible1())}>dropdown</Button>
}>
<div class="p-4 z-5 bg-palette-bg text-palette-fg">dropdown</div>
</Dropdown>
</div>

<div class="w-full">
<p>自动关闭</p>
<Dropdown wrapperClass="w-full border-2" setVisible={setVisible2} pos={pos()} palette={palette()} visible={visible2()} activator={
<Button palette='primary' onClick={()=>setVisible2(!visible2())}>dropdown</Button>
}>
<div class="p-4 z-5 bg-palette-bg text-palette-fg">点击空白区别,自动关闭。</div>
</Dropdown>
</div>
</>
} />;
}
55 changes: 29 additions & 26 deletions admin/src/components/form/checkbox/demo.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@

import { createSignal, For } from 'solid-js';

import { boolSelector, colorsWithUndefined } from '@/components/base/demo';
import { boolSelector, colorsWithUndefined, Demo } from '@/components/base/demo';
import { FieldAccessor, Options } from '@/components/form';
import Checkbox from './checkbox';
import { default as CheckboxGroup } from './group';
Expand All @@ -24,33 +24,36 @@ export default function() {
['3', <div style="color:red">red<br/>red<br/>red</div>],
];

return <div class="w-80">
<fieldset class="border-2 my-4 box-border">
<legend>设置</legend>
return <Demo settings={
<>
{readonlyS}
{disabledS}
{verticalS}
{iconS}
<br />

<button class="c--button button-style--fill palette--primary" onClick={() => groupFA.setError(groupFA.getError() ? undefined : 'error')}>toggle error</button>
<button class="c--button button-style--fill palette--primary" onClick={() => setIconStyle(!iconStyle())}>toggle icon</button>
</fieldset>

<div class="flex flex-wrap mb-10">
<For each={colorsWithUndefined}>
{(item)=>(
<Checkbox checkedIcon={iconStyle() ? 'verified': undefined}
title={item ? item : 'undefined'} label='test' icon={icon()} palette={item} disabled={disabled()} readonly={readonly()}
/>
)}
</For>
</div>

<CheckboxGroup checkedIcon={iconStyle() ? 'verified': undefined}
icon={icon()} disabled={disabled()} vertical={vertical()} readonly={readonly()} label="group" palette="primary"
options={groupOptions} accessor={groupFA}
/>
<pre>{ groupFA.getValue().toString() }</pre>
</div>;

<button class="c--button c--button-fill palette--primary" onClick={() => groupFA.setError(groupFA.getError() ? undefined : 'error')}>toggle error</button>
<button class="c--button c--button-fill palette--primary" onClick={() => setIconStyle(!iconStyle())}>toggle icon</button>
</>

} stages={
<>
<div class="flex flex-wrap mb-10">
<For each={colorsWithUndefined}>
{(item)=>(
<Checkbox checkedIcon={iconStyle() ? 'verified': undefined}
title={item ? item : 'undefined'} label='test' icon={icon()} palette={item} disabled={disabled()} readonly={readonly()}
/>
)}
</For>
</div>

<div class="flex flex-col mb-10">
<CheckboxGroup checkedIcon={iconStyle() ? 'verified': undefined}
icon={icon()} disabled={disabled()} vertical={vertical()} readonly={readonly()} label="group" palette="primary"
options={groupOptions} accessor={groupFA}
/>
<pre>{ groupFA.getValue().toString() }</pre>
</div>
</>
} />;
}
Loading

0 comments on commit 74d18d0

Please sign in to comment.