diff --git a/stories/card/card.stories.mdx b/stories/card/card.stories.mdx new file mode 100644 index 000000000..6c790ce0c --- /dev/null +++ b/stories/card/card.stories.mdx @@ -0,0 +1,86 @@ +import { Meta, Preview, Story } from '@storybook/addon-docs/blocks'; +import { moduleMetadata } from '@storybook/angular'; + +import { CardModule } from '@alauda/ui'; + + + +# Card + +页面内容区域布局卡片 + +## 基本使用 + + + + {{ + template: /* HTML */ ` + +
header
+
+ content +
+
footer
+ + `, + }} + + + +## 嵌套使用 + + + + {{ + template: /* HTML */ ` + +
header
+
+ content +
+ +
header inside
+
content
+ +
footer
+ + `, + }} + + + +## 包含 Section + + + + {{ + template: /* HTML */ ` + +
footer
+
header
+ +
section title
+ section content 1 + + +
section title
+ section content 2 + + + `, + }} + + + +## Card Inputs + +| 名称 | 类型 | 默认值 | 描述 | +| ------- | ------- | ------ | ------------------------------ | +| divider | boolean | true | header 和 content 是否有分隔线 | diff --git a/stories/card/index.ts b/stories/card/index.ts deleted file mode 100644 index 09b1f5b1d..000000000 --- a/stories/card/index.ts +++ /dev/null @@ -1,39 +0,0 @@ -import { CardModule } from '@alauda/ui'; -import { storiesOf } from '@storybook/angular'; - -storiesOf('Card', module).add('card', () => { - return { - moduleMetadata: { - imports: [CardModule], - }, - template: /* HTML */ ` - -
header
-
content
- -
header inside
-
content
- - - - -
header
-
content
-
footer
- - - -
footer
-
header
- -
section title
- section content 1 - - -
section title
- section content 2 - - - `, - }; -}); diff --git a/stories/select/index.ts b/stories/select/index.ts deleted file mode 100644 index 89762fe20..000000000 --- a/stories/select/index.ts +++ /dev/null @@ -1,162 +0,0 @@ -import { - ComponentSize, - IconModule, - OptionComponent, - SelectModule, -} from '@alauda/ui'; -import { boolean, select, text, withKnobs } from '@storybook/addon-knobs'; -import { storiesOf } from '@storybook/angular'; - -const trackFn = (val: any): string => val?.key || val; -const filterFn = (filter: string, option: OptionComponent) => - trackFn(option.value).includes(filter); -const tagClassFn = (_: string, tag: { key: string }) => `tag-${tag.key}`; - -storiesOf('Select', module) - .addDecorator(withKnobs) - .add('select', () => { - const value = { key: 'option120' }; - const arr = new Array(5).fill(null).map((_, i) => i + 1); - - const sizeOptions = { - [ComponentSize.Large]: ComponentSize.Large, - [ComponentSize.Medium]: ComponentSize.Medium, - [ComponentSize.Small]: ComponentSize.Small, - [ComponentSize.Mini]: ComponentSize.Mini, - }; - const size = select('size', sizeOptions, ComponentSize.Medium); - const placeholder = text('placeholder', 'placeholder'); - const disabled = boolean('disabled', false); - const loading = boolean('loading', false); - const filterable = boolean('filterable', true); - const allowCreate = boolean('allowCreate', true); - const clearable = boolean('clearable', true); - - return { - moduleMetadata: { - imports: [SelectModule, IconModule], - }, - template: /* HTML */ ` - value: {{ value | json }} - - -
group {{ i }}
- - - option {{ arr.length * i + j }} - - - Empty - - - - - {{ label }} - - `, - props: { - value, - size, - disabled, - loading, - placeholder, - filterable, - allowCreate, - clearable, - trackFn, - filterFn, - arr, - }, - }; - }) - .add('multi-select', () => { - const value: any[] = [{ key: 'option1' }]; - - const sizeOptions = { - [ComponentSize.Large]: ComponentSize.Large, - [ComponentSize.Medium]: ComponentSize.Medium, - [ComponentSize.Small]: ComponentSize.Small, - [ComponentSize.Mini]: ComponentSize.Mini, - }; - const size = select('size', sizeOptions, ComponentSize.Medium); - const placeholder = text('placeholder', 'placeholder'); - const disabled = boolean('disabled', false); - const loading = boolean('loading', false); - const filterable = boolean('filterable', true); - const clearable = boolean('clearable', true); - const allowCreate = boolean('allowCreate', true); - - return { - moduleMetadata: { - imports: [SelectModule, IconModule], - }, - template: /* HTML */ ` - value: {{ value | json }} - - option1 - option2 - option3 - option4 - option5 - option6 - option7 - - option icon - - 无 - - - - key: {{key}} - - `, - props: { - size, - value, - placeholder, - disabled, - loading, - clearable, - filterable, - allowCreate, - trackFn, - filterFn, - tagClassFn, - }, - }; - }); diff --git a/stories/select/select.stories.mdx b/stories/select/select.stories.mdx new file mode 100644 index 000000000..aa406d18f --- /dev/null +++ b/stories/select/select.stories.mdx @@ -0,0 +1,234 @@ +import { Meta, Preview, Story } from '@storybook/addon-docs/blocks'; +import { moduleMetadata } from '@storybook/angular'; + +import { SelectModule, IconModule } from '@alauda/ui'; + + + +# Select + +下拉选择框 + +## 单选 + + + + {{ + template: /* HTML */ ` + + + {{ option }} + + Empty + +
+
+ value: {{ value }} + `, + props: { + arr: new Array(5).fill(null).map((_, i) => `option${i + 1}`), + value: 'option1', + }, + }} + + + +## 单选分组 + + + + {{ + template: /* HTML */ ` + + +
group {{ i }}
+ + + option {{ arr.length * i + j }} + + + Empty + +
+
+ value: {{ value | json }} + `, + props: { + arr: new Array(5).fill(null).map((_, i) => i + 1), + value: { key: 'option11' }, + trackFn: val => (val ? val.key || val : val), + }, + }} + + + +## 加载中 + + + + {{ + template: /* HTML */ ` + + + {{ option }} + + Empty + + `, + props: { + arr: ['option'], + value: '', + }, + }} + + + +## 禁用 + + + + {{ + template: /* HTML */ ` + + + {{ option }} + + Empty + + `, + props: { + arr: ['option'], + value: 'option', + }, + }} + + + +## 可清除 + + + + {{ + template: /* HTML */ ` + + + {{ option }} + + Empty + + `, + props: { + arr: ['option'], + value: 'option', + }, + }} + + + +## 可筛选 + + + + {{ + template: /* HTML */ ` + + + {{ option.key }} + + Empty + + `, + props: { + arr: new Array(5).fill(null).map((_, i) => ({ + key: `option${i + 1}`, + })), + value: '', + filterFn: (keyword, option) => { + return !keyword || option.value.key.includes(keyword); + }, + }, + }} + + + +## 多选 + + + + {{ + template: /* HTML */ ` + + + {{ option }} + + Empty + +
+
+ value: {{ value | json }} + `, + props: { + arr: new Array(5).fill(null).map((_, i) => `option${i + 1}`), + value: ['option1'], + }, + }} + + + +## Select & MultiSelect Inputs + +| 名称 | 类型 | 默认值 | 描述 | +| ------------------ | -------------- | ----------------------- | ----------------------------------------- | +| size | ComponentSize | ComponentSize.Medium | 大小 | +| value | any | - or [](MultiSelect) | 初始值 | +| placeholder | string | - | 占位文本 | +| disabled | boolean | false | 是否禁用 | +| loading | boolean | false | 是否加载中 | +| clearable | boolean | false | 选项是否可清除 | +| filterable | boolean | true | 是否支持选项过滤 | +| defaultFirstOption | boolean | true | 是否第一项作为默认选项 | +| filterFn | OptionFilterFn | Array.property.includes | 自定义过滤方法，filterable 为 true 时设置 | +| trackFn | TrackFn | val => val | 返回 value 唯一标识符 | + +## MultiSelect Inputs + +| 名称 | 类型 | 默认值 | 描述 | +| ---------- | ---------- | ------ | ------------------- | +| tagClassFn | TagClassFn | - | 选中项的 class 定义 | + +## Select & MultiSelect Outputs + +| 名称 | 类型 | 默认值 | 描述 | +| ------------ | ------ | ------ | ------------ | +| show | - | - | 显示时调用 | +| hide | - | - | 隐藏时调用 | +| filterChange | string | - | input 值变化 | +| valueChange | any | - | 选中值变化 | + +## Option Inputs + +| 名称 | 类型 | 默认值 | 描述 | +| ------------ | --------------------- | ------ | ----------------------------------------------------- | +| label | string or TemplateRef | - | 选中后 select 显示的文案 | +| labelContext | Object | - | 当 label 为 template 时设置，传递到 template 的上下文 | +| disabled | boolean | false | 是否禁用 | +| value | any | - | 选项的值 | diff --git a/stories/tag/index.ts b/stories/tag/index.ts deleted file mode 100644 index f50d9fa33..000000000 --- a/stories/tag/index.ts +++ /dev/null @@ -1,126 +0,0 @@ -import { ComponentSize, IconModule, TagModule } from '@alauda/ui'; -import { boolean, select, text, withKnobs } from '@storybook/addon-knobs'; -import { storiesOf } from '@storybook/angular'; - -storiesOf('Tag', module) - .addDecorator(withKnobs) - .add('tag', () => { - const sizeOptions = { - [ComponentSize.Large]: ComponentSize.Large, - [ComponentSize.Medium]: ComponentSize.Medium, - [ComponentSize.Small]: ComponentSize.Small, - [ComponentSize.Mini]: ComponentSize.Mini, - }; - const size = select('size', sizeOptions, ComponentSize.Medium); - const closeable = boolean('closeable', true); - const round = boolean('round', true); - const solid = boolean('solid', false); - const invalid = boolean('invalid', false); - - return { - moduleMetadata: { - imports: [TagModule, IconModule], - }, - template: /* HTML */ ` - - - primary - - - success - - - warning - - - error - - - info - - - link - - `, - props: { - size, - solid, - closeable, - invalid, - round, - }, - }; - }) - .add('custom color', () => { - const color = text('color', '#7c70e2,#f2f1fd'); - return { - moduleMetadata: { - imports: [TagModule], - }, - template: /* HTML */ ` - custom color - `, - props: { - color, - }, - }; - }) - .add('check tag', () => { - const checked = true; - return { - moduleMetadata: { - imports: [TagModule], - }, - template: /* HTML */ ` - - check tag - - checked: {{ checked }} - `, - props: { - checked, - }, - }; - }); diff --git a/stories/tag/tag.stories.mdx b/stories/tag/tag.stories.mdx new file mode 100644 index 000000000..4a729bd2b --- /dev/null +++ b/stories/tag/tag.stories.mdx @@ -0,0 +1,148 @@ +import { Meta, Preview, Story } from '@storybook/addon-docs/blocks'; +import { moduleMetadata } from '@storybook/angular'; + +import { TagModule } from '@alauda/ui'; + + + +# Tag + +标签 + +## 基本 + + + + {{ + template: /* HTML */ ` + primary + success + warning + erro + info + `, + }} + + + +## 实心 + + + + {{ + template: /* HTML */ ` + primary + success + warning + erro + info + `, + }} + + + +## 可关闭 + + + + {{ + template: /* HTML */ ` + primary + success + warning + erro + info + `, + }} + + + +## 无效 + + + + {{ + template: /* HTML */ ` + primary + success + warning + erro + info + `, + }} + + + +## 直角 + + + + {{ + template: /* HTML */ ` + primary + success + warning + erro + info + `, + }} + + + +## 自定义颜色 + + + + {{ + template: /* HTML */ ` + custom + `, + }} + + + +## 可勾选 + + + + {{ + template: /* HTML */ ` + check + value: {{ model }} + `, + }} + + + +## Tag Inputs + +| 名称 | 类型 | 默认值 | 描述 | +| --------- | ------------- | -------------------- | ----------------------------------------------- | +| type | TagType | TagType.Primary | 标签类型 | +| size | ComponentSize | ComponentSize.Medium | 标签大小 | +| color | string | - | 自定义颜色, `'BORDER_COLOR[,BACKGOUNRD_COLOR]'` | +| round | boolean | true | 是否为圆角 | +| closeable | boolean | false | 是否可以关闭 | +| solid | boolean | false | 是否为实心 | +| invalid | boolean | false | 是否无效 | + +## Check Tag Inputs + +| 名称 | 类型 | 默认值 | 描述 | +| ------- | ------------- | -------------------- | ----------- | +| size | ComponentSize | ComponentSize.Medium | 标签大小 | +| round | boolean | true | 是否为圆角 | +| checked | boolean | false | model value | + +## Check Tag Outputs + +| 名称 | 类型 | 默认值 | 描述 | +| ------------- | ------- | ------ | ------------------ | +| checkedChange | boolean | - | 获取状态变化后的值 |