From 3d95a3592836d751e613858b0a0a96f91935d674 Mon Sep 17 00:00:00 2001 From: kagol Date: Wed, 11 Aug 2021 20:33:29 +0800 Subject: [PATCH 1/3] =?UTF-8?q?refactor:=20=E8=B0=83=E6=95=B4Button?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E7=9A=84=E7=9B=AE=E5=BD=95=E7=BB=93=E6=9E=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/button/demo/button-demo.tsx | 32 ----------- devui/button/demo/button.route.ts | 15 ----- devui/button/demo/common/common.tsx | 15 ----- devui/button/demo/primary/primary.tsx | 16 ------ devui/button/doc/api-cn.md | 82 --------------------------- devui/button/doc/api-en.md | 82 --------------------------- devui/button/index.ts | 20 ++++--- devui/button/{ => src}/button.scss | 10 ++-- devui/button/{ => src}/button.tsx | 4 +- 9 files changed, 20 insertions(+), 256 deletions(-) delete mode 100644 devui/button/demo/button-demo.tsx delete mode 100644 devui/button/demo/button.route.ts delete mode 100644 devui/button/demo/common/common.tsx delete mode 100644 devui/button/demo/primary/primary.tsx delete mode 100644 devui/button/doc/api-cn.md delete mode 100644 devui/button/doc/api-en.md rename devui/button/{ => src}/button.scss (97%) rename devui/button/{ => src}/button.tsx (97%) diff --git a/devui/button/demo/button-demo.tsx b/devui/button/demo/button-demo.tsx deleted file mode 100644 index a751cc43..00000000 --- a/devui/button/demo/button-demo.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import { defineComponent } from 'vue' -import CodeBox from '../../shared/devui-codebox/devui-codebox' -import ButtonPrimary from './primary/primary' -import ButtonCommon from './common/common' -import PrimaryCode from './primary/primary.tsx?raw' -import CommonCode from './common/common.tsx?raw' - -export default defineComponent({ - name: 'd-button-demo', - setup() { - const primarySource: any[] = [{title: 'TSX', language: 'TSX', code: PrimaryCode}]; - const commonSource: any[] = [{title: 'TSX', language: 'TSX', code: CommonCode}]; - return () => { - return
-
-
{ '主要按钮' }
-
- - - -
-
-
{ '次要按钮' }
-
- - - -
-
- } - } -}) \ No newline at end of file diff --git a/devui/button/demo/button.route.ts b/devui/button/demo/button.route.ts deleted file mode 100644 index 50144c12..00000000 --- a/devui/button/demo/button.route.ts +++ /dev/null @@ -1,15 +0,0 @@ -import ButtonDemoComponent from './button-demo' -import DevUIApiComponent from '../../shared/devui-api/devui-api' - -import ApiCn from '../doc/api-cn.md' -import ApiEn from '../doc/api-en.md' -const routes = [ - { path: '', redirectTo: 'demo' }, - { path: 'demo', component: ButtonDemoComponent}, - { path: 'api', component: DevUIApiComponent, meta: { - 'zh-cn': ApiCn, - 'en-us': ApiEn - }} -] - -export default routes diff --git a/devui/button/demo/common/common.tsx b/devui/button/demo/common/common.tsx deleted file mode 100644 index 02a9125c..00000000 --- a/devui/button/demo/common/common.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { defineComponent } from 'vue'; -import Button from '../../button'; - -export default defineComponent({ - name: 'd-button-common', - setup() { - return () => { - return ( -
- -
- ); - } - } -}); \ No newline at end of file diff --git a/devui/button/demo/primary/primary.tsx b/devui/button/demo/primary/primary.tsx deleted file mode 100644 index 2a1bba16..00000000 --- a/devui/button/demo/primary/primary.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { defineComponent } from 'vue'; -import Button from '../../button'; - -export default defineComponent({ - name: 'd-button-primary', - setup() { - return () => { - return ( -
- - -
- ); - } - } -}); \ No newline at end of file diff --git a/devui/button/doc/api-cn.md b/devui/button/doc/api-cn.md deleted file mode 100644 index 7751ae0e..00000000 --- a/devui/button/doc/api-cn.md +++ /dev/null @@ -1,82 +0,0 @@ -# 如何使用 - -在module中引入： - -```ts -import { ButtonModule } from 'ng-devui/button'; -``` - -在页面中使用： - -```xml - -``` -# d-button -## d-button 参数 - -| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | -| :---------: | :------------: | :-----: | :--------------------------------------------------------------------------- | ---------------------------------------------- | -| id | `string` | -- | 可选，button id | [主要按钮](demo#button-primary) | -| type | [`IButtonType`](#ibuttontype) | 'button' | 可选，类型 `'button' \| 'submit' \| 'reset' ` | [警示按钮](demo#button-danger) | -| bsStyle | [`IButtonStyle`](#ibuttonstyle) | 'primary' | 可选，风格 `'primary' \| 'common' \| 'text' \| 'text-dark' \| 'danger'` | [次要按钮](demo#button-common) | -| bsSize | [`IButtonSize`](#ibuttonsize) | 'md' | 可选，大小 `'lg' \| 'md' \| 'sm' \| 'xs'` | [按钮尺寸](demo#button-size) | -| bsPosition |[`IButtonPosition`](#ibuttonposition) |'default' | 可选，按钮位置 `'default' \| 'left' \| 'right'` | [左右按钮](demo#button-left-right) | -| bordered | `boolean` | false | 可选，是否有边框 | [自动获得焦点](demo#button-auto-focus) | -| icon | `string` | -- | 可选， 自定义按钮图标 | [图标按钮](demo#button-icon) | -| showLoading | `boolean` | false | 可选，是否显示加载提示 | [加载中状态](demo#button-loading) | -| width | `number` | -- | 可选，button 宽度 | [主要按钮与次要按钮组合](demo#button-primary-and-common) | -| disabled | `boolean` | false | 可选，是否禁用 button | [主要按钮](demo#button-primary) | -| autofocus | `boolean` | false | 可选，按钮加载时是否自动获得焦点 | [自动获得焦点](demo#button-auto-focus) | - -## d-button 事件 - -| 参数 | 类型 | 说明 | 跳转 Demo | -| :------: | :-----------------: | :-------------------------------------------------------------------------------------- | ---------------------------------------------- | -| btnClick | `EventEmitter` | 可选，button 点击事件，解决disabled还会触发 click, 返回点击下后鼠标事件对象 | [加载中状态](demo#button-loading) | - -# d-button-group -## d-button-group 参数 - -| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | -| :---------: | :------------: | :-----: | :--------------------------------------------------------------------------- | ---------------------------------------------- | -| size | [`IButtonGroupSize`](#ibuttongroupsize) | 'md' | 可选，大小`'lg' \| 'md' \| 'sm' \| 'xs'` | [按钮组](demo#button-groups) | - - -# 接口 & 类型定义 -### IButtonType - -默认值为'button'，表示button类型 - -```ts -export type IButtonType = 'button' | 'submit' | 'reset'; -``` - -### IButtonStyle - -默认值为'primary'，表示button风格 - -```ts -export type IButtonStyle = 'common' | 'primary' | 'text' | 'text-dark' | 'danger'; -``` - -### IButtonPosition - -默认值为'default'，表示button位置 - -```ts -export type IButtonPosition = 'left' | 'right' | 'default'; -``` - -### IButtonSize -默认值为'md'，表示button尺寸 - -```ts -export type IButtonSize = 'lg' | 'md' | 'sm' | 'xs'; -``` - -### IButtonGroupSize -默认值为'md'，表示button-group尺寸 - -```ts -export type IButtonGroupSize = 'lg' | 'md' | 'sm' | 'xs'; -``` diff --git a/devui/button/doc/api-en.md b/devui/button/doc/api-en.md deleted file mode 100644 index a47f96ca..00000000 --- a/devui/button/doc/api-en.md +++ /dev/null @@ -1,82 +0,0 @@ -# How to use - -Import into module: - -```ts -import { ButtonModule } from 'ng-devui/button'; -``` - -In the page: - -```xml - -``` -# d-button -## d-button Parameter - -| Parameter | Type | Default | Description | Jump to Demo | -| :---------: | :------------: | :-----: | :--------------------------------------------------------------------------- | | -| id | `string` | -- | Optional. button ID | [Primary Buttons](demo#button-primary)| -| type | [`IButtonType`](#ibuttontype) | 'button' | Optional. The type is `'button' \| 'submit' \| 'reset'` |[Danger Buttons](demo#button-danger) | -| bsStyle | [`IButtonStyle`](#ibuttonstyle) | 'primary' | Optional. The style is `'primary' \| 'common' \| 'text' \| 'text-dark' \| 'danger'` | [Common Buttons](demo#button-common) | -| bsSize | [`IButtonSize`](#ibuttonsize) | 'md' | Optional. The size is `'lg' \| 'md' \| 'sm' \| 'xs'` | [Button Size](demo#button-size) | -| bsPosition |[`IButtonPosition`](#ibuttonposition) |'default'| Optional. The button position is `'default' \| 'left' \| 'right'` | [Left & Right Buttons](demo#button-left-right) | -| bordered | `boolean` | false | Optional. Indicating whether a border exists | [Auto-focus Buttons](demo#button-auto-focus)| -| icon | `string` | -- | Optional. Customized button icon | [Icon Buttons](demo#button-icon) | -| showLoading | `boolean` | false | Optional. Indicating whether to display the loading prompt | [Loading Buttons](demo#button-loading) | -| width | `number` | -- | Optional. Button width |[Combinations of Primary & Common Buttons](demo#button-primary-and-common) | -| disabled | `boolean` | false | Optional. Indicating whether to disable the button | [Primary Buttons](demo#button-primary) | -| autofocus | `boolean` | false | Optional. Indicating whether to automatically obtain the focus during button loading | [Auto-focus Buttons](demo#button-auto-focus) | - -## d-button Event - -| Parameter | Type | Description | Jump to Demo | -| :------: | :-----------------: | :-------------------------------------------------------------------------------------- | ---------------------------------------------- | -| btnClick | `EventEmitter` | Optional. Solve the click event is triggered when button is disabled. After the mouse is clicked, the mouse event object is returned | [Loading Buttons](demo#button-loading)| - -# d-button-group - -## d-button-group parameter - -| Parameter | Type | Default | Description | Jump to Demo | -| :---------: | :------------: | :-----: | :--------------------------------------------------------------------------- | | -| size | [`IButtonGroupSize`](#ibuttongroupsize) | 'md' | Optional. The size is `'lg' \| 'md' \| 'sm' \| 'xs'` | [Button Group](demo#button-groups) | - -# Interface & Type Definition -### IButtonType - -The default value is 'button', indicating the button type. - -```ts -export type IButtonType = 'button' | 'submit' | 'reset'; -``` - -### IButtonStyle - -The default value is 'primary', indicating the button style. - -```ts -export type IButtonStyle = 'common' | 'primary' | 'text' | 'text-dark' | 'danger'; -``` - -### IButtonPosition - -The default value is 'default', indicating the button position. - -```ts -export type IButtonPosition = 'left' | 'right' | 'default'; -``` - -### IButtonSize -The default value is 'md', indicating the button size. - -```ts -export type IButtonSize = 'lg' | 'md' | 'sm' | 'xs'; -``` - -### IButtonGroupSize -The default value is 'md', indicating the button-group size. - -```ts -export type IButtonGroupSize = 'lg' | 'md' | 'sm' | 'xs'; -``` diff --git a/devui/button/index.ts b/devui/button/index.ts index 237c5102..803d5172 100644 --- a/devui/button/index.ts +++ b/devui/button/index.ts @@ -1,10 +1,16 @@ -import { App } from 'vue' -import Button from './button' +import type { App } from 'vue' +import Button from './src/button' -Button.install = function(Vue: App) { - Vue.component(Button.name, Button) -}; +Button.install = function(app: App) { + app.component(Button.name, Button) +} -Button.version = '0.0.1' +export { Button } -export default Button +export default { + title: 'Button 按钮', + category: '通用', + install(app: App) { + app.use(Button as any) + } +} diff --git a/devui/button/button.scss b/devui/button/src/button.scss similarity index 97% rename from devui/button/button.scss rename to devui/button/src/button.scss index 54936b1d..93b28f7f 100644 --- a/devui/button/button.scss +++ b/devui/button/src/button.scss @@ -1,8 +1,8 @@ -@import '../style/mixins/index'; -@import '../style/theme/color'; -@import '../style/theme/variables'; -@import '../style/theme/font'; -@import '../style/theme/corner'; +@import '../../style/mixins/index'; +@import '../../style/theme/color'; +@import '../../style/theme/variables'; +@import '../../style/theme/font'; +@import '../../style/theme/corner'; $devui-btn-loading-color: $devui-text; $devui-btn-xs-padding: 1px 5px; diff --git a/devui/button/button.tsx b/devui/button/src/button.tsx similarity index 97% rename from devui/button/button.tsx rename to devui/button/src/button.tsx index 166d0c08..07c74812 100644 --- a/devui/button/button.tsx +++ b/devui/button/src/button.tsx @@ -1,4 +1,4 @@ -import { computed, defineComponent, ref } from "vue"; +import { computed, defineComponent, ref } from 'vue'; export type IButtonType = 'button' | 'submit' | 'reset'; export type IButtonStyle = 'common' | 'primary' | 'text' | 'text-dark' | 'danger'; @@ -8,7 +8,7 @@ export type IButtonSize = 'lg' | 'md' | 'sm' | 'xs'; import './button.scss'; export default defineComponent({ - name: 'd-button', + name: 'DButton', inheritAttrs: false, props: { id: { -- Gitee From 9c0ae38898842635d68b83c173a45930520b19a3 Mon Sep 17 00:00:00 2001 From: kagol Date: Wed, 11 Aug 2021 22:16:46 +0800 Subject: [PATCH 2/3] =?UTF-8?q?refactor:=20=E8=B0=83=E6=95=B4=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E7=9A=84=E7=9B=AE=E5=BD=95=E7=BB=93=E6=9E=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui-cli/templates/vue-devui.js | 2 +- devui/accordion/demo/accordion-demo.tsx | 12 -- devui/accordion/demo/accordion.route.ts | 15 -- devui/accordion/doc/api-cn.md | 193 ------------------ devui/accordion/doc/api-en.md | 189 ----------------- devui/accordion/index.ts | 20 +- devui/accordion/{ => src}/accordion-item.tsx | 4 +- devui/accordion/{ => src}/accordion-list.tsx | 10 +- devui/accordion/{ => src}/accordion-menu.tsx | 4 +- devui/accordion/{ => src}/accordion.scss | 10 +- devui/accordion/{ => src}/accordion.tsx | 43 ++-- devui/accordion/{ => src}/accordion.type.ts | 114 +++++------ devui/alert/demo/alert-demo.scss | 3 - devui/alert/demo/alert-demo.tsx | 52 ----- devui/alert/demo/alert.route.ts | 15 -- devui/alert/demo/basic/basic.tsx | 18 -- devui/alert/demo/close/close.tsx | 22 -- .../alert/demo/without-icon/without-icon.tsx | 19 -- devui/alert/doc/api-cn.md | 38 ---- devui/alert/doc/api-en.md | 38 ---- devui/alert/index.ts | 20 +- devui/alert/{ => src}/alert-close-icon.tsx | 2 +- devui/alert/{ => src}/alert-type-icon.tsx | 7 +- devui/alert/{ => src}/alert.scss | 10 +- devui/alert/{ => src}/alert.tsx | 15 +- devui/anchor/demo/anchor-demo.tsx | 12 -- devui/anchor/demo/anchor.route.ts | 15 -- devui/anchor/doc/api-cn.md | 123 ----------- devui/anchor/doc/api-en.md | 126 ------------ devui/anchor/index.ts | 20 +- devui/anchor/{ => src}/anchor.tsx | 4 +- devui/avatar/demo/avatar-demo.scss | 3 - devui/avatar/demo/avatar-demo.tsx | 52 ----- devui/avatar/demo/avatar.route.ts | 15 -- devui/avatar/demo/basic/basic.tsx | 18 -- devui/avatar/demo/config/config.tsx | 19 -- devui/avatar/demo/special/special.tsx | 17 -- devui/avatar/doc/api-cn.md | 42 ---- devui/avatar/doc/api-en.md | 42 ---- devui/avatar/index.ts | 20 +- devui/avatar/{ => src}/avatar-body-icon.tsx | 8 +- devui/avatar/{ => src}/avatar-nobody-icon.tsx | 8 +- devui/avatar/{ => src}/avatar.scss | 2 +- devui/avatar/{ => src}/avatar.tsx | 7 +- devui/card/index.ts | 20 +- devui/carousel/index.ts | 20 +- devui/carousel/{ => src}/carousel.scss | 6 +- devui/carousel/{ => src}/carousel.tsx | 2 +- devui/carousel/{ => src}/item.tsx | 0 devui/carousel/{ => src}/types.ts | 0 devui/checkbox/demo/checkbox-demo.tsx | 24 --- devui/checkbox/demo/checkbox.route.ts | 15 -- devui/checkbox/demo/demo-basic.tsx | 136 ------------ devui/checkbox/demo/demo-checkbox-group.tsx | 155 -------------- devui/checkbox/doc/api-cn.md | 62 ------ devui/checkbox/doc/api-en.md | 62 ------ devui/checkbox/index.ts | 18 +- devui/icon/index.ts | 18 +- .../__tests__/input.spec.ts} | 46 ++--- devui/input/index.ts | 16 ++ .../text-input.scss => input/src/input.scss} | 0 .../text-input.tsx => input/src/input.tsx} | 8 +- devui/{text-input => input}/src/use-input.tsx | 0 devui/panel/demo/basic/basic.tsx | 28 --- .../condition-change/condition-change.tsx | 33 --- devui/panel/demo/panel-demo.tsx | 45 ---- devui/panel/demo/panel.route.ts | 15 -- devui/panel/demo/type/type.tsx | 56 ----- devui/panel/doc/api-cn.md | 38 ---- devui/panel/doc/api-en.md | 40 ---- devui/panel/index.ts | 20 +- devui/panel/{ => src}/panel.scss | 2 +- devui/panel/{ => src}/panel.tsx | 16 +- devui/progress/doc/api-cn.md | 23 --- devui/progress/doc/api-en.md | 23 --- devui/progress/index.ts | 20 +- devui/progress/{ => src}/progress.scss | 0 devui/progress/{ => src}/progress.tsx | 0 devui/radio/demo/demo-column.tsx | 36 ---- devui/radio/demo/demo-custom.tsx | 68 ------ devui/radio/demo/demo-disabled.tsx | 15 -- devui/radio/demo/demo-prevent.tsx | 41 ---- devui/radio/demo/demo-row.tsx | 37 ---- devui/radio/demo/radio-demo.tsx | 55 ----- devui/radio/demo/radio.route.ts | 15 -- devui/radio/doc/api-cn.md | 49 ----- devui/radio/doc/api-en.md | 46 ----- devui/radio/index.ts | 18 +- devui/rate/demo/basic/index.tsx | 34 --- devui/rate/demo/customize/index.tsx | 40 ---- devui/rate/demo/only-read/index.tsx | 24 --- devui/rate/demo/rate-demo.tsx | 42 ---- devui/rate/demo/rate.route.ts | 15 -- devui/rate/demo/type/index.tsx | 36 ---- devui/rate/doc/api-cn.md | 26 --- devui/rate/doc/api-en.md | 26 --- devui/rate/index.ts | 16 ++ devui/rate/{ => src}/rate.scss | 4 +- devui/rate/{ => src}/rate.tsx | 2 +- devui/rate/{ => src}/use-rate.ts | 0 devui/search/demo/demo-basic.tsx | 35 ---- devui/search/demo/search-demo.scss | 3 - devui/search/demo/search-demo.tsx | 18 -- devui/search/demo/search.route.ts | 15 -- devui/search/doc/api-cn.md | 32 --- devui/search/doc/api-en.md | 32 --- devui/search/index.ts | 20 +- devui/search/{ => src}/class-search.ts | 0 devui/search/{ => src}/search.scss | 4 +- devui/search/{ => src}/search.tsx | 7 +- devui/search/{ => src}/use-search.ts | 0 devui/select/index.ts | 18 +- devui/style/core/_form.scss | 18 +- devui/switch/demo/demo-basic.tsx | 35 ---- devui/switch/demo/demo-custom.tsx | 42 ---- devui/switch/demo/switch-demo.tsx | 25 --- devui/switch/demo/switch.route.ts | 15 -- devui/switch/doc/api-cn.md | 28 --- devui/switch/doc/api-en.md | 28 --- devui/switch/index.ts | 18 +- devui/tab/index.ts | 16 ++ devui/{tabs/tab.tsx => tab/src/tab-item.tsx} | 6 +- devui/{tabs/tabs.scss => tab/src/tab.scss} | 10 +- devui/{tabs/tabs.tsx => tab/src/tab.tsx} | 21 +- devui/tabs/demo/tabs-demo.tsx | 12 -- devui/tabs/demo/tabs.route.ts | 15 -- devui/tabs/doc/api-cn.md | 46 ----- devui/tabs/doc/api-en.md | 48 ----- devui/tabs/index.ts | 10 - .../__tests__/tag-input.spec.ts} | 32 +-- devui/tag-input/index.ts | 16 ++ .../src/remove-btn.tsx | 0 .../src/tag-input.scss} | 0 .../src/tag-input.tsx} | 8 +- devui/tags-input/demo/demo-basic.tsx | 52 ----- devui/tags-input/demo/demo-disabled.tsx | 28 --- devui/tags-input/demo/tags-input-demo.tsx | 25 --- devui/tags-input/demo/tags-input.route.ts | 15 -- devui/tags-input/doc/api-cn.md | 44 ---- devui/tags-input/doc/api-en.md | 44 ---- devui/tags-input/index.ts | 10 - devui/text-input/demo/demo-basic.tsx | 20 -- devui/text-input/demo/demo-size.tsx | 20 -- devui/text-input/demo/text-input-demo.tsx | 27 --- devui/text-input/demo/text-input.route.ts | 15 -- devui/text-input/doc/api-cn.md | 23 --- devui/text-input/doc/api-en.md | 23 --- devui/text-input/index.ts | 10 - sites/.vitepress/config/sidebar.ts | 67 +++++- sites/components/accordion/index.md | 4 + sites/components/anchor/index.md | 4 + .../components/{text-input => input}/index.md | 8 +- sites/components/loading/index.md | 28 +-- sites/components/search/index.md | 4 + sites/components/{tabs => tab}/index.md | 2 +- .../{tags-input => tag-input}/index.md | 10 +- 156 files changed, 580 insertions(+), 3576 deletions(-) delete mode 100644 devui/accordion/demo/accordion-demo.tsx delete mode 100644 devui/accordion/demo/accordion.route.ts delete mode 100644 devui/accordion/doc/api-cn.md delete mode 100644 devui/accordion/doc/api-en.md rename devui/accordion/{ => src}/accordion-item.tsx (76%) rename devui/accordion/{ => src}/accordion-list.tsx (91%) rename devui/accordion/{ => src}/accordion-menu.tsx (76%) rename devui/accordion/{ => src}/accordion.scss (96%) rename devui/accordion/{ => src}/accordion.tsx (60%) rename devui/accordion/{ => src}/accordion.type.ts (60%) delete mode 100644 devui/alert/demo/alert-demo.scss delete mode 100644 devui/alert/demo/alert-demo.tsx delete mode 100644 devui/alert/demo/alert.route.ts delete mode 100644 devui/alert/demo/basic/basic.tsx delete mode 100644 devui/alert/demo/close/close.tsx delete mode 100644 devui/alert/demo/without-icon/without-icon.tsx delete mode 100644 devui/alert/doc/api-cn.md delete mode 100644 devui/alert/doc/api-en.md rename devui/alert/{ => src}/alert-close-icon.tsx (97%) rename devui/alert/{ => src}/alert-type-icon.tsx (97%) rename devui/alert/{ => src}/alert.scss (94%) rename devui/alert/{ => src}/alert.tsx (90%) delete mode 100644 devui/anchor/demo/anchor-demo.tsx delete mode 100644 devui/anchor/demo/anchor.route.ts delete mode 100644 devui/anchor/doc/api-cn.md delete mode 100644 devui/anchor/doc/api-en.md rename devui/anchor/{ => src}/anchor.tsx (78%) delete mode 100644 devui/avatar/demo/avatar-demo.scss delete mode 100644 devui/avatar/demo/avatar-demo.tsx delete mode 100644 devui/avatar/demo/avatar.route.ts delete mode 100644 devui/avatar/demo/basic/basic.tsx delete mode 100644 devui/avatar/demo/config/config.tsx delete mode 100644 devui/avatar/demo/special/special.tsx delete mode 100644 devui/avatar/doc/api-cn.md delete mode 100644 devui/avatar/doc/api-en.md rename devui/avatar/{ => src}/avatar-body-icon.tsx (90%) rename devui/avatar/{ => src}/avatar-nobody-icon.tsx (98%) rename devui/avatar/{ => src}/avatar.scss (86%) rename devui/avatar/{ => src}/avatar.tsx (98%) rename devui/carousel/{ => src}/carousel.scss (94%) rename devui/carousel/{ => src}/carousel.tsx (99%) rename devui/carousel/{ => src}/item.tsx (100%) rename devui/carousel/{ => src}/types.ts (100%) delete mode 100644 devui/checkbox/demo/checkbox-demo.tsx delete mode 100644 devui/checkbox/demo/checkbox.route.ts delete mode 100644 devui/checkbox/demo/demo-basic.tsx delete mode 100644 devui/checkbox/demo/demo-checkbox-group.tsx delete mode 100644 devui/checkbox/doc/api-cn.md delete mode 100644 devui/checkbox/doc/api-en.md rename devui/{text-input/__tests__/text-input.spec.ts => input/__tests__/input.spec.ts} (66%) create mode 100644 devui/input/index.ts rename devui/{text-input/src/text-input.scss => input/src/input.scss} (100%) rename devui/{text-input/src/text-input.tsx => input/src/input.tsx} (91%) rename devui/{text-input => input}/src/use-input.tsx (100%) delete mode 100644 devui/panel/demo/basic/basic.tsx delete mode 100644 devui/panel/demo/condition-change/condition-change.tsx delete mode 100644 devui/panel/demo/panel-demo.tsx delete mode 100644 devui/panel/demo/panel.route.ts delete mode 100644 devui/panel/demo/type/type.tsx delete mode 100644 devui/panel/doc/api-cn.md delete mode 100644 devui/panel/doc/api-en.md rename devui/panel/{ => src}/panel.scss (98%) rename devui/panel/{ => src}/panel.tsx (88%) delete mode 100644 devui/progress/doc/api-cn.md delete mode 100644 devui/progress/doc/api-en.md rename devui/progress/{ => src}/progress.scss (100%) rename devui/progress/{ => src}/progress.tsx (100%) delete mode 100644 devui/radio/demo/demo-column.tsx delete mode 100644 devui/radio/demo/demo-custom.tsx delete mode 100644 devui/radio/demo/demo-disabled.tsx delete mode 100644 devui/radio/demo/demo-prevent.tsx delete mode 100644 devui/radio/demo/demo-row.tsx delete mode 100644 devui/radio/demo/radio-demo.tsx delete mode 100644 devui/radio/demo/radio.route.ts delete mode 100644 devui/radio/doc/api-cn.md delete mode 100644 devui/radio/doc/api-en.md delete mode 100644 devui/rate/demo/basic/index.tsx delete mode 100644 devui/rate/demo/customize/index.tsx delete mode 100644 devui/rate/demo/only-read/index.tsx delete mode 100644 devui/rate/demo/rate-demo.tsx delete mode 100644 devui/rate/demo/rate.route.ts delete mode 100644 devui/rate/demo/type/index.tsx delete mode 100644 devui/rate/doc/api-cn.md delete mode 100644 devui/rate/doc/api-en.md create mode 100644 devui/rate/index.ts rename devui/rate/{ => src}/rate.scss (92%) rename devui/rate/{ => src}/rate.tsx (98%) rename devui/rate/{ => src}/use-rate.ts (100%) delete mode 100644 devui/search/demo/demo-basic.tsx delete mode 100644 devui/search/demo/search-demo.scss delete mode 100644 devui/search/demo/search-demo.tsx delete mode 100644 devui/search/demo/search.route.ts delete mode 100644 devui/search/doc/api-cn.md delete mode 100644 devui/search/doc/api-en.md rename devui/search/{ => src}/class-search.ts (100%) rename devui/search/{ => src}/search.scss (87%) rename devui/search/{ => src}/search.tsx (95%) rename devui/search/{ => src}/use-search.ts (100%) delete mode 100644 devui/switch/demo/demo-basic.tsx delete mode 100644 devui/switch/demo/demo-custom.tsx delete mode 100644 devui/switch/demo/switch-demo.tsx delete mode 100644 devui/switch/demo/switch.route.ts delete mode 100644 devui/switch/doc/api-cn.md delete mode 100644 devui/switch/doc/api-en.md create mode 100644 devui/tab/index.ts rename devui/{tabs/tab.tsx => tab/src/tab-item.tsx} (83%) rename devui/{tabs/tabs.scss => tab/src/tab.scss} (97%) rename devui/{tabs/tabs.tsx => tab/src/tab.tsx} (83%) delete mode 100644 devui/tabs/demo/tabs-demo.tsx delete mode 100644 devui/tabs/demo/tabs.route.ts delete mode 100644 devui/tabs/doc/api-cn.md delete mode 100644 devui/tabs/doc/api-en.md delete mode 100644 devui/tabs/index.ts rename devui/{tags-input/__tests__/tags-input.spec.ts => tag-input/__tests__/tag-input.spec.ts} (89%) create mode 100644 devui/tag-input/index.ts rename devui/{tags-input => tag-input}/src/remove-btn.tsx (100%) rename devui/{tags-input/src/tags-input.scss => tag-input/src/tag-input.scss} (100%) rename devui/{tags-input/src/tags-input.tsx => tag-input/src/tag-input.tsx} (98%) delete mode 100644 devui/tags-input/demo/demo-basic.tsx delete mode 100644 devui/tags-input/demo/demo-disabled.tsx delete mode 100644 devui/tags-input/demo/tags-input-demo.tsx delete mode 100644 devui/tags-input/demo/tags-input.route.ts delete mode 100644 devui/tags-input/doc/api-cn.md delete mode 100644 devui/tags-input/doc/api-en.md delete mode 100644 devui/tags-input/index.ts delete mode 100644 devui/text-input/demo/demo-basic.tsx delete mode 100644 devui/text-input/demo/demo-size.tsx delete mode 100644 devui/text-input/demo/text-input-demo.tsx delete mode 100644 devui/text-input/demo/text-input.route.ts delete mode 100644 devui/text-input/doc/api-cn.md delete mode 100644 devui/text-input/doc/api-en.md delete mode 100644 devui/text-input/index.ts create mode 100644 sites/components/accordion/index.md create mode 100644 sites/components/anchor/index.md rename sites/components/{text-input => input}/index.md (37%) create mode 100644 sites/components/search/index.md rename sites/components/{tabs => tab}/index.md (85%) rename sites/components/{tags-input => tag-input}/index.md (88%) diff --git a/devui-cli/templates/vue-devui.js b/devui-cli/templates/vue-devui.js index 97d665d3..c6def01b 100644 --- a/devui-cli/templates/vue-devui.js +++ b/devui-cli/templates/vue-devui.js @@ -35,7 +35,7 @@ export { export default { version: '${VERSION}', - install(app: App) { + install(app: App): void { installs.forEach((p) => app.use(p as any)) } } diff --git a/devui/accordion/demo/accordion-demo.tsx b/devui/accordion/demo/accordion-demo.tsx deleted file mode 100644 index b39252ff..00000000 --- a/devui/accordion/demo/accordion-demo.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { defineComponent } from 'vue' - -export default defineComponent({ - name: 'd-accordion-demo', - props: { - }, - setup(props, ctx) { - return () => { - return
devui-accordion-demo
- } - } -}) \ No newline at end of file diff --git a/devui/accordion/demo/accordion.route.ts b/devui/accordion/demo/accordion.route.ts deleted file mode 100644 index ca347814..00000000 --- a/devui/accordion/demo/accordion.route.ts +++ /dev/null @@ -1,15 +0,0 @@ -import AccordionDemoComponent from './accordion-demo' -import DevUIApiComponent from '../../shared/devui-api/devui-api' - -import ApiCn from '../doc/api-cn.md' -import ApiEn from '../doc/api-en.md' -const routes = [ - { path: '', redirectTo: 'demo' }, - { path: 'demo', component: AccordionDemoComponent}, - { path: 'api', component: DevUIApiComponent, meta: { - 'zh-cn': ApiCn, - 'en-us': ApiEn - }} -] - -export default routes diff --git a/devui/accordion/doc/api-cn.md b/devui/accordion/doc/api-cn.md deleted file mode 100644 index e9977507..00000000 --- a/devui/accordion/doc/api-cn.md +++ /dev/null @@ -1,193 +0,0 @@ -# 如何使用 - -在 module 中引入： - -```typescript -import { AccordionModule } from 'ng-devui/accordion'; -``` - -在页面中使用: - -```html - -``` - -## Accordion - -### d-accordion 参数 - -| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | -| :----------------: | :---------------------------------------------------: | :--------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | -------------------------------------------------------------- | -| data | `Array \| AccordionMenuType` | -- | 必选，数据源，可以自定义数组或者使用预设的`AccordionMenuType` | [基本用法](demo#basic-usage) | -| titleKey | `string` | 'title' | 可选，标题的属性名，item[titleKey]类型为`string`，为标题显示内容 | [改变键值](demo#change-values) | -| loadingKey | `string` | 'loading' | 可选，子菜单是否加载中的判断属性名，item[loadingKey]类型为`boolean` | [改变键值](demo#change-values) | -| childrenKey | `string` | 'children' | 可选，子菜单的属性名，item[childrenKey]类型为`Array` | [改变键值](demo#change-values) | -| disabledKey | `string` | 'disabled' | 可选，是否禁用的属性名，item[disabledKey]类型为`boolean` | [改变键值](demo#change-values) | -| activeKey | `string` | 'active' | 可选，子菜单是否激活的属性名，item[activeKey]类型为`boolean` | [改变键值](demo#change-values) | -| openKey | `string` | 'open' | 可选，菜单是否展开的属性名，item[openKey]类型为`boolean` | [改变键值](demo#change-values) | -| restrictOneOpen | `boolean` | false | 可选，限制一级菜单同时只能打开一个， 默认不限制 | [基本用法](demo#basic-usage) | -| menuItemTemplate | `TemplateRef` | 内置 | 可选， 可展开菜单内容条模板，可用变量值见下 | [使用模板](demo#using-templates) | -| itemTemplate | `TemplateRef` | 内置 | 可选，可点击菜单内容条模板，可用变量值见下 | [使用模板](demo#using-templates) | -| noContentTemplate | `TemplateRef` | 内置 | 可选，没有内容的时候使用自定义模板，可用变量值见下 | [使用模板](demo#using-templates) | -| loadingTemplate | `TemplateRef` | 内置 | 可选，加载中使用自定义模板，可用变量值见下 | [使用模板](demo#using-templates) | -| innerListTemplate | `TemplateRef` | 内置 | 可选，子列表内容完全自定义，用做折叠面板，可用变量值见下 | [使用模板](demo#using-templates) | -| linkType | `'routerLink'\|'hrefLink'\|'dependOnLinkTypeKey'\|''` | '' | 可选，`'routerLink'`为路由场景；`'hrefLink'`为外部链接场景；`'dependOnLinkTypeKey'`为动态路由或外部链接场景；`''`为默认非链接类型（无法右键打开新标签页） | [内置路由和链接类型](demo#use-built-in-routing-and-link-types) | -| linkTypeKey | `string` | 'linkType' | 可选，链接内容的类型的 key 值，用于 linkType 为`'dependOnLinkTypeKey'`时指定对象链接类型属性名，item[linkTypeKey]类型为`'routerLink'\|'hrefLink'\| string`，其中`'routerLink'`为路由链接，`'hrefLink'`为外部链接，其他为默认非链接类型 | -| linkKey | `string` | 'link' | 可选，链接内容的 key，用于 linkType 为连接类型记非`''`时，链接的取值的属性值，item[linkKey]为路由地址或者超链接地址 | -| linkTargetKey | `string` | 'target' | 可选，链接目标窗口的 key，用于链接类型，item[linkTargetKey]为单个链接的目标窗口 | -| linkDefaultTarget | `string` | '\_self' | 可选，不设置 target 的时候 target 默认值为`'_self'`，用于链接类型, 取值等同于 a 链接的 target 属性 | [内置路由和链接类型](demo#use-built-in-routing-and-link-types) | -| autoOpenActiveMenu | `boolean` | false | 可选，是否自动展开带有活跃子项的菜单 | [复合层级和自动展开](demo#compound-level-and-auto-expand) | -| accordionType | `'normal'\|'embed'` | 'normal' | 可选，菜单形式是普通（带阴影）还是内嵌（不带阴影） | [基本用法](demo#basic-usage) | -| showAnimation | `boolean` | true | 可选，是否展示动画 | [内置路由和链接类型](demo#use-built-in-routing-and-link-types) | - -### d-accordion 事件 - -| 事件 | 类型 | 说明 | 跳转 Demo | -| :--------------: | :-----------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------: | ---------------------------- | -| menuToggle | `EventEmitter<`[`AccordionMenuToggleEvent`](#accordionmenutoggleevent)`>` | 可选，可展开菜单展开事件，返回对象里属性 item 为点击的对象数据，open 为 true 则将要展开 false 则将要关闭， parent 为父对象数据，event 为点击事件的原生事件 | [基本用法](demo#basic-usage) | -| itemClick | `EventEmitter<`[`AccordionItemClickEvent`](#accordionitemclickevent)`>` | 可选，可点击菜单点击事件，返回对象里属性 item 为点击的对象数据，preActive 对象为上一次展开的对象， parent 为父对象数据，event 为点击事件的原生事件 | [基本用法](demo#basic-usage) | -| activeItemChange | `EventEmitter` | 可选，子项切换的时候会发出新激活的子项的数据 | [基本用法](demo#basic-usage) | - -### AccordionMenuType 定义 - -```typescript -/* 基础数据类型 */ -type AccordionMenuItemLinkType = 'routerLink' | 'hrefLink' | string; -export interface AccordionBase { - title: string; - disabled?: boolean; - [prop: string]: any; -} -interface IAccordionActiveable { - active?: boolean; -} -interface IAccordionFoldable { - open?: boolean; - loading?: boolean; - children?: Array; -} - -interface IAccordionLinkable { - link?: string; - target?: boolean; - linkType?: AccordionMenuItemLinkType; -} -export interface AccordionBaseItem extends AccordionBase, IAccordionActiveable {} -export interface AccordionBaseMenu extends AccordionBase, IAccordionFoldable {} - -export interface AccordionLinkableItem extends AccordionBase, IAccordionActiveable, IAccordionLinkable {} -export interface AccordionMenuItem extends AccordionBase, IAccordionActiveable, IAccordionFoldable, IAccordionLinkable {} - -export type AccordionMenuType = Array; - -/* 通用公共配置数据类型 */ -interface AccordionMenuKeyGroup { - titleKey?: string; - activeKey?: string; - disabledKey?: string; - openKey?: string; - loadingKey?: string; - childrenKey?: string; - linkKey?: string; - linkTargetKey?: string; - linkTypeKey?: string; -} - -type AccordionTemplateRefArray = 'itemTemplate' | 'menuItemTemplate' | 'noContentTemplate' | 'loadingTemplate' | 'innerListTemplate'; -type AccordionTemplateRefGroup = { - [p in AccordionTemplateRefArray]: TemplateRef; -}; -interface AccordionConfigOptions { - restrictOneOpen?: boolean; - autoOpenActiveMenu?: boolean; - showNoContent?: boolean; - linkDefaultTarget?: string; - i18nText: any; - linkType: 'routerLink' | 'hrefLink' | 'dependOnLinkTypeKey' | ''; -} -export interface AccordionOptions extends AccordionConfigOptions, AccordionMenuKeyGroup, AccordionTemplateRefGroup {} -``` - -## AccordionMenuToggleEvent - -``` typescript -export type AccordionMenuToggleEvent = { - item: any; - open: boolean; - parent: any; - event: MouseEvent; -}; -``` - -## AccordionItemClickEvent - -``` typescript -export type AccordionItemClickEvent = { - item: any; - prevActiveItem?: any; - parent: any; - event: MouseEvent; -}; -``` - -### 模板可以用变量值 - -#### 变量使用方法 - -```html -{{myitem}} -``` - -#### menuItemTemplate 可用变量值 - -| 变量 | 类型 | 变量含义说明 | -| :----------------: | :--------: | :-----------------------------------------------: | -| item | `any` | 可展开类型菜单数据 | -| deepth | `number` | 表示嵌套结构层级 | -| parent | `any` | 所属父级菜单数据 | -| ~~~titleKey~~~ | `string` | `已经废弃`~~~组件的 titleKey 值~~~ | -| ~~~disabledKey~~~ | `string` | `已经废弃`~~~组件的 disabledKey 值~~~ | -| ~~~openKey~~~ | `string` | `已经废弃`~~~组件的 openKey 值~~~ | -| ~~~menuToggleFn~~~ | `Function` | `已经废弃`~~~参数应为 item，表示一级菜单被点击~~~ | - -#### itemTemplate 可用变量值 - -| 变量 | 类型 | 变量含义说明 | -| :---------------: | :--------: | :-----------------------------------------------: | -| item | `any` | 可点击类型菜单数据 | -| deepth | `number` | 值表示嵌套结构层级 | -| parent | `any` | 所属父级菜单数据 | -| ~~~titleKey~~~ | `string` | `已经废弃`~~~ 组件的 titleKey 值~~~ | -| ~~~disabledKey~~~ | `string` | `已经废弃`~~~ 组件的 disabledKey 值~~~ | -| ~~~activeKey~~~ | `string` | `已经废弃`~~~ 组件的 activeKey 值~~~ | -| ~~~itemClickFn~~~ | `Function` | `已经废弃`~~~参数应为 item，表示二级菜单被点击~~~ | - -#### noContentTemplate 可用变量值 - -| 变量 | 类型 | 变量含义说明 | -| :----: | :------: | :----------------: | -| item | `any` | 父级菜单单个数据 | -| deepth | `number` | 值表示嵌套结构层级 | - -#### loadingTemplate 可用变量值 - -| 变量 | 类型 | 变量含义说明 | -| :--------------: | :------: | :------------------------: | -| item | `any` | 父级菜单单个数据 | -| deepth | `number` | 值表示嵌套结构层级 | -| ~~~loadingKey~~~ | `string` | ~~~组件的 loadingKey 值~~~ | - -#### innerListTemplate 可用变量值 - -| 变量 | 类型 | 变量含义说明 | -| :---------------: | :--------: | :----------------------------------------------------------------: | -| item | `any` | 父级菜单单个数据 | -| deepth | `number` | 值表示嵌套结构层级 | -| ~~~titleKey~~~ | `string` | `已经废弃`~~~组件的 titleKey 值~~~ | -| ~~~loadingKey~~~ | `string` | `已经废弃`~~~组件的 loadingKey 值~~~ | -| ~~~childrenKey~~~ | `string` | `已经废弃`~~~组件的 childrenKey 值~~~ | -| ~~~disabledKey~~~ | `string` | `已经废弃`~~~组件的 disabledKey 值~~~ | -| ~~~openKey~~~ | `string` | `已经废弃`~~~组件的 openKey 值~~~ | -| ~~~activeKey~~~ | `string` | `已经废弃`~~~组件的 activeKey 值，用二级菜单~~~ | -| menuToggleFn | `Function` | 参数应为 item，表示菜单被展开，可选参数 event，原始事件 | -| itemClickFn | `Function` | 参数应为可点击菜单的 item，表示菜单被点击,可选参数 event，原始事件 | diff --git a/devui/accordion/doc/api-en.md b/devui/accordion/doc/api-en.md deleted file mode 100644 index e6467537..00000000 --- a/devui/accordion/doc/api-en.md +++ /dev/null @@ -1,189 +0,0 @@ -# How to use - -Import into module: - -```typescript -import { AccordionModule } from ' ng-devui/accordion'; -``` - -On the page: - -```html - -``` - -## Accordion - -### d-accordion parameter - -| Parameter | Type | Default | Description | Jump to Demo | -| :----------------: | :----------------------------------------------------: | :--------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | -------------------------------------------------------------------------- | -| data | `Array \| AccordionMenuType` | -- | Required. Data source. You can customize an array or use the preset `AccordionMenuType` | [Basic usage](demo#basic-usage) | -| titleKey | `string` | 'title' | Optional. Title attribute name. The type of item[titleKey] is `string`, indicating the title content. | [Change key value](demo#change-values) | -| loadingKey | `string` | 'loading' | Optional. attribute name for determining whether a submenu is loaded. The type of item[loadingKey] is `boolean` | [Change key value](demo#change-values) | -| childrenKey | `string` | 'children' | Optional. Submenu attribute name. The type of item[childrenKey] is `Array` | [Change key value](demo#change-values) | -| disabledKey | `string` | 'disabled' | Optional. indicating whether to disable the attribute. The type of item[disabledKey] is `boolean` | [Change key value](demo#change-values) | -| activeKey | `string` | 'active' | Optional. indicating whether a submenu is activated. The type of item[activeKey] is `boolean` | [Change key value](demo#change-values) | -| openKey | `string` | 'open' | Optional. indicating whether a menu is expanded. The type of item[openKey] is `boolean` | [Change key value](demo#change-values) | -| restrictOneOpen | `boolean` | false | Optional. Only one level-1 menu can be opened at a time. By default, there is no restriction. | [Basic usage](demo#basic-usage) | -| menuItemTemplate | `TemplateRef` | Built-in | Optional. It can expand the menu content bar template. The available variable values are as follows. | [Using a Template](demo#using-templates) | -| itemTemplate | `TemplateRef` | Built-in | Optional. The menu content bar template can be clicked. The available variable values are as follows: | [Using a Template](demo#using-templates) | -| noContentTemplate | `TemplateRef` | Built-in | Optional. If there is no content, use a customized template. The available variable values are as follows: | [Using a Template](demo#using-templates) | -| loadingTemplate | `TemplateRef` | Built-in | Optional. A customized template is used for loading. The available variable values are as follows | [Using a Template](demo#using-templates) | -| innerListTemplate | `TemplateRef` | Built-in | Optional. The sublist content is customized and used as a folding panel. The available variable values are as follows. | [Using a Template](demo#using-templates) | -| linkType | `'routerLink'\|'hrefLink'\|'dependOnLinkTypeKey'\|'''` | '' | Optional. `routerLink'` indicates the routing scenario. `hrefLink'` indicates the external link scenario. `dependOnLinkTypeKey'` indicates the dynamic routing or external link scenario. `''` is the default non-link type (you cannot right-click to open a new tab page) | [Built-in route and link type](demo#use-built-in-routing-and-link-types) | -| linkTypeKey | `string` | 'linkType' | Optional. Key value of the link type, which is used to specify the object link type attribute name when linkType is set to `'dependOnLinkTypeKey'`. The value of item[linkTypeKey] is `'routerLink'\|'hrefLink'\| string`, in the preceding information, `routerLink'` indicates a route link, `hrefLink'` indicates an external link, and other values are default non-link types. | -| linkKey | `string` | 'link' | Optional. Key of the link content, which is used to set the value of the link value when linkType is not set to ````. item[linkKey] indicates the route address or hyperlink address. | -| linkTargetKey | `string` | 'target' | Optional. Key of the target window to be linked, which is used for the link type. item[linkTargetKey] indicates the target window of a single link. | -| linkDefaultTarget | `string` | '\_self' | Optional. If target is not set, the default value of target is `'\_self'`, which is used for the link type and its value is the same as that of target attribute of link a. | [Built-in route and link type](demo#use-built-in-routing-and-link-types) | -| autoOpenActiveMenu | `boolean` | false | Optional. Whether to automatically expand menus with active subitems | [Composite Hierarchy and Auto Expand](demo#compound-level-and-auto-expand) | -| accordionType | `normal ' \| 'embed'` | 'normal' | Optional. The menu format is common (with shadow) or embedded (without shadow). | [Basic usage](demo#basic-usage) | -| showAnimation | `boolean` | true | Optional. Indicating whether to display animations. | [Built-in route and link type](demo#use-built-in-routing-and-link-types) | - -### d-accordion event - -| Event | Type | Description | Jump to Demo | -| :--------------: | :-----------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | ------------------------------- | -| menuToggle | `EventEmitter<`[`AccordionMenuToggleEvent`](#accordionmenutoggleevent)`>` | Optional. The menu can be expanded. In the returned object, the attribute item is the object data clicked. If open is true, the object will be expanded. If open is false, the object will be closed. If parent is the parent object data. Event is the native event of the click event. | [Basic usage](demo#basic-usage) | -| itemClick | `EventEmitter<`[`AccordionItemClickEvent`](#accordionitemclickevent)`>` | Optional. It can click a menu event. In the returned object, the attribute item is the object data of the clicked object, the preActive object is the object expanded last time, the parent object is the data of the parent object, and the event is the native event of the click event. | [Basic usage](demo#basic-usage) | -| activeItemChange | `EventEmitter` | Optional. Data of the newly activated sub-item is sent when the sub-item is switched. | [Basic usage](demo#basic-usage) | - -### AccordionMenuType Definition - -```typescript -/* Basic data type */ -type AccordionMenuItemLinkType = 'routerLink' | 'hrefLink' | string; -export interface AccordionBase { - title: string; - disabled?: boolean; - [prop: string]: any; -} -interface IAccordionActiveable { - active?: boolean; -} -interface IAccordionFoldable { - open?: boolean; - loading?: boolean; - children?: Array; -} -interface IAccordionLinkable { - link?: string; - target?: boolean; - linkType?: AccordionMenuItemLinkType; -} -export interface AccordionBaseItem extends AccordionBase, IAccordionActiveable {} -export interface AccordionBaseMenu extends AccordionBase, IAccordionFoldable {} -export interface AccordionLinkableItem extends AccordionBase, IAccordionActiveable, IAccordionLinkable {} -export interface AccordionMenuItem extends AccordionBase, IAccordionActiveable, IAccordionFoldable, IAccordionLinkable {} -export type AccordionMenuType = Array; - -/* Common configuration data type */ -interface AccordionMenuKeyGroup { - titleKey?: string; - activeKey?: string; - disabledKey?: string; - openKey?: string; - loadingKey?: string; - childrenKey?: string; - linkKey?: string; - linkTargetKey?: string; - linkTypeKey?: string; -} -type AccordionTemplateRefArray = 'itemTemplate' | 'menuItemTemplate' | 'noContentTemplate' | 'loadingTemplate' | 'innerListTemplate'; -type AccordionTemplateRefGroup = { - [p in AccordionTemplateRefArray]: TemplateRef; -}; -interface AccordionConfigOptions { - restrictOneOpen?: boolean; - autoOpenActiveMenu?: boolean; - showNoContent?: boolean; - linkDefaultTarget?: string; - i18nText: any; - linkType: 'routerLink' | 'hrefLink' | 'dependOnLinkTypeKey' | ''; -} -export interface AccordionOptions extends AccordionConfigOptions, AccordionMenuKeyGroup, AccordionTemplateRefGroup {} -``` - -## AccordionMenuToggleEvent - -```typescript -export type AccordionMenuToggleEvent = { - item: any; - open: boolean; - parent: any; - event: MouseEvent; -}; -``` - -## AccordionItemClickEvent - -```typescript -export type AccordionItemClickEvent = { - item: any; - prevActiveItem?: any; - parent: any; - event: MouseEvent; -}; -``` - -### Templates can use variable values. - -#### Variable Usage - -```html -{{myitem}} -``` - -#### menuItemTemplate Available variable values - -| Variable | Type | Variable Description | -| :----------------: | :--------: | :------------------------------------------------------------------------------------------: | -| item | `any` | Expandable menu data | -| deepth | `number` | Indicates the nested structure level. | -| parent | `any` | Parent menu data | -| ~~~titleKey~~~ | `string` | Deprecated.~~~ The titleKey value of the component. ~~~ | -| ~~~disabledKey~~~ | `string` | Deprecated. ~~~ The value of the disabledKey of the component. ~~~ | -| ~~~openKey~~~ | `string` | Deprecated. ~~~ The openKey value of the component. ~~~ | -| ~~~menuToggleFn~~~ | `Function` | Deprecated.~~~ The parameter should be item, indicating that the level-1 menu is clicked.~~~ | - -#### itemTemplate Available variable values - -| Variable | Type | Variable Description | -| :---------------: | :--------: | :------------------------------------------------------------------------------------------: | -| item | `any` | Clickable menu data | -| deepth | `number` | The value indicates the nested structure level. | -| parent | `any` | Parent menu data | -| ~~~titleKey~~~ | `string` | Deprecated.~~~ The titleKey value of the component ~~~ | -| ~~~disabledKey~~~ | `string` | Deprecated.~~~ The value of the disabledKey of the component ~~~ | -| ~~~activeKey~~~ | `string` | Deprecated.~~~ The activeKey value of the component ~~~ | -| ~~~itemClickFn~~~ | `Function` | Deprecated. ~~~The parameter should be item, indicating that the level-2 menu is clicked.~~~ | - -#### noContentTemplate Available variable value - -| Variable | Type | Variable Description | -| :------: | :------: | :---------------------------------------------: | -| item | `any` | Parent menu single data | -| deepth | `number` | The value indicates the nested structure level. | - -#### loadingTemplate Available variable values - -| Variable | Type | Variable Description | -| :---------------------: | :--------------: | :---------------------------------------------: | -| item | `any` | Parent menu single data | -| deepth | `number` | The value indicates the nested structure level. | -| LoadingKey value of the | ~~~loadingKey~~~ | `string` | ~~~ component ~~~ | - -#### InnerListTemplate Available Variable Values - -| Variable | Type | Variable Description | -| :---------------: | :--------: | :------------------------------------------------------------------------------------------------------------------------------------------------------: | -| item | `any` | Parent menu single data | -| deepth | `number` | The value indicates the nested structure level. | -| ~~~titleKey~~~ | `string` | Deprecated.~~~The titleKey value of the component ~~~ | -| ~~~loadingKey~~~ | `string` | Deprecated.~~~ The loading key value of the component ~~~ | -| ~~~childrenKey~~~ | `string` | Deprecated.~~~ The value of childrenKey of the component ~~~ | -| ~~~disabledKey~~~ | `string` | Deprecated.~~~ The value of the disabledKey of the component ~~~ | -| ~~~openKey~~~ | `string` | Deprecated.~~~ The openKey value of the component ~~~ | -| ~~~activeKey~~~ | `string` | Deprecated. ~~~ The activeKey value of the component Use the level-2 menu ~~~ | -| menuToggleFn | `Function` | The parameter should be item, indicating that the menu is expanded. The optional parameter event, original event, is used. | -| itemClickFn | `Function` | The parameter must be an item of a menu that can be clicked, indicating that the menu is clicked. The optional parameter event, original event, is used. | diff --git a/devui/accordion/index.ts b/devui/accordion/index.ts index 9c97a760..f6641c7a 100644 --- a/devui/accordion/index.ts +++ b/devui/accordion/index.ts @@ -1,10 +1,16 @@ -import { App } from 'vue' -import Accordion from './accordion' +import type { App } from 'vue' +import Accordion from './src/accordion' -Accordion.install = function(Vue: App) { - Vue.component(Accordion.name, Accordion) -}; +Accordion.install = function(app: App) { + app.component(Accordion.name, Accordion) +} -Accordion.version = '0.0.1' +export { Accordion } -export default Accordion +export default { + title: 'Accordion 手风琴', + category: '导航', + install(app: App): void { + app.use(Accordion as any) + } +} diff --git a/devui/accordion/accordion-item.tsx b/devui/accordion/src/accordion-item.tsx similarity index 76% rename from devui/accordion/accordion-item.tsx rename to devui/accordion/src/accordion-item.tsx index 150a364d..77389aa8 100644 --- a/devui/accordion/accordion-item.tsx +++ b/devui/accordion/src/accordion-item.tsx @@ -1,11 +1,11 @@ import { defineComponent } from 'vue' export default defineComponent({ - name: 'd-accordion-item', + name: 'DAccordionItem', props: { }, - setup(props, ctx) { + setup() { return () => { return
  • d-accordion-item
    • } diff --git a/devui/accordion/accordion-list.tsx b/devui/accordion/src/accordion-list.tsx similarity index 91% rename from devui/accordion/accordion-list.tsx rename to devui/accordion/src/accordion-list.tsx index adec789b..362cae3e 100644 --- a/devui/accordion/accordion-list.tsx +++ b/devui/accordion/src/accordion-list.tsx @@ -5,12 +5,18 @@ export default defineComponent({ name: 'DAccordionList', inheritAttrs: false, props: { - data: Array as () => Array, + data: { + type: Array as () => Array, + default: null + }, deepth: { type: Number, default: 0 }, - parent: Object as () => AccordionMenuItem, + parent: { + type: Object as () => AccordionMenuItem, + default: null + }, innerListTemplate: Boolean, }, setup(props, ctx) { diff --git a/devui/accordion/accordion-menu.tsx b/devui/accordion/src/accordion-menu.tsx similarity index 76% rename from devui/accordion/accordion-menu.tsx rename to devui/accordion/src/accordion-menu.tsx index 5aaa91e6..c5280a3b 100644 --- a/devui/accordion/accordion-menu.tsx +++ b/devui/accordion/src/accordion-menu.tsx @@ -1,11 +1,11 @@ import { defineComponent } from 'vue' export default defineComponent({ - name: 'd-accordion-menu', + name: 'DAccordionMenu', props: { }, - setup(props, ctx) { + setup() { return () => { return
  • d-accordion-menu
    • } diff --git a/devui/accordion/accordion.scss b/devui/accordion/src/accordion.scss similarity index 96% rename from devui/accordion/accordion.scss rename to devui/accordion/src/accordion.scss index dfe0519c..a6f4317d 100644 --- a/devui/accordion/accordion.scss +++ b/devui/accordion/src/accordion.scss @@ -1,8 +1,8 @@ -@import '../style/mixins/index'; -@import '../style/theme/color'; -@import '../style/theme/font'; -@import '../style/theme/shadow'; -@import '../style/theme/corner'; +@import '../../style/mixins/index'; +@import '../../style/theme/color'; +@import '../../style/theme/font'; +@import '../../style/theme/shadow'; +@import '../../style/theme/corner'; :host { display: block; diff --git a/devui/accordion/accordion.tsx b/devui/accordion/src/accordion.tsx similarity index 60% rename from devui/accordion/accordion.tsx rename to devui/accordion/src/accordion.tsx index 062d44a7..9935f71d 100644 --- a/devui/accordion/accordion.tsx +++ b/devui/accordion/src/accordion.tsx @@ -1,12 +1,15 @@ -import { defineComponent } from 'vue' +import { defineComponent, reactive } from 'vue' import AccordionList from './accordion-list' import { AccordionMenuType } from './accordion.type' import './accordion.scss' export default defineComponent({ - name: 'd-accordion', + name: 'DAccordion', props: { - data: Array as () => Array | AccordionMenuType, + data: { + type: Array as () => Array | AccordionMenuType, + default: null + }, /* Key值定义, 用于自定义数据结构 */ titleKey: { type : String, default: 'title' }, // 标题的key，item[titleKey]类型为string，为标题显示内容 loadingKey: { type : String, default: 'loading' }, // 子菜单动态加载item[loadingKey]类型为boolean @@ -16,23 +19,35 @@ export default defineComponent({ openKey: { type : String, default: 'open' }, // 菜单是否打开 /* 菜单模板 */ - menuItemTemplate: { type: String }, // 可展开菜单内容条模板 - itemTemplate: { type: String }, // 可点击菜单内容条模板 + menuItemTemplate: { type: String, default: '' }, // 可展开菜单内容条模板 + itemTemplate: { type: String, default: '' }, // 可点击菜单内容条模板 - menuToggle: Function as unknown as () => ((event: MouseEvent) => void), // 可展开菜单展开事件 - itemClick: Function as unknown as () => ((event: MouseEvent) => void), // 可点击菜单点击事件 - activeItemChange: Function as unknown as () => ((event: MouseEvent) => void), + menuToggle: { + type: Function as unknown as () => ((event: MouseEvent) => void), + default: null + }, // 可展开菜单展开事件 + itemClick: { + type: Function as unknown as () => ((event: MouseEvent) => void), + default: null + }, // 可点击菜单点击事件 + activeItemChange: { + type: Function as unknown as () => ((event: MouseEvent) => void), + default: null + }, /** 高级选项和模板 */ restrictOneOpen: { type: Boolean, default: false }, // 限制一级菜单同时只能打开一个 autoOpenActiveMenu: { type: Boolean, default: false }, // 自动展开活跃菜单 showNoContent: { type: Boolean, default: true }, // 没有内容的时候是否显示没有数据 - noContentTemplate: { type: String }, // 没有内容的时候使用自定义模板 - loadingTemplate: { type: String }, // 加载中使用自定义模板 - innerListTemplate: { type: String }, // 可折叠菜单内容完全自定义，用做折叠面板 + noContentTemplate: { type: String, default: '' }, // 没有内容的时候使用自定义模板 + loadingTemplate: { type: String, default: '' }, // 加载中使用自定义模板 + innerListTemplate: { type: String, default: '' }, // 可折叠菜单内容完全自定义，用做折叠面板 /* 内置路由/链接/动态判断路由或链接类型 */ - linkType: { type: String as () => 'routerLink' | 'hrefLink' | 'dependOnLinkTypeKey' | '' | string, default: '' }, + linkType: { + type: String as () => 'routerLink' | 'hrefLink' | 'dependOnLinkTypeKey' | '' | string, + default: '' + }, linkTypeKey: { type: String, default: 'linkType' }, // linkType为'dependOnLinkTypeKey'时指定对象linkType定义区 linkKey: { type: String, default: 'link' }, // 链接内容的key linkTargetKey: { type: String, default: 'target' }, // 链接目标窗口的key @@ -40,8 +55,8 @@ export default defineComponent({ accordionType: { type: String as () => 'normal' | 'embed', default: 'normal' }, }, - setup(props, ctx) { - const { data, accordionType } = props + setup(props) { + const { data, accordionType } = reactive(props) return () => { return
    diff --git a/devui/accordion/accordion.type.ts b/devui/accordion/src/accordion.type.ts similarity index 60% rename from devui/accordion/accordion.type.ts rename to devui/accordion/src/accordion.type.ts index 10d525fc..85921736 100755 --- a/devui/accordion/accordion.type.ts +++ b/devui/accordion/src/accordion.type.ts @@ -3,23 +3,23 @@ import { TemplateRef } from '@angular/core'; /* 基础数据类型 */ type AccordionMenuItemLinkType = 'routerLink' | 'hrefLink' | string; export interface AccordionBase { - title: string; - disabled?: boolean; - [prop: string]: any; + title: string + disabled?: boolean + [prop: string]: any } interface IAccordionActiveable { - active?: boolean; + active?: boolean } interface IAccordionFoldable { - open?: boolean; - loading?: boolean; - children?: Array; + open?: boolean + loading?: boolean + children?: Array } interface IAccordionLinkable { - link?: string; - target?: boolean; - linkType?: AccordionMenuItemLinkType; + link?: string + target?: boolean + linkType?: AccordionMenuItemLinkType } export interface AccordionBaseItem extends AccordionBase, @@ -46,29 +46,29 @@ export type AccordionMenuType = Array; /* 基础事件类型 */ export interface AccordionMenuToggleEvent { - item: any; - open: boolean; - parent: any; - event: MouseEvent; + item: any + open: boolean + parent: any + event: MouseEvent } export interface AccordionItemClickEvent { - item: any; - prevActiveItem?: any; - parent: any; - event: MouseEvent; + item: any + prevActiveItem?: any + parent: any + event: MouseEvent } /* 通用公共配置数据类型 */ interface AccordionMenuKeyGroup { - titleKey?: string; - activeKey?: string; - disabledKey?: string; - openKey?: string; - loadingKey?: string; - childrenKey?: string; - linkKey?: string; - linkTargetKey?: string; - linkTypeKey?: string; + titleKey?: string + activeKey?: string + disabledKey?: string + openKey?: string + loadingKey?: string + childrenKey?: string + linkKey?: string + linkTargetKey?: string + linkTypeKey?: string } type AccordionTemplateRefArray = 'itemTemplate' | 'menuItemTemplate' | 'noContentTemplate' | 'loadingTemplate' | 'innerListTemplate'; @@ -76,13 +76,13 @@ type AccordionTemplateRefGroup = { [p in AccordionTemplateRefArray]: TemplateRef }; interface AccordionConfigOptions { - restrictOneOpen?: boolean; - autoOpenActiveMenu?: boolean; - showNoContent?: boolean; - linkDefaultTarget?: string; - i18nCommonText?: any; - i18nText?: any; - linkType: 'routerLink' | 'hrefLink' | 'dependOnLinkTypeKey' | '' | string; + restrictOneOpen?: boolean + autoOpenActiveMenu?: boolean + showNoContent?: boolean + linkDefaultTarget?: string + i18nCommonText?: any + i18nText?: any + linkType: 'routerLink' | 'hrefLink' | 'dependOnLinkTypeKey' | '' | string } export interface AccordionOptions extends AccordionConfigOptions, @@ -93,36 +93,36 @@ export interface AccordionOptions /* 废弃接口 */ /** @deprecated merge into `AccordionMenuItem`*/ export interface AccordionSubMenuItem { - title: string; - active?: boolean; - disabled?: boolean; - [prop: string]: any; + title: string + active?: boolean + disabled?: boolean + [prop: string]: any } /** @deprecated use `AccordionLinkableItem` instead*/ export interface AccordionSubMenuItemHrefLink { - title: string; - link: string; - target?: string; - active?: boolean; - disabled?: boolean; - [prop: string]: any; + title: string + link: string + target?: string + active?: boolean + disabled?: boolean + [prop: string]: any } /** @deprecated use `AccordionLinkableItem` instead*/ export interface AccordionSubMenuItemRouterLink { - title: string; - link: string; - target?: string; - active?: boolean; - disabled?: boolean; - [prop: string]: any; + title: string + link: string + target?: string + active?: boolean + disabled?: boolean + [prop: string]: any } /** @deprecated use `AccordionLinkableItem` instead*/ export interface AccordionSubMenuItemDynamicLink { - title: string; - link: string; - linkType: 'routerLink' | 'hrefLink' | string; - target?: string; - active?: boolean; - disabled?: boolean; - [prop: string]: any; + title: string + link: string + linkType: 'routerLink' | 'hrefLink' | string + target?: string + active?: boolean + disabled?: boolean + [prop: string]: any } diff --git a/devui/alert/demo/alert-demo.scss b/devui/alert/demo/alert-demo.scss deleted file mode 100644 index 5d30e781..00000000 --- a/devui/alert/demo/alert-demo.scss +++ /dev/null @@ -1,3 +0,0 @@ -.devui-alert { - margin-bottom: 20px; -} diff --git a/devui/alert/demo/alert-demo.tsx b/devui/alert/demo/alert-demo.tsx deleted file mode 100644 index 00f938e0..00000000 --- a/devui/alert/demo/alert-demo.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import { defineComponent } from 'vue'; - -import CodeBox from '../../shared/devui-codebox/devui-codebox'; -import AlertBasic from './basic/basic'; -import AlertClose from './close/close'; -import AlertWithoutIcon from './without-icon/without-icon'; -import { DevuiSourceData } from '../../shared/devui-codebox/devui-source-data'; - -//code -import BasicCode from './basic/basic.tsx?raw'; -import CloseCode from './close/close.tsx?raw'; -import WithoutIconCode from './without-icon/without-icon.tsx?raw'; - -import './alert-demo.scss'; - -export default defineComponent({ - name: 'DAlertDemo', - props: { - }, - setup(props, ctx) { - const BasicSource: DevuiSourceData[] = [{title: 'TSX', language: 'TSX', code: BasicCode}]; - const CloseSource: DevuiSourceData[] = [{title: 'TSX', language: 'TSX', code: CloseCode}]; - const WithoutIconSource: DevuiSourceData[] = [{title: 'TSX', language: 'TSX', code: WithoutIconCode}]; - return () => { - return ( -
    -
    -
    { '基本用法' }
    -
    { '共有四种样式：success、danger、warning、info。' }
    - - - -
    -
    -
    { '可关闭提示' }
    -
    { '显示关闭按钮，点击可关闭提示。' }
    - - - -
    -
    -
    { '不使用默认图标' }
    -
    { '不使用默认的类型图标。' }
    - - - -
    -
    - ) - } - } -}) \ No newline at end of file diff --git a/devui/alert/demo/alert.route.ts b/devui/alert/demo/alert.route.ts deleted file mode 100644 index 2ac85e36..00000000 --- a/devui/alert/demo/alert.route.ts +++ /dev/null @@ -1,15 +0,0 @@ -import AlertDemoComponent from './alert-demo' -import DevUIApiComponent from '../../shared/devui-api/devui-api' - -import ApiCn from '../doc/api-cn.md' -import ApiEn from '../doc/api-en.md' -const routes = [ - { path: '', redirectTo: 'demo' }, - { path: 'demo', component: AlertDemoComponent}, - { path: 'api', component: DevUIApiComponent, meta: { - 'zh-cn': ApiCn, - 'en-us': ApiEn - }} -] - -export default routes diff --git a/devui/alert/demo/basic/basic.tsx b/devui/alert/demo/basic/basic.tsx deleted file mode 100644 index d569394d..00000000 --- a/devui/alert/demo/basic/basic.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { defineComponent } from 'vue'; -import Alert from '../../alert'; - -export default defineComponent({ - name: 'd-alert-basic', - setup() { - return () => { - return ( - <> - success - info - warning - danger - - ) - } - } -}) \ No newline at end of file diff --git a/devui/alert/demo/close/close.tsx b/devui/alert/demo/close/close.tsx deleted file mode 100644 index e659df14..00000000 --- a/devui/alert/demo/close/close.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import { defineComponent } from 'vue'; -import DevuiAlert from '../../alert'; - -export default defineComponent({ - name: 'd-alert-close', - setup() { - - const handleClose = (e?: MouseEvent) => { - console.log(e); - } - return () => { - return ( - <> - success - danger - warning - info - - ) - } - } -}) \ No newline at end of file diff --git a/devui/alert/demo/without-icon/without-icon.tsx b/devui/alert/demo/without-icon/without-icon.tsx deleted file mode 100644 index 9a3e13c3..00000000 --- a/devui/alert/demo/without-icon/without-icon.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { defineComponent } from 'vue'; - -import DevuiAlert from '../../alert'; - -export default defineComponent({ - name: 'DAlertWithoutIcon', - setup() { - return () => { - return ( - <> - success - danger - warning - info - - ) - } - } -}) \ No newline at end of file diff --git a/devui/alert/doc/api-cn.md b/devui/alert/doc/api-cn.md deleted file mode 100644 index f0e41dd9..00000000 --- a/devui/alert/doc/api-cn.md +++ /dev/null @@ -1,38 +0,0 @@ -# 如何使用 - -在module中引入： - -```ts -import { AlertModule } from 'ng-devui/alert'; -``` - -在页面中使用： - -```xml - -``` -# d-alert -## d-alert 参数 - -| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | -| :---------: | :--------------------------------------: | :----: | :---------------------------------------- | ------------------------------------------ | -| type | [`AlertType`](#alerttype) | 'info' | 必选，指定警告提示的样式 | [基本用法](demo#basic-usage) | -| cssClass | `string` | -- | 可选，自定义 class 名 | -| closeable | `boolean` | true | 可选，默认显示关闭按钮 | [基本用法](demo#tips-to-close) | -| dismissTime | `number` | -- | 可选，自动关闭 alert 的延迟时间（`ms`） | -| showIcon | `boolean` | true | 可选，是否使用默认的类型图标 | [不使用默认图标](demo#without-icon) | - -## d-alert 事件 - -| 参数 | 类型 | 说明 | 跳转 Demo | -| :--------: | :-----------------: | :------------------------- | -------------------------------------------- | -| closeEvent | `EventEmitter` | 可选，关闭时触发的回调函数 | [可关闭的提示](demo#tips-to-close) | - -# 接口 & 类型定义 -### AlertType - -默认值为'info'， 指定alert警告提示的类型 - -```ts -export type AlertType = 'success' | 'danger' | 'warning' | 'info'; -``` \ No newline at end of file diff --git a/devui/alert/doc/api-en.md b/devui/alert/doc/api-en.md deleted file mode 100644 index 58701b5b..00000000 --- a/devui/alert/doc/api-en.md +++ /dev/null @@ -1,38 +0,0 @@ -# How to use - -Import into module: - -```ts -import { AlertModule } from 'ng-devui/alert'; -``` - -In the page: - -```xml - -``` -# d-alert -## d-alert Parameter - -| Attributes | Type | Default | Description | Jump to Demo | -| :---------: | :--------------------------------------: | :----: | :---------------------------------------- | ------------------------------------------ | -| type | [`AlertType`](#alerttype) | 'info' | Required. Specify the style of the warning prompt | [Basic Usage](demo#basic-usage) | -| cssClass | `string` | -- | Optional. Customize className | -| closeable | `boolean` | true | Optional. The close button is displayed by default | [Basic Usage](demo#tips-to-close) | -| dismissTime | `number` | -- | Optional. Toggle off the delay time of Alert(`ms`) | -| showIcon | `boolean` | true | Optional. Whether to use the default type icon | [Without Icon](demo#without-icon) | - -## d-alert Event - -| Attributes | Type | Description | Jump to Demo | -| :--------: | :-----------------: | :------------------------- | -------------------------------------------- | -| closeEvent | `EventEmitter` | Optional. Callback when alert is closed | [Closable Prompt](demo#tips-to-close) | - -# Interface & Type Definition -### AlertType - -The default value is 'info', which specifies the type of alert warning. - -```ts -export type AlertType = 'success' | 'danger' | 'warning' | 'info'; -``` \ No newline at end of file diff --git a/devui/alert/index.ts b/devui/alert/index.ts index b42151ca..5b0d5c4a 100644 --- a/devui/alert/index.ts +++ b/devui/alert/index.ts @@ -1,10 +1,16 @@ -import { App } from 'vue' -import Alert from './alert' +import type { App } from 'vue' +import Alert from './src/alert' -Alert.install = function(Vue: App) { - Vue.component(Alert.name, Alert) -}; +Alert.install = function(app: App) { + app.component(Alert.name, Alert) +} -Alert.version = '0.0.1' +export { Alert } -export default Alert +export default { + title: 'Alert 警告', + category: '反馈', + install(app: App): void { + app.use(Alert as any) + } +} diff --git a/devui/alert/alert-close-icon.tsx b/devui/alert/src/alert-close-icon.tsx similarity index 97% rename from devui/alert/alert-close-icon.tsx rename to devui/alert/src/alert-close-icon.tsx index 8d9ccdd1..b3b98b98 100644 --- a/devui/alert/alert-close-icon.tsx +++ b/devui/alert/src/alert-close-icon.tsx @@ -1,7 +1,7 @@ import { defineComponent } from 'vue' export default defineComponent({ - name: 'd-alert-close-icon', + name: 'DAlertCloseIcon', setup() { return () => { return ( diff --git a/devui/alert/alert-type-icon.tsx b/devui/alert/src/alert-type-icon.tsx similarity index 97% rename from devui/alert/alert-type-icon.tsx rename to devui/alert/src/alert-type-icon.tsx index 70eda634..ba6754be 100644 --- a/devui/alert/alert-type-icon.tsx +++ b/devui/alert/src/alert-type-icon.tsx @@ -2,9 +2,12 @@ import { defineComponent } from 'vue'; import { AlertType } from './alert'; export default defineComponent({ - name: 'd-alert-type-icon', + name: 'DAlertTypeIcon', props: { - type: String as () => AlertType + type: { + type: String as () => AlertType, + default: '' + } }, setup(props) { return () => { diff --git a/devui/alert/alert.scss b/devui/alert/src/alert.scss similarity index 94% rename from devui/alert/alert.scss rename to devui/alert/src/alert.scss index de3a3e61..9a944a35 100644 --- a/devui/alert/alert.scss +++ b/devui/alert/src/alert.scss @@ -1,8 +1,8 @@ -@import '../style/mixins/index'; -@import '../style/theme/color'; -@import '../style/theme/shadow'; -@import '../style/theme/corner'; -@import '../style/theme/font'; +@import '../../style/mixins/index'; +@import '../../style/theme/color'; +@import '../../style/theme/shadow'; +@import '../../style/theme/corner'; +@import '../../style/theme/font'; .devui-alert { color: $devui-text; diff --git a/devui/alert/alert.tsx b/devui/alert/src/alert.tsx similarity index 90% rename from devui/alert/alert.tsx rename to devui/alert/src/alert.tsx index 8d87712e..06eed01a 100644 --- a/devui/alert/alert.tsx +++ b/devui/alert/src/alert.tsx @@ -1,4 +1,4 @@ -import { defineComponent, ref, Transition, onMounted, watch, toRefs } from 'vue'; +import { defineComponent, ref, Transition, onMounted, } from 'vue'; import AlertCloseIcon from './alert-close-icon'; import AlertTypeIcon from './alert-type-icon'; @@ -8,13 +8,16 @@ import './alert.scss'; export type AlertType = 'success' | 'danger' | 'warning' | 'info'; export default defineComponent({ - name: 'd-alert', + name: 'DAlert', props: { type: { type: String as () => AlertType, default: 'info' }, - cssClass: String, + cssClass: { + type: String, + default: '' + }, closeable: { type: Boolean, default: true @@ -24,10 +27,12 @@ export default defineComponent({ default: true }, dismissTime: { - type: Number + type: Number, + default: 0 }, closeEvent: { - type: Function as unknown as () => ((event?: MouseEvent) => void) + type: Function as unknown as () => ((event?: MouseEvent) => void), + default: null } }, emits:['close'], diff --git a/devui/anchor/demo/anchor-demo.tsx b/devui/anchor/demo/anchor-demo.tsx deleted file mode 100644 index d976d45d..00000000 --- a/devui/anchor/demo/anchor-demo.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { defineComponent } from 'vue' - -export default defineComponent({ - name: 'd-anchor-demo', - props: { - }, - setup(props, ctx) { - return () => { - return
    devui-anchor-demo
    - } - } -}) \ No newline at end of file diff --git a/devui/anchor/demo/anchor.route.ts b/devui/anchor/demo/anchor.route.ts deleted file mode 100644 index 3559e130..00000000 --- a/devui/anchor/demo/anchor.route.ts +++ /dev/null @@ -1,15 +0,0 @@ -import AnchorDemoComponent from './anchor-demo' -import DevUIApiComponent from '../../shared/devui-api/devui-api' - -import ApiCn from '../doc/api-cn.md' -import ApiEn from '../doc/api-en.md' -const routes = [ - { path: '', redirectTo: 'demo' }, - { path: 'demo', component: AnchorDemoComponent}, - { path: 'api', component: DevUIApiComponent, meta: { - 'zh-cn': ApiCn, - 'en-us': ApiEn - }} -] - -export default routes diff --git a/devui/anchor/doc/api-cn.md b/devui/anchor/doc/api-cn.md deleted file mode 100644 index 601316e4..00000000 --- a/devui/anchor/doc/api-cn.md +++ /dev/null @@ -1,123 +0,0 @@ -# 如何使用 - -在 module 中引入： - -```ts -import { AnchorModule } from 'ng-devui'; -``` - -在页面中使用： - -```html -
    -
      -
    • anchorlink-one
      • -
    • anchorlink-two
      • -
    • anchorlink-three
      • -
    • anchorlink-four
      • -
    -
    -
    - anchorlink-one -
    -
    - anchorlink-two -
    -
    - anchorlink-three -
    -
    - anchorlink-four -
    -
    -
    -``` - -```ts -// using router (cross-route), anchorName means your own anchor -this.router.navigateByUrl('../xx/xxx#anchorName'); -this.router.navigate(['/xxx'], { fragment: 'anchorName' }); - -// using router (at the same level), anchorName means your own anchor -this.router.navigateByUrl('#anchorName'); -this.router.navigate([], { fragment: 'anchorName' }); -``` -# dAnchor - -定义一个锚点。 -## dAnchor 参数 - -| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | -| :----------: | :------: | :--: | :---------------------------------------------------: | ---------------------------- | -| dAnchor | `string` | -- | 必选，设置一个锚点的名字 | [基本用法](demo#basic-usage) | -| anchorActive | `string` | -- | 可选，锚点处于激活状态的时候，模块生效对应的 css 类名 | [基本用法](demo#basic-usage) | - -## dAnchor 锚点激活事件 - -自动会给锚点加上以下类对应不同激活的对象。 - -| css 类名 | 代表意义 | -| :---------------------------: | :--------------------: | -| anchor-active-by-anchor-link | 点击锚点链接激活 | -| anchor-active-by-scroll | 容器滚动到锚点位置激活 | -| anchor-active-by-click-inside | 点击锚点内部内容激活 | -| anchor-active-by-initial | 初始化滚动条位置激活 | - -# dAnchorLink - -定义一个锚点的链接，点击链接会滑动到锚点，锚点处于页面顶部的时候也会激活链接的 class。 - -## dAnchorLink 参数 - -| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | -| :----------: | :------: | :--: | :---------------------------------------------------: | ---------------------------- | -| dAnchorLink | `string` | -- | 必选，点击滑动的目标锚点的名字 | [基本用法](demo#basic-usage) | -| anchorActive | `string` | -- | 可选，锚点处于激活状态的时候，链接生效对应的 css 类名 | [基本用法](demo#basic-usage) | - -# dAnchorBox - -必须有一个容器，否则功能无法使用。 - -定义一个扫描锚点的容器，放在 dAnchor 与 dAnchorLink 的公共父节点上，用于锚点和链接之间的通信。 - -## dAnchorBox 参数 - -| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | -| :-----------: | :----------------------------: | :-------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------: | ---------------------------------- | -| view | `{top?:number,bottom?:number}` | {top:0,bottom:0} | 可选，用于可视区域的调整，比如顶部有固定位置的头部等，数值对应被遮挡的顶部或底部的高度 | [基本用法](demo#basic-usage) | -| defaultAnchor | `string` | -- | 可选，进入页面后默认被激活的锚点链接，一般设置为第一个锚点，如果不设置，那么第一个锚点需要在滑动到顶部位置的时候才能激活链接 | [基本用法](demo#basic-usage) | -| scrollTarget | `HTMLElement` | document.documentElement(document.body) | 可选，设置要发生滚动的容器，一般为滚动条所在容器，为主页面的滚动条时候可以不设置 | [更换滚动容器](demo#scroll-target) | - -# dAnchorHashSupport - -dAnchorBox 辅助指令。 -## dAnchorHashSupport 参数 - -以下参数为高级配置参数，一般不需要使用，只需要直接使用 dAnchorHashSupport。 - -| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | -| :--------------------------: | :-------: | :---: | :-----------------------------------------------------------------------------------: | ---------------------------------- | -| updateUrlWhenAnchorActive | `boolean` | true | 可选，当激活 anchor 的时候更新 url，用于处理复杂场景, 默认为 true 即可 | [支持 url 锚点](demo#support-hash) | -| scrollToAnchorByHashOnlyInit | `boolean` | false | 可选，true 为只有初始化的时候接收来自路由的 fragment 字段变化并接收，用于处理复杂场景 | [支持 url 锚点](demo#support-hash) | - -dAnchorHashSupport 指令搭配 dAnchorBox 使用， 可以绑定路由的 hash fragment， 举例 xxx.xxx/xxx#foo, foo 字段为哈希字段。 -跳转哈希字段可以使用 anchor 组件，路由 navigate，routerLink 的 fragment 字段等。 - -# 注意事项 - -注意不可和 ng6.1 以上路由模块自带的 RouterScoller 混用， routerlScroller 会滚动到传统的 id 锚点。 -单独使用 RouterScroller 可以通过配置路由模块。 - -```ts -@NgModule({ - // ...... - imports: [ - // ...... - RouterModule.forRoot(routes, { - anchorScrolling: 'enabled', // 该策略与锚点组件的dAnchorHashSupport指令相冲突 - }), - ], - // ...... -}) -export class DemoModule {} -``` diff --git a/devui/anchor/doc/api-en.md b/devui/anchor/doc/api-en.md deleted file mode 100644 index f44c25a2..00000000 --- a/devui/anchor/doc/api-en.md +++ /dev/null @@ -1,126 +0,0 @@ -# How to use - -Import into module： - -```ts -import { AnchorModule } from 'ng-devui'; -``` - -In the page: - -```html -
    -
      -
    • anchorlink-one
      • -
    • anchorlink-two
      • -
    • anchorlink-three
      • -
    • anchorlink-four
      • -
    -
    -
    - anchorlink-one -
    -
    - anchorlink-two -
    -
    - anchorlink-three -
    -
    - anchorlink-four -
    -
    -
    -``` - -```ts -// using router (cross-route), anchorName means your own anchor -this.router.navigateByUrl('../xx/xxx#anchorName'); -this.router.navigate(['/xxx'], { fragment: 'anchorName' }); - -// using router (at the same level), anchorName means your own anchor -this.router.navigateByUrl('#anchorName'); -this.router.navigate([], { fragment: 'anchorName' }); -``` - -# dAnchor - -Define an anchor point - -## dAnchor Parameters - -| Parameter | Type | Default | Description | Jump to Demo | -| :----------: | :------: | :-----: | :---------------------------------------------------------------------------------------------------: | -------------------------------------------------- | -| dAnchor | `string` | -- | Required. Sets an anchor name. | [Basic Usage](demo#basic-usage) | -| anchorActive | `string` | -- | Optional. When the anchor is activated, the corresponding CSS class name takes effect for the module. | [Basic Usage](demo#basic-usage) | - -## dAnchor Anchor Activation Event - -The following classes are automatically added to the anchor to correspond to different activated objects: - -| css class name | Meaning | -| :---------------------------: | :-------------------------------------------------------: | -| anchor-active-by-anchor-link | Click the anchor link to activate it. | -| anchor-active-by-scroll | The container scrolls to the anchor point for activation. | -| anchor-active-by-click-inside | Click the anchor content to activate it. | -| anchor-active-by-initial | Initialize the scroll bar position. | - -# dAnchorLink - -Define a link of an anchor point. Click the link to slide to the anchor point. When the anchor point is at the top of the page, the link class is activated. - -## dAnchorLink Parameters - -| Parameter | Type | Default | Description | Jump to Demo | -| :----------: | :------: | :-----: | :------------------------------------------------------------------------------------------------: | -------------------------------------------------- | -| dAnchorLink | `string` | -- | Required. Name of the target anchor point for sliding. | [Basic Usage](demo#basic-usage) | -| anchorActive | `string` | -- | Optional. CSS class name corresponding to the link that takes effect when the anchor is activated. | [Basic Usage](demo#basic-usage) | - -# dAnchorBox - -There must be one container. Otherwise, the function cannot be used. - -Defines a container for scanning anchor points, placed on the common parent node of dAnchor and dAnchorLink, for communication between anchor points and links. - -## dAnchorBox Parameters - -| Parameter | Type | Default | Description | Jump to Demo | -| :-----------: | :----------------------------: | :-------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | --------------------------------------------------------------------- | -| view | `{top?:number,bottom?:number}` | {top:0,bottom:0} | Optional. It is used to adjust the visible region, for example, the head with a fixed position on the top. The value corresponds to the height of the blocked top or bottom. | [Basic Usage](demo#basic-usage) | -| defaultAnchor | `string` | -- | Optional. An anchor link that is activated by default after a page is displayed. Generally, the first anchor link is set to the first anchor link. If this parameter is not set, the first anchor link can be activated only when the first anchor is moved to the top position. | [Basic Usage](demo#basic-usage) | -| scrollTarget | `HTMLElement` | document.documentElement(document.body) | Optional. Sets the container where the scroll bar is located. This parameter is optional when the scroll bar is on the home page. | [Replace Rolling Container](demo#scroll-target) | - -# dAnchorHashSupport - -dAnchorBox support instruction - -## dAnchorHashSupport Parameters - -The following parameters are advanced configuration parameters and are not required. You only need to use dAnchorHashSupport. - -| Parameter | Type | Default | Description | Jump to Demo | -| :--------------------------: | :-------: | :-----: | :-----------------------------------------------------------------------------------------------------------------------------------------------------: | ------------------------------------------------------------------ | -| updateUrlWhenAnchorActive | `boolean` | true | Optional. The URL is updated when the anchor is activated. The default value is true. | [URL Hash Anchor](demo#support-hash) | -| scrollToAnchorByHashOnlyInit | `boolean` | false | Optional. True indicates that the fragment field changes from routes are received only during initialization. This field is used for complex scenarios. | [URL Hash Anchor](demo#support-hash) | - -The dAnchorHashSupport command is used together with the dAnchorBox command to bind the hash fragment of a route. For example, xxx.xxx/xxx#foo, where the foo field is a hash field. -The hop hash field can be the anchor component, route navigate, and routerLink fragment field. - -# Note - -Note that this parameter cannot be used together with the RouterScoller of the routing module of ng6.1 or later. The routerlScroller will scroll to the traditional ID anchor point. -Using RouterScroller alone, you can configure the routing module. - -```ts -@NgModule({ - //...... - imports: [ - //...... - RouterModule.forRoot(routes, { - anchorScrolling: 'enabled', // This policy conflicts with the dAnchorHashSupport instruction of the anchor component. - }), - ], - //...... -}) -export class DemoModule {} -``` diff --git a/devui/anchor/index.ts b/devui/anchor/index.ts index 1be341a8..1502df14 100644 --- a/devui/anchor/index.ts +++ b/devui/anchor/index.ts @@ -1,10 +1,16 @@ -import { App } from 'vue' -import Anchor from './anchor' +import type { App } from 'vue' +import Anchor from './src/anchor' -Anchor.install = function(Vue: App) { - Vue.component(Anchor.name, Anchor) -}; +Anchor.install = function(app: App) { + app.component(Anchor.name, Anchor) +} -Anchor.version = '0.0.1' +export { Anchor } -export default Anchor +export default { + title: 'Anchor 锚点', + category: '导航', + install(app: App): void { + app.use(Anchor as any) + } +} diff --git a/devui/anchor/anchor.tsx b/devui/anchor/src/anchor.tsx similarity index 78% rename from devui/anchor/anchor.tsx rename to devui/anchor/src/anchor.tsx index 6a7920be..36ee97ba 100644 --- a/devui/anchor/anchor.tsx +++ b/devui/anchor/src/anchor.tsx @@ -1,10 +1,10 @@ import { defineComponent } from 'vue' export default defineComponent({ - name: 'd-anchor', + name: 'DAnchor', props: { }, - setup(props, ctx) { + setup() { return () => { return
    devui-anchor
    } diff --git a/devui/avatar/demo/avatar-demo.scss b/devui/avatar/demo/avatar-demo.scss deleted file mode 100644 index f7df92cc..00000000 --- a/devui/avatar/demo/avatar-demo.scss +++ /dev/null @@ -1,3 +0,0 @@ -.devui-avatar { - margin: 8px; -} diff --git a/devui/avatar/demo/avatar-demo.tsx b/devui/avatar/demo/avatar-demo.tsx deleted file mode 100644 index 7aeacb67..00000000 --- a/devui/avatar/demo/avatar-demo.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import { defineComponent, ref } from 'vue'; -import CodeBox from '../../shared/devui-codebox/devui-codebox'; -import { DevuiSourceData } from '../../shared/devui-codebox/devui-source-data'; - -import AvatarBasic from './basic/basic'; -import AvatarConfig from './config/config'; -import AvatarSpecial from './special/special'; - -import BasicCode from './basic/basic.tsx?raw'; -import ConfigCode from './config/config.tsx?raw'; -import SpecialCode from './special/special.tsx?raw'; - -import './avatar-demo.scss'; - -export default defineComponent({ - name: 'd-avatar-demo', - props: { - }, - setup(props, ctx) { - const BasicSource: DevuiSourceData[] = [{ title: 'TSX', language: 'TSX', code: BasicCode }]; - const ConfigSource: DevuiSourceData[] = [{ title: 'TSX', language: 'TSX', code: ConfigCode}]; - const SpecialSource: DevuiSourceData[] = [{ title: 'TSX', language: 'TSX', code: SpecialCode }]; - - return () => { - return ( -
    -
    -
    { '头像显示的基本规则' }
    -
    { "头像组件传入'name'属性时，会根据一定的规则显示头像的字段，具体规则参见API。" }
    - - - -
    -
    -
    { '头像的基础配置' }
    -
    { "头像组件可设置宽度，高度，是否为圆形头像，同时可自定义头像的显示字段，传入自定义图片等。" }
    - - - -
    -
    -
    { '头像的特殊显示' }
    -
    { "头像组件会对一些特殊情况进行处理，具体表现为用户不存在或展示默认头像，详细规则参见API。" }
    - - - -
    -
    - ) - } - } -}) \ No newline at end of file diff --git a/devui/avatar/demo/avatar.route.ts b/devui/avatar/demo/avatar.route.ts deleted file mode 100644 index 72dd63b3..00000000 --- a/devui/avatar/demo/avatar.route.ts +++ /dev/null @@ -1,15 +0,0 @@ -import AvatarDemoComponent from './avatar-demo' -import DevUIApiComponent from '../../shared/devui-api/devui-api' - -import ApiCn from '../doc/api-cn.md' -import ApiEn from '../doc/api-en.md' -const routes = [ - { path: '', redirectTo: 'demo' }, - { path: 'demo', component: AvatarDemoComponent}, - { path: 'api', component: DevUIApiComponent, meta: { - 'zh-cn': ApiCn, - 'en-us': ApiEn - }} -] - -export default routes diff --git a/devui/avatar/demo/basic/basic.tsx b/devui/avatar/demo/basic/basic.tsx deleted file mode 100644 index 1e91ae59..00000000 --- a/devui/avatar/demo/basic/basic.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { defineComponent } from 'vue'; -import DevuiAvatar from '../../avatar'; - -export default defineComponent({ - name: 'd-avatar-basic', - setup() { - return () => { - return ( -
    - - - - -
    - ) - } - } -}) \ No newline at end of file diff --git a/devui/avatar/demo/config/config.tsx b/devui/avatar/demo/config/config.tsx deleted file mode 100644 index 82b536e9..00000000 --- a/devui/avatar/demo/config/config.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { defineComponent } from 'vue'; - -import DevuiAvatar from '../../avatar'; - -export default defineComponent({ - name: 'd-avatar-config', - setup() { - const imgSrc = '/public/logo.svg'; - return () => { - return ( -
    - - - -
    - ) - } - } -}) \ No newline at end of file diff --git a/devui/avatar/demo/special/special.tsx b/devui/avatar/demo/special/special.tsx deleted file mode 100644 index 29f5f7dd..00000000 --- a/devui/avatar/demo/special/special.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { defineComponent } from 'vue'; - -import DevuiAvatar from '../../avatar'; - -export default defineComponent({ - name: 'd-avatar-special', - setup() { - return () => { - return ( -
    - - -
    - ) - } - } -}) \ No newline at end of file diff --git a/devui/avatar/doc/api-cn.md b/devui/avatar/doc/api-cn.md deleted file mode 100644 index edc114bc..00000000 --- a/devui/avatar/doc/api-cn.md +++ /dev/null @@ -1,42 +0,0 @@ -# 如何使用 - -在module中引入： - -```ts -import { AvatarModule } from 'ng-devui/avatar'; -``` - -在页面中使用： - -```xml - -``` - -# d-avatar -## d-avatar 参数 - -| 参数 | 类型 | 默认值 | 描述 | 跳转 Demo | -| :--------: | :--------------------: | :--: | :-------------------------------------------------------------------------- | ------------------------------------------------------------- | -| name | `string` | -- | 必选，传入字符串用于制作头像 | [头像显示的基本规则](demo#basic-rules) | -| gender | `string \| male \| female` | -- | 可选，根据性别区分头像颜色，传入 string，可以是`female \| male`的任意大小写形式 | [头像显示的基本规则](demo#basic-rules) | -| width | `number` | 40 | 可选，设定头像的宽度， 单位为`px` | [头像的基础配置](demo#basic-configuration) | -| height | `number` | 40 | 可选，设定头像的高度，单位为`px` | [头像的基础配置](demo#basic-configuration) | -| isRound | `boolean` | true | 可选，是否显示为圆形头像 | [头像的基础配置](demo#basic-configuration) | -| imgSrc | `string` | -- | 可选，传入自定义图片作为头像 | [头像的基础配置](demo#basic-configuration) | -| customText | `string` | -- | 可选，传入自定义显示文字 | [头像的基础配置](demo#basic-configuration) | - -### 头像显示基本规则 - -- `中文开头`：取传入字符串的最后两个字符 -- `英文开头`：取传入字符串的前面两个字符 -- `多个英文名连用`：取传入字符串的前两个英文名首字母 -- `非中英文开头`：取传入字符串的前两个字符 - -### 头像特殊显示规则 - -- 未传入`name`，`customText`，`imgSrc`，视为使用该头像的用户不存在 -- 传入`name`，`customText`，`imgSrc`的值为空，视为使用该头像的用户无昵称，使用默认头像 - -### 显示优先级排序 - -imgSrc > customText > name diff --git a/devui/avatar/doc/api-en.md b/devui/avatar/doc/api-en.md deleted file mode 100644 index 4d411154..00000000 --- a/devui/avatar/doc/api-en.md +++ /dev/null @@ -1,42 +0,0 @@ -# How to use - -Import into module: - -```ts -import { AvatarModule } from 'ng-devui/avatar'; -``` - -In the page: - -```xml - -``` -# d-avatar -## d-avatar Parameter - -| Parameter | Type | Default | Description | Jump to Demo | -| :--------: | :--------------------: | :--: | :-------------------------------------------------------------------------- | ------------------------------------------------------------- | -| name | `string` | -- | Required. The input character string is used to create a profile picture. | [Basic Rules](demo#basic-rules) | -| gender | `string \| male \| female` | -- | Optional. The profile picture color is differentiated by gender. The input string can be in the format of `female \| male`. | [Basic Rules](demo#basic-rules) | -| width | `number` | 40 | Optional. Width of the avatar(`px`) | [Basic Configuration](demo#basic-configuration) | -| height | `number` | 40 | Optional. Set the height of the avatar(`px`) | [Basic Configuration](demo#basic-configuration) | -| isRound | `boolean` | true | Optional. Indicating whether to display a circular avatar | [Basic Configuration](demo#basic-configuration) | -| imgSrc | `string` | -- | Optional. Import a customized image as the avatar | [Basic Configuration](demo#basic-configuration) | -| customText | `string` | -- | Optional. Input the customized display text | [Basic Configuration](demo#basic-configuration) | - - -### Basic Profile Picture Display Rules - -- `Begin with Chinese `: Use the last two characters. -- `Begin with English `: Use the first two characters. -- `Use multiple English names together`: Use the first two letters of the first English name. -- `Not starting with Chinese or English `: Use the first two characters. - -### Special avatar display rules - -- If `name`, `customText`, and `imgSrc` are not transferred, the user who uses the avatar does not exist. -- If the values of `name`, `customText`, and `imgSrc` are empty, the user who uses the avatar does not have a nickname and the default avatar is used. - -### Display Priority - -imgSrc > customText > name diff --git a/devui/avatar/index.ts b/devui/avatar/index.ts index 95cc4267..50ded686 100644 --- a/devui/avatar/index.ts +++ b/devui/avatar/index.ts @@ -1,10 +1,16 @@ -import { App } from 'vue' -import Avatar from './avatar' +import type { App } from 'vue' +import Avatar from './src/avatar' -Avatar.install = function(Vue: App) { - Vue.component(Avatar.name, Avatar) -}; +Avatar.install = function(app: App) { + app.component(Avatar.name, Avatar) +} -Avatar.version = '0.0.1' +export { Avatar } -export default Avatar +export default { + title: 'Avatar 头像', + category: '数据展示', + install(app: App): void { + app.use(Avatar as any) + } +} diff --git a/devui/avatar/avatar-body-icon.tsx b/devui/avatar/src/avatar-body-icon.tsx similarity index 90% rename from devui/avatar/avatar-body-icon.tsx rename to devui/avatar/src/avatar-body-icon.tsx index 697cd235..916c367d 100644 --- a/devui/avatar/avatar-body-icon.tsx +++ b/devui/avatar/src/avatar-body-icon.tsx @@ -1,13 +1,15 @@ import { defineComponent } from 'vue'; export default defineComponent({ - name: 'avatar-body-icon', + name: 'AvatarBodyIcon', props: { width: { - type: Number + type: Number, + default: 16 }, height: { - type: Number + type: Number, + default: 16 } }, setup(props) { diff --git a/devui/avatar/avatar-nobody-icon.tsx b/devui/avatar/src/avatar-nobody-icon.tsx similarity index 98% rename from devui/avatar/avatar-nobody-icon.tsx rename to devui/avatar/src/avatar-nobody-icon.tsx index 96863fc3..7cf6219e 100644 --- a/devui/avatar/avatar-nobody-icon.tsx +++ b/devui/avatar/src/avatar-nobody-icon.tsx @@ -1,13 +1,15 @@ import { defineComponent } from 'vue'; export default defineComponent({ - name: 'avatar-nobody-icon', + name: 'AvatarNobodyIcon', props: { width: { - type: Number + type: Number, + default: 16 }, height: { - type: Number + type: Number, + default: 16 } }, setup(props) { diff --git a/devui/avatar/avatar.scss b/devui/avatar/src/avatar.scss similarity index 86% rename from devui/avatar/avatar.scss rename to devui/avatar/src/avatar.scss index a6fa8059..21e9cc64 100644 --- a/devui/avatar/avatar.scss +++ b/devui/avatar/src/avatar.scss @@ -1,4 +1,4 @@ -@import '../style/theme/color'; +@import '../../style/theme/color'; .devui-avatar-style { display: inline-block; diff --git a/devui/avatar/avatar.tsx b/devui/avatar/src/avatar.tsx similarity index 98% rename from devui/avatar/avatar.tsx rename to devui/avatar/src/avatar.tsx index 2249f86b..fb7709f3 100644 --- a/devui/avatar/avatar.tsx +++ b/devui/avatar/src/avatar.tsx @@ -6,7 +6,7 @@ import AvatarNoBodyIcon from './avatar-nobody-icon' import './avatar.scss'; export default defineComponent({ - name: 'd-avatar', + name: 'DAvatar', props: { name: { type: String, @@ -29,14 +29,15 @@ export default defineComponent({ default: true }, imgSrc: { - type: String + type: String, + default: '' }, customText: { type: String, default: null } }, - setup(props, ctx) { + setup(props) { const { name, width, height, customText, gender, imgSrc, isRound } = toRefs(props); const isNobody = ref(true); const isErrorImg = ref(false); diff --git a/devui/card/index.ts b/devui/card/index.ts index 7eb08522..0f9aae8b 100644 --- a/devui/card/index.ts +++ b/devui/card/index.ts @@ -1,10 +1,16 @@ -import { App } from 'vue' -import Card from './card' +import type { App } from 'vue' +import Card from './src/card' -Card.install = function(Vue: App) { - Vue.component(Card.name, Card) -}; +Card.install = function(app: App) { + app.component(Card.name, Card) +} -Card.version = '0.0.1' +export { Card } -export default Card +export default { + title: 'Card 卡片', + category: '数据展示', + install(app: App): void { + app.use(Card as any) + } +} diff --git a/devui/carousel/index.ts b/devui/carousel/index.ts index 2a01d52a..aaf42022 100644 --- a/devui/carousel/index.ts +++ b/devui/carousel/index.ts @@ -1,10 +1,16 @@ -import { App } from 'vue' -import Carousel from './carousel' +import type { App } from 'vue' +import Carousel from './src/carousel' -Carousel.install = function(Vue: App) { - Vue.component(Carousel.name, Carousel) -}; +Carousel.install = function(app: App) { + app.component(Carousel.name, Carousel) +} -Carousel.version = '0.0.1' +export { Carousel } -export default Carousel +export default { + title: 'Carousel 走马灯', + category: '数据展示', + install(app: App): void { + app.use(Carousel as any) + } +} diff --git a/devui/carousel/carousel.scss b/devui/carousel/src/carousel.scss similarity index 94% rename from devui/carousel/carousel.scss rename to devui/carousel/src/carousel.scss index 2cbf5013..a60d1de5 100644 --- a/devui/carousel/carousel.scss +++ b/devui/carousel/src/carousel.scss @@ -1,6 +1,6 @@ -@import '../style/theme/color'; -@import '../style/theme/shadow'; -@import '../style/core/animation'; +@import '../../style/theme/color'; +@import '../../style/theme/shadow'; +@import '../../style/core/animation'; @mixin fixed-arrow-button() { position: absolute; diff --git a/devui/carousel/carousel.tsx b/devui/carousel/src/carousel.tsx similarity index 99% rename from devui/carousel/carousel.tsx rename to devui/carousel/src/carousel.tsx index db21aaeb..bd9f54f2 100644 --- a/devui/carousel/carousel.tsx +++ b/devui/carousel/src/carousel.tsx @@ -2,7 +2,7 @@ import { defineComponent, ref, watch, onMounted, onBeforeUnmount, Fragment, Comment } from 'vue'; import { carouselProps, DotTrigger } from './types'; -import Icon from '../icon/src/icon' +import Icon from '../../icon/src/icon' import './carousel.scss'; diff --git a/devui/carousel/item.tsx b/devui/carousel/src/item.tsx similarity index 100% rename from devui/carousel/item.tsx rename to devui/carousel/src/item.tsx diff --git a/devui/carousel/types.ts b/devui/carousel/src/types.ts similarity index 100% rename from devui/carousel/types.ts rename to devui/carousel/src/types.ts diff --git a/devui/checkbox/demo/checkbox-demo.tsx b/devui/checkbox/demo/checkbox-demo.tsx deleted file mode 100644 index 21b4207b..00000000 --- a/devui/checkbox/demo/checkbox-demo.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { defineComponent } from 'vue'; -import { useDemo } from 'hooks/use-demo'; -import DemoBasic from './demo-basic'; -import DemoBasicCode from './demo-basic?raw'; -import DemoCheckboxGroup from './demo-checkbox-group'; -import DemoCheckboxGroupCode from './demo-checkbox-group?raw'; - -export default defineComponent({ - name: 'DCheckboxDemo', - - render () { - return useDemo([{ - id: 'checkbox-basic', - title: '基本用法', - code: DemoBasicCode, - content: - }, { - id: 'checkbox-group', - title: '复选框组', - code: DemoCheckboxGroupCode, - content: - }]); - } -}); diff --git a/devui/checkbox/demo/checkbox.route.ts b/devui/checkbox/demo/checkbox.route.ts deleted file mode 100644 index 5843a544..00000000 --- a/devui/checkbox/demo/checkbox.route.ts +++ /dev/null @@ -1,15 +0,0 @@ -import CheckboxDemoComponent from './checkbox-demo' -import DevUIApiComponent from '../../shared/devui-api/devui-api' - -import ApiCn from '../doc/api-cn.md' -import ApiEn from '../doc/api-en.md' -const routes = [ - { path: '', redirectTo: 'demo' }, - { path: 'demo', component: CheckboxDemoComponent}, - { path: 'api', component: DevUIApiComponent, meta: { - 'zh-cn': ApiCn, - 'en-us': ApiEn - }} -] - -export default routes diff --git a/devui/checkbox/demo/demo-basic.tsx b/devui/checkbox/demo/demo-basic.tsx deleted file mode 100644 index 431661e1..00000000 --- a/devui/checkbox/demo/demo-basic.tsx +++ /dev/null @@ -1,136 +0,0 @@ -import { defineComponent, ref, Ref } from 'vue'; -import DCheckbox from '../src/checkbox'; - -export default defineComponent({ - name: 'DemoBasic', - setup () { - const doUpdate = (checkedRef: Ref, newVal: boolean) => { - checkedRef.value = newVal; - }; - const obj: any = {}; - for (let i = 1; i <= 10; i++) { - obj['checked' + i] = ref(false); - obj['updateChecked' + i] = (newVal: boolean) => { - doUpdate(obj['checked' + i], newVal); - }; - } - - obj.checked1.value = true; - obj.checked9.value = true; - const halfchecked7 = ref(true); - obj.updateChecked7 = (newVal: boolean) => { - halfchecked7.value = !newVal; - doUpdate(obj.checked7, newVal); - }; - - return { - halfchecked7, - ...obj - }; - }, - render () { - const { - checked1, - updateChecked1, - checked2, - updateChecked2, - checked3, - updateChecked3, - checked4, - updateChecked4, - halfchecked7, - checked7, - updateChecked7, - checked9, - updateChecked9 - } = this; - - const checkboxProps = { - checked1: { - 'onUpdate:checked': updateChecked1 - }, checked2: { - 'onUpdate:checked': updateChecked2 - }, checked3: { - 'onUpdate:checked': updateChecked3 - }, checked4: { - 'onUpdate:checked': updateChecked4 - }, checked7: { - 'onUpdate:checked': updateChecked7 - }, checked9: { - 'onUpdate:checked': updateChecked9 - } - }; - - return ( -
    - - Checked - - - Not Checked - - - Custom title - - - No Animation - - - disabled - - - disabled - - - Half-checked - - - - - -
    - ); - } -}); diff --git a/devui/checkbox/demo/demo-checkbox-group.tsx b/devui/checkbox/demo/demo-checkbox-group.tsx deleted file mode 100644 index bc7e8427..00000000 --- a/devui/checkbox/demo/demo-checkbox-group.tsx +++ /dev/null @@ -1,155 +0,0 @@ -import { defineComponent, reactive } from 'vue'; -import DCheckbox from '../src/checkbox'; -import DCheckboxGroup from '../src/checkbox-group'; - -export default defineComponent({ - name: 'DemoCheckboxGroup', - setup () { - const list1 = reactive(['b']); - const list2 = reactive(['b', 'c']); - const list3 = reactive(['a', 'c']); - const opts2 = [ - { - disabled: true, - value: 'a', - label: '道' - }, { - disabled: true, - value: 'b', - label: '可道' - }, { - disabled: true, - value: 'c', - label: '非常道' - }, { - disabled: true, - value: 'd', - label: '名' - }, { - disabled: true, - value: 'e', - label: '可名' - }, { - disabled: true, - value: 'f', - label: '非常名' - }, { - disabled: true, - value: 'g', - label: '无名' - }, { - disabled: true, - value: 'h', - label: '天地之始' - }, { - disabled: true, - value: 'g', - label: '有名' - }, { - disabled: true, - value: 'i', - label: '万物之母' - }, { - disabled: true, - value: 'j', - label: '故常无' - }, { - disabled: true, - value: 'k', - label: '欲以观其妙' - }, { - disabled: true, - value: 'l', - label: '常有' - }, { - disabled: true, - value: 'm', - label: '欲以观其徼' - }, { - disabled: true, - value: 'n', - label: '此两者' - }, { - disabled: true, - value: 'o', - label: '同出而异名' - }, { - disabled: true, - value: 'p', - label: '同谓之玄' - }, { - disabled: true, - value: 'q', - label: '玄之又玄，众妙之门' - } - ]; - const updateList1 = (v: string[]) => { - Object.assign(list1, v); - }; - const updateList3 = (v: string[]) => { - Object.assign(list3, v); - }; - - return { - list1, - list2, - list3, - opts2, - updateList1, - updateList3 - }; - }, - render () { - const { - list1, - list2, - list3, - opts2, - updateList1, - updateList3 - } = this; - - const groupProps = { - 'onUpdate:value': updateList1 - }; - const groupProps3 = { - 'onUpdate:value': updateList3 - }; - - return ( -
    -
    第三项根据条件禁止切换
    - v !== 'c' }> - - 金刚经 - - - 佛说世界 - - - 既非世界 - - - 故名世界 - - - -
    多行复选框
    - - - -
    itemWidth
    - - - - - - - - - - -
    - ); - } -}); diff --git a/devui/checkbox/doc/api-cn.md b/devui/checkbox/doc/api-cn.md deleted file mode 100644 index de907f71..00000000 --- a/devui/checkbox/doc/api-cn.md +++ /dev/null @@ -1,62 +0,0 @@ -# 如何使用 - -在 module 中引入： - -```ts -import { CheckBoxModule } from 'ng-devui'; -``` - -在页面中使用： - -```html - - -``` - -# d-checkbox - -## d-checkbox 参数 - -| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | -| :-----------: | :-----------------------------: | :---: | :-----------------------------------------------------------------------------------: | --------------------------------- | -| name | `string` | -- | 可选，表单域名，input 原生 name 属性 | [基本用法](demo#checkbox-basic) | -| label | `string` | -- | 可选，显示标签 | [基本用法](demo#checkbox-basic) | -| isShowTitle | `boolean` | true | 可选，是否显示 title 提示，默认显示参数`label`的值 | [基本用法](demo#checkbox-basic) | -| title | `string` | -- | 可选，显示自定义 title 提示内容 | [基本用法](demo#checkbox-basic) | -| disabled | `boolean` | false | 可选，是否禁用 | [基本用法](demo#checkbox-basic) | -| labelTemplate | `TemplateRef` | -- | 可选，标签的自定义模板 | [基本用法](demo#checkbox-basic) | -| halfchecked | `boolean` | false | 可选，半选状态 | [基本用法](demo#checkbox-basic) | -| color | `string` | -- | 可选，复选框颜色 | [基本用法](demo#checkbox-basic) | -| showAnimation | `boolean` | true | 可选，控制是否显示动画 | [基本用法](demo#checkbox-basic) | -| beforeChange | `Function\|Promise\|Observable` | -- | 可选，checkbox 切换前的回调函数，返回 boolean 类型，返回 false 可以阻止 checkbox 切换 | [回调切换](demo#condition-change) | - -## d-checkbox 事件 - -| 事件 | 类型 | 说明 | 跳转 Demo | -| :----: | :---------------------: | :--------------------------------------: | ------------------------------- | -| change | `EventEmitter` | 复选框的值改变时发出的事件，值是当前状态 | [基本用法](demo#checkbox-basic) | - -# d-checkbox-group - -## d-checkbox-group 参数 - -| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | -| :-----------: | :-----------------------------: | :------: | :-----------------------------------------------------------------------------------------: | ------------------------------------- | -| name | `string` | -- | 可选，表单域名，input 原生 name 属性 | [使用 CheckBoxGroup](demo#tabs-group) | -| direction | `'row'\|'column'` | 'column' | 可选，显示方向 | [使用 CheckBoxGroup](demo#tabs-group) | -| itemWidth | `number` | -- | 可选，表示每一项 checkbox 的宽度（`px`） | [使用 CheckBoxGroup](demo#tabs-group) | -| isShowTitle | `boolean` | true | 可选，是否显示 title 提示 | [使用 CheckBoxGroup](demo#tabs-group) | -| options | `Array` | [] | 可选，复选框选项数组 | [使用 CheckBoxGroup](demo#tabs-group) | -| filterKey | `string` | -- | 可选，options 为对象数组时，标识选项唯一 id 的键值 | [使用 CheckBoxGroup](demo#tabs-group) | -| labelTemplate | `TemplateRef` | -- | 可选，标签的自定义模板 | [使用 CheckBoxGroup](demo#tabs-group) | -| halfchecked | `boolean` | false | 可选，半选状态 | | -| color | `string` | -- | 可选，复选框颜色 | [使用 CheckBoxGroup](demo#tabs-group) | -| showAnimation | `boolean` | true | 可选，控制是否显示动画 | [使用 CheckBoxGroup](demo#tabs-group) | -| beforeChange | `Function\|Promise\|Observable` | -- | 可选，checkbox 切换前的回调函数，返回 boolean 类型，返回 false 可以阻止 checkbox-group 切换 | [回调切换](demo#condition-change) | -| disabled | `boolean` | false | 可选，是否禁用整个按钮组 | [使用 CheckBoxGroup](demo#tabs-group) | - -## d-checkbox-group 事件 - -| 事件 | 类型 | 说明 | 跳转 Demo | -| :----: | :---------------------: | :-----------------: | ------------------------------------- | -| change | `EventEmitter` | checkbox 值改变事件 | [使用 CheckBoxGroup](demo#tabs-group) | diff --git a/devui/checkbox/doc/api-en.md b/devui/checkbox/doc/api-en.md deleted file mode 100644 index cb09d23d..00000000 --- a/devui/checkbox/doc/api-en.md +++ /dev/null @@ -1,62 +0,0 @@ -# How to use - -Import into module： - -```ts -import { CheckBoxModule } from 'ng-devui'; -``` - -In the page： - -```html - - -``` - -# d-checkbox - -## d-checkbox Parameters - -| Parameter | Type | Default | Description | Jump to Demo | -| :--------------------: | :-----------------------------: | :-----: | :---------------------------------------------------------------------------------------------------------------------------------: | ---------------------------------------------------- | -| name | `string` | -- | Optional. Form domain name. The native name attribute is input. | [Basic usage](demo#checkbox-basic) | -| label | `string` | -- | Optional. Display labels. | [Basic usage](demo#checkbox-basic) | -| isShowTitle | `boolean` | true | Optional. Indicates whether to display the title prompt. The value of the `label` parameter is displayed by default. | [Basic usage](demo#checkbox-basic) | -| title | `string` | -- | Optional. Display the customized title prompt content. | [Basic usage](demo#checkbox-basic) | -| disabled | `boolean` | false | Optional. Indicating whether to disable it. | [Basic usage](demo#checkbox-basic) | -| labelTemplate Template | `TemplateRef` | -- | Optional. Custom template of the label | [Basic usage](demo#checkbox-basic) | -| halfchecked | `boolean` | false | Optional. Half-selected state | [Basic usage](demo#checkbox-basic) | -| color | `string` | -- | Optional. Check box color | [Basic usage](demo#checkbox-basic) | -| showAnimation | `boolean` | true | Optional. Controls whether to display animations. | [Basic usage](demo#checkbox-basic) | -| beforeChange | `Function\|Promise\|Observable` | -- | Callback function before checkbox switching, which returns the boolean type. If false is returned, checkbox switching is prevented. | [Stop Checkbox Switching](demo#condition-change) | - -## d-checkbox Event - -| Event | Type | Description | Jump to Demo | -| :----: | :---------------------: | :-------------------------------------------------------------------------------------------: | ---------------------------------- | -| change | `EventEmitter` | Event that is raised when the value of the check box changes. The value is the current state. | [Basic usage](demo#checkbox-basic) | - -# d-checkbox-group - -## d-checkbox-group Parameters - -| Parameter | Type | Default | Description | Jump to Demo | -| :--------------------: | :-----------------------------: | :------: | :-------------------------------------------------------------------------------------------------------------------------------------------: | ---------------------------------------------------- | -| name | `string` | -- | Optional. Form domain name. The native name attribute is input. | [Checkbox Group](demo#tabs-group) | -| direction | `'row'\|'column'` | 'column' | Optional. Display direction | [Checkbox Group](demo#tabs-group) | -| itemWidth | `number` | -- | Optional. Indicating the width of each checkbox (`px`). | [Checkbox Group](demo#tabs-group) | -| isShowTitle | `boolean` | true | Optional. Whether to display the title prompt | [Checkbox Group](demo#tabs-group) | -| options | `Array` | [] | Optional. Check box option array | [Checkbox Group](demo#tabs-group) | -| filterKey | `string` | -- | Optional. When options is an object array, this parameter identifies the key value of the unique ID of the option. | [Checkbox Group](demo#tabs-group) | -| labelTemplate | `TemplateRef` | -- | Optional. Custom template of the label | [Checkbox Group](demo#tabs-group) | -| halfchecked | `boolean` | false | Optional. Half-selected | | -| color | `string` | -- | Optional. Check box color | [Checkbox Group](demo#tabs-group) | -| showAnimation | `boolean` | true | Optional. Controls whether to display animations. | [Checkbox Group](demo#tabs-group) | -| beforeChange | `Function\|Promise\|Observable` | -- | Callback function before checkbox switching, which returns the boolean type. If false is returned, checkbox-group switching is prevented. | [Stop Checkbox Switching](demo#condition-change) | -| disabled | `boolean` | false | Optional. Whether to disable the entire button group. | [Checkbox Group](demo#tabs-group) | - -## d-checkbox-group Event - -| Event | Type | Description | Jump to Demo | -| :----: | :---------------------: | :-------------------------: | -------------------------------------- | -| change | `EventEmitter` | Checkbox value change event | [Checkbox Group](demo#tabs-group) | diff --git a/devui/checkbox/index.ts b/devui/checkbox/index.ts index f63d359e..32470ee1 100644 --- a/devui/checkbox/index.ts +++ b/devui/checkbox/index.ts @@ -1,10 +1,16 @@ -import { App } from 'vue' +import type { App } from 'vue' import Checkbox from './src/checkbox' -Checkbox.install = function(Vue: App) { - Vue.component(Checkbox.name, Checkbox) -}; +Checkbox.install = function(app: App) { + app.component(Checkbox.name, Checkbox) +} -Checkbox.version = '0.0.1' +export { Checkbox } -export default Checkbox +export default { + title: 'Checkbox 复选框', + category: '数据录入', + install(app: App): void { + app.use(Checkbox as any) + } +} diff --git a/devui/icon/index.ts b/devui/icon/index.ts index aedc16ad..2af69614 100644 --- a/devui/icon/index.ts +++ b/devui/icon/index.ts @@ -1,10 +1,16 @@ -import { App } from 'vue' +import type { App } from 'vue' import Icon from './src/icon' -Icon.install = function(Vue: App) { - Vue.component(Icon.name, Icon) -}; +Icon.install = function(app: App) { + app.component(Icon.name, Icon) +} -Icon.version = '0.0.1' +export { Icon } -export default Icon +export default { + title: 'Icon 图标', + category: '通用', + install(app: App): void { + app.use(Icon as any) + } +} diff --git a/devui/text-input/__tests__/text-input.spec.ts b/devui/input/__tests__/input.spec.ts similarity index 66% rename from devui/text-input/__tests__/text-input.spec.ts rename to devui/input/__tests__/input.spec.ts index ee3c28a0..3256372c 100644 --- a/devui/text-input/__tests__/text-input.spec.ts +++ b/devui/input/__tests__/input.spec.ts @@ -1,14 +1,14 @@ import { mount } from '@vue/test-utils'; import { ref, nextTick } from 'vue'; -import DTextInput from '../src/text-input'; +import DInput from '../src/input'; -describe('d-text-input', () => { - it('d-text-input render work', async () => { +describe('d-input', () => { + it('d-input render work', async () => { const value = ref('abc'); const wrapper = mount({ - components: { DTextInput }, + components: { DInput }, template: ` - + `, setup () { return { @@ -17,7 +17,7 @@ describe('d-text-input', () => { } }); const input = wrapper.find('input'); - expect(input.attributes('dtextinput')).toBe('true'); + expect(input.attributes('dinput')).toBe('true'); expect(input.element.value).toBe('abc'); await input.setValue('def'); @@ -28,15 +28,15 @@ describe('d-text-input', () => { expect(input.element.value).toBe('thx'); }); - it('d-text-input bindEvents work', async () => { + it('d-input bindEvents work', async () => { const onChange = jest.fn(), onFocus = jest.fn(), onBlur = jest.fn(), onKeydown = jest.fn(); const wrapper = mount({ - components: { DTextInput }, + components: { DInput }, template: ` - { expect(onKeydown).toBeCalledTimes(1); }); - it('d-text-input disabled work', async () => { - const wrapper = mount(DTextInput, { + it('d-input disabled work', async () => { + const wrapper = mount(DInput, { props: { disabled: false } @@ -81,8 +81,8 @@ describe('d-text-input', () => { expect(input.attributes('disabled')).toBe(''); }); - it('d-text-input error work', async () => { - const wrapper = mount(DTextInput, { + it('d-input error work', async () => { + const wrapper = mount(DInput, { props: { error: false } @@ -96,27 +96,27 @@ describe('d-text-input', () => { expect(input.classes()).toContain('error'); }); - it('d-text-input size work', async () => { - const wrapper = mount(DTextInput); + it('d-input size work', async () => { + const wrapper = mount(DInput); const input = wrapper.find('input'); - expect(input.classes()).not.toContain('devui-textinput-sm'); - expect(input.classes()).not.toContain('devui-textinput-lg'); + expect(input.classes()).not.toContain('devui-input-sm'); + expect(input.classes()).not.toContain('devui-input-lg'); await wrapper.setProps({ size: 'sm' }); - expect(input.classes()).toContain('devui-textinput-sm'); - expect(input.classes()).not.toContain('devui-textinput-lg'); + expect(input.classes()).toContain('devui-input-sm'); + expect(input.classes()).not.toContain('devui-input-lg'); await wrapper.setProps({ size: 'lg' }); - expect(input.classes()).not.toContain('devui-textinput-sm'); - expect(input.classes()).toContain('devui-textinput-lg'); + expect(input.classes()).not.toContain('devui-input-sm'); + expect(input.classes()).toContain('devui-input-lg'); }); - it('d-text-input showPassword work', async () => { - const wrapper = mount(DTextInput); + it('d-input showPassword work', async () => { + const wrapper = mount(DInput); const input = wrapper.find('input'); expect(input.attributes('type')).toBe('text'); diff --git a/devui/input/index.ts b/devui/input/index.ts new file mode 100644 index 00000000..65c42ed5 --- /dev/null +++ b/devui/input/index.ts @@ -0,0 +1,16 @@ +import type { App } from 'vue' +import Input from './src/input' + +Input.install = function(app: App) { + app.component(Input.name, Input) +} + +export { Input } + +export default { + title: 'Input 输入框', + category: '数据录入', + install(app: App): void { + app.use(Input as any) + } +} diff --git a/devui/text-input/src/text-input.scss b/devui/input/src/input.scss similarity index 100% rename from devui/text-input/src/text-input.scss rename to devui/input/src/input.scss diff --git a/devui/text-input/src/text-input.tsx b/devui/input/src/input.tsx similarity index 91% rename from devui/text-input/src/text-input.tsx rename to devui/input/src/input.tsx index a02f1092..d1c2073d 100644 --- a/devui/text-input/src/text-input.tsx +++ b/devui/input/src/input.tsx @@ -1,13 +1,13 @@ import { defineComponent, computed } from 'vue'; import { inputProps } from './use-input'; -import './text-input.scss' +import './input.scss' export default defineComponent({ - name: 'DTextInput', + name: 'DInput', props: inputProps, emits: ['update:value', 'focus', 'blur', 'change', 'keydown'], setup(props, ctx) { - const sizeCls = computed(() => `devui-textinput-${props.size}`); + const sizeCls = computed(() => `devui-input-${props.size}`); const inputCls = computed(() => { return { error: props.error, @@ -57,7 +57,7 @@ export default defineComponent({ return ( { - return ( -
    - - {{ - header: () => 'Panel with foldable', - body: () => 'This is body' - }} - -

    - - {{ - header: () => 'Panel with header and footer', - body: () => 'This is body', - footer: () => 'This is footer' - }} - -
    - ) - } - } -}) \ No newline at end of file diff --git a/devui/panel/demo/condition-change/condition-change.tsx b/devui/panel/demo/condition-change/condition-change.tsx deleted file mode 100644 index b561f79a..00000000 --- a/devui/panel/demo/condition-change/condition-change.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { defineComponent, ref } from 'vue'; -import Panel from '../../panel'; -import Button from '../../../button/button'; - -export default defineComponent({ - name: 'd-panel-condition-change', - setup() { - - const isCollspaed = true; - const panelToggle = ref(true); - - const beforeToggle = (isOpened: boolean) => { - return isOpened ? panelToggle.value : true; - } - - return () => { - return ( -
    - - {{ - header: () => 'Panel with foldable', - body: () => 'This is body' - }} - -

    - -
    - ) - } - } -}) \ No newline at end of file diff --git a/devui/panel/demo/panel-demo.tsx b/devui/panel/demo/panel-demo.tsx deleted file mode 100644 index acb5bdfd..00000000 --- a/devui/panel/demo/panel-demo.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import { defineComponent } from 'vue' -import CodeBox from '../../shared/devui-codebox/devui-codebox' -import PanelBasic from './basic/basic' -import PanelType from './type/type' -import PanelCoditionChange from './condition-change/condition-change' - -import BasicCode from './basic/basic.tsx?raw'; -import TypeCode from './type/type.tsx?raw'; -import CoditionCode from './condition-change/condition-change.tsx?raw' - -export default defineComponent({ - name: 'd-panel-demo', - props: { - }, - setup(props, ctx) { - const basicSource: any[] = [{title: 'TSX', language: 'TSX', code: BasicCode}]; - const typeSource: any[] = [{title: 'TSX', language: 'TSX', code: TypeCode}]; - const coditionSoure: any[] = [{title: 'TSX', language: 'TSX', code: CoditionCode}]; - return () => { - return
    -
    -
    {'基本用法'}
    -
    - - - -
    -
    -
    {'多种类型'}
    -
    {'面板类型分为default、primary、success，danger、warning、info。'}
    - - - -
    -
    -
    {'根据条件阻止折叠'}
    -
    {'根据条件判断，当panel展开时，点击阻止折叠按钮，将无法折叠panel。当panel折叠时不影响操作。'}
    - - - -
    -
    - } - } -}) \ No newline at end of file diff --git a/devui/panel/demo/panel.route.ts b/devui/panel/demo/panel.route.ts deleted file mode 100644 index ad7619f9..00000000 --- a/devui/panel/demo/panel.route.ts +++ /dev/null @@ -1,15 +0,0 @@ -import PanelDemoComponent from './panel-demo' -import DevUIApiComponent from '../../shared/devui-api/devui-api' - -import ApiCn from '../doc/api-cn.md' -import ApiEn from '../doc/api-en.md' -const routes = [ - { path: '', redirectTo: 'demo' }, - { path: 'demo', component: PanelDemoComponent}, - { path: 'api', component: DevUIApiComponent, meta: { - 'zh-cn': ApiCn, - 'en-us': ApiEn - }} -] - -export default routes diff --git a/devui/panel/demo/type/type.tsx b/devui/panel/demo/type/type.tsx deleted file mode 100644 index 4900481b..00000000 --- a/devui/panel/demo/type/type.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import { defineComponent } from 'vue'; -import Panel from '../../panel'; - -export default defineComponent({ - name: 'd-panel-type', - setup() { - const isCollapsed = true; - return () => { - return ( -
    - - {{ - header: () => 'Panel with default Type', - body: () => 'This is body' - }} - -

    - - {{ - header: () => 'Panel with Primary Type', - body: () => 'This is body' - }} - -

    - - {{ - header: () => 'Panel with Success Type', - body: () => 'This is body' - }} - -

    - - {{ - header: () => 'Panel with Info Type', - body: () => 'This is body' - }} - -

    - - {{ - header: () => 'Panel with Warning Type', - body: () => 'This is body' - }} - -

    - - {{ - header: () => 'Panel with Danger Type', - body: () => 'This is body' - }} - -
    - ) - } - } -}) \ No newline at end of file diff --git a/devui/panel/doc/api-cn.md b/devui/panel/doc/api-cn.md deleted file mode 100644 index 2ec4c7bc..00000000 --- a/devui/panel/doc/api-cn.md +++ /dev/null @@ -1,38 +0,0 @@ -# 如何使用 - -在module中引入： -```ts -import { PanelModule } from 'ng-devui'; -``` - -在页面中使用： -```html - - - - - -``` - -# d-panel -## d-panel 参数 - -| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | -| :----------: | :-----------------------------: | :-------: | :----------------------------------------------------------------------------------------- | ----------------------------------------------------------- | -| type | [`PanelType`](#paneltype) | 'default' | 可选，面板的类型 | [基本用法](demo#basic-usage) | -| cssClass | `string` | -- | 可选，自定义 class 名 | -| isCollapsed | `boolean` | false | 可选，是否展开 | [基本用法](demo#basic-usage) | -| beforeToggle | `Function\|Promise\|Observable` | -- | 可选，面板折叠状态改变前的回调函数，返回 boolean 类型，返回 false 可以阻止面板改变折叠状态 | [根据条件阻止折叠](demo#condition-change) | - -## d-panel 事件 - -| 参数 | 类型 | 说明 | -| :----: | :---------------------: | :--------------------------------------------- | -| toggle | `EventEmitter` | 可选，点击面板时的回调，返回当前面板的展开状态 | - -# 接口 & 类型定义 - -### PanelType -```ts -export type PanelType = 'default' | 'primary' | 'success' | 'danger' | 'warning' | 'info'; -``` \ No newline at end of file diff --git a/devui/panel/doc/api-en.md b/devui/panel/doc/api-en.md deleted file mode 100644 index 13a855ee..00000000 --- a/devui/panel/doc/api-en.md +++ /dev/null @@ -1,40 +0,0 @@ -# How to use - -Import into module： - -```ts -import { PanelModule } from 'ng-devui'; -``` - -In the page： - -```html - - - - - -``` - -# d-panel -## d-panel Parameters - -| Parameter | Type | Default | Description | Jump to Demo | -| :----------: | :-----------------------------: | :-------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- | -| type | [`PanelType`](#paneltype) | 'default' | Optional. Panel type | [Basic Usage](demo#basic-usage) | -| cssClass | `string` | -- | Optional. User-defined class name | -| isCollapsed | `boolean` | false | Optional. Whether to expand the file | [Basic Usage](demo#basic-usage) | -| beforeToggle | `Function\|Promise\|Observable` | -- | Optional. Callback function before the panel folding status changes. The value of this parameter is of the boolean type. If false is returned, the panel folding status changes. | [Prevent Collapse Based on Conditions](demo#condition-change) | - -## d-panel Event - -| Parameter | Type | Description | -| :-------: | :---------------------: | :-------------------------------------------------------------------------------------- | -| toggle | `EventEmitter` | Optional. Callback upon panel click to return the expanded status of the current panel. | - -# Interface & Type Definition - -### PanelType -```ts -export type PanelType = 'default' | 'primary' | 'success' | 'danger' | 'warning' | 'info'; -``` \ No newline at end of file diff --git a/devui/panel/index.ts b/devui/panel/index.ts index a5e61136..796da02b 100644 --- a/devui/panel/index.ts +++ b/devui/panel/index.ts @@ -1,10 +1,16 @@ -import { App } from 'vue' -import Panel from './panel' +import type { App } from 'vue' +import Panel from './src/panel' -Panel.install = function(Vue: App) { - Vue.component(Panel.name, Panel) -}; +Panel.install = function(app: App) { + app.component(Panel.name, Panel) +} -Panel.version = '0.0.1' +export { Panel } -export default Panel +export default { + title: 'Panel 面板', + category: '通用', + install(app: App): void { + app.use(Panel as any) + } +} diff --git a/devui/panel/panel.scss b/devui/panel/src/panel.scss similarity index 98% rename from devui/panel/panel.scss rename to devui/panel/src/panel.scss index 1e69555c..38be0fd2 100644 --- a/devui/panel/panel.scss +++ b/devui/panel/src/panel.scss @@ -1,4 +1,4 @@ -@import '../style/theme/color'; +@import '../../style/theme/color'; .devui-panel { line-height: 1.5; diff --git a/devui/panel/panel.tsx b/devui/panel/src/panel.tsx similarity index 88% rename from devui/panel/panel.tsx rename to devui/panel/src/panel.tsx index 3babad2f..12ccc03d 100644 --- a/devui/panel/panel.tsx +++ b/devui/panel/src/panel.tsx @@ -1,10 +1,10 @@ -import { defineComponent, ref, Transition, onMounted, watch } from 'vue'; +import { defineComponent, ref, Transition, onMounted } from 'vue'; import './panel.scss' export type PanelType = 'default' | 'primary' | 'success' | 'danger' | 'warning' | 'info'; export default defineComponent({ - name: 'd-panel', + name: 'DPanel', props: { type: { type: String as () => PanelType, @@ -18,12 +18,18 @@ export default defineComponent({ type: Boolean, default: undefined }, - beforeToggle: Function as unknown as () => (value: boolean) => boolean | Promise, - toggle: Function as unknown as ()=> ((value: boolean) => void) + beforeToggle: { + type: Function as unknown as () => (value: boolean) => boolean | Promise, + default: null + }, + toggle: { + type: Function as unknown as ()=> ((value: boolean) => void), + default: null + } }, setup(props, ctx) { - let isCollapsed = ref(props.isCollapsed); + const isCollapsed = ref(props.isCollapsed); const bodyEl = ref(); diff --git a/devui/progress/doc/api-cn.md b/devui/progress/doc/api-cn.md deleted file mode 100644 index 9b3ea2f1..00000000 --- a/devui/progress/doc/api-cn.md +++ /dev/null @@ -1,23 +0,0 @@ -# 如何使用 -在module中引入： -```ts -import { ProgressModule } from 'ng-devui/progress'; -``` -在页面中使用： -```html - -``` - -# d-progress - -## d-progress 参数 - -| 参数 | 类型 | 默认值 | 描述 | 跳转 Demo | -| :------------: | :-------: | :-------: | :------------------------------------------------------- | ---------------------------------------------- | -| percentage | `number` | 0 | 可选，进度条的值最大为 100 | [基本用法](demo#basic-usage) | -| percentageText | `string` | -- | 可选，进度条当前值的文字说明比如：'30%' \| '4/5' | [基本用法](demo#basic-usage) | -| barbgcolor | `string` | '#5170ff' | 可选，进度条的颜色显示，默认为天蓝色 | [基本用法](demo#basic-usage) | -| height | `string` | '20px' | 可选，进度条的高度值，默认值为 20px | [基本用法](demo#basic-usage) | -| isCircle | `boolean` | false | 可选， 显示进度条是否为圈形 | [圆环用法](demo#circle-usage) | -| strokeWidth | `number` | 6 | 可选，设置圈形进度条宽度，单位是进度条与画布宽度的百分比 | [圆环用法](demo#circle-usage) | -| showContent | `boolean` | true | 可选，设置圈形进度条内是否展示内容 | [圆环用法](demo#circle-usage) | diff --git a/devui/progress/doc/api-en.md b/devui/progress/doc/api-en.md deleted file mode 100644 index 5343ceeb..00000000 --- a/devui/progress/doc/api-en.md +++ /dev/null @@ -1,23 +0,0 @@ -# How To Use -Import in module： -```ts -import { ProgressModule } from 'ng-devui/progress'; -``` -In the page： -```html - -``` - -# d-progress - -## d-progress parameter - -| Parameter | Type | Default | Description | Jump to Demo | -| :------------: | :-------: | :-------: | :------------------------------------------------------- | ---------------------------------------------- | -| percentage | `number` | 0 | Optional. The maximum value of the progress bar is 100. | [Basic Usage](demo#basic-usage) | -| percentageText | `string` | -- | Optional. Text description of the current value of the progress bar, for example, '30%'\| '4/5' | [Basic Usage](demo#basic-usage) | -| barbgcolor | `string` | '#5170ff' | Optional. Color of the progress bar. The default value is sky blue. | [Basic Usage](demo#basic-usage) | -| height | `string` | '20px' | Optional. The default value is 20px. | [Basic Usage](demo#basic-usage) | -| isCircle | `boolean` | false | Optional. Whether the progress bar is displayed in a circle. | [Circle Usage](demo#circle-usage) | -| strokeWidth | `number` | 6 | Optional. Sets the width of the progress bar. The unit is the percentage of the progress bar to the width of the canvas. | [Circle Usage](demo#circle-usage) | -| showContent | `boolean` | true | Optional. Sets whether to display content in the circle progress bar. | [Circle Usage](demo#circle-usage) | diff --git a/devui/progress/index.ts b/devui/progress/index.ts index e654ac18..c7d4516b 100644 --- a/devui/progress/index.ts +++ b/devui/progress/index.ts @@ -1,10 +1,16 @@ -import { App } from 'vue' -import Progress from './progress' +import type { App } from 'vue' +import Progress from './src/progress' -Progress.install = function(Vue: App) { - Vue.component(Progress.name, Progress) -}; +Progress.install = function(app: App) { + app.component(Progress.name, Progress) +} -Progress.version = '0.0.1' +export { Progress } -export default Progress +export default { + title: 'Progress 进度条', + category: '反馈', + install(app: App): void { + app.use(Progress as any) + } +} diff --git a/devui/progress/progress.scss b/devui/progress/src/progress.scss similarity index 100% rename from devui/progress/progress.scss rename to devui/progress/src/progress.scss diff --git a/devui/progress/progress.tsx b/devui/progress/src/progress.tsx similarity index 100% rename from devui/progress/progress.tsx rename to devui/progress/src/progress.tsx diff --git a/devui/radio/demo/demo-column.tsx b/devui/radio/demo/demo-column.tsx deleted file mode 100644 index 4f425ff9..00000000 --- a/devui/radio/demo/demo-column.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import { defineComponent, ref } from 'vue'; -import DRadioGroup from '../src/radio-group'; -import DRadio from '../src/radio'; - -export default defineComponent({ - name: 'DemoColumn', - setup () { - const radioValRef = ref('Summer'); - const doUpdateValue = (newVal: string) => { - radioValRef.value = newVal; - }; - return { - radioValRef, - doUpdateValue - }; - }, - render () { - const { - radioValRef, - doUpdateValue - } = this; - const groupProps = { - 'onUpdate:value': doUpdateValue, - value: radioValRef - }; - - return ( - - Spring - Summer - Autumn - Winter - - ); - } -}); diff --git a/devui/radio/demo/demo-custom.tsx b/devui/radio/demo/demo-custom.tsx deleted file mode 100644 index cd989527..00000000 --- a/devui/radio/demo/demo-custom.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import { defineComponent, ref, Ref } from 'vue'; -import DRadioGroup from '../src/radio-group'; -import DRadio from '../src/radio'; - -export default defineComponent({ - setup () { - const list1 = [ - '自来也', '大蛇丸', '纲手' - ]; - const list2 = [ - { - name: '鸣人' - }, { - name: '佐助' - }, { - name: '小樱' - } - ]; - const oldRef = ref('自来也'); - const newRef = ref('鸣人'); - const doUpdateValue = (newVal: string, valRef: Ref) => { - valRef.value = newVal; - }; - const doOld = (newVal: string) => { - doUpdateValue(newVal, oldRef); - }; - const doNew = (newVal: string) => { - doUpdateValue(newVal, newRef); - }; - return { - list1, - list2, - oldRef, - newRef, - doOld, - doNew - }; - }, - - render () { - const { - list1, - list2, - oldRef, - newRef, - doOld, - doNew - } = this; - - const groupProps = { - 'onUpdate:value': doOld - }; - const groupPropsNew = { - 'onUpdate:value': doNew - }; - - return ( -
    - - {list1.map(item => {item})} - - - {list2.map(item => 我是{item.name})} - -
    - ); - } -}); diff --git a/devui/radio/demo/demo-disabled.tsx b/devui/radio/demo/demo-disabled.tsx deleted file mode 100644 index be63d4fc..00000000 --- a/devui/radio/demo/demo-disabled.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { defineComponent } from 'vue'; -import DRadioGroup from '../src/radio-group'; -import DRadio from '../src/radio'; - -export default defineComponent({ - render () { - return ( - - 辽沈战役 - 淮海战役 - 平津战役 - - ); - } -}); diff --git a/devui/radio/demo/demo-prevent.tsx b/devui/radio/demo/demo-prevent.tsx deleted file mode 100644 index f3c55455..00000000 --- a/devui/radio/demo/demo-prevent.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import { defineComponent, ref } from 'vue'; -import DRadioGroup from '../src/radio-group'; -import DRadio from '../src/radio'; - -export default defineComponent({ - setup () { - const radioValRef = ref('wu'); - const beforeChange = (v: string) => v !== 'leng'; - const doUpdateValue = (newVal: string) => { - radioValRef.value = newVal; - }; - return { - radioValRef, - beforeChange, - doUpdateValue - }; - }, - render () { - const { - radioValRef, - doUpdateValue, - beforeChange - } = this; - const groupProps = { - 'onUpdate:value': doUpdateValue - }; - - return ( - - 无情 - 铁手 - 追命 - 冷血 - - ); - } -}); diff --git a/devui/radio/demo/demo-row.tsx b/devui/radio/demo/demo-row.tsx deleted file mode 100644 index ca9894b1..00000000 --- a/devui/radio/demo/demo-row.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import { defineComponent, ref } from 'vue'; -import DRadioGroup from '../src/radio-group'; -import DRadio from '../src/radio'; - -export default defineComponent({ - setup () { - const radioValRef = ref('item1'); - const doUpdateValue = (newVal: string) => { - radioValRef.value = newVal; - }; - return { - radioValRef, - doUpdateValue - }; - }, - render () { - const { - radioValRef, - doUpdateValue - } = this; - - const onChange = () => { - console.log(2021); - }; - const groupProps = { - 'onUpdate:value': doUpdateValue - }; - - return ( - - Item1 - Item2 - Item3 - - ); - } -}); diff --git a/devui/radio/demo/radio-demo.tsx b/devui/radio/demo/radio-demo.tsx deleted file mode 100644 index 16f8e6ff..00000000 --- a/devui/radio/demo/radio-demo.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import { defineComponent } from 'vue'; -import { useDemo } from 'hooks/use-demo'; -import DemoRow from './demo-row'; -import DemoRowCode from './demo-row?raw'; -import DemoCol from './demo-column'; -import DemoColCode from './demo-column?raw'; -import DemoPrevent from './demo-prevent'; -import DemoPreventCode from './demo-prevent?raw'; -import DemoDisabled from './demo-disabled'; -import DemoDisabledCode from './demo-disabled?raw'; -import DemoCustom from './demo-custom'; -import DemoCustomCode from './demo-custom?raw'; - -export default defineComponent({ - name: 'DRadioDemo', - - render () { - return useDemo([ - { - id: 'radio-row', - title: '横向排列', - code: DemoRowCode, - content: - }, { - id: 'radio-column', - title: '竖向排列', - code: DemoColCode, - content: - }, { - id: 'radio-prevent', - title: '根据条件终止切换操作', - text: '根据条件判断，第四项禁止跳转。', - code: DemoPreventCode, - content: ( - - ) - }, { - id: 'radio-disabled', - title: '禁用', - code: DemoDisabledCode, - content: ( - - ) - }, { - id: 'radio-custom', - title: '自定义单选项', - text: '数据源可以是普通数组、对象数组等', - code: DemoCustomCode, - content: ( - - ) - } - ]); - } -}); diff --git a/devui/radio/demo/radio.route.ts b/devui/radio/demo/radio.route.ts deleted file mode 100644 index f025bf24..00000000 --- a/devui/radio/demo/radio.route.ts +++ /dev/null @@ -1,15 +0,0 @@ -import RadioDemoComponent from './radio-demo' -import DevUIApiComponent from '../../shared/devui-api/devui-api' - -import ApiCn from '../doc/api-cn.md' -import ApiEn from '../doc/api-en.md' -const routes = [ - { path: '', redirectTo: 'demo' }, - { path: 'demo', component: RadioDemoComponent}, - { path: 'api', component: DevUIApiComponent, meta: { - 'zh-cn': ApiCn, - 'en-us': ApiEn - }} -] - -export default routes diff --git a/devui/radio/doc/api-cn.md b/devui/radio/doc/api-cn.md deleted file mode 100644 index db63ab22..00000000 --- a/devui/radio/doc/api-cn.md +++ /dev/null @@ -1,49 +0,0 @@ -# 如何使用 - -在 module 中引入： - -```ts -import { DRadio } from 'vue-devui'; -``` - -在页面中使用 - -```html - - -``` - -# d-radio -## d-radio 参数 - -| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | -| :----------: | :-----------------------------: | :---: | :------------------------------------------------------------------------------ | ------------------------------------ | -| name | `string` | -- | 必选，单选项名称 | [互相独立的单选项](demo#radio-row) | -| value | `string` | -- | 必选，单选项值 | [互相独立的单选项](demo#radio-row) | -| disabled | `boolean` | false | 可选，是否禁用该单选项 | [禁用](demo#radio-disabled) | | -| beforeChange | `Function \| Promise` | -- | 可选，radio 切换前的回调函数，返回 boolean 类型，返回 false 可以阻止 radio 切换 | [回调切换](demo#radio-prevent) | - -## d-radio 事件 - -| 事件 | 类型 | 说明 | 跳转 Demo | -| :-----------: | :-----------------: | :------------------------------------------ | ------------------------------------ | -| change | `EventEmitter` | Form 事件，单选项值改变时触发，返回选中的值 | [互相独立的单选项](demo#radio-row) | -| update:checked | `EventEmitter` | Form 事件，单选项值改变时触发，返回选中的值 | [互相独立的单选项](demo#radio-row) | - - -# d-radio-group -## d-radio-group 参数 - -| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | -| :----------: | :-----------------------------: | :------: | :-------------------------------------------------------------------------------------------: | -------------------------------------- | -| name | `string` | -- | 必选，单选项名称 （radio 唯一标识符） | [竖向排列](demo#radio-column) | -| value | `string` | -- | 必选，单选数据组 | [竖向排列](demo#radio-column) | -| cssStyle | `'row' \| 'column'` | 'column' | 可选，设置横向或纵向排列 | [横向排列](demo#radio-row) | | -| beforeChange | `Function \| Promise` | -- | 可选，radio-group 切换前的回调函数，返回 boolean 类型，返回 false 可以阻止 radio-group 的切换 | [回调切换](demo#radio-prevent) | - -## d-radio-group 事件 - -| 事件 | 类型 | 说明 | 跳转 Demo | -| :----: | :-----------------: | :------------------------------- | ------------------------- | -| change | `EventEmitter` | 单选项值改变时触发，返回选中的值 | [竖向排列](demo#radio-column) | -| update:value | `EventEmitter` | 单选项值改变时触发，返回选中的值 | [竖向排列](demo#radio-column) | diff --git a/devui/radio/doc/api-en.md b/devui/radio/doc/api-en.md deleted file mode 100644 index ea254c90..00000000 --- a/devui/radio/doc/api-en.md +++ /dev/null @@ -1,46 +0,0 @@ -# How to use - -Import into module： - -```ts -import { RadioModule } from 'ng-devui'; -``` - -In the page: - -```html - - -``` - -# d-radio -## d-radio Parameters - -| Parameter | Type | Default | Description | Jump to Demo | -| :----------: | :-----------------------------: | :-----: | :------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------- | -| name | `string` | -- | Required. Single-option name | [Independent Radios](demo#basic-usage) | -| value | `string` | -- | Required. Single-option value | [Independent Radios](demo#basic-usage) | -| disabled | `boolean` | false | Optional. Whether to disable this option. | [Disabled Radios](demo#disabled) | | -| beforeChange | `Function \| Promise \| Observable` | -- | Callback function before radio switching, which is optional. The return type is boolean. If false is returned, radio switching is prevented. | [Switch with Condition](demo#condition-change) | - -## d-radio Event - -| Event | Type | Description | Jump Demo | -| :-----------: | :-----------------: | :------------------------------------------------------------------------------------------------------------- | ---------------------------------------------- | -| ngModelChange | `EventEmitter` | Form event. This event is triggered when the value of a single option changes. The selected value is returned. | [Independent Radios](demo#basic-usage) | - -# d-radio-group -## d-radio-group Parameters - -| Parameter | Type | Default | Description | Jump to Demo | -| :----------: | :-----------------------------: | :------: | :------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------- | -| name | `string` | -- | Required. Single-option name (unique identifier of the radio) | [Vertical Arrangement](demo#vertical) | -| value | `array` | -- | Required. Single-choice data group | [Vertical Arrangement](demo#vertical) | -| cssStyle | `'row' \| 'column'` | 'column' | Optional. Set the horizontal or vertical arrangement | [Horizontal Arrangement](demo#horizontal) | | -| beforeChange | `Function \| Promise \| Observable` | -- | Callback function before radio-group switching. The return value is of the boolean type. If false is returned, radio-group switching is prevented. | [Switch With Condition in A Radio Group](demo#condition-radio-group) | - -## d-radio-group Event - -| Event | Type | Description | Jump to Demo | -| :----: | :-----------------: | :-------------------------------------------------------------------------------------- | ------------------------------------- | -| change | `EventEmitter` | Triggered when the value of a single option changes and the selected value is returned. | [Vertical Arrangement](demo#vertical) | diff --git a/devui/radio/index.ts b/devui/radio/index.ts index 8e6500ee..e2000d70 100644 --- a/devui/radio/index.ts +++ b/devui/radio/index.ts @@ -1,10 +1,16 @@ -import { App } from 'vue' +import type { App } from 'vue' import Radio from './src/radio' -Radio.install = function(Vue: App) { - Vue.component(Radio.name, Radio) -}; +Radio.install = function(app: App) { + app.component(Radio.name, Radio) +} -Radio.version = '0.0.1' +export { Radio } -export default Radio +export default { + title: 'Radio 单选框', + category: '数据录入', + install(app: App): void { + app.use(Radio as any) + } +} diff --git a/devui/rate/demo/basic/index.tsx b/devui/rate/demo/basic/index.tsx deleted file mode 100644 index 2a0afb0a..00000000 --- a/devui/rate/demo/basic/index.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { defineComponent, ref } from 'vue'; -import DRate from '../../rate'; - -export default defineComponent({ - name: 'BasicRate', - components: { - DRate, - }, - props: {}, - setup() { - const value = ref(2); - const onUpdateValue = (newVal: number) => { - value.value = newVal; - }; - return { - value, - onUpdateValue, - }; - }, - render() { - const { value, onUpdateValue } = this; - const doNew = { - 'onUpdate:value': onUpdateValue, - }; - return ( - <> -
    - -
    -
    {value} star
    - - ); - }, -}); diff --git a/devui/rate/demo/customize/index.tsx b/devui/rate/demo/customize/index.tsx deleted file mode 100644 index 2e44d316..00000000 --- a/devui/rate/demo/customize/index.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import { defineComponent, ref } from 'vue'; -import DRate from '../../rate'; - -export default defineComponent({ - name: 'BasicRate', - components: { - DRate, - }, - props: {}, - setup() { - const value = ref(3); - const onUpdateValue = (newVal: number) => { - value.value = newVal; - }; - return { - value, - onUpdateValue, - }; - }, - render() { - const { value, onUpdateValue } = this; - const doNew = { - 'onUpdate:value': onUpdateValue, - }; - return ( - <> -
    - -
    -
    {value} A
    - - ); - }, -}); diff --git a/devui/rate/demo/only-read/index.tsx b/devui/rate/demo/only-read/index.tsx deleted file mode 100644 index 354704ff..00000000 --- a/devui/rate/demo/only-read/index.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { defineComponent, ref } from 'vue'; -import DRate from '../../rate'; - -export default defineComponent({ - name: 'OnlyRead', - components: { - DRate, - }, - props: {}, - setup() { - const value = ref(3.5); - return { - value, - }; - }, - render() { - const { value } = this; - return ( -
    - -
    - ); - }, -}); diff --git a/devui/rate/demo/rate-demo.tsx b/devui/rate/demo/rate-demo.tsx deleted file mode 100644 index 6461b839..00000000 --- a/devui/rate/demo/rate-demo.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import { defineComponent } from 'vue'; -import { useDemo } from 'hooks/use-demo'; -import OnlyRead from './only-read/index'; -import OnlyReadCode from './only-read/index?raw'; -import BasicRate from './basic/index'; -import BasicRateCode from './basic/index?raw'; -import CustomizeRate from './customize/index'; -import CustomizeRateCode from './customize/index?raw'; -import TypeRate from './type/index'; -import TypeRateCode from './type/index?raw'; - -export default defineComponent({ - name: 'DRateDemo', - render() { - return useDemo([ - { - id: 'only-read', - title: '只读模式', - code: OnlyReadCode, - content: , - }, - { - id: 'basic-rate', - title: '动态模式', - code: BasicRateCode, - content: , - }, - { - id: 'customize-rate', - title: '动态模式-自定义', - code: CustomizeRateCode, - content: , - }, - { - id: 'type-rate', - title: '使用type参数', - code: TypeRateCode, - content: , - }, - ]); - }, -}); diff --git a/devui/rate/demo/rate.route.ts b/devui/rate/demo/rate.route.ts deleted file mode 100644 index ce96b219..00000000 --- a/devui/rate/demo/rate.route.ts +++ /dev/null @@ -1,15 +0,0 @@ -import RateDemoComponent from './rate-demo' -import DevUIApiComponent from '../../shared/devui-api/devui-api' - -import ApiCn from '../doc/api-cn.md' -import ApiEn from '../doc/api-en.md' -const routes = [ - { path: '', redirectTo: 'demo' }, - { path: 'demo', component: RateDemoComponent}, - { path: 'api', component: DevUIApiComponent, meta: { - 'zh-cn': ApiCn, - 'en-us': ApiEn - }} -] - -export default routes diff --git a/devui/rate/demo/type/index.tsx b/devui/rate/demo/type/index.tsx deleted file mode 100644 index e67c1e77..00000000 --- a/devui/rate/demo/type/index.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import { defineComponent, ref } from 'vue'; -import DRate from '../../rate'; - -export default defineComponent({ - name: 'BasicRate', - components: { - DRate, - }, - props: {}, - setup() { - const value1 = ref(5); - const value2 = ref(3); - const value3 = ref(2); - return { - value1, - value2, - value3, - }; - }, - render() { - const { value1, value2, value3 } = this; - return ( - <> -
    - -
    -
    - -
    -
    - -
    - - ); - }, -}); diff --git a/devui/rate/doc/api-cn.md b/devui/rate/doc/api-cn.md deleted file mode 100644 index b54491e9..00000000 --- a/devui/rate/doc/api-cn.md +++ /dev/null @@ -1,26 +0,0 @@ -# 如何使用 - -在 module 中引入： - -```ts -import { DRate } from "vue-devui"; -``` - -在页面中使用： - -```html - -``` - -# Rate - -## d-rate 参数 - -| 参数 | 类型 | 默认值 | 描述 | 跳转 Demo | -| :-------: | :-----------------------------: | :----: | :------------------------------------------------------- | ----------------------------------------------- | -| read | `boolean` | false | 可选，设置是否为只读模式，只读模式无法交互 | [只读模式](demo#read-only-mode) | -| count | `number` | 5 | 可选，设置总等级数 | [只读模式](demo#read-only-mode) | -| type | `'success'\|'warning'\|'error'` | -- | 可选，设置当前评分的类型，不同类型对应不同颜色 | [使用 type 参数](demo#using-the-type-parameter) | -| color | `string` | -- | 可选，星星颜色 | [动态模式-自定义](demo#dynamic-mode-Custom) | -| icon | `string` | -- | 可选，评分图标的样式，只支持 devUI 图标库中所有图标 | [动态模式](demo#dynamic-mode) | -| character | `string` | -- | 可选，评分图标的样式，icon 与 character 只能设置其中一个 | [动态模式-自定义](demo#dynamic-mode-Custom) | diff --git a/devui/rate/doc/api-en.md b/devui/rate/doc/api-en.md deleted file mode 100644 index 6904c6b3..00000000 --- a/devui/rate/doc/api-en.md +++ /dev/null @@ -1,26 +0,0 @@ -# How to use - -Import into module: - -```ts -import { DRate } from "vue-devui"; -``` - -In the page: - -```html - -``` - -# Rate - -## d-rate parameter - -| Parameter | Type | Default | Description | Jump to Demo | -| :-------: | :-----------------------------: | :-----: | :-------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | -| read | `boolean` | false | Optional. This parameter specifies whether to enable read-only mode. In read-only mode, interaction is not supported. | [Read-only Mode](demo#read-only-mode) | -| count | `number` | 5 | Optional. Sets the total number of levels. | [Read-only Mode](demo#read-only-mode) | -| type | `'success'\|'warning'\|'error'` | -- | Optional. Set the current rating type. Different types correspond to different colors. | [Use the type parameter](demo#using-the-type-parameter) | -| color | `string` | -- | Optional. Star color. | [Dynamic Mode-Custom](demo#dynamic-mode-Custom) | -| icon | `string` | -- | Optional. Style of the rating icon. Only all icons in the DevUI icon library are supported. | [Dynamic Mode](demo#dynamic-mode) | -| character | `string` | -- | Optional. Scoring icon style. Only one of icon and character can be set. | [Dynamic Mode-Custom](demo#dynamic-mode-Custom) | diff --git a/devui/rate/index.ts b/devui/rate/index.ts new file mode 100644 index 00000000..172f6b02 --- /dev/null +++ b/devui/rate/index.ts @@ -0,0 +1,16 @@ +import type { App } from 'vue' +import Rate from './src/rate' + +Rate.install = function(app: App) { + app.component(Rate.name, Rate) +} + +export { Rate } + +export default { + title: 'Rate 评分', + category: '数据录入', + install(app: App): void { + app.use(Rate as any) + } +} diff --git a/devui/rate/rate.scss b/devui/rate/src/rate.scss similarity index 92% rename from devui/rate/rate.scss rename to devui/rate/src/rate.scss index 2e35ff05..0c54f08b 100644 --- a/devui/rate/rate.scss +++ b/devui/rate/src/rate.scss @@ -1,5 +1,5 @@ -@import '../style/theme/color'; -@import '../style/core/_font'; +@import '../../style/theme/color'; +@import '../../style/core/_font'; .devui-star-align { font-size: $devui-font-size-icon; diff --git a/devui/rate/rate.tsx b/devui/rate/src/rate.tsx similarity index 98% rename from devui/rate/rate.tsx rename to devui/rate/src/rate.tsx index 85ceaafd..b0b6a53e 100644 --- a/devui/rate/rate.tsx +++ b/devui/rate/src/rate.tsx @@ -1,4 +1,4 @@ -import { defineComponent, onMounted, watch, reactive, ref } from 'vue'; +import { defineComponent, onMounted, reactive, ref } from 'vue'; import { rateProps } from './use-rate'; import './rate.scss'; diff --git a/devui/rate/use-rate.ts b/devui/rate/src/use-rate.ts similarity index 100% rename from devui/rate/use-rate.ts rename to devui/rate/src/use-rate.ts diff --git a/devui/search/demo/demo-basic.tsx b/devui/search/demo/demo-basic.tsx deleted file mode 100644 index c94830df..00000000 --- a/devui/search/demo/demo-basic.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { defineComponent, ref } from 'vue' -import DSearch from '../search' - -export default defineComponent({ - setup() { - return () => ( -
    -
    -
    { 'Small' }
    -
    - -
    -
    -
    -
    { 'Middle' }
    -
    - -
    -
    -
    -
    { 'Large' }
    -
    - -
    -
    -
    -
    { 'Disabled' }
    -
    - -
    -
    -
    - ) - }, -}) \ No newline at end of file diff --git a/devui/search/demo/search-demo.scss b/devui/search/demo/search-demo.scss deleted file mode 100644 index f03923e9..00000000 --- a/devui/search/demo/search-demo.scss +++ /dev/null @@ -1,3 +0,0 @@ -.demo-d-search { - width: 200px; -} diff --git a/devui/search/demo/search-demo.tsx b/devui/search/demo/search-demo.tsx deleted file mode 100644 index 87f008d7..00000000 --- a/devui/search/demo/search-demo.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { defineComponent } from 'vue' -import { useDemo } from 'hooks/use-demo'; -import DemoBasic from './demo-basic'; -import DemoBasicCode from './demo-basic?raw'; -import './search-demo.scss'; - -export default defineComponent({ - render () { - return useDemo([ - { - id: 'demo-basic', - title: '基本用法', - code: DemoBasicCode, - content: - } - ]); - } -}) \ No newline at end of file diff --git a/devui/search/demo/search.route.ts b/devui/search/demo/search.route.ts deleted file mode 100644 index e8ef9bd3..00000000 --- a/devui/search/demo/search.route.ts +++ /dev/null @@ -1,15 +0,0 @@ -import SearchDemoComponent from './search-demo' -import DevUIApiComponent from '../../shared/devui-api/devui-api' - -import ApiCn from '../doc/api-cn.md' -import ApiEn from '../doc/api-en.md' -const routes = [ - { path: '', redirectTo: 'demo' }, - { path: 'demo', component: SearchDemoComponent}, - { path: 'api', component: DevUIApiComponent, meta: { - 'zh-cn': ApiCn, - 'en-us': ApiEn - }} -] - -export default routes diff --git a/devui/search/doc/api-cn.md b/devui/search/doc/api-cn.md deleted file mode 100644 index ead7e61c..00000000 --- a/devui/search/doc/api-cn.md +++ /dev/null @@ -1,32 +0,0 @@ -# 如何使用 -在module中引入： -```ts -import { SearchModule } from 'ng-devui/search'; -``` - -在页面中使用： -```html - -``` -# Search - -## d-search 参数 - -| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | -| :-----------: | :-------: | :---------------------: | :-------------------------------------- | ----------------------------------------------------- | -| size | `string` | '' | 可选，搜索框尺寸，有三种选择 lg、''、sm | [基本用法](demo#basic-usage) | -| placeholder | `string` | 'Please Input keywords' | 可选，输入框的 placeholder | -| maxLength | `number` | Number.MAX_SAFE_INTEGER | 可选，输入框的 max-length | [双向绑定](demo#bidirectional-binding) | -| delay | `number` | 300 | 可选，debounceTime 的延迟 | -| disabled | `boolean` | false | 可选，输入框是否可用 | [基本用法](demo#basic-usage) -| autoFocus | `boolean` | false | 可选，输入框是否自动对焦 | [自动对焦](demo#auto-focus) | -| isKeyupSearch | `boolean` | false | 可选，是否支持输入值立即出发 searchFn | [基本用法](demo#basic-usage) | -| iconPosition | `string` | 'right' | 可选，搜索图标位置，有两种选择'left' / 'right'| [搜索图标左置](demo#icon-left) | -| noBorder | `boolean` | 'false' | 可选，是否显示边框 | [搜索图标左置](demo#icon-left) | -| cssClass | `string` | '' | 可选，支持传入类名到输入框上 | | - -## d-search 事件 - -| 事件 | 类型 | 说明 | 跳转 Demo | -| :------: | :------: | :--------------------------------------------------- | ------------------------------------------- | -| searchFn | `string` | 回车或点击搜索按钮触发的回调函数，返回文本框输入的值 | [基本用法](demo#basic-usage) | diff --git a/devui/search/doc/api-en.md b/devui/search/doc/api-en.md deleted file mode 100644 index 0a8bcbfe..00000000 --- a/devui/search/doc/api-en.md +++ /dev/null @@ -1,32 +0,0 @@ -# How to use -Import into module: -```ts -import { SearchModule } from 'ng-devui/search'; -``` - -In the page: -```html - -``` -# Search - -## d-search parameter - -| Parameter | Type | Default | Description | Jump to Demo | -| :-----------: | :-------: | :---------------------: | :-------------------------------------- | ----------------------------------------------------- | -| size | `string` |'' | Optional. Specifies the size of the search box. The options are lg, '', and sm. | [Basic Usage](demo#basic-usage) | -| placeholder | `string` |'Please Input keywords' | Optional. This parameter specifies the placeholder in the input box. | -| maxLength | `number` | Number.MAX_SAFE_INTEGER | Optional. Max-length of the text box. | [Two-way Binding](demo#bidirectional-binding) | -| delay | `number` | 300 | Optional. Delay of debounceTime. | -| disabled | `boolean` | false | Optional. Indicating whether the text box is available. | [Basic Usage](demo#basic-usage) -| autoFocus | `boolean` | false | Optional. Whether to enable autofocus for the text box. | [Auto Focus](demo#auto-focus) | -| isKeyupSearch | `boolean` | false | Optional. Indicates whether to support immediate searchFn after input. | [Basic Usage](demo#basic-usage) | -| iconPosition | `string` | 'right' | Optional. The options are'left' and'right'.| [Left Search Icon](demo#icon-left)| -| noBorder | `boolean` | 'false' | Optional. Specifies whether to display the border. | [Left Search Icon](demo#icon-left) | -| cssClass | `string` |'' | Optional. The class name can be transferred to the text box. | | - -## d-search event - -| Event | Type | Description | Jump to Demo | -| :------: | :------: | :--------------------------------------------------- | ------------------------------------------- | -| searchFn | `string` | Callback function triggered by pressing Enter or clicking the search button to return the value entered in the text box. | [Basic Usage](demo#basic-usage) | diff --git a/devui/search/index.ts b/devui/search/index.ts index 197e0c2c..87b0b7ff 100644 --- a/devui/search/index.ts +++ b/devui/search/index.ts @@ -1,10 +1,16 @@ -import { App } from 'vue' -import Search from './search' +import type { App } from 'vue' +import Search from './src/search' -Search.install = function(Vue: App) { - Vue.component(Search.name, Search) -}; +Search.install = function(app: App) { + app.component(Search.name, Search) +} -Search.version = '0.0.1' +export { Search } -export default Search +export default { + title: 'Search 搜索框', + category: '通用', + install(app: App): void { + app.use(Search as any) + } +} diff --git a/devui/search/class-search.ts b/devui/search/src/class-search.ts similarity index 100% rename from devui/search/class-search.ts rename to devui/search/src/class-search.ts diff --git a/devui/search/search.scss b/devui/search/src/search.scss similarity index 87% rename from devui/search/search.scss rename to devui/search/src/search.scss index 2794d35f..7b0656e6 100644 --- a/devui/search/search.scss +++ b/devui/search/src/search.scss @@ -1,5 +1,5 @@ -@import '../style/mixins/size'; -@import '../style/mixins/flex'; +@import '../../style/mixins/size'; +@import '../../style/mixins/flex'; .d-search { position: relative; diff --git a/devui/search/search.tsx b/devui/search/src/search.tsx similarity index 95% rename from devui/search/search.tsx rename to devui/search/src/search.tsx index fca145f6..acf2fdd9 100644 --- a/devui/search/search.tsx +++ b/devui/search/src/search.tsx @@ -1,7 +1,7 @@ import { defineComponent } from 'vue' import { SearchProps, searchProps } from './use-search' import { getRootClass } from './class-search' -import DTextInput from '../text-input/src/text-input'; +import DInput from '../../input'; import './search.scss' const KEYS_MAP = { enter: 'Enter' @@ -11,6 +11,7 @@ const KEYS_MAP = { export default defineComponent({ name: 'DSearch', props: searchProps, + emits: ['searchFn'], setup(props: SearchProps, ctx) { const rootClasses = getRootClass(props) const onInputKeydown = ($event: KeyboardEvent) => { @@ -34,12 +35,12 @@ export default defineComponent({ return () => { return (
    - + >
    diff --git a/devui/search/use-search.ts b/devui/search/src/use-search.ts similarity index 100% rename from devui/search/use-search.ts rename to devui/search/src/use-search.ts diff --git a/devui/select/index.ts b/devui/select/index.ts index 160de4aa..1cf778a2 100644 --- a/devui/select/index.ts +++ b/devui/select/index.ts @@ -1,10 +1,16 @@ -import { App } from 'vue' +import type { App } from 'vue' import Select from './src/select' -Select.install = function(Vue: App) { - Vue.component(Select.name, Select) -}; +Select.install = function(app: App) { + app.component(Select.name, Select) +} -Select.version = '0.0.1' +export { Select } -export default Select +export default { + title: 'Select 下拉框', + category: '数据录入', + install(app: App): void { + app.use(Select as any) + } +} diff --git a/devui/style/core/_form.scss b/devui/style/core/_form.scss index c2527f0f..1be1406b 100755 --- a/devui/style/core/_form.scss +++ b/devui/style/core/_form.scss @@ -16,17 +16,17 @@ $border-change-function: cubic-bezier(0.645, 0.045, 0.355, 1); .devui-form-controls input[type='text'], .devui-form-controls input[type='password'], -[dTextInput] { +[dInput] { width: 100%; height: 28px; font-size: $devui-font-size; - &.devui-textinput-sm { + &.devui-input-sm { font-size: $devui-font-size-sm; height: 26px; } - &.devui-textinput-lg { + &.devui-input-lg { font-size: $devui-font-size-lg; height: 46px; } @@ -37,7 +37,7 @@ $border-change-function: cubic-bezier(0.645, 0.045, 0.355, 1); } .devui-form-controls textarea, -[dTextInput], +[dInput], [dTextarea] { box-sizing: border-box; padding: 4px 10px; @@ -327,9 +327,9 @@ input::-webkit-input-placeholder { /* status style start */ /* border color and background */ -[dTextInput]:not([disabled]):not(.disabled):not(.devui-disabled).error, +[dInput]:not([disabled]):not(.disabled):not(.devui-disabled).error, [dTextarea]:not([disabled]):not(.disabled):not(.devui-disabled).error, -[dTextInput]:not([disabled]):not(.disabled):not(.devui-disabled).devui-error, +[dInput]:not([disabled]):not(.disabled):not(.devui-disabled).devui-error, [dTextarea]:not([disabled]):not(.disabled):not(.devui-disabled).devui-error { border-color: $devui-danger-line; background-color: $devui-danger-bg; @@ -450,21 +450,21 @@ d-form-control { } .devui-form-controls.devui-form-control-has-suffix { - [dTextInput], + [dInput], [dTextArea] { padding-right: 28px; } } .devui-form-controls.devui-form-control-has-suffix.devui-form-control-has-feedback { - [dTextInput], + [dInput], [dTextArea] { padding-right: 56px; } } .devui-form-controls.devui-form-control-has-feedback { - [dTextInput], + [dInput], [dTextarea] { padding-right: 28px; } diff --git a/devui/switch/demo/demo-basic.tsx b/devui/switch/demo/demo-basic.tsx deleted file mode 100644 index 678a10e2..00000000 --- a/devui/switch/demo/demo-basic.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { defineComponent, ref } from 'vue'; -import DSwitch from '../src/switch'; - -export default defineComponent({ - name: 'DemoBasic', - - setup () { - const checked1 = ref(false); - const checked2 = ref(false); - const checked3 = ref(true); - const checked4 = ref(false); - const doUpdate1 = (v: boolean) => checked1.value = v; - const doUpdate2 = (v: boolean) => checked2.value = v; - const doUpdate3 = (v: boolean) => checked3.value = v; - const doUpdate4 = (v: boolean) => checked4.value = v; - - return () => { - return (
    -
    Small
    - - -
    Middle
    - - - -
    Large
    - - -
    disabled
    - - -
    ); - }; - } -}); diff --git a/devui/switch/demo/demo-custom.tsx b/devui/switch/demo/demo-custom.tsx deleted file mode 100644 index d704a592..00000000 --- a/devui/switch/demo/demo-custom.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import { defineComponent, ref } from 'vue'; -import DSwitch from '../src/switch'; - -export default defineComponent({ - name: 'DemoCustom', - setup () { - const checked = ref(true); - const doUpdate = (v: boolean) => checked.value = v; - const checked2 = ref(true); - const doUpdate2 = (v: boolean) => checked2.value = v; - - return { - checked, - doUpdate, - checked2, - doUpdate2 - }; - }, - render () { - const { - checked, - doUpdate, - checked2, - doUpdate2 - } = this; - - return ( -
    - -
    - '开', - uncheckedContent: () => '关' - }}> - -
    - ); - } -}); diff --git a/devui/switch/demo/switch-demo.tsx b/devui/switch/demo/switch-demo.tsx deleted file mode 100644 index 8704c9a3..00000000 --- a/devui/switch/demo/switch-demo.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { defineComponent } from 'vue'; -import { useDemo } from 'hooks/use-demo'; -import DemoBasic from './demo-basic'; -import DemoBasicCode from './demo-basic?raw'; -import DemoCustom from './demo-custom'; -import DemoCustomCode from './demo-custom?raw'; - -export default defineComponent({ - name: 'SwitchDemo', - render () { - return useDemo([ - { - id: 'demo-basic', - title: '基本用法', - code: DemoBasicCode, - content: - }, { - id: 'demo-custom', - title: '自定义', - code: DemoCustomCode, - content: - } - ]); - } -}); diff --git a/devui/switch/demo/switch.route.ts b/devui/switch/demo/switch.route.ts deleted file mode 100644 index 372b1fac..00000000 --- a/devui/switch/demo/switch.route.ts +++ /dev/null @@ -1,15 +0,0 @@ -import SwitchDemoComponent from './switch-demo' -import DevUIApiComponent from '../../shared/devui-api/devui-api' - -import ApiCn from '../doc/api-cn.md' -import ApiEn from '../doc/api-en.md' -const routes = [ - { path: '', redirectTo: 'demo' }, - { path: 'demo', component: SwitchDemoComponent}, - { path: 'api', component: DevUIApiComponent, meta: { - 'zh-cn': ApiCn, - 'en-us': ApiEn - }} -] - -export default routes diff --git a/devui/switch/doc/api-cn.md b/devui/switch/doc/api-cn.md deleted file mode 100644 index e8d59f6a..00000000 --- a/devui/switch/doc/api-cn.md +++ /dev/null @@ -1,28 +0,0 @@ -# 如何使用 -在module中引入： -```ts -import { SwitchModule } from 'ng-devui/switch'; -``` - -在页面中使用： -```html - -``` -# Switch - -## d-switch 参数 - -| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | -| :----------: | :-----------------------------: | :---: | :-------------------------------------------------------------------------- | ------------------------------------------- | -| size | `'sm'\|''\|'lg'` | '' | 可选，开关尺寸大小 | [基本用法](demo#basic-usage) | -| color | `string` | -- | 可选，开关打开时的自定义颜色 | [自定义样式](demo#custom) | -| checked | `boolean` | false | 可选，开关是否打开，默认关闭 | [基本用法](demo#basic-usage) | -| ngModel | `boolean` | false | 可选，指定当前是否打开，可双向绑定 | [双向绑定](demo#two-binding) | -| disabled | `boolean` | false | 可选，是否禁用开关 | [基本用法](demo#basic-usage) | -| beforeChange | `Function\|Promise\|()=> Observable` | -- | 可选，开关变化前的回调函数,返回 boolean 类型，返回 false 可以阻止开关的变化 | [双向绑定](demo#two-binding) | - -## d-switch 事件 - -| 事件 | 类型 | 说明 | 跳转 Demo | -| :----: | :---------------------: | :------------------------------------ | ------------------------------------------- | -| change | `EventEmitter` | 可选,开关打开返回 true,关闭返回 false | [回调事件](demo#callback) | diff --git a/devui/switch/doc/api-en.md b/devui/switch/doc/api-en.md deleted file mode 100644 index 510852bb..00000000 --- a/devui/switch/doc/api-en.md +++ /dev/null @@ -1,28 +0,0 @@ -# How to use -Import into module: -```ts -import { SwitchModule } from 'ng-devui/switch'; -``` - -In the page: -```html - -``` -# Switch - -### d-switch parameter - -| Parameter | Type | Default | Description | Jump to Demo | -| :----------: | :-----------------------------: | :---: | :-------------------------------------------------------------------------- | ------------------------------------------- | -| size | `'sm'\|''\|'lg'` |'' | Optional. Switch size. | [Basic Usage](demo#basic-usage) | -| color | `string` | -- | Optional. Customized color when the switch is enabled. | [Custom Style](demo#custom) | -| checked | `boolean` | false | Optional. Specifies whether to enable the function. The function is disabled by default. | [Basic Usage](demo#basic-usage) | -| ngModel | `boolean` | false | Optional. Specifies whether to enable the function. Bidirectional binding is supported. | [Two-way Binding](demo#two-binding) | -| disabled | `boolean` | false | Optional. Indicating whether to disable the function. | [Basic Usage](demo#basic-usage) | -| beforeChange | `Function\|Promise\|()=> Observable` | -- |Optional. Callback function before a switch is changed. The return value is of the boolean type. If false is returned, the switch is not changed. | [Two-way Binding](demo#two-binding) | - -### d-switch event - -| Event | Type | Description | Jump to Demo | -| :----: | :---------------------: | :------------------------------------ | ------------------------------------------- | -| change | `EventEmitter` | Optional. If the function is enabled, true is returned. If the function is disabled, false is returned. | [Callback Event](demo#callback) | diff --git a/devui/switch/index.ts b/devui/switch/index.ts index ec8e8efe..a7dd88e2 100644 --- a/devui/switch/index.ts +++ b/devui/switch/index.ts @@ -1,10 +1,16 @@ -import { App } from 'vue' +import type { App } from 'vue' import Switch from './src/switch' -Switch.install = function(Vue: App) { - Vue.component(Switch.name, Switch) -}; +Switch.install = function(app: App) { + app.component(Switch.name, Switch) +} -Switch.version = '0.0.1' +export { Switch } -export default Switch +export default { + title: 'Switch 开关', + category: '数据录入', + install(app: App): void { + app.use(Switch as any) + } +} diff --git a/devui/tab/index.ts b/devui/tab/index.ts new file mode 100644 index 00000000..1f947c1d --- /dev/null +++ b/devui/tab/index.ts @@ -0,0 +1,16 @@ +import type { App } from 'vue' +import Tab from './src/tab' + +Tab.install = function(app: App) { + app.component(Tab.name, Tab) +} + +export { Tab } + +export default { + title: 'Tab 选项卡', + category: '导航', + install(app: App): void { + app.use(Tab as any) + } +} diff --git a/devui/tabs/tab.tsx b/devui/tab/src/tab-item.tsx similarity index 83% rename from devui/tabs/tab.tsx rename to devui/tab/src/tab-item.tsx index bf31071c..d4dcd7cc 100644 --- a/devui/tabs/tab.tsx +++ b/devui/tab/src/tab-item.tsx @@ -1,8 +1,8 @@ -import { computed, defineComponent, getCurrentInstance, inject, reactive } from 'vue' -import { Tabs } from './tabs'; +import { defineComponent, inject } from 'vue' +import { Tabs } from './tab'; export default defineComponent({ - name: 'd-tab', + name: 'DTabItem', props: { title: { default: null, diff --git a/devui/tabs/tabs.scss b/devui/tab/src/tab.scss similarity index 97% rename from devui/tabs/tabs.scss rename to devui/tab/src/tab.scss index 95c8dc13..a2cc63c2 100644 --- a/devui/tabs/tabs.scss +++ b/devui/tab/src/tab.scss @@ -1,8 +1,8 @@ -@import '../style/theme/color'; -@import '../style/theme/variables'; -@import '../style/mixins/index'; -@import '../style/theme/font'; -@import '../style/theme/corner'; +@import '../../style/theme/color'; +@import '../../style/theme/variables'; +@import '../../style/mixins/index'; +@import '../../style/theme/font'; +@import '../../style/theme/corner'; $devui-tab-options-bg: $devui-list-item-hover-bg; diff --git a/devui/tabs/tabs.tsx b/devui/tab/src/tab.tsx similarity index 83% rename from devui/tabs/tabs.tsx rename to devui/tab/src/tab.tsx index 9b5934b2..76a2c915 100644 --- a/devui/tabs/tabs.tsx +++ b/devui/tab/src/tab.tsx @@ -1,17 +1,18 @@ import { computed, defineComponent, provide, reactive } from 'vue' -import './tabs.scss'; +import './tab.scss'; + export type Active = string | number | null; export type TabsType = 'tabs' | 'pills' | 'options' | 'wrapped' | 'slider' export interface Tabs { - state: TabsState; + state: TabsState } interface TabsState { - data?: any[], - showContent: boolean, + data?: any[] + showContent: boolean active: any } export default defineComponent({ - name: 'd-tabs', + name: 'DTab', props: { modelValue: { type: [String, Number], @@ -35,10 +36,12 @@ export default defineComponent({ default: true }, customWidth: { - type: String + type: String, + default: '' }, cssClass: { - type: String + type: String, + default: '' } }, // TODO: beforeChange没有完成实现 @@ -70,8 +73,8 @@ export default defineComponent({ return
      { - state.data.map((item, i) => { - return
    • activateTab((item.id || item.tabId))} class={active.value === (item.id || item.tabId) ? 'active' : ''} id={item.id || item.tabId} > + state.data.map((item) => { + return
    • activateTab((item.id || item.tabId))} class={active.value === (item.id || item.tabId) ? 'active' : ''} id={item.id || item.tabId} > {item.title} diff --git a/devui/tabs/demo/tabs-demo.tsx b/devui/tabs/demo/tabs-demo.tsx deleted file mode 100644 index e6f28eec..00000000 --- a/devui/tabs/demo/tabs-demo.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { defineComponent } from 'vue' - -export default defineComponent({ - name: 'd-tabs-demo', - props: { - }, - setup(props, ctx) { - return () => { - return
      devui-tabs-demo
      - } - } -}) \ No newline at end of file diff --git a/devui/tabs/demo/tabs.route.ts b/devui/tabs/demo/tabs.route.ts deleted file mode 100644 index 42c3fd37..00000000 --- a/devui/tabs/demo/tabs.route.ts +++ /dev/null @@ -1,15 +0,0 @@ -import TabsDemoComponent from './tabs-demo' -import DevUIApiComponent from '../../shared/devui-api/devui-api' - -import ApiCn from '../doc/api-cn.md' -import ApiEn from '../doc/api-en.md' -const routes = [ - { path: '', redirectTo: 'demo' }, - { path: 'demo', component: TabsDemoComponent}, - { path: 'api', component: DevUIApiComponent, meta: { - 'zh-cn': ApiCn, - 'en-us': ApiEn - }} -] - -export default routes diff --git a/devui/tabs/doc/api-cn.md b/devui/tabs/doc/api-cn.md deleted file mode 100644 index b0d44dfe..00000000 --- a/devui/tabs/doc/api-cn.md +++ /dev/null @@ -1,46 +0,0 @@ -# 如何使用 - -在 module 中引入： - -```ts -import { TabsModule } from 'ng-devui/tabs'; -``` - -在页面中使用： - -```html - - - ... - ... - - -``` -# d-tabs -## d-tabs 参数 - -| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | -| :----------: | :-----------------------------: | :----: | :---------------------------------------------------------------------------------------------------- | --------------------------------------------------------- | -| type | `tabs\|pills\|options` | 'tabs' | 可选，选项卡组的类型 | [配置类型与排列](demo#configuration-type-and-arrangement) | -| showContent | `boolean` | true | 可选，是否显示选项卡对应的内容 | [不设置内容](demo#no-set-content) | -| activeTab | `string` | -- | 可选，当前激活的选项卡，值为选项卡的 id | [基本用法](demo#basic-usage) | -| cssClass | `string` | -- | 可选，自定义选项卡组的 css 类 | [自定义模板](demo#custom-template) | -| customWidth | `string` | -- | 可选，自定义选项卡的宽度 | [配置类型与排列](demo#configuration-type-and-arrangement) | -| vertical | `boolean` | false | 可选，是否垂直显示 | [配置类型与排列](demo#configuration-type-and-arrangement) | -| beforeChange | `function\|Promise\|Observable` | -- | tab 切换前的回调函数,返回 boolean 类型，返回 false 可以阻止 tab 的切换 | [拦截 tab 切换](demo#intercept-tab-switch) | -| reactivable | `boolean` | false | 可选，点击当前处于激活态的 tab 时是否触发`activeTabChange`事件，`true`为允许触发，`false`为不允许触发 | [拦截 tab 切换](demo#intercept-tab-switch) | - -## d-tabs 事件 - -| 参数 | 类型 | 说明 | 跳转 Demo | -| :-------------: | :----------------------------: | :-------------------------------------------------- | ---------------------------- | -| activeTabChange | `EventEmitter` | 可选，选项卡切换的回调函数，返回当前激活选项卡的 id | [基本用法](demo#basic-usage) | - -### d-tab 参数 - -| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | -| :------: | :--------------: | :---: | :------------------------------------- | --------------------------------- | -| tabId | `string` | -- | 可选，选项卡的 id 值, 需要设置为唯一值 | [基本用法](demo#basic-usage) | -| id | `number\|string` | -- | 可选，一般和`tabId`一致 | [基本用法](demo#basic-usage) | -| title | `string` | -- | 可选，选项卡的标题 | [基本用法](demo#basic-usage) | -| disabled | `boolean` | false | 可选，选项卡是否不可用 | [不设置内容](demo#no-set-content) | diff --git a/devui/tabs/doc/api-en.md b/devui/tabs/doc/api-en.md deleted file mode 100644 index 477fccc7..00000000 --- a/devui/tabs/doc/api-en.md +++ /dev/null @@ -1,48 +0,0 @@ -# How to use - -Import into module: - -```ts -import { TabsModule } from 'ng-devui/tabs'; -``` - -In the page: - -```html - - - ... - ... - - -``` - -# d-tabs - -## d-tabs parameter - -| Parameter | Type | Default | Description | Jump to Demo | -| :----------: | :-----------------------------: | :-----: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- | -| type | `tabs\|pills\|options` | 'tabs' | Optional. Tab group type | [Configuration type and arrangement](demo#configuration-type-and-arrangement) | -| showContent | `boolean` | true | Optional. Indicating whether to display the content corresponding to the tab. | [No Content](demo#no-set-content) | -| activeTab | `string` | -- | Optional. Currently activated tab. The value is the ID of the tab. | [Basic Usage](demo#basic-usage) | -| cssClass | `string` | -- | Optional. CSS class of a customized tab group | [Customized Template](demo#custom-template) | -| customWidth | `string` | -- | Optional. It indicates the width of the customized tab. | [Configuration Type and Arrangement](demo#configuration-type-and-arrangement) | -| vertical | `boolean` | false | Optional. Indicating whether to display vertically | [Configuration Type and Arrangement](demo#configuration-type-and-arrangement) | -| beforeChange | `function\|Promise\|Observable` | -- | Optional. Tab Callback function before switching. The value of this parameter is of the boolean type. If false is returned, tab switching can be prevented. | [Interception Tab Switching](demo#intercept-tab-switch) | -| reactivable | `boolean` | false | Optional. Indicates whether to trigger the `activeTabChange` event when a tab in the active state is clicked. The value true indicates that the event can be triggered, and the value false indicates that the event cannot be triggered. | [Interception Tab Switching](demo#intercept-tab-switch) | - -## d-tabs event - -| Parameter | Type | Description | Jump to Demo | -| :-------------: | :----------------------------: | :---------------------------------------------------------------------------------------------------------------------------- | ------------------------------- | -| activeTabChange | `EventEmitter` | Optional. Callback function for switching tabs. This parameter is optional. It returns the ID of the currently activated tab. | [Basic usage](demo#basic-usage) | - -## d-tab Parameter - -| Parameter | Type | Default | Description | Jump to Demo | -| :-------: | :--------------: | :-----: | :------------------------------------------------------------- | --------------------------------- | -| tabId | `string` | -- | Optional. Tab ID, which must be unique. | [Basic usage](demo#basic-usage) | -| id | `number\|string` | -- | Optional. Generally, the value is the same as that of `tabId`. | [Basic usage](demo#basic-usage) | -| title | `string` | -- | Optional. Tab title | [Basic usage](demo#basic-usage) | -| disabled | `boolean` | false | Optional. Indicating whether the tab is unavailable | [No Content](demo#no-set-content) | diff --git a/devui/tabs/index.ts b/devui/tabs/index.ts deleted file mode 100644 index 6a1e89a3..00000000 --- a/devui/tabs/index.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { App } from 'vue' -import Tabs from './tabs' - -Tabs.install = function(Vue: App) { - Vue.component(Tabs.name, Tabs) -}; - -Tabs.version = '0.0.1' - -export default Tabs diff --git a/devui/tags-input/__tests__/tags-input.spec.ts b/devui/tag-input/__tests__/tag-input.spec.ts similarity index 89% rename from devui/tags-input/__tests__/tags-input.spec.ts rename to devui/tag-input/__tests__/tag-input.spec.ts index f51b36c7..0b3d644f 100644 --- a/devui/tags-input/__tests__/tags-input.spec.ts +++ b/devui/tag-input/__tests__/tag-input.spec.ts @@ -1,14 +1,14 @@ import { mount } from '@vue/test-utils'; import { reactive, nextTick } from 'vue'; -import DTagsInput from '../src/tags-input'; +import DTagInput from '../src/tag-input'; const customMount = (state) => mount({ - components: { DTagsInput }, + components: { DTagInput }, template: ` - + displayProperty="cname"> `, setup () { return { @@ -17,8 +17,8 @@ const customMount = (state) => mount({ } }); -describe('DTagsInput', () => { - it('tags-input render work', async () => { +describe('DTagInput', () => { + it('tag-input render work', async () => { const state = reactive({ tags: [ { cname: 'Y.Chen' }, @@ -47,7 +47,7 @@ describe('DTagsInput', () => { expect(itemA.text()).toBe('X.Zhang'); }); - it('tags-input show suggestion work', async () => { + it('tag-input show suggestion work', async () => { const state = reactive({ tags: [ { cname: 'a' }, @@ -64,14 +64,14 @@ describe('DTagsInput', () => { expect(wrapper.find('.devui-suggestion-list').exists()).toBe(true); }); - it('tags-input disabled work', async () => { + it('tag-input disabled work', async () => { const tags = reactive([ { cname: 'a' }, ]); const suggestionList = reactive([ { cname: 'b' }, ]); - const wrapper = mount(DTagsInput, { + const wrapper = mount(DTagInput, { props: { tags, suggestionList, @@ -90,7 +90,7 @@ describe('DTagsInput', () => { expect(wrapper.find('.remove-button').exists()).toBe(false); }); - it('tags-input maxTags work', () => { + it('tag-input maxTags work', () => { const tags = reactive([ { cname: 'a' }, { cname: 'b' }, @@ -98,7 +98,7 @@ describe('DTagsInput', () => { const suggestionList = reactive([ { cname: 'c' }, ]); - const wrapper = mount(DTagsInput, { + const wrapper = mount(DTagInput, { props: { tags, suggestionList, @@ -109,7 +109,7 @@ describe('DTagsInput', () => { expect(wrapper.find('input').attributes('disabled')).toBe(''); }); - it('tags-input removeTag work', async () => { + it('tag-input removeTag work', async () => { const state = reactive({ tags: [ { cname: 'a' }, @@ -127,7 +127,7 @@ describe('DTagsInput', () => { expect(state.suggestionList.length).toBe(2); }); - it('tags-input keydown work', async () => { + it('tag-input keydown work', async () => { const state = reactive({ tags: [ { cname: 'a' }, @@ -152,7 +152,7 @@ describe('DTagsInput', () => { expect(state.suggestionList.length).toBe(1); }); - it('tags-input filter suggestion work', async () => { + it('tag-input filter suggestion work', async () => { const state = reactive({ tags: [ { cname: 'a' }, @@ -179,7 +179,7 @@ describe('DTagsInput', () => { expect(wrapper.findAll('.devui-suggestion-item.devui-disabled').length).toBe(1); }); - it('tags-input click suggestion work', async () => { + it('tag-input click suggestion work', async () => { const state = reactive({ tags: [ { cname: 'a' }, @@ -201,7 +201,7 @@ describe('DTagsInput', () => { expect(state.suggestionList.length).toBe(2); }); - it('tags-input arrow work', async () => { + it('tag-input arrow work', async () => { const state = reactive({ tags: [ { cname: 'a' }, diff --git a/devui/tag-input/index.ts b/devui/tag-input/index.ts new file mode 100644 index 00000000..5e0c7515 --- /dev/null +++ b/devui/tag-input/index.ts @@ -0,0 +1,16 @@ +import type { App } from 'vue' +import TagInput from './src/tag-input' + +TagInput.install = function(app: App) { + app.component(TagInput.name, TagInput) +} + +export { TagInput } + +export default { + title: 'TagInput 标签输入框', + category: '数据录入', + install(app: App): void { + app.use(TagInput as any) + } +} diff --git a/devui/tags-input/src/remove-btn.tsx b/devui/tag-input/src/remove-btn.tsx similarity index 100% rename from devui/tags-input/src/remove-btn.tsx rename to devui/tag-input/src/remove-btn.tsx diff --git a/devui/tags-input/src/tags-input.scss b/devui/tag-input/src/tag-input.scss similarity index 100% rename from devui/tags-input/src/tags-input.scss rename to devui/tag-input/src/tag-input.scss diff --git a/devui/tags-input/src/tags-input.tsx b/devui/tag-input/src/tag-input.tsx similarity index 98% rename from devui/tags-input/src/tags-input.tsx rename to devui/tag-input/src/tag-input.tsx index f713924c..8ed491cb 100644 --- a/devui/tags-input/src/tags-input.tsx +++ b/devui/tag-input/src/tag-input.tsx @@ -1,13 +1,13 @@ import { defineComponent, ref, computed, nextTick, watch, PropType } from 'vue'; -import './tags-input.scss'; import removeBtnSvg from './remove-btn'; +import './tag-input.scss'; interface Suggestion { __index: number [x: string]: any } -const tagsInputProps = { +const tagInputProps = { tags: { type: Array as PropType, default: (): [] => [] @@ -70,8 +70,8 @@ const KEYS_MAP = { } as const; export default defineComponent({ - name: 'DTagsInput', - props: tagsInputProps, + name: 'DTagInput', + props: tagInputProps, emits: ['update:tags', 'update:suggestionList', 'valueChange'], setup(props, ctx) { const add = (arr: any[], target: any) => { diff --git a/devui/tags-input/demo/demo-basic.tsx b/devui/tags-input/demo/demo-basic.tsx deleted file mode 100644 index 79a88d65..00000000 --- a/devui/tags-input/demo/demo-basic.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import { defineComponent, reactive } from 'vue'; -import DTagsInput from '../src/tags-input'; - -export default defineComponent({ - name: 'DemoBasic', - setup () { - const state = reactive({ - tagList: [ - { name: '马龙' }, - { name: '樊振东' }, - { name: '许昕' }, - { name: '陈梦' }, - { name: '孙颖莎' }, - { name: '刘诗雯' }, - { name: '王楚钦' }, - { name: '王曼昱' }, - ], - suggestionList: [ - { name: '丁宁' }, - { name: '何卓佳' }, - { name: '方博' }, - { name: '陈幸同' }, - { name: '王艺迪' }, - { name: '朱雨玲' }, - { name: '林高远' }, - { name: '梁靖崑' }, - ] - }); - - return { - state - }; - }, - render () { - const { - state - } = this; - - return ( -
      - - -
      - ); - } -}); diff --git a/devui/tags-input/demo/demo-disabled.tsx b/devui/tags-input/demo/demo-disabled.tsx deleted file mode 100644 index e8347331..00000000 --- a/devui/tags-input/demo/demo-disabled.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import { defineComponent, ref } from 'vue'; -import DTagInput from '../src/tags-input'; - -export default defineComponent({ - name: 'DemoDisabled', - setup () { - const tags = ref([ - { name: '红双喜' }, - { name: '银河' }, - { name: '729' } - ]); - const suggestionList = ref([ - { name: '斯蒂卡' }, - { name: '蝴蝶' }, - { name: '多尼克' } - ]); - - return () => { - return ( - - ); - }; - } -}); diff --git a/devui/tags-input/demo/tags-input-demo.tsx b/devui/tags-input/demo/tags-input-demo.tsx deleted file mode 100644 index b9829246..00000000 --- a/devui/tags-input/demo/tags-input-demo.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { defineComponent } from 'vue'; -import { useDemo } from 'hooks/use-demo'; -import DemoBaisc from './demo-basic'; -import DemoBasicCode from './demo-basic?raw'; -import DemoDisabled from './demo-disabled'; -import DemoDisabledCode from './demo-disabled?raw'; - -export default defineComponent({ - name: 'DTagsInputDemo', - render () { - return useDemo([ - { - id: 'demo-basic', - title: '基本用法', - code: DemoBasicCode, - content: - }, { - id: 'demo-disabled', - title: '禁用', - code: DemoDisabledCode, - content: - } - ]); - } -}) \ No newline at end of file diff --git a/devui/tags-input/demo/tags-input.route.ts b/devui/tags-input/demo/tags-input.route.ts deleted file mode 100644 index 7fc7f8f2..00000000 --- a/devui/tags-input/demo/tags-input.route.ts +++ /dev/null @@ -1,15 +0,0 @@ -import TagsInputDemoComponent from './tags-input-demo' -import DevUIApiComponent from '../../shared/devui-api/devui-api' - -import ApiCn from '../doc/api-cn.md' -import ApiEn from '../doc/api-en.md' -const routes = [ - { path: '', redirectTo: 'demo' }, - { path: 'demo', component: TagsInputDemoComponent}, - { path: 'api', component: DevUIApiComponent, meta: { - 'zh-cn': '', - 'en-us': '' - }} -] - -export default routes diff --git a/devui/tags-input/doc/api-cn.md b/devui/tags-input/doc/api-cn.md deleted file mode 100644 index ed498c9d..00000000 --- a/devui/tags-input/doc/api-cn.md +++ /dev/null @@ -1,44 +0,0 @@ -# 如何使用 -在module中引入： -```ts -import { TagsInputModule } from 'ng-devui/tags-input'; -``` - -在页面中使用： -```html - - -``` -# TagsInput - -## d-tags-input 参数 - -| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | -| :-------------: | :-----------------------------: | :---------------------: | :---------------------------------------------------------------------------------------------------- | --------------------------------------------------- | -| tags | `Array` | [] | 必选，记录输入的标签和选择的标签列表 | [基本用法](demo#basic-usage) | -| displayProperty | `string` | 'name' | 可选，列表项使用的属性名 | [基本用法](demo#basic-usage) | -| placeholder | `boolean` | '' | 可选，输入框的 placeholder | [基本用法](demo#basic-usage) | -| minLength | `number` | 3 | 可选，输入标签内容的最小长度 | [基本用法](demo#basic-usage) | -| maxLength | `number` | Number.MAX_SAFE_INTEGER | 可选，输入标签内容的最大长度 | [基本用法](demo#basic-usage) | -| maxTags | `number` | Number.MAX_SAFE_INTEGER | 可选，可输入标签的最大个数 | [基本用法](demo#basic-usage) | -| caseSensitivity | `boolean` | false | 可选，大小写敏感，默认忽略大小 | [基本用法](demo#basic-usage) | 写 | -| spellcheck | `boolean` | true | 可选，input 输入框是否开启拼写检查的 | [基本用法](demo#basic-usage) | spellcheck | -| isAddBySpace | `boolean` | true | 可选，是否支持空格键输入标 | [基本用法](demo#basic-usage) | 签 | -| suggestionList | `Array` | [] | 可选，下拉选项，默认可选择的标签列表 | [基本用法](demo#basic-usage) | -| checkBeforeAdd | `Function\|Promise\|Observable` | 无 | 可选，自定义校验函数，类型为(newTag: string) => boolean 或者 Promise或者 Observable | [基本用法](demo#basic-usage) | -| disabled | `boolean` | false | 可选，disabled 灰化状态 | [基本用法](demo#basic-usage) | - -备注：除传入`tags`方式实现外，还可采用`ngModel`绑定数组的方式，详细使用示例参考[双向绑定](demo#ng-model)。 - -## d-tags-input 事件 - -| 事件 | 类型 | 说明 | 跳转 Demo | -| :---------: | :-----------------: | :------------------------------------------------------------------------------------------------------------ | --------------------------------------------------- | -| valueChange | `EventEmitter` | 当选中某个选项项后，将会调用此函数，参数为当前选择项的值。如果需要获取所有选择状态的值，请使用(ngModelChange) | [基本用法](demo#basic-usage) | diff --git a/devui/tags-input/doc/api-en.md b/devui/tags-input/doc/api-en.md deleted file mode 100644 index ab81c23d..00000000 --- a/devui/tags-input/doc/api-en.md +++ /dev/null @@ -1,44 +0,0 @@ -# How to use -Import into module: -```ts -import { TagsInputModule } from 'ng-devui/tags-input'; -``` - -In the page: -```html - - -``` -# TagsInput - -## d-tags-input parameter - -| Parameter | Type | Default | Description | Jump to Demo | -| :-------------: | :-----------------------------: | :---------------------: | :------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------ | -| tags | `Array` | [] | Required. This parameter records the entered tag and selected tag list. | [Basic Usage](demo#basic-usage) | -| displayProperty | `string` | 'name' | Optional. Attribute name used by a list item | [Basic Usage](demo#basic-usage) | -| placeholder | `boolean` | '' | Optional. This parameter specifies the placeholder in the text box. | [Basic Usage](demo#basic-usage) | -| minLength | `number` | 3 | Optional. Enter the minimum length of the tag content. | [Basic Usage](demo#basic-usage) | -| maxLength | `number` | Number.MAX_SAFE_INTEGER | Optional. Enter the maximum length of the tag content. | [Basic Usage](demo#basic-usage) | -| maxTags | `number` | Number.MAX_SAFE_INTEGER | Optional. Maximum number of tags that can be entered | [Basic Usage](demo#basic-usage) | -| caseSensitivity | `boolean` | false | Optional. Is case sensitive. The default value is ignoring. | [Basic Usage](demo#basic-usage) | Write | -| spellcheck | `boolean` | true | Optional. Indicates whether to enable spelling check in the input text box. | [Basic Usage](demo#basic-usage) | spellcheck | -| isAddBySpace | `boolean` | true | Optional. Whether to support the space bar. | [Basic Usage](demo#basic-usage) | label. | -| suggestionList | `Array` | [] | Optional. This parameter is a drop-down list box. The default tag list can be selected. | [Basic Usage](demo#basic-usage) | -| checkBeforeAdd | `Function\|Promise\|Observable` | None | Optional. User-defined verification function whose type is (newTag: string) => boolean, Promise, or Observable | [Basic Usage](demo#basic-usage) | -| disabled | `boolean` | false | Optional. Disabled is unavailable. | [Basic Usage](demo#basic-usage) | - -Note: In addition to the "tags" mode, you can also use the "ngModel" mode to bind arrays. For details, see [Two-way Binding](demo#ng-model). - -## d-tags-input event - -| Event | Type | Description | Jump to Demo | -| :---------: | :-----------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------ | -| valueChange | `EventEmitter` | This function is invoked when an option is selected. The parameter is the value of the selected option. To obtain the values of all selection states, use (ngModelChange) | [Basic Usage](demo#basic-usage) | diff --git a/devui/tags-input/index.ts b/devui/tags-input/index.ts deleted file mode 100644 index f055ddea..00000000 --- a/devui/tags-input/index.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { App } from 'vue' -import TagsInput from './src/tags-input' - -TagsInput.install = function(Vue: App) { - Vue.component(TagsInput.name, TagsInput) -}; - -TagsInput.version = '0.0.1' - -export default TagsInput diff --git a/devui/text-input/demo/demo-basic.tsx b/devui/text-input/demo/demo-basic.tsx deleted file mode 100644 index b4bf82be..00000000 --- a/devui/text-input/demo/demo-basic.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { defineComponent } from 'vue'; -import DTextInput from '../src/text-input'; - -export default defineComponent({ - name: 'DemoBasic', - setup() { - return () => { - return ( - <> -

      Default

      - -

      Disabled

      - -

      Error

      - - - ); - } - } -}); diff --git a/devui/text-input/demo/demo-size.tsx b/devui/text-input/demo/demo-size.tsx deleted file mode 100644 index 2b8bb83e..00000000 --- a/devui/text-input/demo/demo-size.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { defineComponent } from 'vue'; -import DTextInput from '../src/text-input'; - -export default defineComponent({ - name: 'DemoSize', - setup() { - return () => { - return ( - <> -

      small

      - -

      Disabled

      - -

      Error

      - - - ); - } - } -}); diff --git a/devui/text-input/demo/text-input-demo.tsx b/devui/text-input/demo/text-input-demo.tsx deleted file mode 100644 index 66ef800c..00000000 --- a/devui/text-input/demo/text-input-demo.tsx +++ /dev/null @@ -1,27 +0,0 @@ - - -import { defineComponent } from 'vue'; -import { useDemo } from 'hooks/use-demo'; -import DemoBasic from './demo-basic'; -import DemoBasicCode from './demo-basic?raw'; -import DemoSize from './demo-size'; -import DemoSizeCode from './demo-size?raw'; - -export default defineComponent({ - name: 'DTextInputDemo', - render () { - return useDemo([ - { - id: 'demo-basic', - title: '基本用法', - code: DemoBasicCode, - content: - }, { - id: 'demo-size', - title: '尺寸', - code: DemoSizeCode, - content: - } - ]); - } -}); diff --git a/devui/text-input/demo/text-input.route.ts b/devui/text-input/demo/text-input.route.ts deleted file mode 100644 index 52fe195c..00000000 --- a/devui/text-input/demo/text-input.route.ts +++ /dev/null @@ -1,15 +0,0 @@ -import TextInputDemoComponent from './text-input-demo' -import DevUIApiComponent from '../../shared/devui-api/devui-api' - -import ApiCn from '../doc/api-cn.md' -import ApiEn from '../doc/api-en.md' -const routes = [ - { path: '', redirectTo: 'demo' }, - { path: 'demo', component: TextInputDemoComponent}, - { path: 'api', component: DevUIApiComponent, meta: { - 'zh-cn': ApiCn, - 'en-us': ApiEn - }} -] - -export default routes diff --git a/devui/text-input/doc/api-cn.md b/devui/text-input/doc/api-cn.md deleted file mode 100644 index 34be38ce..00000000 --- a/devui/text-input/doc/api-cn.md +++ /dev/null @@ -1,23 +0,0 @@ -# 如何使用 - -在module中引入： - -```ts -import { TextInputModule } from 'ng-devui/text-input'; -``` - -在页面中使用： - -```xml - -``` - -# dTextInput -## dTextInput 参数 - -| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | -| :---------: | :-------: | :---: | :--------------------------: | ----------------------------------------------- | -| id | `string` | -- | 可选，文本框 id |[基本用法](demo#basic-usage)| -| placeholder | `string` | -- | 可选，文本框 placeholder | [基本用法](demo#basic-usage) | -| disabled | `boolean` | false | 可选，文本框是否被禁用 | [基本用法](demo#basic-usage) | -| error | `boolean` | false | 可选，文本框是否出现输入错误 | [基本用法](demo#basic-usage) | diff --git a/devui/text-input/doc/api-en.md b/devui/text-input/doc/api-en.md deleted file mode 100644 index 9144e936..00000000 --- a/devui/text-input/doc/api-en.md +++ /dev/null @@ -1,23 +0,0 @@ -# How to use - -Import into module: - -```ts -import { TextInputModule } from 'ng-devui/text-input'; -``` - -In the page: - -```xml - -``` - -# dTextInput -### dTextInput Parameter - -| Parameter | Type | Default | Description | Jump to Demo | -| :---------: | :-------: | :---: | :--------------------------: | ----------------------------------------------- | -| id | `string` | -- | Optional. Text-input ID | [Basic Usage](demo#basic-usage)| -| placeholder | `string` | -- | Optional. Text-input placeholder | [Basic Usage](demo#basic-usage) | -| disabled | `boolean` | false | Optional. Indicating whether the Text-input is disabled. | [Basic Usage](demo#basic-usage) | -| error | `boolean` | false | Optional. Indicating whether an input error occurs in the Text-input. | [Basic Usage](demo#basic-usage) | diff --git a/devui/text-input/index.ts b/devui/text-input/index.ts deleted file mode 100644 index 4a68f956..00000000 --- a/devui/text-input/index.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { App } from 'vue' -import TextInput from './src/text-input' - -TextInput.install = function(Vue: App) { - Vue.component(TextInput.name, TextInput) -}; - -TextInput.version = '0.0.1' - -export default TextInput diff --git a/sites/.vitepress/config/sidebar.ts b/sites/.vitepress/config/sidebar.ts index 2d639b4f..da971953 100644 --- a/sites/.vitepress/config/sidebar.ts +++ b/sites/.vitepress/config/sidebar.ts @@ -6,39 +6,92 @@ const sidebar = { children: [ { text: 'Button 按钮', link: '/components/button/' }, { text: 'Icon 图标', link: '/components/icon/' }, - { text: 'Panel 面板', link: '/components/panel/' } + { text: 'DragDrop 拖拽', link: '/components/dragdrop/' }, + { text: 'Fullscreen 全屏', link: '/components/fullscreen/' }, + { text: 'Panel 面板', link: '/components/panel/' }, + { text: 'Search 搜索框', link: '/components/search/' }, + { text: 'Status 状态', link: '/components/status/' }, + { text: 'Sticky 便贴', link: '/components/sticky/' }, ] }, { text: '导航', - children: [{ text: 'Tabs 选项卡切换', link: '/components/tabs/' }] + children: [ + { text: 'Accordion 手风琴', link: '/components/accordion/' }, + { text: 'Anchor 锚点', link: '/components/anchor/' }, + { text: 'BackTop 回到顶部', link: '/components/back-top/' }, + { text: 'Breadcrumb 面包屑', link: '/components/breadcrumb/' }, + { text: 'DropDown 下拉菜单', link: '/components/dropdown/' }, + { text: 'NavSprite 导航精灵', link: '/components/nav-sprite/' }, + { text: 'Pagination 分页', link: '/components/pagination/' }, + { text: 'StepsGuide 操作指引', link: '/components/steps-guide/' }, + { text: 'Tab 选项卡', link: '/components/tab/' }, + ] }, { text: '反馈', children: [ { text: 'Alert 警告', link: '/components/alert/' }, + { text: 'Drawer 抽屉板', link: '/components/drawer/' }, { text: 'Loading 加载提示', link: '/components/loading/' }, - { text: 'Toast 全局通知', link: '/components/toast/' } + { text: 'Mention 提及', link: '/components/mention/' }, + { text: 'Modal 模态弹窗', link: '/components/modal/' }, + { text: 'Popover 悬浮提示', link: '/components/popover/' }, + { text: 'ReadTip 阅读提示', link: '/components/read-tip/' }, + { text: 'Toast 全局通知', link: '/components/toast/' }, + { text: 'Tooltip 提示', link: '/components/tooltip/' }, ] }, { text: '数据录入', children: [ + { text: 'AutoComplete 自动补全', link: '/components/auto-complete/' }, + { text: 'Cascader 级联菜单', link: '/components/cascader/' }, + { text: 'CategorySearch 分类搜索', link: '/components/category-search/' }, { text: 'Checkbox 复选框', link: '/components/checkbox/' }, + { text: 'DatePicker 日期选择器', link: '/components/date-picker/' }, + { text: 'DatePickerPro 日期选择器', link: '/components/date-picker-pro/' }, + { text: 'EditableSelect 可编辑下拉框', link: '/components/editable-select/' }, + { text: 'Form 表单', link: '/components/form/' }, + { text: 'Input 文本框', link: '/components/input/' }, + { text: 'InputNumber 数字输入框', link: '/components/input-number/' }, + { text: 'MultiAutoComplete 多项自动补全', link: '/components/multi-auto-complete/' }, { text: 'Radio 单选框', link: '/components/radio/' }, { text: 'Select 下拉选择框', link: '/components/select/' }, + { text: 'Slider 滑块', link: '/components/slider/' }, { text: 'Switch 开关', link: '/components/switch/' }, - { text: 'TagsInput 标签输入', link: '/components/tags-input/' }, - { text: 'TextInput 文本框', link: '/components/text-input/' } + { text: 'TagInput 标签输入', link: '/components/tag-input/' }, + { text: 'Textarea 多行文本框', link: '/components/textarea/' }, + { text: 'TimePicker 时间选择器', link: '/components/time-picker/' }, + { text: 'Transfer 穿梭框', link: '/components/transfer/' }, + { text: 'TreeSelect 树形选择框', link: '/components/tree-select/' }, + { text: 'Upload 上传', link: '/components/upload/' }, ] }, { text: '数据展示', children: [ { text: 'Avatar 头像', link: '/components/avatar/' }, - { text: 'Carousel 走马灯', link: '/components/carousel/' } + { text: 'Badge 徽标', link: '/components/badge/' }, + { text: 'Card 卡片', link: '/components/card/' }, + { text: 'Carousel 走马灯', link: '/components/carousel/' }, + { text: 'DataTable 表格', link: '/components/data-table/' }, + { text: 'Gantt 甘特图', link: '/components/gantt/' }, + { text: 'ImagePreview 图片预览', link: '/components/image-preview/' }, + { text: 'Progress 进度条', link: '/components/progress/' }, + { text: 'QuadrantDiagram 象限图', link: '/components/quadrant-diagram/' }, + { text: 'Rate 等级评估', link: '/components/rate/' }, + { text: 'Tag 标签', link: '/components/tag/' }, + { text: 'Tree 树', link: '/components/tree/' }, ] - } + }, + { + text: '布局', + children: [ + { text: 'Layout 布局', link: '/components/layout/' }, + { text: 'Splitter 分割器', link: '/components/splitter/' } + ] + }, ] } diff --git a/sites/components/accordion/index.md b/sites/components/accordion/index.md new file mode 100644 index 00000000..da243f87 --- /dev/null +++ b/sites/components/accordion/index.md @@ -0,0 +1,4 @@ +# Accordion 手风琴 +为页面提供导航的组件。 +### 何时使用 +需要通过分组组织菜单的时候使用。 \ No newline at end of file diff --git a/sites/components/anchor/index.md b/sites/components/anchor/index.md new file mode 100644 index 00000000..cbd1f3c2 --- /dev/null +++ b/sites/components/anchor/index.md @@ -0,0 +1,4 @@ +# Anchor 锚点 +跳转到页面指定位置的组件。 +### 何时使用 +需要在页面的各个部分之间实现快速跳转时。 \ No newline at end of file diff --git a/sites/components/text-input/index.md b/sites/components/input/index.md similarity index 37% rename from sites/components/text-input/index.md rename to sites/components/input/index.md index 15088452..0ec45729 100644 --- a/sites/components/text-input/index.md +++ b/sites/components/input/index.md @@ -1,4 +1,4 @@ -# Text Input 文本框 +# Input 输入框 文本输入框。 @@ -9,8 +9,8 @@ ### 基本用法

      Default

      - +

      Disabled

      - +

      Error

      - + diff --git a/sites/components/loading/index.md b/sites/components/loading/index.md index edab79c2..69e75b83 100644 --- a/sites/components/loading/index.md +++ b/sites/components/loading/index.md @@ -6,20 +6,6 @@ 当执行指令时间较长（需要数秒以上）时，向用户展示正在执行的状态。 -### 参数 - -| **参数** | **类型** | **默认** | **说明** | **跳转 Demo** | -| ------------------ | ------------------------------------------------------------ | ------------------------- | ------------------------------------------------------------ | ---------------------------- | -| v-dLoading | Promise\ / Array\\> / Boolean / undefined | -- | 可选，指令方式，控制 loading 状态 | [基本用法](#基本用法) | -| target | Element | document.body | 可选，服务方式，Loading 需要覆盖的 DOM 节点 | [服务方式调用](#服务方式调用) | -| message | String | -- | 可选，loading 时的提示信息 | [多promise](#多promise) | -| loadingTemplateRef | VNode | -- | 可选，自定义 loading 模板 | [自定义样式](#自定义样式) | -| backdrop | Boolean | true | 可选，loading 时是否显示遮罩 | [基本用法](#基本用法) | -| positionType | String | relative | 可选，指定`dLoading`宿主元素的定位类型,取值与 css position 属性一致。 | [基本用法](#基本用法) | -| view | {top?:string,left?:string} | {top: '50%', left: '50%'} | 可选，调整 loading 的显示位置，相对于宿主元素的顶部距离与左侧距离 | [基本用法](#基本用法) | -| zIndex | Number | -- | 可选，loading加载提示的 z-index 值 | [基本用法](#基本用法) | - - ### 基本用法 @@ -354,6 +340,20 @@ export default defineComponent({ ``` +### 参数 + +| **参数** | **类型** | **默认** | **说明** | **跳转 Demo** | +| ------------------ | ------------------------------------------------------------ | ------------------------- | ------------------------------------------------------------ | ---------------------------- | +| v-dLoading | Promise\ / Array\\> / Boolean / undefined | -- | 可选，指令方式，控制 loading 状态 | [基本用法](#基本用法) | +| target | Element | document.body | 可选，服务方式，Loading 需要覆盖的 DOM 节点 | [服务方式调用](#服务方式调用) | +| message | String | -- | 可选，loading 时的提示信息 | [多promise](#多promise) | +| loadingTemplateRef | VNode | -- | 可选，自定义 loading 模板 | [自定义样式](#自定义样式) | +| backdrop | Boolean | true | 可选，loading 时是否显示遮罩 | [基本用法](#基本用法) | +| positionType | String | relative | 可选，指定`dLoading`宿主元素的定位类型,取值与 css position 属性一致。 | [基本用法](#基本用法) | +| view | {top?:string,left?:string} | {top: '50%', left: '50%'} | 可选，调整 loading 的显示位置，相对于宿主元素的顶部距离与左侧距离 | [基本用法](#基本用法) | +| zIndex | Number | -- | 可选，loading加载提示的 z-index 值 | [基本用法](#基本用法) | + +