diff --git a/devui-cli/templates/vue-devui.js b/devui-cli/templates/vue-devui.js index 97d665d390161a8836901a7d10d4bc15a1be1e49..c6def01b3867c322248f3e06ce151b9f4d15b30e 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 b39252ff123cfb75e8a5abfbb9d28a38c16d6292..0000000000000000000000000000000000000000 --- 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 ca347814f2eb8ce2b306c9e1e2f6aac074d939de..0000000000000000000000000000000000000000 --- 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 e99775072ed05da5bdd742d3be093d275d4b4bda..0000000000000000000000000000000000000000 --- 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 e6467537d0eea5b76a05c9e600dc1c8320403e63..0000000000000000000000000000000000000000 --- 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 9c97a7600d257739b338cf5bca265ef5b3e4d4d0..f6641c7ad0d2e2c6acc90e6d2728236b95dab8d4 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 150a364d0894acf6a607dba4d21b073dea3e3719..77389aa8537918cf67f72656a0f211d425e647a7 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 adec789b6c04888830f53499d5c00644ec77a37f..362cae3e585c1af33208f82104f3fe57a8903fb7 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 5aaa91e60a8b060628f5daf7e5d245f051b6943c..c5280a3b4d5a3355d8f445327de69a98828020db 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 dfe0519c1c37d63bc47425b4585afd139912f1b1..a6f4317d37ece561d874963ff04c5c8bbca90256 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 062d44a79f56d0547ec85d69559cf63580ea7ce0..9935f71d21e52aa811e6db1ac5dafa6284bdbbd8 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 10d525fc02ffa0b72433016f13897cda2e59caad..8592173674b3e3919d2d1825d0aa5058abe8b92b 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 5d30e781095f2aff575053018d7a5307c00b8431..0000000000000000000000000000000000000000 --- 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 00f938e081c6e2cf85cd68cddbc672adfa94cb23..0000000000000000000000000000000000000000 --- 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 2ac85e3629e4738060bd247e08954e03f6066880..0000000000000000000000000000000000000000 --- 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 d569394d5e89fa687165e89e14bc8815c7ee15c4..0000000000000000000000000000000000000000 --- 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 e659df1459de545c9e0d98253e3a23ad459c5de9..0000000000000000000000000000000000000000 --- 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 9a3e13c3aab2180a743de63c29fae1362c2bf02d..0000000000000000000000000000000000000000 --- 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 f0e41dd9f39bb98a4c961625609b247cad376799..0000000000000000000000000000000000000000 --- 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 58701b5b7fdfa2430a5c96eee0800d76b20620d7..0000000000000000000000000000000000000000 --- 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 b42151caa65cf34f066d86aa1aedf7bcb4e0301e..5b0d5c4a90d795f81a2ddf34eff3bbf77f36461b 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 8d9ccdd1be4bcf311ba8ce2570df9b1e981fc234..b3b98b9886fcdb47bd267a8071c035b2d31c0a3b 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 70eda634764d7a0a967fb3673c2883f32f25c25d..ba6754bef4852a3ccc92e9d0f4ccd0e16b2840bc 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 de3a3e61188899021fd6663cd211064f5940de43..9a944a352504b7027a9431604fa874b0b0543549 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 8d87712e077dacb8da617ab25adcc4d7bd65e86c..06eed01a4ebad8fa3398a7ed83a653c0c1653cc9 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 d976d45d5b531c1abd426e034c50ef5296f55dd5..0000000000000000000000000000000000000000 --- 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 3559e13052b2b72b21063a3108d8e55437293b67..0000000000000000000000000000000000000000 --- 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 601316e484ceade4f1bb1a502ce70ab9564fb57f..0000000000000000000000000000000000000000 --- 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 f44c25a2ae103cffbfd5b50e2b5cfcffdd5835fb..0000000000000000000000000000000000000000 --- 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 1be341a8e10604ea021db8e2d0e749afbd856e5c..1502df14f81ff1a2d9be3b9cdf5e0328f4bf092f 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 6a7920becb16ff4db7b510c2a6c08aff9bdd6eab..36ee97ba89d1eb1b53c5832cd2dd18ee7752854f 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/auto-complete/auto-complete.tsx b/devui/auto-complete/auto-complete.tsx deleted file mode 100644 index 95159c6b3cbc2eee124a88c3076d1786869bea65..0000000000000000000000000000000000000000 --- a/devui/auto-complete/auto-complete.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { defineComponent } from 'vue' - -export default defineComponent({ - name: 'd-auto-complete', - props: { - }, - setup(props, ctx) { - return () => { - return
    devui-auto-complete
    - } - } -}) \ No newline at end of file diff --git a/devui/auto-complete/demo/auto-complete-demo.tsx b/devui/auto-complete/demo/auto-complete-demo.tsx deleted file mode 100644 index e5d44d8b9c29c8f15f166b0498d296c06fc035e9..0000000000000000000000000000000000000000 --- a/devui/auto-complete/demo/auto-complete-demo.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { defineComponent } from 'vue' - -export default defineComponent({ - name: 'd-auto-complete-demo', - props: { - }, - setup(props, ctx) { - return () => { - return
    devui-auto-complete-demo
    - } - } -}) \ No newline at end of file diff --git a/devui/auto-complete/demo/auto-complete.route.ts b/devui/auto-complete/demo/auto-complete.route.ts deleted file mode 100644 index bd1eea2cb200a02028573cd13737cdd5c72dac19..0000000000000000000000000000000000000000 --- a/devui/auto-complete/demo/auto-complete.route.ts +++ /dev/null @@ -1,15 +0,0 @@ -import AutoCompleteDemoComponent from './auto-complete-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: AutoCompleteDemoComponent}, - { path: 'api', component: DevUIApiComponent, meta: { - 'zh-cn': ApiCn, - 'en-us': ApiEn - }} -] - -export default routes diff --git a/devui/auto-complete/doc/api-cn.md b/devui/auto-complete/doc/api-cn.md deleted file mode 100644 index 8173d6e9bbf5d5cc18ad328ff1c64596e65ca4d1..0000000000000000000000000000000000000000 --- a/devui/auto-complete/doc/api-cn.md +++ /dev/null @@ -1,64 +0,0 @@ -# 如何使用 -在module中引入： -```ts -import { AutoCompleteModule } from 'ng-devui/auto-complete'; -``` -在页面中使用： -```html - -``` - -# dAutoComplete -## dAutoComplete 参数 - -| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | -| :-------------------: | :-------------------------------: | :-----------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | -| source | `Array` | -- | 必选，有 searchFn 的情况下可以不必选 | [基本用法](demo#basic-usage) | -| allowEmptyValueSearch | `boolean` | false | 可选，在绑定的输入框 value 为空时，是否进行搜索提示操作 | [自定义模板展示](demo#auto-custom) | -| appendToBody | `boolean` | false | 可选，下拉弹出是否 append to body | [自定义模板展示](demo#auto-custom) | -| disabled | `boolean` | false | 可选，是否禁止指令 | [设置禁用](demo#auto-disable) | -| delay | `number` | 300 | 可选，只有在 delay 时间经过后并且输入新值，才做搜索查询（`ms`） | [自定义模板展示](demo#auto-custom) | -| disabledKey | `string` | -- | 可选，禁用单个选项，当传入资源 source 选项类型为对象，比如设置为'disabled'，则当对象的 disable 属性为 true 时，比如{ label: xxx, disabled: true }，该选项将禁用 | [设置禁用](demo#auto-disable) | -| itemTemplate | `TemplateRef` | -- | 可选，自定义展示模板 | [自定义模板展示](demo#auto-custom) | -| noResultItemTemplate | `TemplateRef` | -- | 可选，没有匹配项的展示结果 | [自定义模板展示](demo#auto-custom) | -| formatter | `(item: any) => string` | [`defaultFormatter`](#defaultformatter) | 可选，格式化函数 | [设置禁用](demo#auto-disable) | -| isSearching | `boolean` | false | 可选，是否在搜索中，用于控制 searchingTemplate 是否显示 | [自定义模板展示](demo#auto-custom) | -| searchingTemplate | `TemplateRef` | -- | 可选，自定义搜索中显示模板 | [自定义模板展示](demo#auto-custom) | -| sceneType | `string` | -- | 可选，值为 'select'、'suggest' | [启用懒加载](demo#auto-lazy-load) | -| searchFn | `(term: string) => Observable` | [`defaultSearchFn`](#defaultsearchfn) | 可选，自定义搜索过滤 | [自定义数据匹配方法](demo#auto-object) | -| tipsText | `string` | '最近输入' | 可选，提示文字 | [设置禁用](demo#auto-disable) | -| latestSource | `Array` | -- | 可选， 最近输入 | [最近输入](demo#auto-latest) | -| valueParser | `(item: any) => any` | [`defaultValueParse`](#defaultvalueparse) | 可选， 对选中后数据进行处理 | [启用懒加载](demo#auto-lazy-load) | -| enableLazyLoad | `boolean` | false | 可选，是否允许懒加载 | [启用懒加载](demo#auto-lazy-load) | -| dAutoCompleteWidth | `number` | -- | 可选，调整宽度（`px`） | - -## dAutoComplete 事件 - -| 参数 | 类型 | 说明 | 跳转 Demo | -| :-----------------: | :-------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------- | -| loadMore | `EventEmitter>` | 懒加载触发事件，配合`enableLazyLoad`使用，使用`$event.loadFinish()`关闭 loading 状态，其中\$event 为 AutoCompletePopupComponent 的实例 | [启用懒加载](demo#auto-lazy-load) | -| selectValue | `EventEmitter` | 可选，选择选项之后的回调函数 | [启用懒加载](demo#auto-lazy-load) | -| transInputFocusEmit | `EventEmitter<{focus: boolean, popupRef: ComponentRef}>` | 可选，Input focus 时回调函数 | [启用懒加载](demo#auto-lazy-load) | - -# 接口 & 类型定义 -### defaultSearchFn - -```ts -defaultSearchFn = (term) => { - return of(this.source.filter((lang) => this.formatter(lang).toLowerCase().indexOf(term.toLowerCase()) !== -1)); -}; -``` -term 为输入的关键字。 - -### defaultFormatter -```ts -defaultFormatter = (item) => (item ? item.label || item.toString() : ''); -``` -item 为数据项。 - -### defaultValueParse -```ts -defaultValueParse = (item) => item; -``` -item 为数据项。 - diff --git a/devui/auto-complete/doc/api-en.md b/devui/auto-complete/doc/api-en.md deleted file mode 100644 index f47e9f3a307d4b761063733b4339cb2b8a361451..0000000000000000000000000000000000000000 --- a/devui/auto-complete/doc/api-en.md +++ /dev/null @@ -1,74 +0,0 @@ -# How to use - -Import into module - -```ts -import { AutoCompleteModule } from 'ng-devui/auto-complete'; -``` - -In the page - -```html - -``` - -# dAutoComplete - -## dAutoComplete Parameter - -| Parameter | Type | Default | Description | Jump to Demo | -| :-------------------: | :-----------------------------------: | :---------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------- | -| source | `Array` | -- | Required. This parameter is optional if searchFn is specified. | [Basic usage](demo#basic-usage) | -| allowEmptyValueSearch | `boolean` | false | Optional. indicates whether to display a search message when the bound text box value is empty. | [Customized template display](demo#auto-custom) | -| appendToBody | `boolean` | false | Optional. Whether to append to body is displayed in the drop-down list box. | [Customized template display](demo#auto-custom) | -| disabled | `boolean` | false | Optional. Indicating whether to disable commands. | [Disabled](demo#auto-disable) | -| delay | `number` | 300 | Optional. The search is performed only after the delay time elapses and a new value is entered. (`ms`) | [Customized template display](demo#auto-custom) | -| disabledKey | `string` | -- | Optional. Disable a single option. If the input resource source option type is an object, for example, disabled, and the disable attribute of the object is true, for example, {label: xxx, disabled: true}, this option will be disabled | [Disabled](demo#auto-disable) | -| itemTemplate | `TemplateRef` | -- | Optional. Customized display template | [Customized template display](demo#auto-custom) | -| noResultItemTemplate | `TemplateRef` | -- | Optional. No matching item is displayed. | [Customized template display](demo#auto-custom) | -| formatter | `(item: any) => string` | [`defaultFormatter`](#defaultformatter) | Optional. Formatting function | [Disabled](demo#auto-disable) | -| isSearching | `boolean` | false | Optional. indicating whether the search template is displayed. | [Customized template display](demo#auto-custom) | -| searchingTemplate | `TemplateRef` | -- | Optional. The template is displayed in customized search. | [Customized template display](demo#auto-custom) | -| sceneType | `string` | -- | Optional. The value can be select or suggestion. | [Enable lazy load](demo#auto-lazy-load) | -| searchFn | `(term: string) => Observable` | [`defaultSearchFn`](#defaultsearchfn) | Optional. Customized search filtering | [Customized data matching method](demo#auto-object) | -| tipsText | `string` | 'Latest input' | Optional. prompt text | [Disabled](demo#auto-disable) | -| latestSource | `Array` | -- | Optional. Latest input | [Latest input](demo#auto-latest) | -| valueParser | `(item: any) => any` | [`defaultValueParse`](#defaultvalueparse) | (optional) Process selected data | [Enable lazy load](demo#auto-lazy-load) | -| enableLazyLoad | `boolean` | false | Optional. Whether lazy loading is allowed | [Enable lazy load](demo#auto-lazy-load) | -| dAutoCompleteWidth | `number` | -- | Optional. Adjust the width (`px`) | - -## dAutoComplete Event - -| Parameter | Type | Description | Jump to Demo | -| :-----------------: | :----------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------- | -| loadMore | `EventEmitter>` | : optional. It is a lazy loading trigger event. It is used together with enableLazyLoad. \`$event.loadFinish()\` is used to disable the loading status. $event is the instance of the pop-up component AutoCompletePopupComponent | [Enable lazy load](demo#auto-lazy-load) | -| selectValue | `EventEmitter` | (optional), callback function after selecting an option | [Enable lazy load](demo#auto-lazy-load) | -| transInputFocusEmit | `EventEmitter<{focus: boolean, popupRef: ComponentRef}>` | (optional). Callback function for input focus | [Enable lazy load](demo#auto-lazy-load) | - -# Interface & Type Definition - -### defaultSearchFn - -```ts -defaultSearchFn = (term) => { - return of(this.source.filter((lang) => this.formatter(lang).toLowerCase().indexOf(term.toLowerCase()) !== -1)); -}; -``` - -term indicates the entered keyword. - -### defaultFormatter - -```ts -defaultFormatter = (item) => (item ? item.label || item.toString() : ''); -``` - -item indicates a data item. - -### defaultValueParse - -```ts -defaultValueParse = (item) => item; -``` - -item indicates a data item. diff --git a/devui/avatar/demo/avatar-demo.scss b/devui/avatar/demo/avatar-demo.scss deleted file mode 100644 index f7df92cc019fe98acee27f77de0bd295131a3f79..0000000000000000000000000000000000000000 --- 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 7aeacb676dfeffbc73ed063e315eb232a17588e4..0000000000000000000000000000000000000000 --- 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 72dd63b30e31b99871ea13ec8065d4d2c1727b6f..0000000000000000000000000000000000000000 --- 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 1e91ae59789a72d894986400fada954063fedc82..0000000000000000000000000000000000000000 --- 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 82b536e9c835e1b6e9e152f02d7a1f1c7fb1eba7..0000000000000000000000000000000000000000 --- 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 29f5f7dd7947510dbf00877f590b6647ac14628c..0000000000000000000000000000000000000000 --- 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 edc114bc88b0f79f613e7dd786ba6e5a477944e4..0000000000000000000000000000000000000000 --- 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 4d411154a66f7ece2438fef51ac266459eccd22b..0000000000000000000000000000000000000000 --- 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 95cc4267efc4b5e6247cd406abd1f6a58e5e0e9d..50ded6864f71c409609e42bc2fa7a6177a3e53ee 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 697cd235add5ec87e40aeceeb864c7cf7614bd96..916c367df36e9b044f7093a5200be1f06f77f72a 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 96863fc309471b87b3ec2a2af40defa446fcf830..7cf6219e6c74f1278b1151af3b4afee0b1c2b390 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 a6fa805903d993e58dedbd47b9a8ad8fa71aafb9..21e9cc64a2e475a946255f9004804e0a00526cd1 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 2249f86b348ddc3ec5e544f7a54d9e961dab987f..fb7709f3b12622634471b56e015337fa58a521cb 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/back-top/back-top.tsx b/devui/back-top/back-top.tsx deleted file mode 100644 index 651d1a31d741b6f55d6fc9fc7b9667ca24a51a82..0000000000000000000000000000000000000000 --- a/devui/back-top/back-top.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { defineComponent } from 'vue' - -export default defineComponent({ - name: 'd-back-top', - props: { - }, - setup(props, ctx) { - return () => { - return
    devui-back-top
    - } - } -}) \ No newline at end of file diff --git a/devui/back-top/demo/back-top-demo.tsx b/devui/back-top/demo/back-top-demo.tsx deleted file mode 100644 index c07b12b1ac04e528f81295ec204403d32f3b3ed8..0000000000000000000000000000000000000000 --- a/devui/back-top/demo/back-top-demo.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { defineComponent } from 'vue' - -export default defineComponent({ - name: 'd-back-top-demo', - props: { - }, - setup(props, ctx) { - return () => { - return
    devui-back-top-demo
    - } - } -}) \ No newline at end of file diff --git a/devui/back-top/demo/back-top.route.ts b/devui/back-top/demo/back-top.route.ts deleted file mode 100644 index da4819014fbac9a66399e051344c970501cb081c..0000000000000000000000000000000000000000 --- a/devui/back-top/demo/back-top.route.ts +++ /dev/null @@ -1,15 +0,0 @@ -import BackTopDemoComponent from './back-top-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: BackTopDemoComponent}, - { path: 'api', component: DevUIApiComponent, meta: { - 'zh-cn': ApiCn, - 'en-us': ApiEn - }} -] - -export default routes diff --git a/devui/back-top/doc/api-cn.md b/devui/back-top/doc/api-cn.md deleted file mode 100644 index 5c56c387632a9874cb041aad45272669bb45a1d2..0000000000000000000000000000000000000000 --- a/devui/back-top/doc/api-cn.md +++ /dev/null @@ -1,30 +0,0 @@ -# 如何使用 - -在module中引入： - -```ts -import { BackTopModule } from 'ng-devui/back-top'; -``` - -在页面中使用： - -```xml - -``` - -# d-back-top -## d-back-top 参数 - -| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | -| :---------: | :------------: | :-----: | :--------------------------------------------------------------------------- | | -| customTemplate | `TemplateRef` | -- | 可选，自定义按钮样式 | [自定义](demo#back-top-customize) | -| bottom | `string` | '50px' | 可选，按钮距离页面底部位置 | [自定义](demo#back-top-customize) | -| right | `string` | '30px' | 可选，按钮距离页面右边距 | [自定义](demo#back-top-customize) | -| visibleHeight | `number` | 300 | 可选，滚动高度达到visibleHeight所设值后展示回到顶部按钮，单位为`px` | [自定义](demo#back-top-customize) | -| scrollTarget | `HTMLElement` | Window | 可选，触发滚动的对象 | [滚动容器](demo#back-top-scroll-container) | - -## d-back-top 事件 - -| 参数 | 类型 | 说明 | 跳转 Demo | -| :------: | :-----------------: | :-------------------------------------------------------------------------------------- | ---------------------------------------------- | -| backTopEvent | `EventEmitter` | 可选，点击回到顶部按钮的回调函数 | [基本用法](demo#back-top-basic) | diff --git a/devui/back-top/doc/api-en.md b/devui/back-top/doc/api-en.md deleted file mode 100644 index 3bfb59a502abf260ed0a24e4d400b1af2c941a74..0000000000000000000000000000000000000000 --- a/devui/back-top/doc/api-en.md +++ /dev/null @@ -1,29 +0,0 @@ -# How to use - -Import into module: - -```ts -import { BackTopModule } from 'ng-devui/back-top'; -``` - -In the page: - -```xml - -``` -# d-back-top -## d-back-top Parameter - -| Parameter | Type | Default | Description | Jump to Demo | -| :---------: | :------------: | :-----: | :--------------------------------------------------------------------------- | | -| customTemplate | `TemplateRef` | -- | Optional. Custom button style | [Customize](demo#back-top-customize) | -| bottom | `string` | '50px' | Optional. Position between the button and the bottom of the page | [Customize](demo#back-top-customize) | -| right | `string` | '30px' | Optional. It is the right margin between the button and the page | [Customize](demo#back-top-customize) | -| visibleHeight | `number` | 300 | Optional. When the scrolling height reaches the value of visibleHeight, the button is displayed to the top. The unit is `px` | [Customize](demo#back-top-customize) | -| scrollTarget | `HTMLElement` | Window | Optional. Object that triggers scrolling | [Scrolling Container](demo#back-top-scroll-container) | - -## d-back-top Event - -| Parameter | Type | Description | Jump to Demo | -| :------: | :-----------------: | :-------------------------------------------------------------------------------------- | ---------------------------------------------- | -| backTopEvent | `EventEmitter` | Optional. Callback function for clicking the button to return to the top | [Basic Usage](demo#back-top-basic) | diff --git a/devui/badge/badge.tsx b/devui/badge/badge.tsx deleted file mode 100644 index 560de1b58c07938b4f9063af9d88ab441e229dd6..0000000000000000000000000000000000000000 --- a/devui/badge/badge.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { defineComponent } from 'vue' - -export default defineComponent({ - name: 'd-badge', - props: { - }, - setup(props, ctx) { - return () => { - return
    devui-badge
    - } - } -}) \ No newline at end of file diff --git a/devui/badge/demo/badge-demo.tsx b/devui/badge/demo/badge-demo.tsx deleted file mode 100644 index d0ec38591178cebc2ad4aad63b08782fc1ed5cce..0000000000000000000000000000000000000000 --- a/devui/badge/demo/badge-demo.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { defineComponent } from 'vue' - -export default defineComponent({ - name: 'd-badge-demo', - props: { - }, - setup(props, ctx) { - return () => { - return
    devui-badge-demo
    - } - } -}) \ No newline at end of file diff --git a/devui/badge/demo/badge.route.ts b/devui/badge/demo/badge.route.ts deleted file mode 100644 index 7a25019903bd81c368e87d69e9843a853877d0a8..0000000000000000000000000000000000000000 --- a/devui/badge/demo/badge.route.ts +++ /dev/null @@ -1,15 +0,0 @@ -import BadgeDemoComponent from './badge-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: BadgeDemoComponent}, - { path: 'api', component: DevUIApiComponent, meta: { - 'zh-cn': ApiCn, - 'en-us': ApiEn - }} -] - -export default routes diff --git a/devui/badge/doc/api-cn.md b/devui/badge/doc/api-cn.md deleted file mode 100644 index b0858655b111bf7ff1e5ccee2923ef78ae7c17ba..0000000000000000000000000000000000000000 --- a/devui/badge/doc/api-cn.md +++ /dev/null @@ -1,27 +0,0 @@ -# 如何使用 -在module中引入： -```ts -import { BadgeModule } from 'ng-devui/badge'; -``` - -在页面中使用： -```html - -
    未读消息
    -     - -``` -# Badge - -## d-badge 参数 - -| 参数 | 类型 | 默认值 | 描述 | 跳转 Demo | -| :---------: | :------------: | :-----: | :--------------------------------------------------------------------------- | :--------------------------- | -| count | `number` | -- | 可选，设置基本徽章和计数徽章中显示的数目 | [基本徽章](demo#badge-basic) | -| maxCount | `number` | 99 | 可选，设置基本徽章和计数徽章最大可显示数目，当 count > maxCount 时显示maxCount+ | [基本徽章](demo#badge-basic) | -| showDot | `boolean` | false | 可选，true时为点状徽章(有包裹)或状态徽章(无包裹)，false时为基本徽章(有包裹)或计数徽章(无包裹) | [点状徽章](demo#badge-dot) | -| status |`BadgeStatusType` | -- | 可选，状态色 'danger' \| 'warning' \| 'waiting' \| 'success' \| 'info' | [基本徽章](demo#badge-basic) | -| badgePos | `BadgePositionType` | 'top-right' | 可选，徽标位置 'top-left' \| 'top-right' \| 'bottpm-left' \| ''bottom-right'' | [徽章位置](demo#position) | -| offsetXY | `[number, number]` | -- | 可选，有包裹时徽标位置偏移量，格式为[x,y]，单位为px。x为相对right偏移量(right: -x `px`)，y为相对top偏移量(top: y `px`) | [自定义](demo#custom) | -| bgColor | `string` | -- | 可选，自定义徽标色，此时status参数设置的徽章状态色失效 | [自定义](demo#custom) | -| textColor | `string` | -- | 可选， 可自定义徽标文字颜色 | [自定义](demo#custom) | diff --git a/devui/badge/doc/api-en.md b/devui/badge/doc/api-en.md deleted file mode 100644 index 0d628a7a6505ab6968b0bf8ecfc89b39de75285e..0000000000000000000000000000000000000000 --- a/devui/badge/doc/api-en.md +++ /dev/null @@ -1,27 +0,0 @@ -# How to use -Import into module: -```ts -import { BadgeModule } from 'ng-devui/badge'; -``` - -In the page: -```html - -
    Unread messages
    -     - -``` -# Badge - -## d-badge Parameter - -| Parameter | Type | Default | Description | Jump to Demo | -| :---------: | :------------: | :-----: | :--------------------------------------------------------------------------- | :--------------------------- | -| count | `number` | -- | Optional. Set the number of basic badges and count badges to be displayed. | [Basic Badge](demo#badge-basic) | -| maxCount | `number` | 99 | Optional. Sets the maximum number of basic and counting badges that can be displayed. When count is greater than maxCount, maxCount+ is displayed. | [Basic Badge](demo#badge-basic) | -| showDot | `boolean` | false | Optional. The value true indicates the dot badge (with package) or status badge (without package). The value false indicates the basic badge (with package) or count badge (without package). | [Dotted Badge](demo#badge-dot) | -| status |`BadgeStatusType` | -- | Optional. The status color is'danger'\| 'warning' \| 'waiting' \| 'success' \| 'info'. | [Basic Badge](demo#badge-basic) | -| badgePos | `BadgePositionType` | 'top-right' | Optional. Logo position'top-left' \|'top-right' \|'bottpm-left' \|'bottom-right'. | [Badge Position](demo#position) | -| offsetXY | `[number, number]` | -- |Optional. Indicates the logo position offset when there is a package. The format is [x,y], in px. This parameter is optional. x is the relative right offset (right: -x `px`), y is the relative top offset (top: y `px`). | [Custom](demo#custom) | -| bgColor | `string` | -- | Optional. The badge color can be customized. In this case, the badge status color specified by status is invalid.| [Custom](demo#custom) | -| textColor | `string` | -- | Optional. You can customize the logo text color. | [Custom](demo#custom) | diff --git a/devui/breadcrumb/breadcrumb.tsx b/devui/breadcrumb/breadcrumb.tsx deleted file mode 100644 index 97c04f954fab712044d93e69e4587b732627cada..0000000000000000000000000000000000000000 --- a/devui/breadcrumb/breadcrumb.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { defineComponent } from 'vue' - -export default defineComponent({ - name: 'd-breadcrumb', - props: { - }, - setup(props, ctx) { - return () => { - return
    devui-breadcrumb
    - } - } -}) \ No newline at end of file diff --git a/devui/breadcrumb/demo/breadcrumb-demo.tsx b/devui/breadcrumb/demo/breadcrumb-demo.tsx deleted file mode 100644 index 3e6b9d400bbbf469d1d9ea144811a218515732ae..0000000000000000000000000000000000000000 --- a/devui/breadcrumb/demo/breadcrumb-demo.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { defineComponent } from 'vue' - -export default defineComponent({ - name: 'd-breadcrumb-demo', - props: { - }, - setup(props, ctx) { - return () => { - return
    devui-breadcrumb-demo
    - } - } -}) \ No newline at end of file diff --git a/devui/breadcrumb/demo/breadcrumb.route.ts b/devui/breadcrumb/demo/breadcrumb.route.ts deleted file mode 100644 index 969e8dad147abf567cd388ed42b6ef40f368d942..0000000000000000000000000000000000000000 --- a/devui/breadcrumb/demo/breadcrumb.route.ts +++ /dev/null @@ -1,15 +0,0 @@ -import BreadcrumbDemoComponent from './breadcrumb-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: BreadcrumbDemoComponent}, - { path: 'api', component: DevUIApiComponent, meta: { - 'zh-cn': ApiCn, - 'en-us': ApiEn - }} -] - -export default routes diff --git a/devui/breadcrumb/doc/api-cn.md b/devui/breadcrumb/doc/api-cn.md deleted file mode 100644 index 9b26dd11d59caa800396dbd4485c981a463964b3..0000000000000000000000000000000000000000 --- a/devui/breadcrumb/doc/api-cn.md +++ /dev/null @@ -1,98 +0,0 @@ -# 如何使用 - -在module中引入： - -```ts -import { BreadcrumbModule } from 'ng-devui/breadcrumb'; -``` - -在页面中使用： - -```xml -//通过d-breadcrumb-item定义显示 - - - - -//通过传入source显示 - -``` -# d-breadcrumb-item -## d-breadcrumb-item 参数 - -| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | -| :----------------: | :-----------------: | :---: | :------------------------------------------------------ | -------------------------------------------------------------------------------------- | -| showMenu | `boolean` | false | 可选，是否需要显示下拉箭头及下拉列表内容 | [可下拉的面包屑](demo#drop-down-breadcrumbs) | -| menuList | [`Array`](#menuconfig) | -- | 可选，showMenu 为 true 时传入，下拉列表的显示内容 | [可下拉的面包屑](demo#drop-down-breadcrumbs) | -| isSearch | `boolean` | false | 可选，showMenu 为 true 时传入，下拉列表是否需要搜索功能 | [可下拉的面包屑](demo#drop-down-breadcrumbs) | -| customMenuTemplate | `TemplateRef` | -- | 可选，showMenu 为 true 时传入，自定义下拉列表 | [自定义下拉列表和分隔符的面包屑](demo#self-defined-breadcrumbs) | - -## d-breadcrumb-item 事件 - -| 事件 | 类型 | 说明 | 跳转 Demo | -| :---------: | :-----------------: | :-----------------------------------------------------: | ------------------------------------------------------------------- | -| toggleEvent | `EventEmitter` | dropdown 菜单展开和收起的事件，返回值为当前菜单是否打开 | [可下拉的面包屑](demo#drop-down-breadcrumbs) | - -# d-breadcrumb -## d-breadcrumb 参数 - -| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | -| :-----------: | :-------------------: | :---: | :------------------------------------------------- | -------------------------------------------------------------------------------------- | -| separatorIcon | `TemplateRef` | ' / ' | 可选，自定义分隔符样式 | [自定义下拉列表和分隔符的面包屑](demo#self-defined-breadcrumbs) | -| source | [`Array`](#sourceconfig) | [] | 可选，面包屑根据配置的 source 按照默认渲染方式显示 | [传入source](demo#source-config-breadcrumbs) - -# 接口 & 类型定义 -### MenuConfig - -```ts -export interface MenuConfig { - name: string; - link: string; - linkType?: 'hrefLink' | 'routerLink'; - target?: string; -} -``` - -`name`：显示的名称 - -`link`：跳转的路径，可为绝对路径与相对路径，注意需要与路由的配置一致 - -`linkType`: 链接类型，默认为'hrefLink'方式，可选'hrefLink' 或 'routerLink' - -`target`: 规定在何处打开链接文档 - -### SourceConfig - -```ts -export interface SourceConfig { - title: string; - link?: string; - showMenu?: boolean; - isSearch?: boolean; - target?: string; - menuList?: Array; - customMenuTemplate?: TemplateRef; - noNavigation?: boolean; - linkType?: 'hrefLink' | 'routerLink'; -} -``` - -`title`: 显示的名称 - -`link`: 跳转的路径 - -`showMenu`: 是否显示下拉列表 - -`isSearch`: 下拉列表是否可搜索 - -`menuList`: 下拉列表的数据，配置参考上方 MenuConfig - -`customMenuTemplate`: 自定义下拉列表 - -`noNavigation`: 链接是否不可跳转,一般用于当前所处位置不可跳转的配置 - -`linkType`: 链接类型，默认为'hrefLink'方式，可选'hrefLink' 或 'routerLink' - -`target`: 规定在何处打开链接文档 - -备注：source 数据改变使用`Object.assign`方式触发变更检测 diff --git a/devui/breadcrumb/doc/api-en.md b/devui/breadcrumb/doc/api-en.md deleted file mode 100644 index 7bde383a9a3a066eecd152ccf603c12981f5f4fe..0000000000000000000000000000000000000000 --- a/devui/breadcrumb/doc/api-en.md +++ /dev/null @@ -1,98 +0,0 @@ -# How to use - -Import into module: - -```ts -import { BreadcrumbModule } from 'ng-devui/breadcrumb'; -``` - -In the page: - -```xml -//use d-breadcrumb-item - - - - -//use source - -``` -# d-breadcrumb-item -## d-breadcrumb-item Parameter - -| Parameter | Type | Default | Description | Jump to Demo | -| :----------------: | :-----------------: | :---: | :------------------------------------------------------ | -------------------------------------------------------------------------------------- | -| showMenu | `boolean` | false | Optional. Indicating whether to display the drop-down arrow and content in the drop-down list | [Breadcrumbs with Dropdown menu](demo#drop-down-breadcrumbs) | -| menuList | [`Array`](#menuconfig) | -- | Optional. This parameter is transferred when showMenu is set to true. Content displayed in the drop-down list box | [Breadcrumbs with Dropdown menu](demo#drop-down-breadcrumbs) | -| isSearch | `boolean` | false | Optional. This parameter is transferred when showMenu is set to true. Whether the search function is required in the drop-down list box | [Breadcrumbs with Dropdown menu](demo#drop-down-breadcrumbs) | -| customMenuTemplate | `TemplateRef` | -- | Optional. This parameter is transferred when showMenu is set to true. Customized drop-down list box | [Customize](demo#self-defined-breadcrumbs) | - -## d-breadcrumb-item Event - -| Event | Type | Description | Jump to Demo | -| :---------: | :-----------------: | :-----------------------------------------------------: | ------------------------------------------------------------------- | -| toggleEvent | `EventEmitter` | Event of expanding or collapsed Dropdown menus. The return value is whether the current menu is opened | [Breadcrumbs with Dropdown menu](demo#drop-down-breadcrumbs) | - -# d-breadcrumb -## d-breadcrumb Parameter - -| Parameter | Type | Default | Description | Jump to Demo | -| :-----------: | :-------------------: | :---: | :------------------------------------------------- | -------------------------------------------------------------------------------------- | -| separatorIcon | `TemplateRef` | ' / ' | Optional. Custom separator style | [Customize](demo#self-defined-breadcrumbs) | -| source | [`Array`](#sourceconfig) | [] | Optional. The breadcrumbs are displayed in the default rendering mode based on the configured source | [Source Config](demo#source-config-breadcrumbs) | - -# Interface & Type Definition -### MenuConfig - -```ts -export interface MenuConfig { - name: string; - link: string; - linkType?: 'hrefLink' | 'routerLink'; - target?: string; -} -``` - -`name`: Indicates the name to be displayed. - -`link`: Indicates the jump path, which can be an absolute path or a relative path. The path must be the same as the route configuration. - -`linkType`: Link type. The default value is hrefLink. The value can be hrefLink or routerLink. - -`target`: Specifies where to open the linked document. - -### SourceConfig - -```ts -export interface SourceConfig { - title: string; - link?: string; - showMenu?: boolean; - isSearch?: boolean; - target?: string; - menuList?: Array; - customMenuTemplate?: TemplateRef; - noNavigation?: boolean; - linkType?: 'hrefLink' | 'routerLink'; -} -``` - -`title`: Name to be displayed - -`link`: Indicates the path to be redirected. - -`showMenu`: Indicates whether to display the drop-down list box. - -`isSearch`: Indicates whether the drop-down list box can be searched. - -`menuList`: Data in the drop-down list box. For details, see MenuConfig. - -`customMenuTemplate`: Customized drop-down list box - -`noNavigation`: Indicates whether a link cannot be redirected. This parameter is used to configure the link that cannot be redirected to the current location. - -`linkType`: Link type. The default value is hrefLink. The value can be hrefLink or routerLink. - -`target`: Specifies where to open the linked document. - -Note: Source data changes use the `Object.assign` method to trigger change detection. diff --git a/devui/button/demo/button-demo.tsx b/devui/button/demo/button-demo.tsx deleted file mode 100644 index a751cc43b1101b072d3eaf0ec58514051b277eb1..0000000000000000000000000000000000000000 --- 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 50144c127b1af69940da6dac131899b90a25ef7e..0000000000000000000000000000000000000000 --- 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 02a9125ca92bf1cda2d3654de1dc996175860e10..0000000000000000000000000000000000000000 --- 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 2a1bba16958e0a7eb359d35685f85ddae86de8b1..0000000000000000000000000000000000000000 --- 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 7751ae0e48bf8eb3d43f06c0724e9b8381d94e12..0000000000000000000000000000000000000000 --- 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 a47f96cafe8682f3218ef2e02019927a4a4b101d..0000000000000000000000000000000000000000 --- 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 237c5102e976bff08ba43ad82dd1d6a63a5bf7b2..803d51728b4132d33f53f633a34aef8df7cfc084 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 54936b1d103020a83d13d5f5a6cbf6ec47aade10..93b28f7f8c1bf1225ef35b618abdb41d1c103cdb 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 166d0c08f3a5edec5a60f7a40d27889457e96261..07c748126786f1f83538454ab9d201efcc37f760 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: { diff --git a/devui/card/index.ts b/devui/card/index.ts index 7eb08522bac21c6180a43df21d8ba9ca1dbfbfc1..0f9aae8bb7a8a45f57ff04d974f41139e6f9c607 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 2a01d52afb111358681e3034d593abf682ab3472..aaf420220132959f4146c2f75bad71b3b43f139e 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 2cbf5013ffc423e12ab3b415ec4877b74de8beff..a60d1de502cef420144c8f1e1570c999a1cd3d47 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 db21aaeb04260d6383f1b756a00834cd4a2cc0a1..bd9f54f29cc6a8727e90e602eab11e560913d574 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/cascader/cascader.tsx b/devui/cascader/cascader.tsx deleted file mode 100644 index 9d6eb2805b215290411b6ec8bf03de3a8670554f..0000000000000000000000000000000000000000 --- a/devui/cascader/cascader.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { defineComponent } from 'vue' - -export default defineComponent({ - name: 'd-cascader', - props: { - }, - setup(props, ctx) { - return () => { - return
    devui-cascader
    - } - } -}) \ No newline at end of file diff --git a/devui/cascader/demo/cascader-demo.tsx b/devui/cascader/demo/cascader-demo.tsx deleted file mode 100644 index 7e7bd98c574308f4a2d9ca5c6d407be34cae753e..0000000000000000000000000000000000000000 --- a/devui/cascader/demo/cascader-demo.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { defineComponent } from 'vue' - -export default defineComponent({ - name: 'd-cascader-demo', - props: { - }, - setup(props, ctx) { - return () => { - return
    devui-cascader-demo
    - } - } -}) \ No newline at end of file diff --git a/devui/cascader/demo/cascader.route.ts b/devui/cascader/demo/cascader.route.ts deleted file mode 100644 index 06c313d8c2b394905d252546515f2eeeeae2ec8d..0000000000000000000000000000000000000000 --- a/devui/cascader/demo/cascader.route.ts +++ /dev/null @@ -1,15 +0,0 @@ -import CascaderDemoComponent from './cascader-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: CascaderDemoComponent}, - { path: 'api', component: DevUIApiComponent, meta: { - 'zh-cn': ApiCn, - 'en-us': ApiEn - }} -] - -export default routes diff --git a/devui/cascader/doc/api-cn.md b/devui/cascader/doc/api-cn.md deleted file mode 100644 index ba6ce9781cdae92dcccaec24104597dcf627caf2..0000000000000000000000000000000000000000 --- a/devui/cascader/doc/api-cn.md +++ /dev/null @@ -1,66 +0,0 @@ -# 如何使用 - -在 module 中引入： - -```ts -import { CascaderModule } from 'ng-devui/cascader'; -``` - -在页面中使用： - -``` - -``` - -# d-cascader - -## d-cascader 参数 - -| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | -| :------------------: | :------------------------------------------------------------------------------: | :------------------------------: | :---------------------------------------------------------------------------------- | ---------------------------------- | -| trigger | `'hover'\|'click'` | 'hover' | 可选，指定展开次级菜单的方式 | [基本用法](demo#basic-usage) | -| options | [`CascaderItem`](#cascaderitem)`[]` | [] | 必选，级联器的菜单信息 | [基本用法](demo#basic-usage) | -| placeholder | `string` | '' | 可选，没有选择时的输入框展示信息 | [基本用法](demo#basic-usage) | -| width | `number` | 200 | 可选，单位 px，用于控制组件输入框宽度和下拉的宽度 | [基本用法](demo#basic-usage) | -| dropdownWidth | `number` | width | 可选，单位 px，控制下拉列表的宽度，默认和组件输入框 width 相等 | [基本用法](demo#basic-usage) | -| disabled | `boolean` | false | 可选，级联器是否禁用 | [基本用法](demo#basic-usage) | -| showPath | `boolean` | false | 可选，级联器选中项是否显示路径，仅单选模式下生效 | [基本用法](demo#basic-usage) | -| allowClear | `boolean` | false | 可选，是否允许清除 | [基本用法](demo#basic-usage) | -| multiple | `boolean` | false | 可选，级联器是否开启多选模式，开启后为 checkbox 选择 | [多选模式](demo#multiple-cascader) | -| canSelectParent | `boolean` | false | 可选，级联器是否允许选择父级节点 | [父级可选](demo#parent-cascader) | -| checkboxRelation | `{upward: boolean, downward: boolean}` | `{upward: true, downward: true}` | 可选，级联器多选下高级状态配置， upward 为状态向父级更新，downward 为状态向子级更新 | [父级可选](demo#parent-cascader) | -| allowSearch | `boolean` | false | 可选，级联器是否开启搜索模式 | [搜索模式](demo#search-cascader) | -| dropDownItemTemplate | `TemplateRef` | false | 可选，传入一个渲染 dropItem 的固定模板 | [模板类型](demo#template-cascader) | -| loadChildrenFn | `(value: CascaderItem) => Promise \| Observable` | null | 可选，传入懒加载的加载子节点的函数 | [点击加载](demo#lazyload-cascader) | -| dropdownPanelClass | `string` | - | 下拉面板的 class,用于用户选中某个面板 | [基本用法](demo#basic-usage) | - -## d-cascader 事件 - -| 参数 | 类型 | 说明 | 跳转 Demo | -| :---------: | :---------------------: | :------------------------------------------- | ---------------------------------- | -| toggleEvent | `EventEmitter` | 可选，下拉开关触发事件，返回是否开启的布尔值 | [多选模式](demo#multiple-cascader) | - -## ngModel - -ngModel 在单选模式绑定为选中项的路径值数组'Array'，例如[1,2]。 - -ngModel 在多选模式下绑定为所有选中项的路径数组的数组'Array[]', 例如[[1,2], [1,3], [1,4,5]]。 - -ngModelChange 可监听其变化。 - -# 接口 & 类型定义 - -### CascaderItem - -``` -interface CascaderItem { - label: string; - value: number | string; - isLeaf?: boolean; - children?: CascaderItem[]; - disabled?: boolean; - icon?: string; - // 用户可以传入自定义属性，并在dropDownItemTemplate中使用 - [prop: string]: any; -} -``` diff --git a/devui/cascader/doc/api-en.md b/devui/cascader/doc/api-en.md deleted file mode 100644 index 479940f2848a8791e67173fcd993d087a81c1f7d..0000000000000000000000000000000000000000 --- a/devui/cascader/doc/api-en.md +++ /dev/null @@ -1,66 +0,0 @@ -# How to use - -Import into module: - -```ts -import { CascaderModule } from ' ng-devui/cascader'; -``` - -In the page: - -``` - -``` - -# d-cascader - -## d-cascader parameters - -| Parameter | Type | Default | Description | Jump to Demo | -| :------------------: | :------------------------------------------------------------------------------: | :------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------- | -| trigger | `hover'\|'click'` | 'hover' | Optional, specifying the mode for expanding submenu | [Basic usage](demo#basic-usage) | -| options | [`CascaderItem`](#cascaderitem)`[]` | [] | Mandatory: indicates the menu information of the cascader. | [Basic usage](demo#basic-usage) | -| placeholder | `string` | '' | Optional, This parameter is used to display information in the text box if no value is selected. | [Basic usage](demo#basic-usage) | -| width | `number` | 200 | Optional, The unit is px. It is used to control the width of the widget input box and the width of the drop-down list box. | [Basic usage](demo#basic-usage) | -| dropdownWidth | `number` | width | Optional, The unit is px. Width of the drop-down list box. The default value is the same as the width of the gadget input box. | [Basic usage](demo#basic-usage) | -| disabled | `boolean` | false | Optional, indicating whether the cascader is disabled. | [Basic usage](demo#basic-usage) | -| showPath | `boolean` | false | Optional, Specifies whether to display the path for a selected item in the concatenation. This parameter is valid only in single-choice mode. | [Basic usage](demo#basic-usage) | -| allowClear | `boolean` | false | Optional, This parameter specifies whether to clear the alarm. | [Basic usage](demo#basic-usage) | -| multiple | `boolean` | false | Optional, Whether to enable the multi-selection mode of the cascader. If the multi-selection mode is enabled, the checkbox is selected. | [Multi-selection mode](demo#multiple-cascader) | -| canSelectParent | `boolean` | false | Optional, indicates whether a cascade node can be selected. | [Parent node is optional](demo#parent-cascader) | -| checkboxRelation | `{upward: boolean, downward: boolean}` | `{upward: true, downward: true}` | Optional, Advanced status configuration when multiple cascaders are selected. The value up indicates that the status is updated to the parent level, and the value down indicates that the status is updated to the child level. | [Parent optional](demo#parent-cascader) | -| allowSearch | `boolean` | false | Optional, Whether to enable the search mode for the cascader. | [Search mode](demo#search-cascader) | -| dropDownItemTemplate | `TemplateRef` | false | Optional, Transfer a fixed template for rendering drop items. | [Template type](demo#template-cascader) | -| loadChildrenFn | `(value: CascaderItem) => Promise \| Observable` | null | Optional, Transfer the function for loading subnodes in lazy loading | [Click to load](demo#lazyload-cascader) | -| dropdownPanelClass | `string` | - | Class of the drop-down panel, which is used to select a panel. | [Basic usage](demo#basic-usage) | - -## d-cascader event - -| Parameter | Type | Description | Jump to Demo | -| :---------: | :---------------------: | :------------------------------------------------------------------------------------------------- | ------------------------------------------- | -| toggleEvent | `EventEmitter` | : optional. This parameter is used to trigger a drop-down list box. The Boolean value is returned. | [Multi-choice mode](demo#multiple-cascader) | - -## ngModel - -In radio mode, ngModel is bound to the path value array of the selected item'Array', for example, [1,2]. - -In multi-select mode, ngModel is bound to the array 'Array[]' of the path array of all selected items, for example, [[1,2], [1,3], [1,4,5]]. - -ngModelChange can listen to the change. - -# Interface & Type Definition - -### CascaderItem - -``` -interface CascaderItem { -label: string; -value: number | string; -isLeaf? : boolean; -children? : CascaderItem[]; -disabled? : boolean; -icon? : string; -// Users can transfer customized attributes and use them in dropDownItemTemplate. -[prop: string]: any; -} -``` diff --git a/devui/checkbox/demo/checkbox-demo.tsx b/devui/checkbox/demo/checkbox-demo.tsx deleted file mode 100644 index 21b4207b84bd414388022e792a74e364e345b0d9..0000000000000000000000000000000000000000 --- 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 5843a54436c401dd6b69de6c9e24413009627713..0000000000000000000000000000000000000000 --- 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 431661e17b9b519452c51ad4abfd575d0390d207..0000000000000000000000000000000000000000 --- 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 bc7e842752d712b4ab6f5b3813ae30d49ae37275..0000000000000000000000000000000000000000 --- 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 de907f71a45ead07e91e76a8957681935b1f3231..0000000000000000000000000000000000000000 --- 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 cb09d23d9181bcc5658073190d9b62cab64d314b..0000000000000000000000000000000000000000 --- 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 f63d359e37c506f3ed090deb455405820c63bba1..32470ee159bebff5ff2032f99ff68e0ac6755ffe 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/data-table/data-table.tsx b/devui/data-table/data-table.tsx deleted file mode 100644 index 8fd19dfe4f2a9ba6a143462cfa56a1a5ea8cd977..0000000000000000000000000000000000000000 --- a/devui/data-table/data-table.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { defineComponent } from 'vue' - -export default defineComponent({ - name: 'd-data-table', - props: { - }, - setup(props, ctx) { - return () => { - return
    devui-data-table
    - } - } -}) \ No newline at end of file diff --git a/devui/data-table/demo/data-table-demo.tsx b/devui/data-table/demo/data-table-demo.tsx deleted file mode 100644 index 4a43bbc75b37db91dbe9db5ecaf4ac0e1d0153cd..0000000000000000000000000000000000000000 --- a/devui/data-table/demo/data-table-demo.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { defineComponent } from 'vue' - -export default defineComponent({ - name: 'd-data-table-demo', - props: { - }, - setup(props, ctx) { - return () => { - return
    devui-data-table-demo
    - } - } -}) \ No newline at end of file diff --git a/devui/data-table/demo/data-table.route.ts b/devui/data-table/demo/data-table.route.ts deleted file mode 100644 index 856ac5416f271fd09bfe5323562168b091c22f6b..0000000000000000000000000000000000000000 --- a/devui/data-table/demo/data-table.route.ts +++ /dev/null @@ -1,15 +0,0 @@ -import DataTableDemoComponent from './data-table-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: DataTableDemoComponent}, - { path: 'api', component: DevUIApiComponent, meta: { - 'zh-cn': ApiCn, - 'en-us': ApiEn - }} -] - -export default routes diff --git a/devui/data-table/doc/api-cn.md b/devui/data-table/doc/api-cn.md deleted file mode 100644 index 5eeea1827806f94f4fb341e4ea8b714a70d2b54a..0000000000000000000000000000000000000000 --- a/devui/data-table/doc/api-cn.md +++ /dev/null @@ -1,442 +0,0 @@ -# 如何使用 - -在module中引入： - -```ts -import { DataTableModule } from 'ng-devui/data-table'; -``` - -在页面中使用： - -```html - -``` - -## d-data-table - -### d-data-table 参数 -| 参数名 | 类型 | 默认值 | 描述 | 跳转 Demo | -| :-------------------: | :---------------------------: | :----- | :----------------------------------------------------------------------------------------------: | ---------------------------------------------------------------------- | -| dataSource | `any[]` | -- | 必选，数据源，用于渲染表格数据 | [基本用法](demo#basic-usage) | -| lazy | `boolean` | -- | 可选，是否懒加载数据 | [列表数据懒加载](demo#lazy-loading-of-list-data) | -| scrollable | `boolean` | -- | 可选，表格在超出容器时，是否可以通过滚动查看表格内容 | [表格交互](demo#table-interaction) | -| maxWidth | `string px` | -- | 可选，限制表格最大宽度，默认撑满父容器 | -| maxHeight | `string px` | -- | 可选，限制最大高度，默认 | [表头固定](demo#table-fixing) | -| size | `'sm'\|'md'\|'lg'` | 'sm' | 可选，表格大小,分别对应行高40px,48px,56px |[表格样式](demo#mutil-styles) | -| rowHoveredHighlight | `boolean` | true | 可选，鼠标悬浮行时是否高亮,默认高亮认 | -| generalRowHoveredData | `boolean` | false | 可选，使用配置column方式实现table,鼠标悬浮行时$hovered是否记录到rowItem中，默认不记录 | -| cssClass | `string` | -- | 可选，自定义表格样式 | -| tableWidth | `string` | 100% | 可选，表格宽度 | -| tableHeight | `string` | -- | 可选，表格高度，取值'100%'时依赖table父容器的高度 | [虚拟滚动](demo#virtual-scroll) | -| containFixHeaderHeight | `boolean` | false | 可选，固定表头指定的高度是否包含表头高度，`tableHeight`设置的高度默认是表格body的高度 | [固定表头虚拟滚动](demo#fixed-virtual-scroll) | -| checkableRelation | [`CheckableRelation`](#checkablerelation) | -- | 可选，配置树形表格的父子选中是否互相关联 | [树形表格](demo#tree-form) | -| loadChildrenTable | `Promise` | -- | 可选，展开子表格的回调，用于异步加载子表格 | [树形表格](demo#tree-form) | -| loadAllChildrenTable | `Promise` | -- | 可选，表头展开所有子表格的回调，用于异步加载所有子表格 | [树形表格](demo#tree-form) | -| colDraggable | `boolean` | false | 可选，表格列是否可拖动排序 | [列拖拽](demo#column-dragging) | -| colDropFreezeTo | `number` | 0 | 可选，表格列可拖动排序时配置前n列不可拖动 | [列拖拽](demo#column-dragging) | -| virtualScroll | `boolean` | false | 可选，是否开启虚拟滚动 | [虚拟滚动](demo#virtual-scroll) | -| virtualItemSize | `number` | 40 | 可选，虚拟滚动时每一行的高度，默认为表格默认行高40`px` | [虚拟滚动](demo#virtual-scroll) | -| virtualMinBufferPx | `number` | 80 | 可选，虚拟滚动时缓冲区最小像素高度，低于该值时将加载新结构 | [虚拟滚动](demo#virtual-scroll) | -| virtualMaxBufferPx | `number` | 200 | 可选，虚拟滚动时缓冲区最大像素高度 | [虚拟滚动](demo#virtual-scroll) | -| tableWidthConfig | [`TableWidthConfig[]`](#tablewidthconfig) | [] | 可选，配置表格的列宽 | [基本用法](demo#basic-usage) | -| checkable | `boolean` | -- | 可选，Datatable是否提供勾选行的功能 | [表格交互](demo#table-interaction) | -| checkOptions | [`TableCheckOptions[]`](#tablecheckoptions) | -- | 可选，表头选中的下拉项及操作 | [自定义表格选中操作](demo#table-check-options) | -| headerCheckDisabled | `boolean` | -- | 可选，表头checkbox是否disabled | -| headerCheckVisible | `boolean` | true | 可选，表头checkbox是否可见 | -| showExpandToggle | `boolean` | -- | 可选，是否提供显示扩展行的功能，为true则在配置了扩展行的行前面生成操作按钮 | [扩展行](demo#expand-row) | -| showSortIcon | `boolean` | true | 可选，是否显示排序未激活图标，默认显示 | [表格交互](demo#table-interaction) | -| showOperationArea | `boolean` | false | 可选，配置表头操作未激活状态下是否显示操作区域，默认不显示 | [表格交互](demo#table-interaction) | -| hideColumn | `string[]` | -- | 可选，用于隐藏列 | -| pageAllChecked | `boolean` | -- | 可选，选中当前页所有row | -| onlyOneColumnSort | `boolean` | -- | 可选，是否限制多列排序的输出限制为一项 | [表格交互](demo#table-interaction) | -| multiSort | [`SortEventArg[]`](#sorteventarg) | [] | 可选，多列选择数组，用来指导那几列会被排序 | [表格交互](demo#table-interaction) | -| resizeable | `boolean` | -- | 可选，是否可以拖拽调整列宽 | [表格交互](demo#table-interaction) | -| timeout | `number` | 300 | 可选，同时绑定单击、双击事件时，用于区分点击的时间间隔, 默认300`ms`，两个事件不同时使用可以指定为0 | -| headerExpandConfig | [`TableExpandConfig`](#tableexpandconfig) | -- | 可选，配置header下的额外内容 | [扩展行](demo#expand-row) | -| beforeCellEdit | `Promise` | -- | 可选，单元格编辑前的拦截方法,
    resolve(extraOptions)将更新该列的extraOptions | [编辑单元格](demo#edit-cell) | -| headerBg | `boolean` | false | 可选，表头是否显示背景色 | [表格样式](demo#mutil-styles) | -| tableLayout | `'fixed'\|'auto'` | 'fixed' | 可选，表格布局 | [表格样式](demo#mutil-styles) | -| borderType | `''\|'bordered'\|'borderless'` | '' | 可选，表格边框类型，默认有行边框，bordered：全边框，borderless：无边框 | [表格样式](demo#mutil-styles) | -| striped | `boolean` | false | 可选，表格是否展示为斑马纹间隔 | [表格样式](demo#mutil-styles) | - -### d-data-table 事件 - -| 事件 | 类型 | 描述 | 跳转 Demo | -| :-------------------: | :------------------------------------: | :------------------------------------------------------: | :------------------------------------------------------: | -| rowCheckChange | `EventEmitter` | 某一行的勾选状态变化事件 | -| checkAllChange | `EventEmitter` | 当前页码全勾选状态变化事件 | -| resize | `EventEmitter` | 列宽变化事件，返回单元格信息 | [表格交互](demo#table-interaction) | -| childrenTableClose | `EventEmitter` | 子列表关闭事件，返回列表行信息 | -| allChildrenTableClose | `EventEmitter` | 全部子列表关闭事件 | -| multiSortChange | `EventEmitter` | 多列选择Change事件，用来更新多列选择数组，返回单元格信息 | [表格交互](demo#table-interaction) | -| cellClick | `EventEmitter` | 表格单元格点击事件，返回单元格信息 | [表格交互](demo#table-interaction) | -| cellDBClick | `EventEmitter` | 表格单元格双击事件，返回单元格信息 | [表格交互](demo#table-interaction) | -| rowClick | `EventEmitter` | 表格行点击事件，返回行信息 | [表格交互](demo#table-interaction) | -| rowDBClick | `EventEmitter` | 表格行双击事件，返回行信息 | [表格交互](demo#table-interaction) | -| detialToggle | `EventEmitter` | 使用配置column方式时扩展行展开收起事件，返回行状态信息 | [扩展行](demo#expand-row)| -| cellEditStart | `EventEmitter` | 表格单元格开始编辑事件，返回单元格信息 | -| cellEditEnd | `EventEmitter` | 表格单元格结束编辑事件，返回单元格信息 | [编辑单元格](demo#edit-cell) | -| tableScrollEvent | `EventEmitter` | 表格内部滚动事件 | - - -### d-data-table 公共方法 - -| 方法名 | 参数 | 默认值 | 描述 | 跳转 Demo | -| :--------------------------: | :-----------------------: | :----- | :------------------------------------------------------------------: | :------------------------------------------------------: | -| getCheckedRows | -- | -- | 获取当前选中的行数据 | [表格交互](demo#table-interaction) | -| setRowCheckStatus | [`RowCheckChangeEventArg`](#rowcheckchangeeventarg) | -- | 设置某一行的选中状态，可以处理表头、父子表格的选中关系 | [表格交互](demo#table-interaction) | -| setTableCheckStatus | [`TableCheckStatusArg`](#tablecheckstatusarg) | -- | 设置当前表格的全选、半选状态 | -| setRowChildToggleStatus | [`RowToggleStatusEventArg`](#RowToggleStatusEventArg) | -- | 设置某一行的子表格展开、收起状态，处理异步加载子表格的选中状态时调用 | [树形表格](demo#tree-form) | -| setTableChildrenToggleStatus | `open: boolean` | -- | 设置当前表格的所有子表格展开、收起状态 | [树形表格](demo#tree-form) | -| cancelEditingStatus | -- | -- | 取消正在编辑单元格的编辑状态 | [编辑单元格](demo#edit-cell) | - -### rowItem参数(行数据rowItem为dataSource的数组元素，可以初始化行数据的以下字段配置表格的行为) - -| 参数 | 类型 | 默认值 | 描述 | 跳转 Demo | -| :---------------: | :-------: | :----- | :--------------------------: | :------------------------------------------------------: | -| $checked | `boolean` | false | 可选，该行是否选中 | [表格交互](demo#table-interaction) | -| $halfChecked | `boolean` | false | 可选，该行是否半选 | [表格交互](demo#table-interaction) | -| $isChildTableOpen | `boolean` | false | 可选，该行下的子表格是否展开 | [树形表格](demo#tree-form) | -| children | array | -- | 配置该行的子table数据 | [树形表格](demo#tree-form) | -| $checkDisabled | `boolean` | false | 可选，该行是否禁止选中 | [表格交互](demo#table-interaction) | -| $checkBoxTips | `string` | -- | 可选，配置该行checkbox的提示 | [表格交互](demo#table-interaction) | - -# dTableHead - -## dTableHead 参数 - -| 参数名 | 类型 | 默认值 | 描述 | 跳转 Demo | -| :-----------: | :-------------------: | :----- | :------------------------------------------------------------------: | :------------------------------------------------------------------- | -| checkable | `boolean` | -- | 可选，在表头第一列显示checkbox，用于全选，可以跟行数据的选中状态联动 | [表格交互](demo#table-interaction) | -| checkOptions | `TableCheckOptions[]` | -- | 可选，表头选中的下拉项及操作 | [自定义表格选中操作](demo#table-check-options) | -| checkDisabled | `boolean` | -- | 可选，表头checkbox是否disabled | - - -## dHeadCell 参数 - -| 参数名 | 类型 | 默认值 | 描述 | 跳转 Demo | -| :------------------: | :----------------------------------------: | :----- | :-----------------------------------------------------------: | :------------------------------------------------------- | -| resizeEnabled | `boolean` | -- | 可选，该列宽度是否可调整 | [表格交互](demo#table-interaction) | -| maxWidth | `string` | -- | 可选，调整宽度时的最大宽度，单位`px` | -| minWidth | `string` | -- | 可选，调整宽度时的最小宽度，单位`px` | -| filterable | `boolean` | -- | 可选，该列宽度是否可过滤 | [表格交互](demo#table-interaction) | -| closeFilterWhenScroll | `boolean` | -- | 可选，表格或者body滚动时是否关闭过滤框 | [表格交互](demo#table-interaction) | -| customFilterTemplate | `TemplateRef` | -- | 可选，过滤弹出框的自定义模板 | [表格交互](demo#table-interaction) | -| extraFilterTemplate | `TemplateRef` | -- | 可选，过滤弹出框扩展区域自定义模板 | [表格交互](demo#table-interaction) | -| searchFn | `(term: string) => Observable>` | | 可选，过滤时输入关键字的匹配方法 | -| filterList | `array` | -- | 过滤列表，当filterable为true时必选 | [表格交互](demo#table-interaction) | -| filterMultiple | `boolean` | -- | 可选，设置该列为多选或单选, true为多选，false为单选 | [表格交互](demo#table-interaction) | -| filterBoxWidth | `string` | -- | 过滤弹出框的宽度，如：‘300px’ | -| filterBoxHeight | `string` | -- | 过滤弹出框的高度，如：‘400px’ | -| beforeFilter | `function\|Promise\|Observable` | -- | 可选，表格过滤弹出框弹出前的回调函数，返回false可阻止弹框弹出 | [表格交互](demo#table-interaction) | -| sortable | `boolean` | -- | 可选，该列是否可排序 | [表格交互](demo#table-interaction) | -| sortDirection | `SortDirection` | -- | 可选，设置该列的已排序状态 | [表格交互](demo#table-interaction) | -| nestedColumn | `boolean` | -- | 可选，是否展示树形表格的表头展开\折叠图标 | [树形表格](demo#tree-form) | -| iconFoldTable | `DOMString` | -- | 可选，自定义树形表格的折叠图标 | [树形表格](demo#tree-form) | -| iconUnFoldTable | `DOMString` | -- | 可选，自定义树形表格的展开图标 | [树形表格](demo#tree-form) | -| fixedLeft | `string` | -- | 可选，该列固定到左侧的距离，如：‘100px’ | [固定列](demo#fixed-column) | -| fixedRight | `string` | -- | 可选，该列固定到右侧的距离，如：‘100px’ | [固定列](demo#fixed-column) | - -## dHeadCell 事件 - -| 事件 | 类型 | 描述 | 跳转 Demo | -| :----------------------: | :-----------------: | :-------------------------------------------------: | :------------------------------------------------------- | -| filterChange | `FilterConfig[]` | 确认筛选回调事件，返回选中的筛选数组 | [表格交互](demo#table-interaction) | -| sortChange | `SortEventArg` | 排序回调事件，返回该列排序信息 | [表格交互](demo#table-interaction) | -| resizeStartEvent | `MouseEvent` | 该列宽度调整开始时的事件 | -| resizingEvent | `{ width: string }` | 该列宽度调整进行中的事件 | -| resizeEndEvent | `{ width: string }` | 该列宽度调整结束时的事件 | [表格交互](demo#table-interaction) | -| toggleChildrenTableEvent | `boolean` | 所有子表格展开收起事件，true表示展开，false表示收起 | - -# dTableCell - -## dTableCell 参数 - -| 参数名 | 类型 | 默认值 | 描述 | 跳转 Demo | -| :-------------: | :-----------------------------: | :----- | :------------------------------------------------------------: | :------------------------------------------------- | -| editable | `boolean` | -- | 可选，单元格是否可编辑 | [编辑单元格](demo#edit-cell) | -| editableTip | `'hover'\|'btn'` | -- | 可选，编辑提示，hover背景变色，btn展示编辑按钮 | [编辑单元格](demo#edit-cell) | -| nestedColumn | `boolean` | -- | 可选，树形表格下该行有子表格时展示展开、折叠图标 | [树形表格](demo#tree-form) | -| nestedLayer | `number` | | 树形表格下的层级,nestedColumn为true时必选 | [树形表格](demo#tree-form) | -| rowItem | `array` | -- | 行数据，nestedColumn为true时必选，也可作为单元格编辑的回调参数 | [树形表格](demo#tree-form) | -| beforeEditStart | `function\|Promise\|Observable` | -- | 可选，单元格开始编辑前回调，返回false阻止单元格开始编辑 | [编辑单元格](demo#edit-cell) | -| beforeEditEnd | `function\|Promise\|Observable` | -- | 可选，单元格结束编辑前的回调，返回false阻止单元格结束编辑 | [编辑单元格](demo#edit-cell) | -| iconFoldTable | `DOMString` | -- | 可选，自定义树形表格的折叠图标 | [树形表格](demo#tree-form) | -| iconUnFoldTable | `DOMString` | -- | 可选，自定义树形表格的展开图标 | [树形表格](demo#tree-form) | -| fixedLeft | `string` | -- | 可选，该列固定到左侧的距离，如：‘100px’ | [固定列](demo#fixed-column) | -| fixedRight | `string` | -- | 可选，该列固定到右侧的距离，如：‘100px’ | [固定列](demo#fixed-column) | -| editing | `boolean` | -- | 可选，使用[(editing)]获取和控制单元格编辑状态 | [编辑单元格](demo#edit-cell) | -| field | `string` | -- | 单元格所属列的字段，作为beforeEditStart、beforeEditEnd的参数 | [编辑单元格](demo#edit-cell) | - -## dTableCell 事件 - -| 事件 | 类型 | 描述 | 跳转 Demo | -| :-------------------: | :-------: | :-----------------------------------------------------: | :------------------------------------------------- | -| editStatusEvent | `boolean` | 单元格编辑状态事件 | [编辑单元格](demo#edit-cell) | -| toggleChildTableEvent | `boolean` | 当前行的子表格展开收起事件，true表示展开，false表示收起 | [树形表格](demo#tree-form) | - -#### 使用自定义模板方式时配置dTableBody的行模板 - -实现参考**[树形表格](demo#tree-form)** - -``` html - - - -// rowItem: 行数据 -// rowIndex: 行序号 -// nestedLayer: 树形表格下该行所属表格的层级，由组件生成，最外层表格为0，自增长 -// nestedIndex: 树形表格下的行索引，由组件生成 -``` - -#### 配置数据为空的时候的提示模板 - -表格接受 `#noResultTemplateRef` 模板，实现参考**[异步加载数据](demo#async-loading)** - -#### 自定义过滤弹出框 - -实现参考**[表格交互](demo#table-interaction)** - -``` html - - - - -// filterListDisplay: 传入的filterList的值 -// dropdown: 获取dropdown的引用，主要用于控制弹出框的打开和关闭 -// column: 使用配置column实现的,当前列的元信息，对应DataTableColumnTmplComponent类 -``` - -## CheckableRelation - -``` ts -export interface CheckableRelation { - upward: boolean; // 选中子关联父 - downward: boolean; // 选中父关联子 -} -``` - -## TableWidthConfig - -```ts -export interface TableWidthConfig { - field: string; // 列名 - width: string; // 宽度，单位px -} -``` - -## TableCheckOptions - -```ts -export interface TableCheckOptions { - label: string; - onChecked: Function; -} -``` - -## SortEventArg - -```ts -export interface SortEventArg { - field?: string; // 列名 - direction: SortDirection; // 顺序 -} -``` - -## TableExpandConfig - -```ts -export interface TableExpandConfig { - expand ? : boolean, // 是否展开 - expandTemplateRef ? : ElementRef, //自定义模板 - description ? : string // 简单描述文字 -} -``` - -## RowCheckChangeEventArg - -```ts -export interface RowCheckChangeEventArg { - rowIndex: number; // 行序号 - nestedIndex: string; // 树形表格下的行索引，由组件生成 - rowItem: any; // 行数据 - checked: boolean; // 是否选中 -} -``` - -## TableCheckStatusArg - -```ts -export interface TableCheckStatusArg { - pageAllChecked?: boolean; // 全选 - pageHalfChecked?: boolean; // 半选 -} -``` - -## RowToggleStatusEventArg - -```ts -export interface RowToggleStatusEventArg { - rowItem: any; // 行数据 - open: boolean; // 子表格是否展开 -} -``` - -## FilterConfig - -```ts -export interface FilterConfig { - id: number | string; - name: string; - value: any; - checked?: boolean; -} -``` - -## SortDirection - -```ts -export enum SortDirection { - ASC = 'ASC', - DESC = 'DESC', - default = '' -} -``` - -# 以下为通过配置column来实现table时的才有的参数和方法 - -## d-column 参数 - -| 参数 | 类型 | 默认值 | 描述 | 跳转 Demo | -| :-------------------------------: | :-----------------------------: | :---------------- | :-------------------------------------------------------------------------------------: | :------------------------------------------------------- | -| editable | `boolean` | false | 可选，在d-column上指定该列是否可编辑 | [编辑单元格](demo#edit-cell) | -| maxWidth | `string px` | -- | 可选，最大宽度 | -| minWidth | `string px` | -- | 可选，最小宽度 | -| field | `string` | -- | 该列字段 | [基本用法](demo#basic-usage) | -| header | `string` | -- | 该列表头文字 | [基本用法](demo#basic-usage) | -| sortable | `boolean` | -- | 可选，是否可排序 | [表格交互](demo#table-interaction) | -| editable | `boolean` | -- | 可选，是否可编辑 | [表格交互](demo#table-interaction) | -| width | `string px、%` | -- | 宽度 | [基本用法](demo#basic-usage) | -| nestedColumn | `Boolean` | false | 可选，指定该列作为树形表格的操作列，即有展开\折叠按钮和内容缩进表明层级关系 | [树形表格](demo#tree-form) | -| extraOptions.editableTip | `'btn'、''` | -- | 可选，可编辑提示，'btn'表示鼠标悬浮单元格出现编辑按钮，未配置时鼠标悬浮单元格背景色变化 | [编辑单元格](demo#edit-cell) | -| extraOptions.iconFoldTable | `Template` | -- | 可选，自动定义树形表格的折叠图标 | [树形表格](demo#tree-form) | -| extraOptions.iconUnFoldTable | `Template` | -- | 可选，自动定义树形表格的展开图标 | [树形表格](demo#tree-form) | -| extraOptions.showHeadTableToggler | `boolean` | false | 可选，树形表格是否在header出现展开\折叠图标 | [树形表格](demo#tree-form) | -| order | `number` | Number. MAX_VALUE | 可选，列序号 | [基本用法](demo#basic-usage) | -| filterable | `boolean` | -- | 可选，是否可筛选 | [表格交互](demo#table-interaction) | -| closeFilterWhenScroll | `boolean` | -- | 可选，表格或者body滚动时是否关闭过滤框 | [表格交互](demo#table-interaction) | -| filterList | `array` | -- | 传入需要操作的筛选列表，当filterable为true时必选 | [表格交互](demo#table-interaction) | -| filterMultiple | `boolean` | true | 可选，选择筛选列表为多选或单选, true为多选，false为单选 | [表格交互](demo#table-interaction) | -| customFilterTemplate | `TemplateRef` | -- | 可选，表格过滤弹出框的自定义模板，参考DOC下‘自定义过滤弹出框’使用 | [表格交互](demo#table-interaction) | -| extraFilterTemplate | `TemplateRef` | -- | 可选，表格过滤弹出框扩展区域自定义模板 | [表格交互](demo#table-interaction) | -| beforeFilter | `function、Promise、Observable` | -- | 可选，表格过滤弹出框弹出前的回调函数，返回false可阻止弹框弹出 | [表格交互](demo#table-interaction) | -| cellClass | `string` | -- | 该列单元格自定义class | -| fixedLeft | `string` | -- | 该列固定到左侧的距离，如：‘100px’ | [固定列](demo#fixed-column) | -| fixedRight | `string` | -- | 该列固定到右侧的距离，如：‘100px’ | [固定列](demo#fixed-column) | -| filterBoxWidth | `any` | -- | 过滤弹出框的宽度，如：‘300px’ | -| filterBoxHeight | `any` | -- | 过滤弹出框的高度，如：‘400px’ | - -## d-column 事件 - -| 事件 | 类型 | 描述 | 跳转 Demo | -| :----------: | :--------------: | :----------------------------------: | :------------------------------------------------------- | -| filterChange | `FilterConfig[]` | 确认筛选回调事件，返回选中的筛选数组 | [表格交互](demo#table-interaction) | - -## rowItem参数 -| 参数 | 类型 | 默认值 | 描述 | -| :---------------: | :-----------------: | :----- | :-------------------------------------------------------------------------------------------------------: | -| $editDeniedConfig | `array` | -- | 可选，与column配合配置该行的某些单元格的编辑权限,
    例如: 配置为['age']，表示field为age的单元格不可编辑 | -| $expandConfig | [`TableExpandConfig`](#tableexpandconfig) | -- | 可选，配置该行下的额外内容 | -| $rowClass | `string` | -- | 可选，配置该行的自定义class | -| $hovered | `boolean` | false | 鼠标悬浮该行元素时该值为true,
    离开该行时该值为false | - -#### 自定义单元格 - -单元格数据(cellItem, 通过rowItem[column.field]取值)为string类型时，组件可直接展示，当单元格数据为object类型，或者想定义该列单元格的特殊行为时，需要自定义单元格来进行展示； -例如：我们想 `Gender` 这一列的数据大写展示, 并在鼠标移动上去展示一个提示，相关节选代码如下 - -``` - - - - - {{cellItem.toUpperCase()}} - - - - -``` - -#### 自定义单元格编辑模板 - -Datatable支持通过模板自定义单元格编辑功能 - -``` - - - - - - - -``` - -自定义单元格和配置单元格编辑时的完整template如下 - -``` xml - - - - -// rowIndex: 行序号 -// colIndex: 列序号 -// rowItem: 当前行的数据，对应 filed 和 cellItem的键值对 -// column: 当前列的元信息，对应DataTableColumnTmplComponent类 -// cellItem: 当前单元格的值, 通过rowItem[column.field]取值 -// tableLevel: 树形表格下所属表格的层级，最外层为0，自增长 -``` - -#### 自定义表头单元格 - -如果需要表头单元格，列入想展示效果为鼠标移动在表格上方会提示 `Gender is a head cell template` . - -``` xml - - - - - {{column.header}} - - - - - -// column: 为column输入值，对应 `DataTableColumnTmplComponent` 类 -``` - -#### 多行表头和表头合并单元格 - -* 需要在d-column使用时候，增加 - -``` javascript -advancedHeader: Array < { - header: string; - rowspan: number; - colspan: number; -} -``` - -注意: 空单元格也需要表示，并根据内容把rowspan/colspan置为0，如果同时使用列宽拖拽和多行表头，请为列内容附上宽度width，如果第一行的列宽度不正确，请手动为advancedHeader[rowNumber]增加一个属性$width diff --git a/devui/data-table/doc/api-en.md b/devui/data-table/doc/api-en.md deleted file mode 100644 index f402f8669728f0ae847dcbb5c5bfc47d2ca1800c..0000000000000000000000000000000000000000 --- a/devui/data-table/doc/api-en.md +++ /dev/null @@ -1,426 +0,0 @@ -# How to use - -Import the following information into the module: - -```ts -import {DataTableModule} from' ng-devui/data-table'; -``` - -On the page: - -```html - -``` - -# d-data-table - -## d-data-table parameter -| Parameter name | Type | Default value | Description | Jump to Demo | -| :-------------------: | :---------------------------: | :----- | :----------------------------------------------------------------------------------------------: | ---------------------------------------------------------------------- | -| dataSource | `any[]` | -- | Required. Data source, used to render table data | [Basic usage](demo#basic-usage) | -| lazy | `boolean` | -- | Optional. Indicating whether to lazy load data | [Low load list data](demo#lazy-loading-of-list-data) | -| scrollable | `boolean` | -- | Optional. Whether the table content can be viewed by scrolling when the table exceeds the container. | [Table interaction](demo#table-interaction) | -| maxWidth | `string px` | -- | Optional. Limit the maximum table width. By default, the parent container is full. | -| maxHeight | `string px` | -- | Optional. The maximum height is limited. The default value is | [fixed table header](demo#table-fixing) | -| size | `'sm'\|'md'\|'lg'`| 'sm' | Optional. Specifies the table size, which corresponds to 40 px, 48 px, and 56 px respectively | [Table style](demo#mutil-styles) | -| rowHoveredHighlight | `boolean` | true | Optional. Indicating whether to highlight a line when the cursor is hovering. The default value is highlighted. | -| generalRowHoveredData | `boolean` | false | Optional. It is used to configure columns to implement the table. When the cursor is moved to a row, $hovered is recorded to the row item. By default, $hovered is not recorded. | -| cssClass | `string` | -- | Optional. Customize the table style | -| tableWidth | `string` | 100% | Optional. Table width | -| tableHeight | `string` | -- | Optional. Table height. The value 100% depends on the height of the table parent container. | [Virtual scrolling](demo#virtual-scroll) | -| containFixHeaderHeight | `boolean` | false | Optional. whether the height specified by the fixed header includes the height of the header, the height set by tableHeight is the height of the table body by default | [Fixed table header virtual scrolling](demo#fixed-virtual-scroll) | -| checkableRelation | [`CheckableRelation`](#checkablerelation) | -- | Optional. This parameter specifies whether the parent and child selections in the tree table are associated. | [Tree table](demo#tree-form) | -| loadChildrenTable | `Promise` | -- | Optional. It is the callback of subtable expansion, which is used to asynchronously load subtables. | [Tree table](demo#tree-form) | -| loadAllChildrenTable | `Promise` | -- | Optional. It is the callback for expanding all subtables in the table header. It is used to asynchronously load all subtables. | [Tree table](demo#tree-form) | -| colDraggable | `boolean` | false | Optional. Whether columns can be dragged or sorted | [Column dragging](demo#column-dragging) | -| colDropFreezeTo | `number` | 0 | Optional. The first n columns cannot be dragged when the table columns can be sorted. | [Column dragging](demo#column-dragging) | -| virtualScroll | `boolean` | false | Optional. Specifies whether to enable virtual scrolling. | [Virtual scrolling](demo#virtual-scroll) | -| virtualItemSize | `number` | 40 | Optional. Height of each row during virtual scrolling. The default value is 40`px`. | [Virtual scrolling](demo#virtual-scroll) | -| virtualMinBufferPx | `number` | 80 | Optional. Minimum pixel height of the buffer during virtual scrolling. If the pixel height is less than this value, the new structure is loaded. | [Virtual scrolling](demo#virtual-scroll) | -| virtualMaxBufferPx | `number` | 200 | Optional. Maximum pixel height of the buffer during virtual scrolling | [virtual scrolling](demo#virtual-scroll) | -| tableWidthConfig | [`TableWidthConfig[]`](#tablewidthconfig) | [] | Optional. It is used to configure the column width of the table. | [Basic usage](demo#basic-usage) | -| checkable | `boolean` | -- | Optional. Whether the Datatable provides the function of selecting rows. | [Table interaction](demo#table-interaction) | -| checkOptions | [`TableCheckOptions[]`](#tablecheckoptions) | -- | Optional. drop-down list box in the table header and operations | [Customized table selection](demo#table-check-options) | -| headerCheckDisabled | `boolean` | -- | Optional. Indicates whether the header checkbox is disabled. | -| headerCheckVisible | `boolean` | true | Optional. Indicates whether the checkbox in the header is visible. | -| showExpandToggle | `boolean` | -- |: Indicates whether to display extended rows. If the value is true, an operation button is generated before the row where extended rows are configured. | [Extended row](demo#expand-row) | -| showSortIcon | `boolean` | true | Optional. Indicates whether to display the inactive sorting icon. The icon is displayed by default. | [Table interaction](demo#table-interaction) | -| showOperationArea | `boolean` | false | Optional. Indicates whether to display the operation area when the table header operation is not activated. Not displayed by default. | [Table interaction](demo#table-interaction) | -| hideColumn | `string[]` | -- | Optional. Used to hide columns | -| pageAllChecked | `boolean` | -- | Optional. Select all rows on the current page. | -| onlyOneColumnSort | `boolean` | -- | Optional. Whether to restrict the output of multi-column sorting to one item | [Table interaction](demo#table-interaction) | -| multiSort | [`SortEventArg[]`](#sorteventarg) | [] | Optional. It is a multi-column selection array, which is used to guide the columns to be sorted. | [Table interaction](demo#table-interaction) | -| resizeable | `boolean` | -- | Optional. Whether the column width can be adjusted by dragging. | [Table interaction](demo#table-interaction) | -| timeout | `number` | 300 | Optional. This parameter is used to distinguish the click interval when the click and double-click events are bound at the same time. The default value is 300`ms`. You can set this parameter to 0 when the two events are used at the same time. | -| headerExpandConfig | [`TableExpandConfig`](#tableexpandconfig) | -- | Optional. Extra content under the header | [Extended line](demo#expand-row) | -| beforeCellEdit | `Promise` | -- | Optional. Interception method before cell editing.
    resolve(extraOptions) updates extraOptions of the column. | [edit cell](demo#edit-cell) | -| headerBg | `boolean` | false | Optional. Indicating whether to display the background color in the table header | [Table style](demo#mutil-styles) | -| tableLayout | `'fixed'\|'auto'` | 'fixed' | Optional. Table layout | [Table style](demo#mutil-styles) | -| borderType | `''\|'bordered'\|'borderless'` | '' | Optional. Table border type. The default value is row border. The options are bordered (full border) and borderless (no border). | [Table style](demo#mutil-styles) | -| striped | `boolean` | false | Optional. Whether to display the table with zebra stripes. | [Table style](demo#mutil-styles) | - -## d-data-table event - -| Event | Type | Description | Jump to Demo | -| :-------------------: | :------------------------------------: | :------------------------------------------------------: | :------------------------------------------------------: | -| rowCheckChange | `EventEmitter` | Selected status change event of a line | -| checkAllChange | `EventEmitter` | Event of Selecting All Current Pages | -| resize | `EventEmitter` | Column Width Change Event, Returning Cell Information | [Table Interaction](demo#table-interaction) | -| childrenTableClose | `EventEmitter` | Event for closing a sublist. The list row information is returned. | -| allChildrenTableClose | `EventEmitter` | All Sublist Close Event | -| multiSortChange | `EventEmitter` | Change event, which is used to update the multi-column selection array and return cell information. | [Table interaction](demo#table-interaction) | -| cellClick | `EventEmitter` | Cell Click Event, Returning Cell Information | [Table Interaction](demo#table-interaction) | -| cellDBClick | `EventEmitter` | Cell Double-click Event, Returning Cell Information | [Table Interaction](demo#table-interaction) | -| rowClick | `EventEmitter` | Table row click event, which returns row information | [Table interaction](demo#table-interaction) | -| rowDBClick | `EventEmitter` | Double-clicking a table row. Row information is returned. | [Table interaction](demo#table-interaction) | -| detialToggle | `EventEmitter` | Extended row expansion/collapse event. The row status information is returned. | -| cellEditStart | `EventEmitter` | Cell Editing Start Event, Returning Cell Information | -| cellEditEnd | `EventEmitter` | Table cell editing end event. Cell information is returned. | [Edit cell](demo#edit-cell) | -| tableScrollEvent | `EventEmitter` | Table Internal Rolling Event | - -## d-data-table public method - -| Method name | Parameter | Default value | Description | Jump to Demo | -| :--------------------------: | :-----------------------: | :----- | :------------------------------------------------------------------: | :------------------------------------------------------: | -| getCheckedRows | -- | -- | Obtain the data of the selected row. | [Table interaction](demo#table-interaction) | -| setRowCheckStatus | [`RowCheckChangeEventArg`](#rowcheckchangeeventarg) | -- | Sets the selection status of a row, and can process the selection relationship between table headers and parent-child tables. | [Table interaction](demo#table-interaction) | -| setTableCheckStatus | [`TableCheckStatusArg`](#tablecheckstatusarg) | -- | Sets the status of all or half selection of the current table. | -| setRowChildToggleStatus | [`RowToggleStatusEventArg`](#RowToggleStatusEventArg) | -- | Sets the expanded or collapsed status of a subtable in a row. This command is invoked to process the selected status of the subtable in asynchronous loading mode. | [Tree table](demo#tree-form) | -| setTableChildrenToggleStatus | `open: boolean` | -- | Sets the expansion and collapse status of all subtables in the current table. | [Tree table](demo#tree-form) | -| cancelEditingStatus | -- | -- | Cancel the editing status of the cell being edited. | [Editing cell](demo#edit-cell) | - -## rowItem parameter (rowItem is the array element of dataSource. You can initialize the following fields to configure the table behavior.) - -| Parameter | Type | Default value | Description | Jump to Demo | -| :---------------: | :-------: | :----- | :--------------------------: | :------------------------------------------------------: | -| $checked | `boolean` | false | Optional. Whether the row is selected. | [Table interaction](demo#table-interaction) | -| $halfChecked | `boolean` | false | Optional. Whether to select half of the row | [Table interaction](demo#table-interaction) | -| $isChildTableOpen | `boolean` | false | Optional. Whether to expand the subtable in the row | [Tree table](demo#tree-form) | -| children | array | -- | Optional. Configure the subtable data of the row. | [Tree table](demo#tree-form) | -| $checkDisabled | `boolean` | false | Optional. Whether to disable this row | [Table interaction](demo#table-interaction) | -| $checkBoxTips | `string` | -- | Optional. Configure the checkbox prompt for this row. | [Table interaction](demo#table-interaction) | - -# dTableHead - -## dTableHead Parameter - -| Parameter name | Type | Default value | Description | Jump to Demo | -| :-----------: | :-------------------: | :----- | :------------------------------------------------------------------: | :------------------------------------------------------------------- | -| checkable | `boolean` | -- | Optional. The checkbox is displayed in the first column of the table header for selecting all data. The checkbox can be associated with the selection status of the row data. | [Table interaction](demo#table-interaction) | -| checkOptions | `TableCheckOptions[]` | -- | Optional. Drop-down list box in the table header and operations | [Customized table selection](demo#table-check-options) | -| checkDisabled | `boolean` | -- | Optional. Indicates whether the header checkbox is disabled. | - -## dHeadCell Parameter - -| Parameter name | Type | Default value | Description | Jump to Demo | -| :------------------: | :----------------------------------------: | :----- | :-----------------------------------------------------------: | :------------------------------------------------------- | -| resizeEnabled | `boolean` | -- | Optional. Whether the column width can be adjusted | [Table interaction](demo#table-interaction) | -| maxWidth | `string` | -- | Optional. Maximum width during width adjustment. Unit: `px`| -| minWidth | `string` | -- | Optional. Minimum width for adjusting the width. Unit: `px`| -| filterable | `boolean` | -- | Optional. Whether the column width can be filtered. | [Table interaction](demo#table-interaction) | -| closeFilterWhenScroll | `boolean` | -- | Optional. Specifies whether to close the filter box when a table or body is scrolled. | [Table interaction](demo#table-interaction) | -| customFilterTemplate | `TemplateRef` | -- | Optional. This parameter specifies the customized template for filtering pop-up boxes. | [Table interaction](demo#table-interaction) | -| extraFilterTemplate | `TemplateRef` | -- | Optional. This parameter specifies the extra template for filtering pop-up boxes. | [Table interaction](demo#table-interaction) | -| searchFn | `(term: string) => Observable>` | | Optional. The matching method of input keywords when filtering | -| filterList | `array` | -- | Optional. Filter list. This parameter is mandatory when filterable is set to true. | [Table interaction](demo#table-interaction) | -| filterMultiple | `boolean` | -- | Optional. Sets the column to be selected. true indicates that multiple choices are selected, and false indicates that only one choice is selected. | [Table interaction](demo#table-interaction) | -| filterBoxWidth | `string` | -- | Optional. Width of the filter dialog box, for example, 300px. | -| filterBoxHeight | `string` | -- | Optional. Height of the filter dialog box, for example, 400px. | -| beforeFilter | `function\|Promise\|Observable` | -- | Optional. Callback function before the table filtering dialog box is displayed. If false is returned, the dialog box is blocked. | [Table interaction](demo#table-interaction) | -| sortable | `boolean` | -- | Optional. Whether the column can be sorted | [Table interaction](demo#table-interaction) | -| sortDirection | `SortDirection` | -- | Optional. Sets the sorting status of the column. | [Table interaction](demo#table-interaction) | -| nestedColumn | `boolean` | -- | Optional. Indicates whether to display the expand or collapse icon of the table header in the tree table. | [Tree table](demo#tree-form) | -| iconFoldTable | `DOMString` | -- | Optional. Customize the collapse icon of the tree table | [Tree table](demo#tree-form) | -| iconUnFoldTable | `DOMString` | -- | Optional. Customize the expansion icon of the tree table | [Tree table](demo#tree-form) | -| fixedLeft | `string` | -- | Optional. The value is fixed to the left of the column, for example, 100px. | [Fixed column](demo#fixed-column) | -| fixedRight | `string` | -- | Optional. The value is fixed to the right of the column, for example, 100px | [fixed column](demo#fixed-column) | - -## dHeadCell Event - -| Event | Type | Description | Jump to Demo | -| :----------------------: | :-----------------: | :-------------------------------------------------: | :------------------------------------------------------- | -| filterChange | `FilterConfig[]` | Callback event for confirming the filtering and returning the selected filtering array. | [Table interaction](demo#table-interaction) | -| sortChange | `SortEventArg` | Sorting callback event, which returns the sorting information of the column. | [Table interaction](demo#table-interaction) | -| resizeStartEvent | `MouseEvent` | Event when the column width adjustment starts | -| resizingEvent | `{width: string}` | Event that the column width is being adjusted | -| resizeEndEvent | `{width: string}` | Event when the column width adjustment ends | [Table interaction](demo#table-interaction) | -| toggleChildrenTableEvent | `boolean` | Event for expanding and collapsing all subtables. The value true indicates expanding, and the value false indicates collapse. | - -# dTableCell - -## dTableCell Parameter - -| Parameter name | Type | Default value | Description | Jump to Demo | -| :-------------: | :-----------------------------: | :----- | :------------------------------------------------------------: | :------------------------------------------------- | -| editable | `boolean` | -- | Optional. Whether a cell can be edited | [edit cell](demo#edit-cell) | -| editableTip | `'hover'\|'btn'` | -- | Optional. This parameter indicates the editing prompt. The background color of the hover changes. The edit button is displayed in the btn. | [edit cell](demo#edit-cell) | -| nestedColumn | `boolean` | -- | Optional. Display the expansion and collapse icons when the row in the tree table contains subtables. | [Tree table](demo#tree-form) | -| nestedLayer | `number` | | Layer in a tree table. This parameter is mandatory when nestedColumn is set to true. | [Tree table](demo#tree-form) | -| rowItem | `array` | -- | Row data. This parameter is mandatory when nestedColumn is set to true and can also be used as the callback parameter for cell editing. | [Tree table](demo#tree-form) | -| beforeEditStart | `function\|Promise\|Observable` | -- | Optional. Callback before the cell starts editing. If false is returned, the cell starts editing. | [Edit cell](demo#edit-cell) | -| beforeEditEnd | `function\|Promise\|Observable` | -- | Optional. Callback function before the cell edit ends. If false is returned, the cell edit stops. | [Edit cell](demo#edit-cell) | -| iconFoldTable | `DOMString` | -- | Optional. Customize the collapse icon of the tree table | [Tree table](demo#tree-form) | -| iconUnFoldTable | `DOMString` | -- | Optional. Customize the expansion icon of the tree table | [Tree table](demo#tree-form) | -| fixedLeft | `string` | -- | Optional. The value is fixed to the left of the column, for example, 100px. | [Fixed column](demo#fixed-column) | -| fixedRight | `string` | -- | Optional. The value is fixed to the right of the column, for example, 100px | [fixed column](demo#fixed-column) | -| editing | `boolean` | -- | Optional. Use [(editing)] to obtain and control the cell editing status. | [editing cell](demo#edit-cell) | -| field | `string` | -- | Field in the column to which the cell belongs, which is used as the parameter beforeEditStart and beforeEditEnd. | [Edit cell](demo#edit-cell) | - -## dTableCell Event - -| Event | Type | Description | Jump to Demo | -| :-------------------: | :-------: | :-----------------------------------------------------: | :------------------------------------------------- | -| editStatusEvent | `boolean` | Cell editing status event | [edit cell](demo#edit-cell) | -| toggleChildTableEvent | `boolean` | Event for expanding and collapsing the subtable in the current row. The options are true and false. | [Tree table](demo#tree-form) | - -#### Configure the row template of the dTableBody when the user-defined template is used. - -For details, see (demo#tree-form)**. - -``` html - - - -// rowItem: row data -// rowIndex: row number. -// nestedLayer: level of the table to which the row belongs in the tree table, which is generated by the component. The outermost table is 0 and increases ascending order. -// nestedIndex: row index in the tree table, which is generated by the component. -``` - -#### Template for prompting that the configuration data is empty - -The table accepts the `#noResultTemplateRef` template. For details, see **[Asynchronous data loading](demo#async-loading)**. - -#### Custom Filter dialog box - -For details, see (demo#table-interaction)**. - -``` html - - - -// filterListDisplay: value of the input filterList. -// dropdown: Obtains the dropdown reference, which is used to control whether to enable or disable the pop-up dialog box. -// column: metadata of the current column, which is implemented using the column configuration, corresponding to the DataTableColumnTmplComponent class. -``` - -## CheckableRelation - -``` ts -export interface CheckableRelation { - upward: boolean; // Select the child association parent. - downward: boolean; // Select the parent associated child. -} -``` - -## TableWidthConfig - -```ts -export interface TableWidthConfig { - field: string; // Column name - width: string; // Width, in px. -} -``` - -## TableCheckOptions - -```ts -export interface TableCheckOptions { - label: string; - onChecked: Function; -} -``` - -## SortEventArg - -```ts -export interface SortEventArg { - field?: string; // Column name - direction: SortDirection; // Sequence -} -``` - -## TableExpandConfig - -```ts -export interface TableExpandConfig { - expand ? : boolean, // Whether to expand - expandTemplateRef ? : ElementRef, // Custom template - description ? : string // Simple description -} -``` - -## RowCheckChangeEventArg - -```ts -export interface RowCheckChangeEventArg { - rowIndex: number; // Row No. - nestedIndex: string; // Row index in the tree table, which is generated by the component. - rowItem: any; // Row data - checked: boolean; // Indicates whether to select the check box. -} -``` - -## TableCheckStatusArg - -```ts -export interface TableCheckStatusArg { - pageAllChecked?: boolean; // Select all. - pageHalfChecked?: boolean; // Partially selected -} -``` - -## RowToggleStatusEventArg - -```ts -export interface RowToggleStatusEventArg { - rowItem: any; // Row data - open: boolean; // Indicates whether to expand the subtable. -} -``` - -## FilterConfig - -```ts -export interface FilterConfig { - id: number | string; - name: string; - value: any; - checked?: boolean; -} -``` - -## SortDirection - -```ts -export enum SortDirection { - ASC = 'ASC', - DESC = 'DESC', - default = '' -} -``` - -# The following table describes the parameters and methods that are available only when a table is implemented by configuring columns. - -## d-column parameter -| Parameter | Type | Default value | Description | Jump to Demo | -| :-------------------------------: | :-----------------------------: | :---------------- | :-------------------------------------------------------------------------------------: | :------------------------------------------------------- | -| editable | `boolean` | false | Optional. Specifies whether the column can be edited on the d-column. | [edit cell](demo#edit-cell) | -| maxWidth | `string px` | -- | Optional. Maximum width | -| minWidth | `string px` | -- | Optional. Minimum width | -| field | `string` | -- | Required. Fields in this column | [Basic usage](demo#basic-usage) | -| header | `string` | -- | Text in the column header | [Basic usage](demo#basic-usage) | -| sortable | `boolean` | -- | Optional. indicating whether to sort data | [Table interaction](demo#table-interaction) | -| editable | `boolean` | -- | Optional. Whether the table can be edited | [Table interaction](demo#table-interaction) | -| width | `string px,%` | -- | width | [basic usage](demo#basic-usage) | -| nestedColumn | `Boolean` | false | Optional. Specifies the column as the operation column of the tree table. That is, the expand/collapse button and the content indentation button are available to indicate the hierarchy. | [Tree table](demo#tree-form) | -| extraOptions.editableTip | `btn', ''` | -- | Optional. This parameter is optional and can be edited. 'btn' indicates that the edit button is displayed when you move the mouse pointer over a cell. When this parameter is not configured, the background color of the cell changes. | [Edit cell](demo#edit-cell) | -| extraOptions.iconFoldTable | `Template` | -- | Optional. The collapse icon of the tree table is automatically defined. | [Tree table](demo#tree-form) | -| extraOptions.iconUnFoldTable | `Template` | -- | Optional. The expansion icon of the tree table is automatically defined. | [Tree table](demo#tree-form) | -| extraOptions.showHeadTableToggler | `boolean` | false | Optional. Indicates whether to display the expand/collapse icon in the header of the tree table. | [Tree table](demo#tree-form) | -| order | `number` | Number. MAX_VALUE | Optional. Column number | [Basic usage](demo#basic-usage) | -| filterable | `boolean` | -- | Optional. indicating whether to filter. | [Table interaction](demo#table-interaction) | -| closeFilterWhenScroll | `boolean` | -- | Optional. Specifies whether to close the filter box when a table or body is scrolled. | [Table interaction](demo#table-interaction) | -| filterList | `array` | -- | Optional. Transfer the filtering list to be operated. This parameter is mandatory when filterable is set to true. | [Table interaction](demo#table-interaction) | -| filterMultiple | `boolean` | true | Optional. The options are as follows: true: multi-choice; false: single-choice. | [Table interaction](demo#table-interaction) | -| customFilterTemplate | `TemplateRef` | -- | Optional. This parameter specifies the customized template of the table filtering dialog box. For details, see the "Customized Filtering Dialog Box" in the DOC. | [Table Interaction](demo#table-interaction) | -| extraFilterTemplate | `TemplateRef` | -- | Optional. This parameter specifies the extra template of the table filtering dialog box. | [Table Interaction](demo#table-interaction) | -| beforeFilter | `function, Promise, Observable` | -- | Optional. Callback function before the table filtering dialog box is displayed. If false is returned, the dialog box is blocked. | [Table interaction](demo#table-interaction) | -| cellClass | `string` | -- | Optional. Custom class of the cell in the column | -| fixedLeft | `string` | -- | Optional. Fixed distance from the column to the left, for example, '100px' | [Fixed column](demo#fixed-column) | -| fixedRight | `string` | -- | Optional. Fixed distance from the column to the right, for example, '100px' | [Fixed column](demo#fixed-column) | -| filterBoxWidth | `any` | -- | Optional. Width of the filter dialog box, for example, 300px. | -| filterBoxHeight | `any` | -- | Optional. Height of the filter dialog box, for example, 400px. | - -## d-column event - -| Event | Type | Description | Jump to Demo | -| :----------: | :--------------: | :----------------------------------: | :------------------------------------------------------- | -| filterChange | `FilterConfig[]` | Callback event for confirming the filtering and returning the selected filtering array. | [Table interaction](demo#table-interaction) | - -## rowItem parameter - -| Parameter | Type | Default value | Description | -| :---------------: | :-----------------: | :----- | :-------------------------------------------------------------------------------------------------------: | -| $editDeniedConfig | `array` | -- | Optional. This parameter is used with column to configure the edit permission on some cells in the row. For example, if this parameter is set to ['age'], the cell whose field is age cannot be edited. | -| $expandConfig | [`TableExpandConfig`](#tableexpandconfig) | -- | Optional. Configure additional content in this line. | -| $rowClass | `string` | -- | Optional. Configure the user-defined class of the line. | -| $hovered | `boolean` | false | The value is true when the cursor moves over the element in the row, and false when
    leaves the row. | - -#### Custom Cells - -When the cell data (cellItem, which is obtained by rowItem[column.field]) is of the string type, the widget can be directly displayed. When the cell data is of the object type or the special behavior of the cell needs to be defined, the cell needs to be customized for display. -For example, we want to capitalize the data in the `Gender' column and display a prompt when you move the mouse. The relevant code is as follows: -``` - - - - -{{cellItem.toUpperCase()}} - - - - -``` - -#### Customizing a Cell Editing Template - -The Datatable allows users to customize cell editing using a template. -``` - - - - - - - -``` -The complete template for editing customized cells and configuration cells is as follows: -``` xml - - - -// rowIndex: row number. -// colIndex: column sequence number -// rowItem: data in the current row, corresponding to the key-value pair of filed and cellItem. -// column: metadata of the current column, corresponding to the DataTableColumnTmplComponent class -// cellItem: value of the current cell. The value is obtained from rowItem[column.field]. -// tableLevel: indicates the level of the table in the tree table. The outermost value is 0. The value increases automatically. -``` -#### Customizing a Table Header Cell -If a table header cell is required, the system displays the message "Gender is a head cell template" when you move the mouse over the table. -``` xml - - - - -{{column.header}} - - - - -// column: Enter a column value, corresponding to the `DataTableColumnTmplComponent` class. -``` -#### Multi-row Header and Table Header Combine Cells -* Add this parameter when the d-column is used. -``` javascript -advancedHeader: Array < { -header: string; -rowspan: number; -colspan: number; -} -``` -Note: Empty cells also need to be indicated. Set rowspan/colspan to 0 based on the content. If column width dragging and multi-row headers are used at the same time, attach the width to the column content. If the column width of the first row is incorrect, manually add the $width attribute for advancedHeader[rowNumber]. diff --git a/devui/datepicker/datepicker.tsx b/devui/datepicker/datepicker.tsx deleted file mode 100644 index 1b01bbc08caf0c3220a958347bb9b49c924010e6..0000000000000000000000000000000000000000 --- a/devui/datepicker/datepicker.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { defineComponent } from 'vue' - -export default defineComponent({ - name: 'd-datepicker', - props: { - }, - setup(props, ctx) { - return () => { - return
    devui-datepicker
    - } - } -}) \ No newline at end of file diff --git a/devui/datepicker/demo/datepicker-demo.tsx b/devui/datepicker/demo/datepicker-demo.tsx deleted file mode 100644 index 995d9cdaafb96b1162276f7bad158fe70ead3d15..0000000000000000000000000000000000000000 --- a/devui/datepicker/demo/datepicker-demo.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { defineComponent } from 'vue' - -export default defineComponent({ - name: 'd-datepicker-demo', - props: { - }, - setup(props, ctx) { - return () => { - return
    devui-datepicker-demo
    - } - } -}) \ No newline at end of file diff --git a/devui/datepicker/demo/datepicker.route.ts b/devui/datepicker/demo/datepicker.route.ts deleted file mode 100644 index d8cb903977efdd2b2714144a9c7ac02a3e391e2f..0000000000000000000000000000000000000000 --- a/devui/datepicker/demo/datepicker.route.ts +++ /dev/null @@ -1,15 +0,0 @@ -import DatepickerDemoComponent from './datepicker-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: DatepickerDemoComponent}, - { path: 'api', component: DevUIApiComponent, meta: { - 'zh-cn': ApiCn, - 'en-us': ApiEn - }} -] - -export default routes diff --git a/devui/datepicker/doc/api-cn.md b/devui/datepicker/doc/api-cn.md deleted file mode 100644 index a3d06c7d94b324c9c07d88c5408a73e93d0ccb8b..0000000000000000000000000000000000000000 --- a/devui/datepicker/doc/api-cn.md +++ /dev/null @@ -1,217 +0,0 @@ -# 如何使用 - -在 module 中引入： - -```ts -import { DatepickerModule } from 'ng-devui/datepicker'; -``` - -在页面中使用： - -``` - -``` - -# dDatepicker - -## dDatepicker 参数 - -| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | -| :----------------------: | :-------------------------------------------------------------------------------: | :-----------------------------: | :-----------------------------------------------------: | ------------------------------------------------ | -| cssClass | `string` | -- | 可选，自定义 class | [基本用法](demo#datepicker-default) | -| mode | `'year' \| 'month' \| 'date'` | 'date' | 可选，类型，根据 `dateFormat`参数设置不同的格式化 | [设置日期选择器的类型](demo#datepicker-set-mode) | -| locale(国际化后暂无作用) | `string` | 'zh-cn' | 可选，时区 | -| showTime | `boolean` | false | 可选，是否显示时分秒 | [格式化](demo#datepicker-format) | -| disabled | `boolean` | false | 可选，禁用选择 | [基本用法](demo#datepicker-default) | -| direction | `'up' \| 'down'` | 'down' | 可选，日期弹出方向 | [格式化](demo#datepicker-format) | -| dateConverter | `function` | DefaultDateConverter | 可选，日期格式化、解析函数 | -| dateConfig | `DateConfig` | 见下方介绍 | 可选，配置参数 | [基本用法](demo#datepicker-default) | -| dateFormat | [ng 自定义日期格式](https://angular.cn/api/common/DatePipe#custom-format-options) | 'y/MM/dd' \| 'y/MM/dd HH:mm' | 可选，传入格式化，根据是否 showTime 区别不同默认值 | [格式化](demo#datepicker-format) | -| minDate | `Date` | new Date('01/01/1900 00:00:00') | 可选，限制最小可选日期 | [限制最大最小日期](demo#datepicker-min-max) | -| maxDate | `Date` | new Date('11/31/2099 23:59:59') | 可选，限制最大可选日期 | [限制最大最小日期](demo#datepicker-min-max) | -| autoOpen | `boolean` | false | 可选，初始化是否直接展开 | [限制最大最小日期](demo#datepicker-min-max) | -| customViewTemplate | `template` | -- | 可选，自定义快捷设置日期或自定义操作区内容，用法见 demo | [自定义操作区](demo#custom-view-template) | - -## dDatepicker 事件 - -| 事件 | 类型 | 说明 | 跳转 Demo | -| :----------------: | :--------------------: | :------------------------------------------: | ----------------------------------- | -| selectedDateChange | `EventEmitter` | 可选，子项切换的时候会发出新激活的子项的数据 | [基本用法](demo#datepicker-default) | - -## appendToBody(dDatepicker 附加指令组件) - -搭配 dDatepicker 使用该指令后，会被附加到 body，可以防止 datepicker 在滚动条内被遮挡。 - -| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | -| :--------------------: | :-------------------------------------------------: | :----------------------------------------------: | :------------------------------: | ------------------------------------------------ | -| appendToBodyDirections | `Array` | `['rightDown', 'leftDown', 'rightUp', 'leftUp']` | 方向数组优先采用数组里靠前的位置 | [附着在 body 上](demo#datepicker-append-to-body) | - -注意： 使用 appendToBody 后需要在有滚动条的地方使用`cdkScrollable` - -```terminal -npm install @angular/cdk --save -``` - -```TypeScript -import { ScrollDispatchModule } from '@angular/cdk/scrolling'; - -@NgModule({ - imports: [ - // ... - ScrollDispatchModule, - // ... - ] -}) -``` - -```html -
    - -
    -``` - -## ConnectedPosition 类型定义 - -引用自`@angular/cdk/overlay` - -```TypeScript -export interface ConnectedPosition { - originX: 'start' | 'center' | 'end'; - originY: 'top' | 'center' | 'bottom'; - - overlayX: 'start' | 'center' | 'end'; - overlayY: 'top' | 'center' | 'bottom'; - - weight?: number; - offsetX?: number; - offsetY?: number; - panelClass?: string | string[]; -} -``` - -## AppendToBodyDirection 类型定义 - -```typescript -export type AppendToBodyDirection = 'rightDown' | 'rightUp' | 'leftUp' | 'leftDown' | 'centerDown' | 'centerUp'; -``` - -简化的几个基础的方向为名字 - -| 简化名 | 意义 | -| :--------: | :-------------------------------------------------------------------------: | -| rightDown | 相对于对齐对象显示在`右下`方向， 即左对齐，显示在下方（注意右下是左对齐的） | -| rightUp | 相对于对齐对象显示在`右上`方向， 即左对齐，显示在上方 | -| leftUp | 相对于对齐对象显示在`左上`方向， 即右对齐，显示在上方 | -| leftDown | 相对于对齐对象显示在`左下`方向， 即右对齐，显示在下方 | -| centerDown | 相对于对齐对象显示在`居中下`方向， 即居中对齐，显示在下方 | -| centerUp | 相对于对齐对象显示在`居中上`方向， 即居中对齐，显示在上方 | - -简化了 6 个方向的命名，其余方向可以通过 angular/cdk/overlay 的 ConnectedPosition 进行使用。 - -appendToBodyDirections 默认的显示顺序为 ['rightDown', 'leftDown', 'rightUp', 'leftUp']， -会尝试第一个位置，第一个位置放不下会尝试第二个位置，依此类推。 - -## DateConfig - -``` -interface DateConfig{ - timePicker: boolean, // 默认false - dateConverter: any, - min: number, // 默认1900 - max: number, // 默认 2099 - format: { - date: string, // 默认 'y/MM/dd' - time: string // 默认 'y/MM/dd HH:mm' - } -} -``` - -# dDateRangePicker - -## dDateRangePicker 参数 - -| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | -| :----------------------: | :-------------------------------------------------------------------------------: | :-------------------------------: | :------------------------------------------------------ | ----------------------------------------------------------------- | -| cssClass | `string` | -- | 可选，自定义 class | [范围日期选择器 集成模式](demo#datepicker-range-basic) | -| locale(国际化后暂无作用) | `string` | 'zh-cn' | 可选，时区 | -| showTime | `boolean` | false | 可选，是否显示时分秒 | [日期范围选择器 选择时间](demo#datepicker-range-time) | -| disabled | `boolean` | false | 可选，禁用选择 | [禁止输入态](demo#datepicker-range-disabled) | -| dateConverter | `function` | DefaultDateConverter | 可选，日期格式化、解析函数 | -| dateConfig | `DateConfig` | 见下方介绍 | 可选，配置参数 | [日期范围选择器 格式化](demo#datepicker-range-format) | -| dateFormat | [ng 自定义日期格式](https://angular.cn/api/common/DatePipe#custom-format-options) | `'y/MM/dd' \| 'y/MM/dd HH:mm'` | 可选，传入格式化 | [日期范围选择器 格式化](demo#datepicker-range-format) | -| minDate | `Date` | `new Date('01/01/1900 00:00:00')` | 可选，限制最小可选日期 | [日期范围选择器 可选范围](demo#datepicker-range-restricted-range) | -| maxDate | `Date` | `new Date('11/31/2099 23:59:59')` | 可选，限制最大可选日期 | [日期范围选择器 可选范围](demo#datepicker-range-restricted-range) | -| splitter | `string` | `' - '` | 可选，两日期间的分隔符 | [日期范围选择器 格式化](demo#datepicker-range-format) | -| selectedRange | `[Date, Date]` | `[null, null]` | 可选，时选择的日期 | [范围日期选择器 集成模式](demo#datepicker-range-basic) | -| customViewTemplate | `template` | -- | 可选，自定义快捷设置日期或自定义操作区内容，用法见 demo | [自定义操作区](demo#datepicker-clear-button) | -| hideOnRangeSelected | `boolean` | false | 可选，是否在选择完日期后隐藏面板 | [范围日期选择器 集成模式](demo#datepicker-range-basic) | - -## dDateRangePicker 事件 - -| 事件 | 类型 | 说明 | 跳转 Demo | -| :-----------------: | :--------------------: | :--------------- | --------- | -| selectedRangeChange | `EventEmitter` | 日期发生变化回调 | - -## 使用 reason 限制插件 emit 的 reason 导出 - -datepicker 通过 - -```TypeScript -import { SelectDateChangeReason } from 'ng-devui/zh-cn/datepicker'; -``` - -dateRangePicker 通过 - -```TypeScript -import { SelectDateRangeChangeReason } from 'ng-devui/zh-cn/datepicker'; -``` - -来引入 reason 限制插件，如何使用可以自由发挥，清除按钮 demo 就提供了一种方式 - -如下所示，reason 是枚举类型，所以需要根据`selectedDateChange`(dateRangePicker 为`selectedRangeChange`)返回的`reason`字段的数字进行判断，reason 当前可选值： - -```TypeScript -enum SelectDateChangeReason { - date, // 返回值为`reason：0`，代表选择日期时触发的reason - time, // 返回值为`reason：1`，代表showTime时修改时间触发的reason - button, // 返回值为`reason：2`，代表自带的按钮(例如清除和确定)触发时的reason - format, // 返回值为`reason：3`，代表改变格式化时触发的reason - custom // 返回值为`reason：4`，代表用户传入的变更触发的reason -} -``` - -SelectDateRangeChangeReason 与上述用法相同 - -# dTwoDatePicker - -## dTwoDatePicker 参数 - -| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | -| :----------------------: | :-------------------------------------------------------------------------------: | :-------------------------------: | :------------------------------- | -------------------------------------------------- | -| cssClass | `string` | -- | 可选，自定义 class | [双日期选择器](demo#two-date-picker-basic) | -| locale(国际化后暂无作用) | `string` | 'zh-cn' | 可选，时区 | -| disabled | `boolean` | false | 可选，禁用选择 | [双日期选择器](demo#two-date-picker-basic) | -| dateConverter | `function` | DefaultDateConverter | 可选，日期格式化、解析函数 | -| dateConfig | `DateConfig` | 见下方介绍 | 可选，配置参数 | [双日期选择器 格式化](demo#two-date-picker-format) | -| dateFormat | [ng 自定义日期格式](https://angular.cn/api/common/DatePipe#custom-format-options) | `'y/MM/dd' \| 'y/MM/dd HH:mm'` | 可选，传入格式化 | [双日期选择器 格式化](demo#two-date-picker-format) | -| minDate | `Date` | `new Date('01/01/1900 00:00:00')` | 可选，限制最小可选日期 | [双日期选择器 格式化](demo#two-date-picker-format) | -| maxDate | `Date` | `new Date('11/31/2099 23:59:59')` | 可选，限制最大可选日期 | [双日期选择器 格式化](demo#two-date-picker-format) | -| hideOnRangeSelected | `boolean` | true | 可选，是否在选择完日期后隐藏面板 | [双日期选择器](demo#two-date-picker-basic) | - -## dTwoDatePicker 事件 - -| 事件 | 类型 | 说明 | 跳转 Demo | -| :-----------------: | :--------------------: | :--------------- | ------------------------------------------ | -| selectedRangeChange | `EventEmitter` | 日期发生变化回调 | [双日期选择器](demo#two-date-picker-basic) | - -## dTwoDatePickerStart 事件 - -| 事件 | 类型 | 说明 | 跳转 Demo | -| :---------: | :--------------------: | :--------------- | ------------------------------------------ | -| selectStart | `EventEmitter` | 日期发生变化回调 | [双日期选择器](demo#two-date-picker-basic) | - -## dTwoDatePickerEnd 事件 - -| 事件 | 类型 | 说明 | 跳转 Demo | -| :-------: | :--------------------: | :--------------- | ------------------------------------------ | -| selectEnd | `EventEmitter` | 日期发生变化回调 | [双日期选择器](demo#two-date-picker-basic) | diff --git a/devui/datepicker/doc/api-en.md b/devui/datepicker/doc/api-en.md deleted file mode 100644 index 1aa3b2d7a1eef32ee0b451b28d41b7d878c5a9ab..0000000000000000000000000000000000000000 --- a/devui/datepicker/doc/api-en.md +++ /dev/null @@ -1,217 +0,0 @@ -# How to use - -Import into module: - -```ts -import { DatepickerModule } from 'ng-devui/datepicker'; -``` - -In the page: - -``` - -``` - -# dDatepicker - -## dDatepicker parameter - -| Parameter | Type | Default | Description | Jump to Demo | -| :------------------------------------------------------------: | :------------------------------------------------------------------------------------: | :-----------------------------: | :-----------------------------------------------------------------------------------------------------: | ------------------------------------------------------ | -| cssClass | `string` | -- | Optional, user-defined class | [Basic usage](demo#datepicker-default) | -| mode | `'year' \| 'month' \| 'date'` | 'date' | Optional, Mode, Formatting based on the value of the `dateFormat` parameter | [Set Mode](demo#datepicker-set-mode) | -| locale (This parameter is invalid after internationalization.) | `string` | 'zh-cn' | Optional, Time zone | -| showTime | `boolean` | false | Optional, indicating whether to display hour, minute, and second. | [Format](demo#datepicker-format) | -| disabled | `boolean` | false | Optional, Disable selection. | [Basic usage](demo#datepicker-default) | -| direction | `'up '\|'down'` | 'down' | Optional, date pop-up direction | [formatting](demo#datepicker-format) | -| dateConverter | `function` | DefaultDateConverter | Optional, formatting and parsing functions. | -| dateConfig | `DateConfig` | See the following description. | Optional, It is a configuration parameter. | [Basic usage](demo#datepicker-default) | -| dateFormat | [ng cunstom date format](https://angular.cn/api/common/DatePipe#custom-format-options) | 'y/MM/dd'\| 'y/MM/dd HH:mm' | Optional, Formatting is supported. The default value varies depending on whether showTime is specified. | [Format](demo#datepicker-format) | -| minDate | `Date` | new Date('01/01/1900 00:00:00') | Optional, The minimum date can be selected. | [Maximum and minimum dates](demo#datepicker-min-max) | -| maxDate | `Date` | new Date('11/31/2099 23:59:59') | Optional, The maximum number of available dates is limited. | [Maximum and minimum dates](demo#datepicker-min-max) | -| autoOpen | `boolean` | false | Optional, indicating whether to expand during initialization. | [Maximum and minimum dates](demo#datepicker-min-max) | -| customViewTemplate | `template` | -- | Optional, Customize the date or content in the operation area. For details, see demo | [Customized operation area](demo#custom-view-template) | - -## dDatepicker Event - -| Event | Type | Description | Jump to Demo | -| :----------------: | :--------------------: | :--------------------------------------------------------------------------------------: | -------------------------------------- | -| selectedDateChange | `EventEmitter` | Optional, When a sub-item is switched, the data of the newly activated sub-item is sent. | [Basic usage](demo#datepicker-default) | - -## appendToBody (dDatepicker additional instruction component) - -When this command is used together with dDatepicker, it is attached to the body to prevent datepicker from being blocked in the scroll bar. - -| Parameter | Type | Default | Description | Jump to Demo | -| :--------------------: | :-------------------------------------------------: | :--------------------------------------------: | :-------------------------------------------------------------------: | ----------------------------------------------------------------------------------- | -| appendToBodyDirections | `Array` | ` ['rightDown','leftDown','rightUp','leftUp']` | The first position in the array is preferred for the direction array. | [Attached to the body](/componentsen-us//datepicker/demo#datepicker-append-to-body) | - -Note: After appendToBody is used, use `cdkScrollable` where the scroll bar exists. - -```terminal -npm install @angular/cdk --save -``` - -```TypeScript -import {ScrollDispatchModule} from '@angular/cdk/scrolling'; - -@NgModule({ -imports: [ -//... -ScrollDispatchModule, -//... -] -}) -``` - -```html -
    - -
    -``` - -## ConnectedPosition Type Definition - -Quoted from `@angular/cdk/overlay` - -```TypeScript -export interface ConnectedPosition { -originX: 'start' | 'center' | 'end'; -originY: 'top' | 'center' | 'bottom'; - -overlayX: 'start' | 'center' | 'end'; -overlayY: 'top' | 'center' | 'bottom'; - -weight? : number; -offsetX? : number; -offsetY? : number; -panelClass? : string | string[]; -} -``` - -## AppendToBodyDirection Type Definition - -```typescript -export type AppendToBodyDirection = 'rightDown' | 'rightUp' | 'leftUp' | 'leftDown' | 'centerDown' | 'centerUp'; -``` - -Simplify several basic directions for the name. - -| Simplified name | Meaning | -| :-------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------: | -| rightDown | Display in the lower right direction relative to the aligned object, that is, the object is left aligned. (Note that the lower right is left aligned.) | -| rightUp | Display in the upper right direction relative to the aligned object. That is, the object is left aligned and displayed at the top. | -| leftUp | Display in the `up-left' direction relative to the aligned object, that is, right-aligned and displayed above. | -| leftDown | Display in the lower-left direction relative to the aligned object, that is, right-aligned and displayed below. | -| centerDown | Display in the `center-bottom' direction relative to the aligned object. That is, the object is center-aligned and displayed below. | -| centerUp | Display in the "center-up" direction relative to the aligned object, that is, display in the center-aligned direction. | - -The naming of six directions is simplified. Other directions can be used by using the ConnectedPosition of angular/cdk/overlay. - -appendToBodyDirections: The default display sequence is ['rightDown','leftDown','rightUp','leftUp']. -Try the first position, try the second position, and so on. - -## DateConfig - -``` -interface DateConfig{ - timePicker: boolean, // default false - dateConverter: any, - min: number, // default 1900 - max: number, // default 2099 - format: { - date: string, // default 'y/MM/dd' - time: string // default 'y/MM/dd HH:mm' - } -} -``` - -# dDateRangePicker - -## dDateRangePicker Parameter - -| Parameter | Type | Default | Description | Jump to Demo | -| :------------------------------------------------------------: | :------------------------------------------------------------------------------------: | :-------------------------------: | :----------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- | -| cssClass | `string` | -- | Optional, customized class | [Integration mode of the range date selector](demo#datepicker-range-basic) | -| locale (This parameter is invalid after internationalization.) | `string` | 'zh-cn' | Optional, Time zone | -| showTime | `boolean` | false | Optional, indicating whether to display the hour, minute, and second. | [Time selected by the date range selector](demo#datepicker-range-time) | -| disabled | `boolean` | false | Optional, Disable selection. | [Forbidden input](demo#datepicker-range-disabled) | -| dateConverter | `function` | DefaultDateConverter | Optional, date formatting and parsing functions. | -| dateConfig | `DateConfig` | See the following description. | Optional, It is a configuration parameter. | [Date range selector formatting](demo#datepicker-range-format) | -| dateFormat | [ng cunstom date format](https://angular.cn/api/common/DatePipe#custom-format-options) | `'y/MM/dd'\|'y/MM/dd HH:mm'` | Optional, Formatting the input data | [Date range selector formatting](demo#datepicker-range-format) | -| minDate | `Date` | `new Date('01/01/1900 00:00:00')` | Optional, The minimum available date is restricted. | [The date range selector can be selected](demo#datepicker-range-restricted-range) | -| maxDate | `Date` | `new Date('11/31/2099 23:59:59')` | Optional, The maximum date can be selected is restricted. | [The date range selector can be selected](demo#datepicker-range-restricted-range) | -| splitter | `string` | `' - '` | Optional, separator of two days | [Date range selector formatting](demo#datepicker-range-format) | -| selectedRange | `[Date, Date]` | `[null, null]` | Optional, Date selected when | [Integration mode of the range date selector](demo#datepicker-range-basic) | -| customViewTemplate | `template` | -- | Optional, Customize the date or content in the operation area. For details, see demo | [Customized operation area](demo#datepicker-clear-button) | -| hideOnRangeSelected | `boolean` | false | Optional, Whether to hide the panel after selecting a date | [Integration mode of the range date selector](demo#datepicker-range-basic) | - -## dDateRangePicker Event - -| Event | Type | Description | Jump to Demo | -| :-----------------: | :--------------------: | :------------------- | ------------ | -| selectedRangeChange | `EventEmitter` | Date Change Callback | - -## Use reason to restrict the reason export of the plug-in emit. - -The datepicker passes the test. - -```TypeScript -import {SelectDateChangeReason} from' ng-devui/datepicker'; -``` - -dateRangePicker Pass - -```TypeScript -import {SelectDateRangeChangeReason} from' ng-devui/datepicker'; -``` - -To introduce the reason limit plug-in, how can be used freely, the clear button demo provides a way. - -As shown in the following figure, reason is of the enumerated type. Therefore, the value of reason must be determined based on the value of reason returned by `selectedDateChange` (dateRangePicker is `selectedRangeChange`). The value of reason is available. - -```TypeScript -enum SelectDateChangeReason { -date, // The return value is `reason:0`, which indicates the reason triggered when a date is selected. -time, // The return value is `reason:1`, which indicates the reason triggered by time modification during showTime. -button, // The return value is `reason:2`, indicating the reason when the built-in button (such as clear and OK) is triggered. -format, // The return value is `reason:3`, indicating that the reason triggered during formatting is changed. -custom // The return value is `reason:4`, which indicates the change-triggered reason transferred by the user. -} -``` - -SelectDateRangeChangeReason is used in the same way as above - -# dTwoDatePicker - -## dTwoDatePicker Parameter - -| Parameter | Type | Default | Description | Jump to Demo | -| :------------------------------------------------------------: | :------------------------------------------------------------------------------------: | :-------------------------------: | :------------------------------------------------------------- | ------------------------------------------------------------ | -| cssClass | `string` | -- | Optional, custom class | [Dual date selector](demo#two-date-picker-basic) | -| locale (This parameter is invalid after internationalization.) | `string` | 'zh-cn' | Optional, Time zone | -| disabled | `boolean` | false | Optional, The selection is disabled. | [Dual date selector](demo#two-date-picker-basic) | -| dateConverter | `function` | DefaultDateConverter | Optional, formatting and parsing functions. | -| dateConfig | `DateConfig` | See the following description. | Optional, It is a configuration parameter. | [Dual date selector formatting](demo#two-date-picker-format) | -| dateFormat | [ng cunstom date format](https://angular.cn/api/common/DatePipe#custom-format-options) | `'y/MM/dd'\|'y/MM/dd HH:mm'` | Optional, Formatting the input data | [Dual-date selector formatting](demo#two-date-picker-format) | -| minDate | `Date` | `new Date('01/01/1900 00:00:00')` | Optional, The minimum date can be selected. | [Dual-date selector formatting](demo#two-date-picker-format) | -| maxDate | `Date` | `new Date('11/31/2099 23:59:59')` | Optional, The maximum date that can be selected is restricted. | [Dual-date selector formatting](demo#two-date-picker-format) | -| hideOnRangeSelected | `boolean` | true | Optional, Whether to hide the panel after a date is selected. | [Dual-date selector](demo#two-date-picker-basic) | - -## dTwoDatePicker Event - -| Event | Type | Description | Jump to Demo | -| :-----------------: | :--------------------: | :------------------- | ------------------------------------------------ | -| selectedRangeChange | `EventEmitter` | Date Change Callback | [Dual Date Selector](demo#two-date-picker-basic) | - -## dTwoDatePickerStart Event - -| Event | Type | Description | Jump to Demo | -| :---------: | :--------------------: | :------------------- | ------------------------------------------------ | -| selectStart | `EventEmitter` | Date Change Callback | [Dual Date Selector](demo#two-date-picker-basic) | - -## dTwoDatePickerEnd Event - -| Event | Type | Description | Jump to Demo | -| :-------: | :--------------------: | :------------------- | ------------------------------------------------ | -| selectEnd | `EventEmitter` | Date Change Callback | [Dual Date Selector](demo#two-date-picker-basic) | diff --git a/devui/dragdrop/demo/dragdrop-demo.tsx b/devui/dragdrop/demo/dragdrop-demo.tsx deleted file mode 100644 index 76a4853d5d465334888f68655eb3a1254b15c1c3..0000000000000000000000000000000000000000 --- a/devui/dragdrop/demo/dragdrop-demo.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { defineComponent } from 'vue' - -export default defineComponent({ - name: 'd-dragdrop-demo', - props: { - }, - setup(props, ctx) { - return () => { - return
    devui-dragdrop-demo
    - } - } -}) \ No newline at end of file diff --git a/devui/dragdrop/demo/dragdrop.route.ts b/devui/dragdrop/demo/dragdrop.route.ts deleted file mode 100644 index 2edce0c7575ef73ae9a61b6677c7d2955a279224..0000000000000000000000000000000000000000 --- a/devui/dragdrop/demo/dragdrop.route.ts +++ /dev/null @@ -1,15 +0,0 @@ -import DragDropDemoComponent from './dragdrop-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: DragDropDemoComponent}, - { path: 'api', component: DevUIApiComponent, meta: { - 'zh-cn': '', - 'en-us': '' - }} -] - -export default routes diff --git a/devui/dragdrop/doc/api-cn.md b/devui/dragdrop/doc/api-cn.md deleted file mode 100644 index 2121f5e1847dd0cf461f3a1a6f73fe3084dae772..0000000000000000000000000000000000000000 --- a/devui/dragdrop/doc/api-cn.md +++ /dev/null @@ -1,383 +0,0 @@ -# 如何使用 - -在 module 中引入： - -```typescript -import { DragDropModule } from' ng-devui/dragdrop'; -``` - -## Dragdrop - -提供 dDraggable 和 dDroppable(dSortable)指令 - -## dDraggable 指令 - -### dDraggable 参数 - -| 参数 | 类型 | 默认值 | 描述 | 跳转 Demo | -| :---------------------------- | :--------------------------------------------------------------------------------------------------------------- | :-------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------ | -| dragData | `any` | -- | 可选，转递给 `DropEvent`事件的数据. | [基本用法](demo#basic-usage) | -| dragScope | `string \| Array` | 'default' | 可选，限制 drop 的位置，必须匹配对应的 `dropScope` | [基本用法](demo#basic-usage) | -| dragOverClass | `string` | -- | 可选，拖动时被拖动元素的 css | [拖拽实体元素跟随](demo#drag-entity-elements-to-follow) | -| dragHandleClass | `string` | -- | 可选，拖动句柄，css 选择器，只有被选中的元素才能响应拖动事件 | [基本用法](demo#basic-usage) | -| disabled | `boolean` | false | 可选，控制当前元素是否可拖动 false 为可以，true 为不可以 | [基本用法](demo#basic-usage) | -| enableDragFollow | `boolean` | false | 可选，是否启用实体元素跟随（可以添加更多特效，如阴影等） | [拖拽实体元素跟随](demo#drag-entity-elements-to-follow) | -| dragFollowOption | `{appendToBody?: boolean}` | -- | 可选，用于控制实体拖拽的一些配置 | [拖拽实体元素跟随](demo#drag-entity-elements-to-follow) | -| dragFollowOption.appendToBody | `boolean` | false | 可选，用于控制实体拖拽的克隆元素插入的位置。默认 false 会插入到源元素父元素所有子的最后，设置为 true 会附着到。见说明 1 | [拖拽实体元素跟随](demo#drag-entity-elements-to-follow) | -| originPlaceholder | `{show?: boolean; tag?: string; style?: {cssProperties: string]: string}; text?: string; removeDelay?: number;}` | -- | 可选，设置源占位符号，用于被拖拽元素原始位置占位 | [源占位符](demo#source-placeholder) | -| originPlaceholder.show | `boolean` | true | 可选，是否显示，默认 originPlaceholder 有 Input 则显示，特殊情况可以关闭 | -| originPlaceholder.tag | `string` | 'div' | 可选，使用 tag 名，默认 originPlaceholder 使用'div'，特殊情况可以置换 | -| originPlaceholder.style | `Object` | -- | 可选，传 style 对象，key 为样式属性，value 为样式值 | [源占位符](demo#source-placeholder) | -| originPlaceholder.text | `string` | -- | 可选，placeholder 内的文字 | [源占位符](demo#source-placeholder) | -| originPlaceholder.removeDelay | `number` | -- | 可选，用于希望源占位符在拖拽之后的延时里再删除，方便做动画，单位为 ms 毫秒 | [源占位符](demo#source-placeholder) | -| dragIdentity | `any` | -- | 可选，用于虚拟滚动的恢复，虚拟滚动过程中会删除元素（溢出画面）然后又重新生成来恢复元素（回到画面），需要唯一识别值来恢复原始事件拖拽事件监听和源占位符等 | -| dragItemParentName | `string` | -- | 可选，选择器名，和 dragItemChildrenName 搭配用于拖拽截断看不见的列表内元素以提高性能， 从 dragItemParentName 匹配的选择器里边查询匹配 dragItemChildrenName 的元素，通常是列表里查找条目，把超出可视范围的条目克隆的时候剔除 | 暂无 | -| dragItemChildrenName | `string` | -- | 可选，选择器名，和 dragItemParentName 搭配用于拖拽截断看不见的列表内元素以提高性能，功能见 dragItemParentName 的描述 | 暂无 | - -说明 1：dragFollowOptions 的 appendToBody 的使用场景：当拖拽离开后源位置的父对象会被销毁的话，需要把克隆体附着到 body 上防止被销毁。默认会通过复制样式保证克隆到 body 的实体的样式是正确的，但部分深度依赖 DOM 节点位置的样式和属性可能会失败，需要手动调整部分样式。 - -### dDraggable 事件 - -| 事件 | 类型 | 描述 | 跳转 Demo | -| :------------- | :------------------------ | :------------------------ | :--------------------------- | -| dragStartEvent | `EventEmitter` | 开始拖动的 DragStart 事件 | [基本用法](demo#basic-usage) | -| dragEndEvent | `EventEmitter` | 拖动结束的 DragEnd 事件 | [基本用法](demo#basic-usage) | -| dropEndEvent | `EventEmitter` | 放置结束的 Drop 事件 | [基本用法](demo#basic-usage) | - -Drag DOM Events 详情: [DragEvent](https://developer.mozilla.org/en-US/docs/Web/API/DragEvent) - -### batchDrag 附加指令 - -使用方法 dDraggable batchDrag - -#### dDraggable batchDrag 属性 - -| 名字 | 类型 | 默认值 | 描述 | 跳转 Demo | -| :---------------------------------- | :------------------------ | :----------------- | :--------------------------------------------------------------------------------------------- | :----------------------------------- | -| batchDragGroup | `string` | 'default' | 可选，批量拖拽分组组名，不同组名 | -| batchDragActive | `boolean` | false | 可选，是否把元素加入到批量拖拽组. 见说明 1。 | [批量拖拽](demo#batch-drag-and-drop) | -| batchDragLastOneAutoActiveEventKeys | `Array` | ['ctrlKey'] | 可选，通过过拖拽可以激活批量选中的拖拽事件判断。见说明 2。 | -| batchDragStyle | `Array` | ['badge', 'stack'] | 可选，批量拖拽的效果，badge 代表右上角有统计数字，stack 代表有堆叠效果，数组里有该字符串则有效 | [批量拖拽](demo#batch-drag-and-drop) | - -说明 1： `batchDragActive`为`true`的时候会把元素加入组里，加入顺序为变为 true 的顺序，先加入的在数组前面。第一个元素会确认批量的组名，如果后加入的组名和先加入的组名不一致，则后者无法加入。 -说明 2： `batchDragLastOneAutoActiveEventKeys`的默认值为['ctrlKey'], 即可以通过按住 ctrl 键拖动最后一个元素， 该元素自动加入批量拖拽的组，判断条件是 dragStart 事件里的 ctrlKey 事件为 true。目前仅支持判断 true/false。该参数为数组，可以判断任意一个属性值为 true 则生效，可用于不同操作系统的按键申明。 - -#### dDraggable batchDrag 事件 - -| 名字 | 类型 | 描述 | 跳转 Demo | -| :------------------- | :--------------------------------------- | :------------------------------------------------- | :----------------------------------- | -| batchDragActiveEvent | `EventEmitter<{el: Element, data: any}>` | 通过拖拽把元素加入了批量拖拽组，通知外部选中该元素 | [批量拖拽](demo#batch-drag-and-drop) | - -## dDroppable 指令 - -### dDroppable 参数 - -| 参数 | 类型 | 默认值 | 描述 | 跳转 Demo | -| :-------------------------- | :--------------------------------------------- | :------------------------------------------ | :----------------------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------- | -| dropScope | `string \| Array` | 'default' | 可选，限制 drop 的区域，对应 dragScope | [基本用法](demo#basic-usage) | -| dragOverClass | `string` | -- | 可选，dragover 时 drop 元素上应用的 css | -| placeholderStyle | `Object` | {backgroundColor: '#6A98E3', opacity: '.4'} | 可选，允许 sort 时，用于占位显示 | [源占位符](demo#source-placeholder) | -| placeholderText | `string` | '' | 可选，允许 sort 时，用于占位显示内部的文字 | -| allowDropOnItem | `boolean` | false | 可选，允许 sort 时，用于允许拖动到元素上，方便树形结构的拖动可以成为元素的子节点 | [多层树状拖拽](demo#multi-level-tree-drag) | -| dragOverItemClass | `string` | -- | 可选，`allowDropOnItem`为`true`时，才有效，用于允许拖动到元素上后，被命中的元素增加样式 | [多层树状拖拽](demo#multi-level-tree-drag) | -| nestingTargetRect | `{height?: number, width?: number}` | -- | 可选，用于修正有内嵌列表后，父项高度被撑大，此处 height，width 为父项自己的高度（用于纵向拖动），宽度（用于横向拖动） | [多层树状拖拽](demo#multi-level-tree-drag) | -| defaultDropPosition | `'closest' \| 'before' \| 'after'` | 'closest' | 可选，设置拖拽到可放置区域但不在列表区域的放置位置，`'closest'` 为就近放下， `'before'`为加到列表头部， `'after'`为加到列表尾部 | [外部放置位置](demo#external-location) | -| dropSortCountSelector | `string` | -- | 可选，带有 sortable 的容器的情况下排序，计数的内容的选择器名称，可以用于过滤掉不应该被计数的元素 | -| dropSortVirtualScrollOption | `{totalLength?: number; startIndex?: number;}` | -- | 可选，用于虚拟滚动列表中返回正确的 dropIndex 需要接收 totalLength 为列表的真实总长度， startIndex 为当前排序区域显示的第一个 dom 的在列表内的 index 值 | - -### dDroppable 事件 - -| 事件 | 类型 | 描述 | 跳转 Demo | -| :------------- | :------------------------------------------ | :------------------------------------------------------------------------------ | :--------------------------- | -| dragEnterEvent | `EventEmitter` | drag 元素进入的 dragenter 事件 | [基本用法](demo#basic-usage) | -| dragOverEvent | `EventEmitter` | drag 元素在 drop 区域上的 dragover 事件 | [基本用法](demo#basic-usage) | -| dragLeaveEvent | `EventEmitter` | drag 元素离开的 dragleave 事件 | [基本用法](demo#basic-usage) | -| dropEvent | `EventEmitter<`[`DropEvent`](#dropevent)`>` | 放置一个元素, 接收的事件，其中 nativeEvent 表示原生的 drop 事件，其他见定义注释 | [基本用法](demo#basic-usage) | - -### DropEvent - -```typescript -type DropEvent = { - nativeEvent: any; // 原生的drop事件 - dragData: any; // drag元素的dragData数据 - dropSubject: Subject; //drop事件的Subject - dropIndex?: number; // drop的位置在列表的index - dragFromIndex?: number; // drag元素在原来的列表的index，注意使用虚拟滚动数据无效 - dropOnItem?: boolean; // 是否drop到了元素的上面，搭配allowDropOnItem使用 -``` - -## dSortable 指令 - -指定需要参与排序的 Dom 父容器（因为 drop 只是限定可拖拽区域，具体渲染由使用者控制） - -### dSortable 参数 - -| 名字 | 类型 | 默认值 | 描述 | 跳转 Demo | -| :------------- | :----------- | :----- | :------------------------------ | :-------- | -| dSortDirection | `'v' \| 'h'` | 'v' | 'v'垂直排序,'h'水平排序 | -| dSortableZMode | `boolean` | false | 是否是 z 模式折回排序，见说明 1 | - -说明 1： z 自行排序最后是以大方向为准的，如果从左到右排遇到行末换行，需要使用的垂直排序+z 模式，因为最后数据是从上到下的只是局部的数据是从左到右。 - -### dDropScrollEnhanced 参数 - -| 名字 | 类型 | 默认值 | 描述 | 跳转 Demo | -| :----------------- | :---------------------------------------------------------------------------------------------- | :------- | :------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------- | -| direction | [`DropScrollDirection`](#dropscrolldirection)即`'v'\|'h'` | 'v' | 滚动方向，垂直滚动`'v'`, 水平滚动 `'h'` | [拖拽滚动容器增强](demo#drag-and-roll-container-enhancement) | -| responseEdgeWidth | `string \| ((total: number) => string)` | '100px' | 响应自动滚动边缘宽度, 函数的情况传入的为列表容器同个方向相对宽度 | [拖拽滚动容器增强](demo#drag-and-roll-container-enhancement) | -| speedFn | [`DropScrollSpeedFunction`](#dropscrolldirection) | 内置函数 | 速率函数，见备注 | -| minSpeed | `DropScrollSpeed`即`number` | 50 | 响应最小速度 ，函数计算小于这个速度的时候，以最小速度为准 | -| maxSpeed | `DropScrollSpeed`即`number` | 1000 | 响应最大速度 ，函数计算大于这个速度的时候，以最大速度为准 | -| viewOffset | {forward?: [`DropScrollAreaOffset`](#dropScrollAreaOffset); backward?: `DropScrollAreaOffset`;} | -- | 设置拖拽区域的偏移，用于某些位置修正 | -| dropScrollScope | `string\| Array` | -- | 允许触发滚动 scope，不配置为默认接收所有 scope，配置情况下，draggable 的`dragScope`和`dropScrollScope`匹配得上才能触发滚动 | [拖拽滚动容器增强](demo#drag-and-roll-container-enhancement) | -| backSpaceDroppable | `boolean` | true | 是否允许在滚动面板上同时触发放置到滚动面板的下边的具体可以放置元素，默认为 true，设置为 false 则不能边滚动边放置 | - -备注： speedFn 默认函数为`(x: number) => Math.ceil((1 - x) * 18) * 100`，传入数字`x`是 鼠标位置距离边缘的距离占全响应宽度的百分比， -最终速度将会是 speedFn(x)，但不会小于最小速度`minSpeed`或者大于最大速度`maxSpeed`。 - -相关类型定义： - -#### DropScrollDirection - -```typescript -export type DropScrollDirection = 'h' | 'v'; -``` - -#### DropScrollSpeed - -```typescript -export type DropScrollEdgeDistancePercent = number; // unit: 1 -export type DropScrollSpeed = number; // Unit: px/s -export type DropScrollSpeedFunction = (x: DropScrollEdgeDistancePercent) => DropScrollSpeed; -``` - -#### DropScrollAreaOffset - -```typescript -export type DropScrollAreaOffset = { - left?: number; - right?: number; - top?: number; - bottom?: number; - widthOffset?: number; - heightOffset?: number; -}; - -export enum DropScrollOrientation { - forward, // Forward, right/bottom - backward, // Backward, left/up -} -export type DropScrollTriggerEdge = 'left' | 'right' | 'top' | 'bottom'; -``` - -`DropScrollAreaOffset` 仅重要和次要定位边有效， forward 代表后右或者往下滚动，backward 表示往左或者往上滚动 - -| direction | `v` 上下滚动 | `h` 左右滚动 | -| :------------------ | :--------------- | :------------- | -| forward 往下或往右 | `left` ,`bottom` | `top` ,`right` | -| backward 往左或网上 | `left`,`top` | `top`,`left` | - -### dDropScrollEnhancedSide 附属指令 - -如果需要同时两个方向都有滚动条，则需要使用 dDropScrollEnhanced 的同时使用 dDropScrollEnhancedSide，参数列表同 dDropScrollEnhanced 指令，唯一不同是 direction，如果为`'v'`则 side 附属指令的实际方向为`'h'`。 - -| 名字 | 类型 | 默认值 | 描述 | -| :----------------- | :--------------------------------------------------------------------- | :------- | :------------------------------------------------------------------------------------------------------------------------- | -| direction | `DropScrollSpeed`即`'v'\|'h'` | 'v' | 滚动方向，垂直滚动`'v'`, 水平滚动 `'h'` | -| responseEdgeWidth | `string \| ((total: number) => string)` | '100px' | 响应自动滚动边缘宽度, 函数的情况传入的为列表容器同个方向相对宽度 | -| speedFn | `DropScrollSpeedFunction` | 内置函数 | 速率函数，见备注 | -| minSpeed | `DropScrollSpeed`即`number` | 50 | 响应最小速度 ，函数计算小于这个速度的时候，以最小速度为准 | -| maxSpeed | `DropScrollSpeed`即`number` | 1000 | 响应最大速度 ，函数计算大于这个速度的时候，以最大速度为准 | -| viewOffset | {forward?: `DropScrollAreaOffset`; backward?: `DropScrollAreaOffset`;} | -- | 设置拖拽区域的偏移，用于某些位置修正 | -| dropScrollScope | `string\| Array` | -- | 允许触发滚动 scope，不配置为默认接收所有 scope，配置情况下，draggable 的`dragScope`和`dropScrollScope`匹配得上才能触发滚动 | -| backSpaceDroppable | `boolean` | true | 是否允许在滚动面板上同时触发放置到滚动面板的下边的具体可以放置元素，默认为 true，设置为 false 则不能边滚动边放置 | - -## 使用 `dDraggable` & `dDroppable` 指令 - -```html -
      -
    • Coffee
      • -
    • Tea
      • -
    • Milk
      • -
    -``` - -```html -
    -

    Drop items here

    -
    -``` - -## CSS - -`dDraggable` & `dDroppable` 指令都有`[dragOverClass]`作为输入. - 提供 drag 和 drop 时的 hover 样式，注意是`字符串` - -```html -
    -

    Drop items here

    -
    -``` - -## 限制 Drop 区域 - -用[dragScope]和[dropScope]限制拖动区域，可以是字符串或数组，只有 drag 和 drop 的区域对应上才能放进去 - -```html -
      -
    • Coffee
      • -
    • Tea
      • -
    • Biryani
      • -
    • Kebab
      • - ... -
    -``` - -```html -
    -

    只有 Drinks 可以放在这个container里

    -
    - -
    -

    Meal 和 Drinks 可以放在这个container里

    -
    -``` - -## 传递数据 - -`dDraggable`可以用[dragData]向`droppable`传递数据 -`dDroppable`用`(dropEvent)`事件接收数据 - -```html -
      -
    • {{item.name}}
      • -
    - -
    -
    Drop Items here
    -
    -
  • {{item.name}}
    • -
    -
    -``` - -```typescript -export class Component { - items = [ - { name: 'Apple', type: 'fruit' }, - { name: 'Carrot', type: 'vegetable' }, - { name: 'Orange', type: 'fruit' }, - ]; - - onItemDrop(e: any) { - // Get the dropped data here - this.droppedItems.push(e.dragData); - } - constructor() {} -} -``` - -## Drag Handle - -Drag 句柄可以指定实际响应 draggable 事件的元素，而不是 draggable 本身 -这个参数必须是一个字符串，实际上是一个 css 选择器 - -```html -
  • - 只有.drag-handle可以响应拖动事件来拖起li -
    -
    • -``` - -## 异步 DropEnd，通知 Drag 元素 - -`dDraggable`有一个`dropEndEvent`事件，此事件非浏览器默认事件而是自定义事件，非组件自动触发触发方式是在`dDroppable`的`dropEvent`事件的参数中有一个 dropSubject，当需要触发 drag 元素上的 dropEndEvent 事件的时候调用 dropSubject.next(params) 一般是在接口返回之后 例如： - -```html -
      -
    • {{item.name}}
      • -
    - -
    -
    Drop Items here
    -
    -
  • {{item.name}}
    • -
    -
    -``` - -```js -export class Component { - onItemDrop(e: any) { - ajax.onSuccess(() => { - e.dropSubject.next(params); //此时才触发dragComponent的dropEnd 并且params对应onDropEnd的$event; - }); - } - constructor() {} -} -export class dragComponent { - onDropEnd($event, i) {} -} -``` - -# 协同拖拽， 用于二维拖拽，跨纬度拖拽场景 - -## 协同拖 dDragSync - -用于 dDraggle 对象和同时会被拖走的对象。 - -### dDragSync 参数 - -| 参数 | 类型 | 默认值 | 描述 | 跳转 Demo | -| :-------- | :------- | :----- | :--------------------------------------------------------------- | :-------------------------------------------------- | -| dDragSync | `string` | '' | 必选，拖同步的组名，为空或者空字符串的时候无效，不与其他内容同步 | [二维拖拽和拖拽预览](demo#2D-drag-and-drop-preview) | - -## 协同放 dDropSortSync - -用于 dDroppable 对象和与 droppable 内 sortable 结构相同的 sortable 区域， 注意 dDroppable 对象里是与 dDroppable 对象同个对象上注册 dDropSortSync，其他不带 dDroppable 的与放置在排序区域。 - -### dDropSortSync 参数 - -| 参数 | 类型 | 默认值 | 描述 | 跳转 Demo | -| :----------------- | :---------- | :----- | :--------------------------------------------------------------- | :-------------------------------------------------- | -| dDropSortSync | `string` | '' | 必选，放同步的组名，为空或者空字符串的时候无效，不与其他内容同步 | [二维拖拽和拖拽预览](demo#2D-drag-and-drop-preview) | -| dDropSyncDirection | `'v'\| 'h'` | 'v' | 可选，与 dSortable 的方向正交 | - -## 协同监听盒子 dDragDropSyncBox - -用于统计 dDragSync 和 dDropSortSync 的公共父祖先。 -无参数，放置在公共统计区域则可。 - -# 拖拽预览， 用于需要替换拖拽预览的场景 - -## 拖拽预览 dDragPreview - -需要和 dDraggable 搭配使用， 用于拖起的时候拖动对象的模板 - -### dDragPreview 参数 - -| 参数 | 类型 | 默认值 | 描述 | 跳转 Demo | -| :---------------------------------- | :------------------------------ | :----- | :--------------------------------------------------------------------------------- | :-------------------------------------------------- | -| dDragPreview | `TemplateRef` | -- | 必选，预览的模板引用 | [二维拖拽和拖拽预览](demo#2D-drag-and-drop-preview) | -| dragPreviewData | `any` | -- | 可选，自定义数据，将由模板变量获得 | -| dragPreviewOptions | `{ skipBatchPreview : boolean}` | -- | 可选，预览选项 | -| dragPreviewOptions.skipBatchPreview | `boolean` | false | 可选，预览选项, 是否跳过批量预览的样式处理。建议自行处理批量拖拽预览模板的可以跳过 | - -### dDragPreview 模板可用变量 - -| 变量 | 类型 | 变量含义说明 | -| :-----------------: | :------------------: | :-----------------------------------------------------------------------------------------: | -| data | `any` | 从拖拽预览传入的 dragPreviewData 数据 | -| draggedEl | `HTMLElement` | 被拖拽的 DOM 元素 | -| dragData | `any` | 被拖拽元素携带的 dragData 数据 | -| batchDragData | `Array` | 被批量拖拽的对象的 dragData 数据的数组， 含被拖拽元素的 dragData， 并且 dragData 处于第一位 | -| dragSyncDOMElements | `Array` | 被协同拖拽的 DOM 元素， 不包括 draggedEl 指向的 DOM 元素 | - -## 拖拽预览辅助克隆节点 - -可以从节点的引用中恢复 DOM 的克隆对象作为预览 - -| 参数 | 类型 | 默认值 | 描述 | 跳转 Demo | -| :-------- | :------------ | :----- | :----------------------------------------- | :-------- | -| domRef | `HTMLElement` | -- | 必选，否则无意义，克隆节点的 DOM 引用 | -| copyStyle | `boolean` | true | 可选，是否克隆节点的时候对节点依次克隆样式 | diff --git a/devui/dragdrop/doc/api-en.md b/devui/dragdrop/doc/api-en.md deleted file mode 100644 index 51c074ebceb34e40c9ce36f0fec1edd9309eebe6..0000000000000000000000000000000000000000 --- a/devui/dragdrop/doc/api-en.md +++ /dev/null @@ -1,378 +0,0 @@ -# How to use - -Import into module: - -```typescript -import { DragDropModule } from' ng-devui/dragdrop'; -``` - -## Dragdrop - -Provides the dDraggable and dDroppable(dSortable) instructions. - -## dDraggable directive - -### dDraggable Parameter - -| Parameter | Type | Default Value | Description | Jump to Demo | -| :---------------------------- | :--------------------------------------------------------------------------------------------------------------- | :------------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------- | -| dragData | `any` | -- | Optional. Data transmitted to the `DropEvent` event. | [Basic Usage](demo#basic-usage) | -| dragScope | `string \| Array` | 'default ' | Optional. Restricts the drop position. It must match the corresponding `dropScope`. | [Basic Usage](demo#basic-usage) | -| dragOverClass | `string` | -- | Optional. CSS of the dragged element. | [Drag Entity Element to Follow](demo#drag-entity-elements-to-follow) | -| dragHandleClass | `string` | -- | Optional. Drag handle. CSS selector. Only selected elements can respond to drag events. | [Basic Usage](demo#basic-usage) | -| disabled | `boolean` | false | Optional. Specifies whether the current element can be dragged. false: yes; true: no. | [Basic Usage](demo#basic-usage) | -| enableDragFollow | `boolean` | false | Optional. Whether to enable entity element follow (more special effects such as shadow can be added) | [Drag Entity Element to Follow](demo#drag-entity-elements-to-follow) | -| dragFollowOption | `{appendToBody?: boolean}` | -- | Optional. It is used to control some configuration of entity dragging. | [Drag Entity Element to Follow](demo#drag-entity-elements-to-follow) | -| dragFollowOption.appendToBody | `boolean` | false | Optional. controls the position of the clone element to be inserted in entity dragging. The default value false is inserted at the end of all children of the source element's parent element, and the value true is attached to. See Note 1 | [Drag Entity Element to Follow](demo#drag-entity-elements-to-follow) | -| originPlaceholder | `{show?: boolean; tag?: string; style?: {cssProperties: string]: string}; text?: string; removeDelay?: number;}` | -- | Optional. Sets the Source Placeholder for the original position of the dragged element. | [Source Placeholder](demo#source-placeholder) | -| originPlaceholder.show | `boolean` | true | Optional. It indicates whether to display the Source Placeholder. By default, the Source Placeholder is displayed if there is an input. You can disable the Source Placeholder in special cases. | -| originPlaceholder.tag | `string` | 'div' | Optional. Whether to display originPlaceholder. By default, originPlaceholder is displayed if there is an input. This parameter can be disabled in special cases. | -| originPlaceholder.style | `Object` | -- | Optional. The style object is transferred. The key indicates the style attribute, and the value indicates the style value. | [Source Placeholder](demo#source-placeholder) | -| originPlaceholder.text | `string` | -- | Optional. text in placeholder | [Source Placeholder](demo#source-placeholder) | -| originPlaceholder.removeDelay | `number` | -- | Optional. It is used to delete the Source Placeholder in the delay after dragging to facilitate animation. The unit is ms. | [Source Placeholder](demo#source-placeholder) | -| dragIdentity | `any` | -- | Optional. This parameter is used to restore virtual scrolling. During virtual scrolling, the element is deleted (overflow) and then regenerated to restore the element (back to the image). A unique identifier is required to restore the original event drag event listening and Source Placeholder. | -| dragItemParentName | `string` | -- | Optional. Selector name. This parameter is used with dragItemChildrenName to truncate invisible elements in the list to improve performance, query elements matching dragItemChildrenName from the selector matching dragItemParentName. Generally, search for items in the list and delete items beyond the visible scope when cloning. | None | -| dragItemChildrenName | `string` | -- | Optional. Selector name, used with dragItemParentName to drag and truncate the invisible elements in the list to improve performance, see the description of dragItemParentName for the function. | None. | - -Note 1: AppendToBody of dragFollowOptions is used as follows: If the parent object in the source position is destroyed after dragFollowOptions is dragged away, the clone must be attached to the body to prevent it from being destroyed. By default, the style of the entity to be cloned is copied to ensure that the style of the entity to be cloned is correct. However, some styles and attributes that depend on the DOM node location may fail. You need to manually adjust some styles. - -### dDraggable Event - -| Event | Type | Description | Jump to Demo | -| :------------- | :------------------------ | :---------------------------------------- | :------------------------------ | -| dragStartEvent | `EventEmitter` | DragStart event that starts to be dragged | [Basic Usage](demo#basic-usage) | -| dragEndEvent | `EventEmitter` | DragEnd event for ending dragging | [Basic Usage](demo#basic-usage) | -| dropEndEvent | `EventEmitter` | Drop event when the placement ends | [Basic Usage](demo#basic-usage) | - -Drag DOM Events Details: [DragEvent](https://developer.mozilla.org/en-US/docs/Web/API/DragEvent) - -### batchDrag Additional Instructions - -Usage: dDraggable batchDrag - -#### dDraggable batchDrag Attribute - -| Name | Type | Default value | Description | Jump to Demo | -| :---------------------------------- | :------------------------ | :---------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------- | -| batchDragGroup | `string` | 'default' | Optional. This parameter indicates the name of a group in which a group is dragged in batches. The group name varies according to the group name. | -| batchDragActive | `boolean` | false | Optional. indicates whether to add elements to the batch dragging group. For details, see Note 1. | [Batch dragging](demo#batch-drag-and-drop) | -| batchDragLastOneAutoActiveEventKeys | `Array` | ['ctrlKey'] | Optional. You can activate the judgment of drag events selected in batches by dragging. See Note 2. | -| batchDragStyle | `Array` | ['badge','stack'] | Optional. This parameter indicates the effect of dragging data in batches. Badge indicates that statistics are displayed in the upper right corner, and stack indicates that stacking is displayed. This parameter is valid only when the string exists in the array. | [Batch dragging](demo#batch-drag-and-drop) | - -Note 1: When `batchDragActive` is set to `true`, elements are added to the group in the sequence of changing to true. The elements added first are in front of the array. The first element confirms the names of the groups to be added in batches. If the name of the group to be added later is different from that of the group to be added earlier, the group cannot be added later. -Note 2: The default value of `batchDragLastOneAutoActiveEventKeys` is ['ctrlKey']. That is, you can hold down Ctrl and drag the last element. The element is automatically added to the group to be dragged in batches. The judgment condition is that the ctrlKey event in the dragStart event is true. Currently, only true or false is supported. This parameter is an array. This parameter is valid only when any attribute value is true and can be used for key declarations in different operating systems. - -#### dDraggable batchDrag Event - -| Name | Type | Description | Jump to Demo | -| :------------------- | :--------------------------------------- | :------------------------------------------------------------------------------------------------------------------ | :----------------------------------------- | -| batchDragActiveEvent | `EventEmitter<{el: Element, data: any}>` | Adds an element to a batch dragging group through dragging and instructs the external system to select the element. | [Batch dragging](demo#batch-drag-and-drop) | - -## dDropable Instruction - -### dDroppable Parameter - -| Parameter | Type | Default Value | Description | Jump to Demo | -| :-------------------------- | :--------------------------------------------- | :------------------------------------------ | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------ | -| dropScope | `string \| Array` | 'default' | Optional. restricting the drop area, corresponding to dragScope. | [Basic Usage](demo#basic-usage) | -| dragOverClass | `string` | -- | Optional. CSS applied on the drop element during dragover | -| placeholderStyle | `Object` | {backgroundColor: '#6A98E3', opacity: '.4'} | Optional. It is used for placeholder display when sort is allowed. | [Source Placeholder](demo#source-placeholder) | -| placeholderText | `string` | '' | Optional. This parameter is used to display internal text when sorting is allowed. | -| allowDropOnItem | `boolean` | false | Optional. When sorting is allowed, this parameter can be dragged to an element so that the tree structure can be dragged as a subnode of an element. | [Multi-layer tree dragging](demo#multi-level-tree-drag) | -| dragOverItemClass | `string` | -- | Optional. This parameter is valid only when `allowDropOnItem` is set to `true` and is used to add styles to hit elements after dragging to elements. | [Multi-layer tree dragging](demo#multi-level-tree-drag) | -| nestingTargetRect | `{height?: number, width?: number}` | -- | Optional. It is used to increase the height of the parent item after the embedded list is corrected. Here, height and width are the height of the parent item (for dragging vertically) and width (for dragging horizontally) | [Multi-layer tree dragging](demo#multi-level-tree-drag) | -| defaultDropPosition | `'closest' \| 'before' \| 'after'` | `'closest'` | Optional. Sets the position where a device can be dragged to a place that is not in the list area, `closest'` indicates the nearest place, `before'` indicates the place to be added to the list header, and `after'` indicates the place to be added to the list tail. | [External Placement Position](demo#external-location) | -| dropSortCountSelector | `string` | -- | Optional. This parameter specifies the name of the selector for counting content in the case of sortable containers. It can be used to filter out elements that should not be counted. | -| dropSortVirtualScrollOption | `{totalLength?: number; startIndex?: number;}` | -- | Optional. It is used to return a correct dropIndex in the virtual scrolling list. The value of totalLength is the actual total length of the list, and the value of startIndex is the index value of the first dom displayed in the current sorting area in the list. | - -### dDroppable Event - -| Event | Type | Description | Jump to Demo | -| :------------- | :---------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------- | :------------------------------ | -| dragEnterEvent | `EventEmitter` | dragenter event entered by the drag element | [Basic Usage](demo#basic-usage) | -| dragOverEvent | `EventEmitter` | The dragover event of the drag element on the drop area | [Basic Usage](demo#basic-usage) | -| dragLeaveEvent | `EventEmitter` | dragleave event when the drag element leaves | [Basic Usage](demo#basic-usage) | -| dropEvent | `EventEmitter`(See definition below) | Place an element and receive the event, where nativeEvent represents the native drop event, see definition notes for others | [Basic Usage](demo#basic-usage) | - -### DropEventModel Definition - -```typescript -type DropEvent = { -nativeEvent: any; // Native drop event -dragData: any; // dragData of the drag element -dropSubject: Subject; //Subject of the drop event -dropIndex?: number; // The drop position is in the index of the list. -dragFromIndex?: number; // Index of the drag element in the original list. The virtual scrolling data is invalid. -dropOnItem?: boolean; // Indicates whether to drop the element. This parameter is used with allowDropOnItem. -``` - -## dSortable instruction - -Specifies the parent Dom container that needs to be sorted. (The drop parameter specifies only the dragable area, and the rendering is controlled by the user.) - -### dSortable Parameter - -| Name | Type | Default value | Description | Jump to Demo | -| :------------- | :--------- | :------------ | :------------------------------------- | :----------- | -| dSortDirection | `v'\| 'h'` | 'v' | 'v' vertical sort, 'h' horizontal sort | -| dSortableZMode | `boolean` | false | is in Z mode. For details, see Note 1. | - -Note 1: Z is used to sort data based on the larger direction. If a line break occurs at the end of a row from left to right, use the vertical sorting +z mode because only partial data is from left to right. - -### dDropScrollEnhanced Parameter - -| Name | Type | Default value | Description | Jump to Demo | -| :----------------- | :---------------------------------------------------------------------------------------------- | :---------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------- | -| direction | [`DropScrollDirection`](#dropscrolldirection), that is, `'v'\|'h'` | 'v' | scrolling direction. Vertical scrolling `'v'` and horizontal scrolling `'h'` | [Drag and scroll container enhancement](demo#drag-and-roll-container-enhancement) | -| responseEdgeWidth | `string \| ((total: number) => string)` | '100px' | Edge width of the response to automatic scrolling. The value of this parameter is the relative width of the list container in the same direction. | [Drag and scroll container enhancement](demo#drag-and-roll-container-enhancement) | -| speedFn | [`DropScrollSpeedFunction`](#dropscrolldirection) | built-in function | Rate function. For details, see Remarks. | -| minSpeed | `DropScrollSpeed` indicates `number` | 50 | Minimum response speed. If the value is less than the value, the minimum response speed prevails. | -| maxSpeed | `DropScrollSpeed` indicates `number` | 1000 | Maximum response speed. If the value is greater than this value, the maximum response speed prevails. | -| viewOffset | {forward?: [`DropScrollAreaOffset`](#dropscrollareaOffset); backward?: `DropScrollAreaOffset`;} | -- | Sets the offset of the dragged area, which is used to correct some positions. | -| dropScrollScope | `string\| Array` | -- | allows scrolling. If this parameter is not configured, all scopes are received by default. If this parameter is configured, scrolling can be triggered only when `dragScope` and `dropScrollScope` of dragable match. | [Drag and scroll container enhancement](demo#drag-and-roll-container-enhancement) | -| backSpaceDroppable | `boolean` | true | : whether to trigger elements that can be placed under the scroll panel. The default value is true. If the value is false, elements cannot be placed while scrolling. | - -Note: The default speedFn function is `(x: number) => Math.ceil((1 - x) * 18) * 100`. The input digit `x` indicates the percentage of the distance between the mouse position and the edge to the full response width, -The final speed will be speedFn(x), but will not be less than the minimum speed `minSpeed` or greater than the maximum speed `maxSpeed`. -Definition of related types: - -#### DropScrollDirection - -```typescript -export type DropScrollDirection = 'h' | 'v'; -``` - -#### DropScrollSpeed - -```typescript -export type DropScrollEdgeDistancePercent = number; // unit: 1 -export type DropScrollSpeed = number; // Unit: px/s -export type DropScrollSpeedFunction = (x: DropScrollEdgeDistancePercent) => DropScrollSpeed; -``` - -#### DropScrollAreaOffset - -```typescript -export type DropScrollAreaOffset = { - left?: number; - right?: number; - top?: number; - bottom?: number; - widthOffset?: number; - heightOffset?: number; -}; - -export enum DropScrollOrientation { - forward, // Forward, right/bottom - backward, // Backward, left/up -} -export type DropScrollTriggerEdge = 'left' | 'right' | 'top' | 'bottom'; -``` - -`DropScrollAreaOffset` is valid only for the major and minor positioning edges. forward indicates scrolling to the right or downward, and backward indicates scrolling to the left or upward. - -| direction | `v` Scroll up or down | `h` Scroll right or left | -| :------------------------------ | :-------------------- | :----------------------- | -| forward Down or right | `left` ,`bottom` | `top` ,`right` | -| backward to the left or network | `left`,`top` | `top`,`left` | - -### dDropScrollEnhancedSide Subsidiary Instructions - -If scroll bars are required in both directions, you need to use both dDropScrollEnhanced and dDropScrollEnhancedSide. The parameter list is the same as that of the dDropScrollEnhanced command. The only difference is direction, if `v'`, the actual direction of the side subsidiary directive is `'h'`. - -| Name | Type | Default value | Description | -| :----------------- | :--------------------------------------------------------------------- | :---------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| direction | `DropScrollSpeed`, that is, `v'\|'h'` | 'v' | Scrolling direction, vertical scrolling `'v'`, horizontal scrolling `'h'` | -| responseEdgeWidth | `string \| ((total: number) => string)` | '100px' | Edge width of the response to automatic scrolling. The value is the relative width of the list container in the same direction. | -| speedFn | `DropScrollSpeedFunction` | built-in function | Rate function. For details, see Remarks. | -| minSpeed | `DropScrollSpeed` indicates `number` | 50 | Minimum response speed. If the value is less than the value, the minimum response speed prevails. | -| maxSpeed | `DropScrollSpeed` indicates `number` | 1000 | Maximum response speed. If the value is greater than this value, the maximum response speed prevails. | -| viewOffset | {forward?: `DropScrollAreaOffset`; backward?: `DropScrollAreaOffset`;} | -- | Sets the offset of the dragged area, which is used to correct certain positions. | -| dropScrollScope | `string\| Array` | -- | allows the scrolling scope to be triggered. If this parameter is not configured, all scopes are received by default. If this parameter is configured, the scrolling scope can be triggered only when `dragScope` and `dropScrollScope` of dragable match. | -| backSpaceDroppable | `boolean` | true | whether to trigger elements that can be placed under the scroll panel. The default value is true. If the value is false, elements cannot be placed while scrolling. | - -## Using the `dDraggable` & `dDroppable` Directive - -```html -
      -
    • Coffee
      • -
    • Tea
      • -
    • Milk
      • -
    -``` - -```html -
    -

    Drop items here

    -
    -``` - -## CSS - -The `dDraggable` & `dDroppable` instruction has `[dragOverClass]` as the input. -Hover styles for drag and drop are provided. Note that the value is `string'. - -```html -
    -

    Drop items here

    -
    -``` - -## Restrict the Drop area. - -Use [dragScope] and [dropScope] to restrict the drag area. The drag area can be a string or an array. Only the drag area and drop area can be placed. - -```html -
      -
    • Coffee
      • -
    • Tea
      • -
    • Biryani
      • -
    • Kebab
      • - ... -
    -``` - -```html -
    -

    Only Drinks can be placed in this container.

    -
    -
    -

    Meal and Drinks can be placed in this container.

    -
    -``` - -## Transfer data. - -`dDraggable` can use [dragData] to transfer data to `droppable` -`dDropable` uses the `(dropEvent)` event to receive data. - -```html -
      -
    • {{item.name}}
      • -
    -
    -
    Drop Items here
    -
    -
  • {{item.name}}
    • -
    -
    -``` - -```typescript -export class Component { - items = [ - { name: 'Apple', type: 'fruit' }, - { name: 'Carrot', type: 'vegetable' }, - { name: 'Orange', type: 'fruit' }, - ]; - onItemDrop(e: any) { - // Get the dropped data here - this.droppedItems.push(e.dragData); - } - constructor() {} -} -``` - -## Drag Handle - -The drag handle can specify the element that actually responds to the dragable event, not the dragable itself. -This parameter must be a string, and is actually a css selector. - -```html -
  • - Only .drag-handle can respond to drag events to drag li. -
    -
    • -``` - -## Asynchronous DropEnd, notifying the Drag element - -The `dDraggable` event has a `dropEndEvent` event, which is not a default event of the browser but a user-defined event. The non-component automatic triggering mode is that the `dropEvent` event of the `dDropgable` contains a dropSubject, when the dropEndEvent event on the drag element needs to be triggered, call dropSubject.next(params) after the interface returns. For example: - -```html -
      -
    • {{item.name}}
      • -
    -
    -
    Drop Items here
    -
    -
  • {{item.name}}
    • -
    -
    -``` - -```js -export class Component { - onItemDrop(e: any) { - ajax.onSuccess(() => { - e.dropSubject.next(params); //The dropEnd of dragComponent is triggered and params corresponds to $event of onDropEnd. - }); - } - constructor() {} -} -export class dragComponent { - onDropEnd($event, i) {} -} -``` - -# Collaborative dragging, used in two-dimensional dragging and cross-dimension dragging scenarios - -## Collaborative drag dDragSync - -Used for dDraggle objects and objects that can be dragged at the same time. - -### dDragSync Parameter - -| Parameter | Type | Default Value | Description | Jump to Demo | -| :-------- | :------- | :------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------- | -| dDragSync | `string` | '' | Mandatory, Name of the group to be synchronized. This parameter is invalid when the parameter is left blank or an empty string and is not synchronized with other content. | [Two-dimensional drag and preview](demo#2D-drag-and-drop-preview) | - -## Collaborative distribution dDropSortSync - -Used for the dDropable object and the sortable area with the same structure as the sortable area in the dropable object. Note that dDropSortSync is registered on the same object as the dDropable object, the AND without dDropable is placed in the sorting area. - -### dDropSortSync Parameter - -| Parameter | Type | Default Value | Description | Jump to Demo | -| :----------------- | :-------- | :------------ | :------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------- | -| dDropSortSync | `string` | '' | Mandatory, Name of the group to be synchronized. This parameter is invalid when the value is empty or an empty string. The value | [Two-dimensional drag and preview](demo#2D-drag-and-drop-preview) | is not synchronized to other content. | -| dDropSyncDirection | `v'\|'h'` | 'v' | Optional. orthogonal to the direction of dSortable | - -## Collaborative listening box dDragDropSyncBox - -Used to collect statistics on the common parent ancestors of dDragSync and dDropSortSync. -No parameter is available. You can place the parameter in the public statistical area. - -# Drag and preview, which is used in the scenario where drag and preview need to be replaced. - -## Drag and preview dDragPreview - -This parameter is used together with dDraggable to drag an object template. - -### dDragPreview Parameter - -| Parameter | Type | Default Value | Description | Jump to Demo | -| :---------------------------------- | :---------------------------- | :------------ | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------- | -| dDragPreview | `TemplateRef` | -- | Required. The preview profile references | [Two-dimensional drag and preview](demo#2D-drag-and-drop-preview) | -| dragPreviewData | `any` | -- | Optional. Customized data, which is obtained from template variables. | -| dragPreviewOptions | `{skipBatchPreview: boolean}` | -- | Optional. preview option | -| dragPreviewOptions.skipBatchPreview | `boolean` | false | Optional. preview option, whether to skip the batch preview style processing. It is recommended that you can skip the batch drag and drop preview template by yourself. | - -### Available variables in the dDragPreview template - -| Variable | Type | Variable Description | -| :-----------------: | :------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------: | -| data | `any` | dragPreviewData data transferred from drag preview | -| draggedEl | `HTMLElement` | Dragged DOM element | -| dragData | `any` | DragData carried by the drag element | -| batchDragData | `Array` | An array of dragData data of the objects being dragged in batches, including dragData of the dragged element, and dragData is in the first place. | -| dragSyncDOMElements | `Array` | DOM elements that are dragged collaboratively, excluding the DOM elements pointed to by draggedEl | - -## Dragging and previewing the auxiliary clone node - -You can restore the cloned object of the DOM from the node's reference as a preview. - -| Parameter | Type | Default Value | Description | Jump to Demo | -| :-------- | :------------ | :------------ | :--------------------------------------------------------------------- | :----------- | -| domRef | `HTMLElement` | -- | Mandatory, Otherwise meaningless, clone the DOM reference of the node. | -| copyStyle | `boolean` | true | Optional. whether to clone nodes in sequence when cloning nodes. | diff --git a/devui/dragdrop/dragdrop.tsx b/devui/dragdrop/dragdrop.tsx deleted file mode 100644 index a2e25f330aa6c7eed93b3cf3ad3f47f9aad7d431..0000000000000000000000000000000000000000 --- a/devui/dragdrop/dragdrop.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { defineComponent } from 'vue' - -export default defineComponent({ - name: 'd-dragdrop', - props: { - }, - setup(props, ctx) { - return () => { - return
    devui-dragdrop
    - } - } -}) \ No newline at end of file diff --git a/devui/drawer/demo/drawer-demo.tsx b/devui/drawer/demo/drawer-demo.tsx deleted file mode 100644 index 7df9498f8bca9e56d2ed02a0c5e35a18d7112da8..0000000000000000000000000000000000000000 --- a/devui/drawer/demo/drawer-demo.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { defineComponent } from 'vue' - -export default defineComponent({ - name: 'd-drawer-demo', - props: { - }, - setup(props, ctx) { - return () => { - return
    devui-drawer-demo
    - } - } -}) \ No newline at end of file diff --git a/devui/drawer/demo/drawer.route.ts b/devui/drawer/demo/drawer.route.ts deleted file mode 100644 index 2a7b3de733305a8f6ccda0933140c0ad8147eb32..0000000000000000000000000000000000000000 --- a/devui/drawer/demo/drawer.route.ts +++ /dev/null @@ -1,15 +0,0 @@ -import DrawerDemoComponent from './drawer-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: DrawerDemoComponent}, - { path: 'api', component: DevUIApiComponent, meta: { - 'zh-cn': ApiCn, - 'en-us': ApiEn - }} -] - -export default routes diff --git a/devui/drawer/doc/api-cn.md b/devui/drawer/doc/api-cn.md deleted file mode 100644 index d6879a339149cc95bcd5bb1aa94fdd40d680e614..0000000000000000000000000000000000000000 --- a/devui/drawer/doc/api-cn.md +++ /dev/null @@ -1,82 +0,0 @@ -# 如何使用 - -在 module 中引入： - -```ts -import { DrawerModule } from 'ng-devui/drawer'; -``` - -在页面中使用： - -```html -click me! 通过openDrawer函数中调用drawerService.open()打开抽屉板 -``` - -**打开 Drawer 层**：drawerService.**open** ( ~ : **IDrawerOptions** ) : **IDrawerOpenResult** - -```ts -openDrawer() { - this.results = this.drawerService.open({ - drawerContentComponent: DrawerContentComponent, - width: '50%', - zIndex: 1000, - isCover: true, - fullScreen: true, - backdropCloseable: true, - escKeyCloseable: true, - position: 'left', - onClose: () => { - console.log('on drawer closed'); - }, - data: { - text: 'hello', - name: 'tom1' - } - }); - } -``` - -注意：传递给 API 中 drawerContentComponent 的组件需要在当前 Module 的\`declarations\`和\`entryComponents\`属性中注册。 - -# Drawer - -## IDrawerOptions 参数 - -| 属性 | 类型 | 默认 | 说明 | 跳转 Demo | -| :----------------------: | :-------------------------------------------: | :-----: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------: | ------------------------------------------------- | -| drawerContentComponent | `Type` | -- | 必要参数，传入自定义的 component | [基本用法](demo#basic-usage) | -| componentFactoryResolver | `ComponentFactoryResolver` | 内置 | 可选，一般不需要设置 | -| injector | `Injector` | -- | 可选，一般不需要设置 | -| width | `string` | '300px' | 可选，设置 drawer 的宽度 | [基本用法](demo#basic-usage) | -| zIndex | `number` | 1000 | 可选，设置 drawer 的 z-index 值 | [基本用法](demo#basic-usage) | -| isCover | `boolean` | true | 可选，是否有遮罩层 | [基本用法](demo#basic-usage) | -| data | `any` | -- | 可选，可以传入任意对象给 drawerContentComponent 使用 | [基本用法](demo#basic-usage) | -| backdropCloseable | `boolean` | true | 可选，设置可否通过点击背景来关闭 drawer 层 | [基本用法](demo#basic-usage) | -| escKeyCloseable | `boolean` | true | 可选，设置可否通过 esc 按键来关闭 drawer 层 | [基本用法](demo#basic-usage) | -| onClose | `Function` | -- | 可选，关闭 drawer 时候调用 | [基本用法](demo#basic-usage) | -| afterOpened | `Function` | -- | \可选，打开 drawer 后时候调用 | -| beforeHidden | `Function\|Promise\|()=> Observable` | -- | 可选, 关闭 drawer 前调用，返回 boolean 类型，返回 false 可以阻止关闭 drawer 层 | [基本用法](demo#basic-usage) | -| clickDoms | `array` | [] | 可选，isCover 为 false 的情况下，点击 Dom 关闭侧滑栏 | [关闭后不销毁](demo#do-not-destroy-after-closing) | -| destroyOnHide | `boolean` | true | 可选，关闭 drawer 时是否销毁 DrawerComponent，默认销毁 | [关闭后不销毁](demo#do-not-destroy-after-closing) | -| position | `string` | 'right' | 可选，抽屉板出现的位置，'left'或者'right' | [基本用法](demo#basic-usage) | -| bodyScrollable | `boolean` | true | 可选，drawer 打开后，body 是否可滚动，默认为可滚动,false 时隐藏滚动,隐藏滚动条可能会产生抖动，可以通过设置外层 fixed 来同时避免滚动与抖动,可参考 modal 的解决方案 | [解决抖动滚动问题](demo#template-fixed) | - -## IDrawerOpenResult 参数 - -| 属性 | 类型 | 说明 | 跳转 Demo | -| :-------------------: | :---------------: | :-------------------------------------------: | ---------------------------- | -| drawerInstance | `DrawerComponent` | 返回 Drawer 对象 | [基本用法](demo#basic-usage) | -| drawerContentInstance | `Type` | 返回 Drawer 的承载内容的对象，包括传入的 data | [基本用法](demo#basic-usage) | - -## drawerInstance API - -- **切换 drawer 的全屏状态**：drawerInstance.**toggleFullScreen**(): void - -- **设置 drawer 的全屏状态**：drawerInstance.**setFullScreen**(fullScreen: boolean): void - -- **触发打开 drawer 层**：drawerInstance.**show**(): void - -- **触发关闭 drawer 层**：drawerInstance.**hide**(): void， 该函数会先检查 beforeHidden，如果返回 true 才关闭 - -- **触发销毁 drawer 层**：drawerInstance.**destroy**(): void， destroyOnHide 为 false 且 drawer 层关闭时可以调用 destroy 方法销毁 -- **设置宽度**：drawerInstance.**setWidth**(width: string): void diff --git a/devui/drawer/doc/api-en.md b/devui/drawer/doc/api-en.md deleted file mode 100644 index 1e48bafe425cef5912b5fdb11e548eb6fb914814..0000000000000000000000000000000000000000 --- a/devui/drawer/doc/api-en.md +++ /dev/null @@ -1,79 +0,0 @@ -# How to use -Import into module: -```ts -import { DrawerModule } from 'ng-devui/drawer'; -``` - -In the page: -```html -click me! -Call drawerService.open() in the openDrawer function to open the drawer board. -``` -**Open the drawer layer**: drawerService.**open** (~: **IDrawerOptions**): **IDrawerOpenResult** - -```ts -openDrawer() { - this.results = this.drawerService.open({ - drawerContentComponent: DrawerContentComponent, - width: '50%', - zIndex: 1000, - isCover: true, - fullScreen: true, - backdropCloseable: true, - escKeyCloseable: true, - position: 'left', - onClose: () => { - console.log('on drawer closed'); - }, - data: { - text: 'hello', - name: 'tom1' - } - }); - } -``` -Note: Components passed to drawerContentComponent in the API need to be registered in the \`declarations\` and \`entryComponents\` properties of the current module. - -# Drawer - - -## IDrawerOptions Parameter - -| Attribute | Type | Default | Description | Jump to Demo | -| :----------------------: | :------------------------: | :------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------: | -------------------------------------------------------------------- | -| drawerContentComponent | `Type` | -- | Required. The user-defined component is transferred. | [Basic Usage](demo#basic-usage) | -| componentFactoryResolver | `ComponentFactoryResolver` | Built-in | Optional. Generally this parameter is not required. | -| injector | `Injector` | -- | Optional. You do not need to set this parameter. | -| width | `string` | '300px' | Optional. Sets the width of the drawer. | [Basic Usage](demo#basic-usage) | -| zIndex | `number` | 1000 | Optional. Sets the z-index value of the drawer. | [Basic Usage](demo#basic-usage) | -| isCover | `boolean` | true | Optional. Indicating whether a mask is available. | [Basic Usage](demo#basic-usage) | -| data | `any` | -- | Optional. Any object can be transferred for the drawerContentComponent. | [Basic Usage](demo#basic-usage) | -| backdropCloseable | `boolean` | true | Optional. Specifies whether to close the drawer layer by clicking the background. | [Basic Usage](demo#basic-usage) | -| escKeyCloseable | `boolean` | true | Optional. Sets whether the drawer layer can be closed by pressing the esc key. | [Basic Usage](demo#basic-usage) | -| onClose | `Function` | -- | Optional. This command is invoked when the drawer is disabled. | [Basic Usage](demo#basic-usage) | -| afterOpened | `Function` | -- | This command is optional. It is invoked when the drawer is opened. | -| beforeHidden | `Function\|Promise\|()=> Observable` | -- | Optional. This API is invoked before the drawer is disabled. The value of the boolean type is returned. The value false can prevent the drawer layer from being disabled. | [basic usage](demo#basic-usage) | -| clickDoms | `array` | [] | Optional. When isCover is set to false, click Dom to close the side slide bar. | [Do not destroy after being closed](demo#do-not-destroy-after-closing) | -| destroyOnHide | `boolean` | true | Optional. Whether to destroy the drawer component when the drawer is disabled. The default value is yes. | [Do not destroy after being closed](demo#do-not-destroy-after-closing) | -| position | `string` | 'right' | Optional. The value can be left or right. | [Basic Usage](demo#basic-usage) | -| bodyScrollable | `boolean` | true | Optional. Whether the body can be scrolled when the drawer opens. The default value is false. If the scroll bar is hidden, the scroll bar may jitter. You need to resolve the problem in the page layout. | - -## IDrawerOpenResult Parameter - -| Attribute | Type | Description | Jump to Demo | -| :-------------------: | :---------------: | :-------------------------------------------: | ----------------------------------------------- | -| drawerInstance | `DrawerComponent` | Returns a Drawer object. | [Basic Usage](demo#basic-usage) | -| drawerContentInstance | `Type` | Returns the object that carries the content of the Drawer, including the incoming data. | [Basic Usage](demo#basic-usage) | - -## drawerInstance API - -- **Switch the full screen status of the drawer**: drawerInstance.**toggleFullScreen**(): void - -- **Set the full-screen status of the drawer**: drawerInstance.**setFullScreen**(fullScreen: boolean): void - -- **Trigger opening of the drawer layer**:drawerInstance.**show**(): void - -- **Trigger the drawer layer to be disabled**: drawerInstance.**hide**(): void. This function checks beforeHidden first. If true is returned, the function is disabled. - -- **Trigger the destruction of the drawer layer**: drawerInstance.**destroy**(): void. When destroyOnHide is set to false and the drawer layer is disabled, the destroy method can be invoked to destroy the drawer layer. -- **Set the width**: drawerInstance.**setWidth**(width: string): void diff --git a/devui/drawer/drawer.tsx b/devui/drawer/drawer.tsx deleted file mode 100644 index ad2892bc439c0f65d3d7dd03884bdeaf0ec96080..0000000000000000000000000000000000000000 --- a/devui/drawer/drawer.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { defineComponent } from 'vue' - -export default defineComponent({ - name: 'd-drawer', - props: { - }, - setup(props, ctx) { - return () => { - return
    devui-drawer
    - } - } -}) \ No newline at end of file diff --git a/devui/dropdown/demo/dropdown-demo.tsx b/devui/dropdown/demo/dropdown-demo.tsx deleted file mode 100644 index e4139fe985e0796e05f6168ff796d996d61a91c9..0000000000000000000000000000000000000000 --- a/devui/dropdown/demo/dropdown-demo.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { defineComponent } from 'vue' - -export default defineComponent({ - name: 'd-dropdown-demo', - props: { - }, - setup(props, ctx) { - return () => { - return
    devui-dropdown-demo
    - } - } -}) \ No newline at end of file diff --git a/devui/dropdown/demo/dropdown.route.ts b/devui/dropdown/demo/dropdown.route.ts deleted file mode 100644 index 8e55c740a86e6b2b50b2e50bdc7cc7a35e900984..0000000000000000000000000000000000000000 --- a/devui/dropdown/demo/dropdown.route.ts +++ /dev/null @@ -1,15 +0,0 @@ -import DropdownDemoComponent from './dropdown-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: DropdownDemoComponent}, - { path: 'api', component: DevUIApiComponent, meta: { - 'zh-cn': ApiCn, - 'en-us': ApiEn - }} -] - -export default routes diff --git a/devui/dropdown/doc/api-cn.md b/devui/dropdown/doc/api-cn.md deleted file mode 100644 index eb8e23da3e277b3eae4504b7d7f716b686546aa9..0000000000000000000000000000000000000000 --- a/devui/dropdown/doc/api-cn.md +++ /dev/null @@ -1,118 +0,0 @@ -# 如何使用 - -在 module 中引入： - -```typescript -import { DragDropModule } from ' ng-devui/dragdrop'; -``` - -## dDropDown - -> 使用指定的本地变量 #dropdown="d-dropdown" - -### dDropDown 参数 - -| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | -| :-------------------: | :----------------------------: | :-----: | :-------------------------------------------------------------------------------------------------------------: | ------------------------------------------------------ | -| isOpen | `boolean` | false | 可选，可以显示指定 dropdown 是否打开 | [设置 isOpen 控制下拉](demo#dropdown-set-is-open) | -| disabled | `boolean` | false | 可选，设置为 true 禁用 dropdown | -| trigger | `'click'\|'hover'\|'manually'` | 'click' | 可选，dropdown 触发方式, click 为点击，hover 为悬停（也包含点击）、manually 为完全手动控制 | [悬浮下拉](demo#suspension-drop-down) | -| closeScope | `'all'\|'blank'\|'none'` | 'all' | 可选，点击关闭区域，blank 点击非菜单空白才关闭, all 点击菜单内外都关闭，none 菜单内外均不关闭仅下拉按键可以关闭 | [关闭触发点设置](demo#turn-off-trigger-point-settings) | -| closeOnMouseLeaveMenu | `boolean` | false | 可选，是否进入菜单后离开菜单的时候关闭菜单 | [多级下拉菜单](demo#multi-level-drop-down-menu) | - -### dDropDown 事件 - -| 事件 | 类型 | 说明 | 跳转 Demo | -| :---------: | :---------------------: | :--------------------------------------------------------------------: | ---------------------------- | -| toggleEvent | `EventEmitter` | dropdown 菜单展开和收起的布尔值，true 表示将要展开，false 表示将要关闭 | [基本用法](demo#basic-usage) | - -## appendToBody(dDropDown 附加指令组件) - -搭配 dDropDown 使用该指令后，dDropDownMenu 会被附加到 body，可以防止 dropdown 在滚动条内被遮挡。 - -| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | -| :--------------------: | :-------------------------------------------------------------------------------------------------------: | :----------------------------------------------: | :-------------------------------------: | ------------------------------------------------ | -| alignOrigin | `HTMLElement` | 可选，dDropDownToggle 所在对象 | 指定对齐的对象 | [设置展开位置处理](demo#when-using-appendtobody) | -| appendToBodyDirections | `Array<`[`AppendToBodyDirection`](#appendtobodydirection)`\|`[`ConnectedPosition`](#connectedposition)`>` | `['rightDown', 'leftDown', 'rightUp', 'leftUp']` | 可选， 方向数组优先采用数组里靠前的位置 | [设置展开位置处理](demo#when-using-appendtobody) | - -注意： 使用 appendToBody 后需要在有滚动条的地方使用`cdkScrollable` - -```terminal -npm install @angular/cdk --save -``` - -```TypeScript -import { ScrollDispatchModule } from '@angular/cdk/scrolling'; - -@NgModule({ - imports: [ - // ... - ScrollDispatchModule, - // ... - ] -}) -``` - -```html -
    - -
    -``` - -类型定义： - -### ConnectedPosition - -引用自`@angular/cdk/overlay` - -```typescript -export interface ConnectedPosition { - originX: 'start' | 'center' | 'end'; - originY: 'top' | 'center' | 'bottom'; - - overlayX: 'start' | 'center' | 'end'; - overlayY: 'top' | 'center' | 'bottom'; - - weight?: number; - offsetX?: number; - offsetY?: number; - panelClass?: string | string[]; -} -``` - -### AppendToBodyDirection - -```typescript -export type AppendToBodyDirection = 'rightDown' | 'rightUp' | 'leftUp' | 'leftDown' | 'centerDown' | 'centerUp'; -``` - -简化的几个基础的方向为名字 - -| 简化名 | 意义 | -| :--------: | :-------------------------------------------------------------------------: | -| rightDown | 相对于对齐对象显示在`右下`方向， 即左对齐，显示在下方（注意右下是左对齐的） | -| rightUp | 相对于对齐对象显示在`右上`方向， 即左对齐，显示在上方 | -| leftUp | 相对于对齐对象显示在`左上`方向， 即右对齐，显示在上方 | -| leftDown | 相对于对齐对象显示在`左下`方向， 即右对齐，显示在下方 | -| centerDown | 相对于对齐对象显示在`居中下`方向， 即居中对齐，显示在下方 | -| centerUp | 相对于对齐对象显示在`居中上`方向， 即居中对齐，显示在上方 | - -简化了 6 个方向的命名，其余方向可以通过 angular/cdk/overlay 的 ConnectedPosition 进行使用。 - -appendToBodyDirections 默认的显示顺序为 ['rightDown', 'leftDown', 'rightUp', 'leftUp']， -会尝试第一个位置，第一个位置放不下会尝试第二个位置，依此类推。 - -## dDropDownToggle - -用在菜单的控制对象上，参考 demo。 - -### dDropDownToggle 参数 - -| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | -| :-----------: | :-------: | :---: | :-------------------------------: | ----------------------------------------------------- | -| toggleOnFocus | `boolean` | false | 可选，通过 Tab 聚焦的时候自动展开 | [自动展开和自动聚焦](demo#auto-expand-and-auto-focus) | -| autoFocus | `boolean` | false | 可选，实例化后自动聚焦 | [自动展开和自动聚焦](demo#auto-expand-and-auto-focus) | - -## dDropDownMenu - -用在需要展开和关闭的菜单内容上，参考 demo。 diff --git a/devui/dropdown/doc/api-en.md b/devui/dropdown/doc/api-en.md deleted file mode 100644 index bba7c6ff8b0c3ed4eb844c622e833e0609c12cdc..0000000000000000000000000000000000000000 --- a/devui/dropdown/doc/api-en.md +++ /dev/null @@ -1,114 +0,0 @@ -# How to use - -Import into module: - -```typescript -import { DropDownModule } from ' ng-devui/dropdown'; -``` - -## dDropDown - -> Use the specified local variable #dropdown="d-dropdown" - -### dDropDown Parameter - -| Parameter | Type | Default | Description | Jump to Demo | -| :-------------------: | :---------------------------: | :-----: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | -------------------------------------------------------------------- | -| isOpen | `boolean` | false | Optional. It indicates whether dropdown is enabled. | [Control dropdown meanu with isOpen](demo#dropdown-set-is-open) | -| disabled | `boolean` | false | Optional. Set this parameter to true to disable dropdown. | -| trigger | `click'\|'hover'\|'manually'` | 'click' | Optional. Dropdown trigger mode. Click indicates click, hover indicates hover (including click), and manually indicates manual control. | [Hover dropdown](demo#suspension-drop-down) | -| closeScope | `'all'\|'blank'\|'none'` | 'all' | Optional. Click the blank area to close the blank area. Click all to close the blank area, the none menu can be closed either inside or outside. Only the drop-down button can be closed. | [Close Trigger Point Settings](demo#turn-off-trigger-point-settings) | -| closeOnMouseLeaveMenu | `boolean` | false | Optional. Whether to close the menu when you exit the menu after entering the menu | [Multi-level drop-down menu](demo#multi-level-drop-down-menu) | - -### dDropDown Event - -| Event | Type | Description | Jump to Demo | -| :---------: | :---------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------: | ------------------------------- | -| toggleEvent | `EventEmitter` | dropdown Boolean value for expanding or collapsed menus. true indicates that the menu is to be expanded and false indicates that the menu is to be disabled. | [Basic usage](demo#basic-usage) | - -## appendToBody (dDropDown additional instruction component) - -If this command is used together with dDropDown, dDropDownMenu is attached to the body to prevent dropdown from being blocked in the scroll bar. - -| Parameter | Type | Default | Description | Jump to Demo | -| :--------------------: | :-------------------------------------------------------------------------------------------------------: | :-----------------------------------------------: | :---------------------------------------------------------------------------------------: | --------------------------------------------------------------------- | -| alignOrigin | `HTMLElement` | dDropDownToggle Element | Optional. Specify the aligned object | [Set the expansion position processing](demo#when-using-appendtobody) | -| appendToBodyDirections | `Array<`[`AppendToBodyDirection`](#appendtobodydirection)`\|`[`ConnectedPosition`](#connectedposition)`>` | ` ['rightDown', 'leftDown', 'rightUp', 'leftUp']` | Optional. The direction array preferentially uses the position in the front of the array. | [Set the expansion position processing](demo#when-using-appendtobody) | - -Note: After appendToBody is used, use `cdkScrollable` where the scroll bar is available. - -```terminal -npm install @angular/cdk --save -``` - -```TypeScript -import {ScrollDispatchModule} from '@angular/cdk/scrolling'; -@NgModule({ -imports: [ -//... -ScrollDispatchModule, -//... -] -}) -``` - -```html -
    - -
    -``` - -Type Definition: - -### ConnectedPosition - -Quoted from `@angular/cdk/overlay` - -```TypeScript -export interface ConnectedPosition { -originX: 'start' | 'center' | 'end'; -originY: 'top' | 'center' | 'bottom'; -overlayX: 'start' | 'center' | 'end'; -overlayY: 'top' | 'center' | 'bottom'; -weight?: number; -offsetX?: number; -offsetY?: number; -panelClass?: string | string[]; -} -``` - -### AppendToBodyDirection - -```typescript -export type AppendToBodyDirection = 'rightDown' | 'rightUp' | 'leftUp' | 'leftDown' | 'centerDown' | 'centerUp'; -``` - -Simplify several basic directions for the name. - -| Simplified name | Meaning | -| :-------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------: | -| rightDown | Display in the lower right direction relative to the aligned object, that is, the object is left aligned. (Note that the lower right is left aligned.) | -| rightUp | Display in the upper right direction relative to the aligned object. That is, the object is left aligned and displayed at the top. | -| leftUp | Display in the `leftUp` direction relative to the aligned object, that is, right-aligned and displayed above. | -| leftDown | Display in the `left bottom` direction relative to the aligned object, that is, right-aligned and displayed below. | -| centerDown | Display in the `center-bottom` direction relative to the aligned object. That is, the object is center-aligned and displayed below. | -| centerUp | Display in the `center-up` direction relative to the aligned object, that is, display in the center-aligned direction. | - -The naming of six directions is simplified. Other directions can be used by using the ConnectedPosition of angular/cdk/overlay. -appendToBodyDirections: The default display sequence is ['rightDown','leftDown','rightUp','leftUp']. -Try the first position, try the second position, and so on. - -## dDropDownToggle - -Used for menu control objects. For details, see demo. - -### dDropDownToggle Parameter - -| Parameter | Type | Default | Description | Jump to Demo | -| :-----------: | :-------: | :-----: | :-------------------------------------------------------: | -------------------------------------------------------------------- | -| toggleOnFocus | `boolean` | false | Optional. Automatically expands when you focus on the tab | [Auto Expand and Auto Focus](demo#auto-expand-and-auto-focus) | -| autoFocus | `boolean` | false | Optional. Automatic focus after instantiation | [Automatic expansion and autofocus](demo#auto-expand-and-auto-focus) | - -## dDropDownMenu - -Used to expand and close menus. For details, see the demo. diff --git a/devui/dropdown/dropdown.tsx b/devui/dropdown/dropdown.tsx deleted file mode 100644 index 8feb8bd1f4bdcef0fa7d4aee6d854796f158c14b..0000000000000000000000000000000000000000 --- a/devui/dropdown/dropdown.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { defineComponent } from 'vue' - -export default defineComponent({ - name: 'd-dropdown', - props: { - }, - setup(props, ctx) { - return () => { - return
    devui-dropdown
    - } - } -}) \ No newline at end of file diff --git a/devui/editable-select/demo/editable-select-demo.tsx b/devui/editable-select/demo/editable-select-demo.tsx deleted file mode 100644 index 227f7f002e2384ed0b68832cc264ad2887ab1d3a..0000000000000000000000000000000000000000 --- a/devui/editable-select/demo/editable-select-demo.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { defineComponent } from 'vue' - -export default defineComponent({ - name: 'd-editable-select-demo', - props: { - }, - setup(props, ctx) { - return () => { - return
    devui-editable-select-demo
    - } - } -}) \ No newline at end of file diff --git a/devui/editable-select/demo/editable-select.route.ts b/devui/editable-select/demo/editable-select.route.ts deleted file mode 100644 index 91469c39774b77e75551f82580b301fcbd092908..0000000000000000000000000000000000000000 --- a/devui/editable-select/demo/editable-select.route.ts +++ /dev/null @@ -1,15 +0,0 @@ -import EditableSelectDemoComponent from './editable-select-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: EditableSelectDemoComponent}, - { path: 'api', component: DevUIApiComponent, meta: { - 'zh-cn': ApiCn, - 'en-us': ApiEn - }} -] - -export default routes diff --git a/devui/editable-select/doc/api-cn.md b/devui/editable-select/doc/api-cn.md deleted file mode 100644 index 266c13e1c728e3130ff390c450f1d8f643096c36..0000000000000000000000000000000000000000 --- a/devui/editable-select/doc/api-cn.md +++ /dev/null @@ -1,42 +0,0 @@ -# 如何使用 -在module中引入： -```ts -import { EditableSelectModule } from 'ng-devui/editable-select'; -``` -在页面中使用： -```html - -``` -# d-editable-select -## d-editable-select 参数 - -| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | -| :------------------: | :------------: | :---------------------------------: | :--------------------------------------------- | ------------------------------------------------------------------------- | -| appendToBody | `boolean` | false | 可选，下拉是否 appendToBody | [基本用法](demo#basic-usage) | -| width | `number` | -- | 可选，控制下拉框宽度，搭配 appendToBody 使用（`px`） | -| ngModel | `any` | -- | 可选，绑定选中对象，可双向绑定 | [基本用法](demo#basic-usage) | -| source | `Array` | -- | 必选，数据列表 | [基本用法](demo#basic-usage) | -| disabled | `boolean` | false | 可选，值为 true 禁用下拉框 | -| disabledKey | `string` | -- | 可选，设置禁用选项的 Key 值 | [设置禁用选项](demo#disable-data-with-source) | -| placeholder | `string` | '' | 可选，没有选中项的时候提示文字 | -| itemTemplate | `TemplateRef` | -- | 可选，下拉菜单条目的模板 | -| noResultItemTemplate | `TemplateRef` | -- | 可选，下拉菜单条目搜索后没有结果的模板 | -| maxHeight | `number` | -- | 可选，下拉菜单的最大高度（`px`） | [基本用法](demo#basic-usage) | -| searchFn | `(term: string) => Observable` | [`defaultSearchFn`](#defaultsearchfn) | 可选，自定义搜索函数 | [自定义匹配方法](demo#with-search-function) | -| enableLazyLoad | `boolean` | false | 可选，是否允许懒加载 | [数据懒加载](demo#lazy-load) | - -## d-editable-select 事件 - -| 事件 | 类型 | 说明 | 跳转 Demo | -| :------: | :-----------------: | :-----------------------------------------------------------------------------------------------------------------------------------: | -------------------------------------------------------- | -| loadMore | `EventEmitter>` | 懒加载触发事件，配合`enableLazyLoad`使用，使用`$event.loadFinish()`关闭 loading 状态，其中\$event 为 AutoCompletePopupComponent 的实例 | [数据懒加载](demo#lazy-load) | - -# 接口 & 类型定义 -### defaultSearchFn - -```ts -defaultSearchFn = (term) => { - return of(this.source.filter((lang) => this.formatter(lang).toLowerCase().indexOf(term.toLowerCase()) !== -1)); -}; -``` -term 为输入的关键字。 diff --git a/devui/editable-select/doc/api-en.md b/devui/editable-select/doc/api-en.md deleted file mode 100644 index 0e513fcc14f7e5447f4074357f3b1e65e21eb6cd..0000000000000000000000000000000000000000 --- a/devui/editable-select/doc/api-en.md +++ /dev/null @@ -1,42 +0,0 @@ -# How to use -Import into module -```ts -import { EditableSelectModule } from' ng-devui/editable-select'; -``` -On the page -```html - -``` -# d-editable-select -## d-editable-select parameter - -| Parameter | Type | Default | Description | Jump to Demo | -| :------------------: | :------------: | :---------------------------------: | :--------------------------------------------- | ------------------------------------------------------------------------- | -| appendToBody | `boolean` | false | Optional. Whether to appendToBody in the drop-down list box | [Basic usage](demo#basic-usage) | -| width | `number` | -- | Optional. Controls the width of the drop-down list box. This parameter is used with appendToBody (`px`) | -| ngModel | `any` | -- | Optional. Selected objects can be bound in both directions. | [Basic usage](demo#basic-usage) | -| source | `Array` | -- | Required. Data list | [Basic usage](demo#basic-usage) | -| disabled | `boolean` | false | Optional. The value true indicates that the drop-down list box is disabled. | -| disabledKey | `string` | -- | Optional. Sets the key value of the disabled option. | [Set disable options](demo#disable-data-with-source) | -| placeholder | `string` |'' | Optional. This field is displayed when no item is selected. | -| itemTemplate | `TemplateRef` | -- | Optional, Dropdown list item template | -| noResultItemTemplate | `TemplateRef` | -- | Optional. Template for which no result is found after the drop-down list item is searched. | -| maxHeight | `number` | -- | Optional. Maximum height of the drop-down list box (`px`) | [Basic usage](demo#basic-usage) | -| searchFn | `(term: string) => Observable` | [`defaultSearchFn`](#defaultsearchfn) | Optional. User-defined search function | [Customized data matching method](demo#with-search-function) | -| enableLazyLoad | `boolean` | false | Optional. Whether lazy loading is allowed | [Enable lazy load](demo#lazy-load) | - -## d-editable-select event - -| Event | Type | Description | Jump to Demo | -| :------: | :-----------------: | :-----------------------------------------------------------------------------------------------------------------------------------: | -------------------------------------------------------- | -| loadMore | `EventEmitter>` | lazy loading trigger event. This event is used together with `enableLazyLoad' to disable the loading status. \$event indicates the instance of AutoCompletePopupComponent | [Enable lazy load](demo#lazy-load) | - -# Interface & Type Definition -### defaultSearchFn - -```ts -defaultSearchFn = (term) => { -return of(this.source.filter((lang) => this.formatter(lang).toLowerCase().indexOf(term.toLowerCase()) !== -1)); -}; -``` -term indicates the entered keyword. diff --git a/devui/editable-select/editable-select.tsx b/devui/editable-select/editable-select.tsx deleted file mode 100644 index c7c03585a780d9e6ee2236a028b5e8981c482df1..0000000000000000000000000000000000000000 --- a/devui/editable-select/editable-select.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { defineComponent } from 'vue' - -export default defineComponent({ - name: 'd-editable-select', - props: { - }, - setup(props, ctx) { - return () => { - return
    devui-editable-select
    - } - } -}) \ No newline at end of file diff --git a/devui/form/demo/form-demo.tsx b/devui/form/demo/form-demo.tsx deleted file mode 100644 index a3a1b427060f8d43ef0cf757c051478b40fa3cac..0000000000000000000000000000000000000000 --- a/devui/form/demo/form-demo.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { defineComponent } from 'vue' - -export default defineComponent({ - name: 'd-form-demo', - props: { - }, - setup(props, ctx) { - return () => { - return
    devui-form-demo
    - } - } -}) \ No newline at end of file diff --git a/devui/form/demo/form.route.ts b/devui/form/demo/form.route.ts deleted file mode 100644 index e92a96e3b78a6bf7d95f6262c3b31ca1b62ae2ef..0000000000000000000000000000000000000000 --- a/devui/form/demo/form.route.ts +++ /dev/null @@ -1,15 +0,0 @@ -import FormDemoComponent from './form-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: FormDemoComponent}, - { path: 'api', component: DevUIApiComponent, meta: { - 'zh-cn': ApiCn, - 'en-us': ApiEn - }} -] - -export default routes diff --git a/devui/form/doc/api-cn.md b/devui/form/doc/api-cn.md deleted file mode 100644 index 0baf4b6ea16ea2c10b762bf7fdf6ca37a661b619..0000000000000000000000000000000000000000 --- a/devui/form/doc/api-cn.md +++ /dev/null @@ -1,283 +0,0 @@ -# 如何使用 - -在 module 中引入： - -```ts -import { FormModule } from 'ng-devui/form'; -``` - -如果你需使用到 NgForm，则引入： - -```ts -import { FormsModule } from '@angular/forms'; -``` - -在页面中使用： - -```html -
    - - ... - - - - - - - - ... - - - - - - - - - - - -
    - - - -``` - -# dForm - -## dForm 参数 - -| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | -| :-------: | :-----------------------------------: | :----------: | :------------------------------------------------------------------------- | -------------------------------------------- | -| layout | `'horizontal'\|'vertical'\|'columns'` | 'horizontal' | 可选，设置表单的排列方式 | [基本用法](demo#basic-usage) | -| labelSize | `'sm' \| '' \| 'lg'` | '' | 可选，设置 label 的占宽，未设置默认为 100px，'sm'对应 80px，'lg'对应 150px | [label 横向排列](demo#demo-label-horizontal) | -| labelAlign | `'start' \| 'center' \| 'end'` | 'start' | 可选，设置水平布局方式下，label对齐方式 | [label 横向排列](demo#demo-label-horizontal) | - -## dForm 事件 - -| 参数 | 类型 | 说明 | 跳转 Demo | -| :------: | :-----------------: | :-------------------------------------------------------------------------------------- | ---------------------------------------------- | -| dSubmit | `EventEmitter<{valid: boolean, directive: `[`DFormGroupRuleDirective`](#dformgroupruledirective) `\| AbstractControlDirective}, errors: {[key: string]: ValidationErrors}>` | 可选，使用dFormSubmit绑定元素触发提交时，响应事件 | [模板驱动表单验证（推荐）](demo#demo-validate-template) | - -# d-form-item - -## d-form-item 参数 - -| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | -| :----------: | :-------: | :---: | :------------------------------------------ | --------------------------------------------- | -| dHasFeedback | `boolean` | false | 可选，设置当前 formControl 是否显示反馈图标 | [响应式表单验证](demo#demo-validate-reactive) | - -# d-form-label - -## d-form-label 参数 - -| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | -| :------: | :-------: | :---: | :------------------------------------------------- | ---------------------------- | -| required | `boolean` | false | 可选，表单选项是否必填 | [基本用法](demo#basic-usage) | -| hasHelp | `boolean` | false | 可选，表单项是否需要帮助指引 | [基本用法](demo#basic-usage) | -| helpTips | `string` | '' | 可选，表单项帮助指引提示内容，需配合 `hasHelp`使用 | [基本用法](demo#basic-usage) | - -# d-form-control - -## d-form-control 参数 - -| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | -| :------------: | :-----------------------------------------: | :--: | :----------------------------------------- | -------------------------------------------- | -| extraInfo | `string \| TemplateRef` | -- | 可选，附件信息，一般用于补充表单选项的说明 | [label 横向排列](demo#demo-label-horizontal) | -| feedbackStatus | [`DFormControlStatus`](#dformcontrolstatus) | -- | 可选，手动指定当前 control 状态反馈 | [指定表单状态](demo#demo-custom-status) | -| suffixTemplate | `TemplateRef` | -- | 可选，可传入图标模板作为输入框后缀 | - -# dFormSubmit - -- 在`
    `（需绑定 dForm）中指定触发`submit`的元素。 -- 可设置触发事件（默认为'click'），如`dFormSubmit="dblclick"`，设置元素双击时触发`submit`。 - -## dFormSubmit 参数 - -| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | -| :-------------: | :------: | :-----: | :-------------------------------------------------------------------: | :-------------------------------------------: | -| dFormSubmit | `string` | 'click' | 可选，配置用于触发 submit 的事件名 | [响应式表单验证](demo#demo-validate-reactive) | -| dFormSubmitData | `any` | -- | 可选，配置需要传递与 dSubmit 回调事件数据，可用于需区分多个按钮的场景 | [响应式表单验证](demo#demo-validate-reactive) | - -# dFormReset - -- 在``（需绑定 dForm）中指定触发`reset`的元素。 -- 可设置触发事件（默认为'click'），如`dFormReset="dblclick"`，设置元素双击时触发`reset`。 - -## dFormReset 参数 - -| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | -| :--------: | :------: | :-----: | :--------------------------------: | :-------: | -| dFormReset | `string` | 'click' | 可选，配置用于触发 submit 的事件名 | | - -# dValidateRules 表单验证 - -## 定位 - -- DevUI 表单验证基于[Angular Form](https://angular.io/guide/forms-overview)，完全兼容响应式表单与模板驱动表单。旨在封装与简化表单校验逻辑，你只需配置简单规则，验证消息与验证状态管理全交由 DevUI Form 自动完成。 - -## 如何使用 - -- 当你使用了响应式表单或模板驱动表单（均需在你的模块中引入`Angular FormsModule`）: - -```ts -import { FormsModule } from '@angular/forms'; -``` - -- 在你的元素上绑定`dValidateRules`并传入你需要配置的规则即可（_虽在模板中可直接使用字面量传入规则，但考虑了变更检测，我们推荐你在组件控制器中声明规则再绑定到模板中_）。如： - -```html - -``` - -## dValidateRules 参数 - -| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | -| :------------: | :---------------------------------: | :--: | :--------------------: | :-----------------------------------------------------: | -| dValidateRules | [`DValidateRules`](#dvalidaterules) | -- | 必选，配置你的校验规则 | [模板驱动表单验证（推荐）](demo#demo-validate-template) | - -## dValidateSyncKey 参数 - -表单协同校验。 - -| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | -| :--------------: | :------: | :--: | :-----------------------------------------------------------------------------------------------------------: | :-------------------------------------: | -| dValidateSyncKey | `string` | -- | 必选，配置唯一标识 key，相同 key 表单元素将在其中一个元素值发生变更时，同时触发校验，支持响应式与模板驱动表单 | [表单协同验证](demo#demo-validate-sync) | - -# 接口 & 类型定义 - -### DFormControlStatus - -```ts -export type DFormControlStatus = 'error' | 'pending' | 'success'; -``` - -### DFormControlRuleDirective - -DFormControlRuleDirective 为表单元素对应 dValidateRules 指令对象，以下为指令 Class 名与 selector： - -```ts -@Directive({ - selector: '[dValidateRules][formControlName],[dValidateRules][ngModel],[dValidateRules][formControl]', - exportAs: 'dValidateRules' -}) -``` - -### DFormGroupRuleDirective - -DFormGroupRuleDirective 为表单容器对应 dValidateRules 指令对象，以下为指令 Class 名与 selector： - -```ts -@Directive({ - selector: `[dValidateRules][formGroupName],[dValidateRules][formArrayName],[dValidateRules][ngModelGroup], - [dValidateRules][formGroup],[dValidateRules]form:not([ngNoForm]),[dValidateRules][ngForm]`, - exportAs: 'dValidateRules' -}) -``` - -### DValidateRules - -```ts -export type DValidateRules = - | { - validators?: DValidateRule[]; // 同步校验规则 - - asyncValidators?: DAsyncValidateRule[]; // 异步校验规则 - - asyncDebounceTime?: number; // 异步校验器debounceTime（单位ms），默认为300 - - errorStrategy?: DValidationErrorStrategy; // error更新策略，默认为'dirty' - - message?: string; // 统一配置的message，如果你的某一条校验规则未配置message，将取统一message - - messageShowType?: 'popover' | 'text' | 'none'; // 消息自动显示策略（当前仅单个表单组件下生效），(popover | d-form-item容器内部显示 | 不显示) - - // 消息显示为popover时，设置popover的内容弹出方向，默认为['right', 'bottom'] - popPosition?: 'top' | 'right' | 'bottom' | 'left' | ('top' | 'right' | 'bottom' | 'left')[]; - } - | DValidateRule[]; // 若只需设置同步校验规则，可传同步校验规则数组 -``` - -### DValidateRule - -```TS -export interface DValidateRule { // 定义同步校验规则 - - id ?: string; // 当前rule id，唯一标识当前规则，表单消息机制将以此作为key - - validator ?: DValidatorFn | ValidatorFn; // 校验器，兼容Angular原生校验器（需要设置isNgValidator为true） - - message ?: string; // 校验不通过时返回的提示消息 - - errorStrategy ?: DValidationErrorStrategy; // 当前规则的error更新策略，默认为'dirty' - - priority ?: number; // 当前规则优先级，同时校验不通过，优先级高的规则消息将优先显示，默认为0 - - isNgValidator ?: boolean; // 标识当前校验器是否为Angular原生校验器 - - // 这是一个万能的匹配key，你可使用默认提供的校验器key，或者快捷设置你的自定义rule key（不与默认key&保留字冲突即被识别为你当前id） - [id: string]: boolean | number | string | RegExp | DValidatorFn | ValidatorFn; -} -``` - -### DAsyncValidateRule - -```TS -export interface DAsyncValidateRule { // 定义异步校验规则 - id ?: string; - validator ?: DAsyncValidatorFn | AsyncValidatorFn; - message ?: string; - errorStrategy ?: DValidationErrorStrategy; - priority ?: number; - isNgValidator ?: boolean; - [id: string]: boolean | number | string | RegExp | DAsyncValidatorFn | AsyncValidatorFn; -``` - -### DValidationErrorStrategy - -- pristine：有校验规则不通过即抛出错误 message，dirty：校验规则不通过且状态为 dirty 时抛出错误 message - -```TS -export type DValidationErrorStrategy = 'pristine' | 'dirty'; -``` - -### DValidatorFn - -- 定义 DevUI Form 同步校验器：返回 boolean 值则表示当前规则是否通过 -- 若返回 string|null，null 表示通过，若当前 rule 未设置 message，则返回的 string 将作为当前 rule message - -```TS -export type DValidatorFn = (value: any) => boolean | string | null; -``` - -### DAsyncValidatorFn - -- 定义 DevUI Form 异步校验器：与同步规则类似，不同为需要你的函数需要返回一个 Observable 对象 - -```TS -export type DAsyncValidatorFn = (value: any) => Observable; -``` - -### ruleReservedWords - -- 定义 DevUI Rule 规则的保留字，如果你的 key 不为保留字，则可作为你当前 rule id 使用（默认校验器 id 或自定义校验器 id） - -```TS -export const ruleReservedWords = ['id', 'validator', 'message', 'errorStrategy', 'priority', 'isNgValidator', 'popPosition', 'asyncDebounceTime']; -``` - -### dDefaultValidators - -```TS -export const dDefaultValidators = { - 'required': Validators.required, // 配置不能为空限制，rule中使用：{ required: true } - 'minlength': Validators.minlength, // 配置最小长度限制，rule中使用：{ minlength: 5 } - 'maxlength': Validators.maxlength, // 配置最大长度限制，rule中使用：{ maxlength: 128 } - 'min': Validators.min, // 配置最小值限制，rule中使用：{ min: 0 } - 'max': Validators.max, // 配置最大值限制，rule中使用：{ max: 100 } - 'requiredTrue': Validators.requiredTrue, // 配置需要为true，rule中使用：{ requiredTrue: true } - 'email': Validators.email, // 配置邮箱校验，rule中使用：{ email: true } - 'pattern': Validators.pattern, // 配置正则校验，rule中使用：{ pattern: RegExp } - 'whitespace': DValidators.whiteSpace, // 配置输入不能全为空格限制，rule中使用：{ whitespace: true } -}; -``` diff --git a/devui/form/doc/api-en.md b/devui/form/doc/api-en.md deleted file mode 100644 index b428206135af1ba6d7b2edc684d1016be3e82541..0000000000000000000000000000000000000000 --- a/devui/form/doc/api-en.md +++ /dev/null @@ -1,283 +0,0 @@ -# How to use - -Import into module - -```ts -import { FormModule } from 'ng-devui/form'; -``` - -If you need to use the NgForm, introduce the following - -```ts -import { Forms } from '@angular/forms'; -``` - -In the page - -```html - - - ... - - - - - - - - ... - - - - - - - - - - - - - - - -``` - -# dForm - -## dForm Parameter - -| Parameter | Type | Default | Description | Jump to Demo | -| :-------: | :-----------------------------------: | :----------: | :----------------------------------------------------------------------- | ------------------------------------------------------------- | -| layout | `'horizontal'\|'vertical'\|'columns'` | 'horizontal' | Optional. Sets the form arrangement mode. | [Basic usage](demo#basic-usage) | -| labelSize | `'sm' \| '' \| 'lg'` | '' | Optional. Sets the width of the label. If this parameter is not set, the default value is 100 px. 'sm' corresponds to 80 px, 'lg' corresponds to 150px | [Label horizontal arrangement](demo#demo-label-horizontal) | -| labelAlign | `'start'\|'center'\|'end'` | 'start' | Optional. This parameter specifies the label alignment mode in horizontal layout mode. | [label horizontal arrangement](demo#demo-label-horizontal) | - -## dForm Event - -| Parameter | Type | Description | Jump to Demo | -| :-------: | :------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | -| dSubmit | `EventEmitter<{valid: boolean, directive: `[`DFormGroupRuleDirective`](#dformgroupruledirective) `\| AbstractControlDirective}>` | Optional. This event is responded to when the dFormSubmit binding element is used to trigger submission. | [Template-driven form verification (recommended)](demo#demo-validate-template) | - -# d-form-item - -## d-form-item parameter - -| Parameter | Type | Default | Description | Jump to Demo | -| :----------: | :-------: | :-----: | :-------------------------------------------------------------------------------- | ------------------------------------------------------- | -| dHasFeedback | `boolean` | false | Optional. Sets whether to display the feedback icon for the current form control. | [Reactive form validation](demo#demo-validate-reactive) | - -# d-form-label - -## d-form-label parameter - -| Parameter | Type | Default | Description | Jump to Demo | -| :-------: | :-------: | :-----: | :--------------------------------------------------------- | ------------------------------- | -| required | `boolean` | false | Optional. Indicating whether the form option is mandatory. | [Basic usage](demo#basic-usage) | -| hasHelp | `boolean` | false | Optional. Indicating whether a form item requires help. | [Basic usage](demo#basic-usage) | -| helpTips | `string` | '' | Optional. This parameter is used together with `hasHelp`. | [Basic usage](demo#basic-usage) | - -# d-form-control - -## d-form-control parameters - -| Parameter | Type | Default | Description | Jump to Demo | -| :------------: | :-----------------------------------------: | :-----: | :---------------------------------------------------------------------------------------------- | ---------------------------------------------------------- | -| extraInfo | `string \| TemplateRef` | -- | Optional. attachment information, which is used to supplement the description of table options. | [Label horizontal arrangement](demo#demo-label-horizontal) | -| feedbackStatus | [`DFormControlStatus`](#dformcontrolstatus) | -- | Optional. Manually specify the current control status. | [Specify form status](demo#demo-custom-status) | -| suffixTemplate | `TemplateRef` | -- | Optional. Pass icon template to be the suffix of Input. | - -# dFormSubmit - -- Specify the element that triggers the `submit` in `
    ` (the dForm needs to be bound). -- You can set the trigger event (click by default), for example, `dFormSubmit="dblclick"`, to trigger `submit` when an element is double-clicked. - -## dFormSubmit Parameter - -| Parameter | Type | Default | Description | Jump to Demo | -| :-------------: | :------: | :-----: | :------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------: | -| dFormSubmit | `string` | 'click' | Optional. Configure the event name used to trigger submit. | [Reactive form validation](demo#demo-validate-reactive) | -| dFormSubmitData | `any` | -- | Optional. Configure the data that needs to be transferred and the dSubmit callback event, which can be used to distinguish multiple buttons. | [Reactive form validation](demo#demo-validate-reactive) | - -# dFormReset - -- Specify the element that triggers the `reset` in `` (the dForm needs to be bound). -- You can set the trigger event (click by default), for example, `dFormReset="dblclick"`, to trigger `reset` when an element is double-clicked. - -## dFormReset Parameter - -| Parameter | Type | Default | Description | Jump to Demo | -| :--------: | :------: | :-----: | :-------------------------------------------------------: | :----------: | -| dFormReset | `string` | 'click' | Optional. Configure the event name for triggering submit. | | - -# dValidateRules Form Validation - -## Locating - -- DevUI form verification is based on [Angular Form](https://angular.io/guide/forms-overview) and is fully compatible with responsive forms and template-driven forms. To encapsulate and simplify form validation logic, you only need to configure simple rules. Verification messages and verification status management are automatically completed by DevUI Form. - -## How to use - -- When you use a responsive form or a template-driven form (both include `Angular FormsModule` in your module): - -```ts -import { Forms } from '@angular/forms'; -``` - -- Bind `dValidateRules` to your element and pass in the rules to be configured. (\*Although you can directly use literals to pass in the template, considering change detection, it is recommended that you declare the rules in the component controller and then bind them to the template.) - -```html - -``` - -## dValidateRules Parameter - -| Parameter | Type | Default | Description | Jump to Demo | -| :------------: | :---------------------------------: | :-----: | :----------------------------------------: | :----------------------------------------------------------------------------: | -| dValidateRules | [`DValidateRules`](#dvalidaterules) | -- | Required. Configure the verification rule. | [Template-driven form verification (recommended)](demo#demo-validate-template) | - -## dValidateSyncKey Parameter - -Collaborative form validation. - -| Parameter | Type | Default | Description | Jump to Demo | -| :--------------: | :------: | :-----: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------: | -| dValidateSyncKey | `string` | -- | Required. This parameter is mandatory. It specifies the unique key. When the value of one element in the form of the same key changes, verification is triggered. responsive and template-driven forms are supported. | [Form collaboration verification](demo#demo-validate-sync) | - -# Interface & Type Definition - -### DFormControlStatus - -```ts -export type DFormControlStatus = 'error' | 'pending' | 'success'; -``` - -### DFormControlRuleDirective - -DFormControlRuleDirective is the dValidateRules instruction object corresponding to the form element. The class name and selector of the instruction are as follows: - -```ts -@Directive({ -selector:' [dValidateRules][formControlName],[dValidateRules][ngModel],[dValidateRules][formControl]', -exportAs: 'dValidateRules' -}) -``` - -### DFormGroupRuleDirective - -DFormGroupRuleDirective is the dValidateRules instruction object corresponding to the form container. The class name and selector of the instruction are as follows: - -```ts -@Directive({ -selector: `[dValidateRules][formGroupName],[dValidateRules][formArrayName],[dValidateRules][ngModelGroup], -[dValidateRules][formGroup],[dValidateRules]form:not([ngNoForm]),[dValidateRules][ngForm]`, -exportAs: 'dValidateRules' -}) -``` - -### DValidateRules - -```ts -export type DValidateRules = - | { - validators?: DValidateRule[]; // Synchronize verification rules. - - asyncValidators?: DAsyncValidateRule[]; // Asynchronous Verification Rule - - asyncDebounceTime?: number; // Asynchronous validator debounceTime (unit: ms). The default value is 300. - - errorStrategy?: DValidationErrorStrategy; // error update policy. The default value is'dirty'. - - message?: string; // Unified message. If no message is configured for a verification rule, the unified message is used. - - messageShowType?: 'popover' | 'text' | 'none'; // Automatic message display policy (currently, this policy takes effect only for a single form component). (displayed in the popover | d-form-item container | not displayed) - - // When the message is displayed as popover, set the popover content pop-up direction. The default value is ['right','bottom']. - popPosition?: 'top' | 'right' | 'bottom' | 'left' | ('top' | 'right' | 'bottom' | 'left')[]; - } - | DValidateRule[]; // If only the synchronization verification rule needs to be set, the synchronization verification rule array can be transferred. -``` - -### DValidateRule - -```TS -export interface DValidateRule {// Define a synchronization verification rule. - -id ? : string; // Current rule ID, which uniquely identifies the current rule. The form message mechanism uses this ID as the key. - -validator ?: DValidatorFn | ValidatorFn; // validator, which is compatible with the native Angular validator. (Set isNgValidator to true.) - -message ? : string; // Message returned when the verification fails. - -errorStrategy ?: DValidationErrorStrategy; // Error update policy of the current rule. The default value is'dirty'. - -priority ? : number; // Priority of the current rule. If the verification fails, the rule with a higher priority is displayed first. The default value is 0. - -isNgValidator ?: boolean; //: indicates whether the current validator is an Angular native validator. - -// This is an all-purpose matching key. You can use the default validator key or quickly set your customized rule key. (If the key does not conflict with the default key or reserved word, the system identifies the current ID.) -[id: string]: boolean | number | string | RegExp | DValidatorFn | ValidatorFn; -} -``` - -### DAsyncValidateRule - -```TS -export interface DAsyncValidateRule {// Define an asynchronous verification rule. -id ? : string; -validator ?: DAsyncValidatorFn | AsyncValidatorFn; -message ? : string; -errorStrategy ?: DValidationErrorStrategy; -priority ? : number; -isNgValidator ? : boolean; -[id: string]: boolean | number | string | RegExp | DAsyncValidatorFn | AsyncValidatorFn; -``` - -### DValidationErrorStrategy - -- primine: throws an error message when a verification rule fails.dirty: throws an error message when the verification rule fails and the status is dirty. - -```TS -export type DValidationErrorStrategy = 'pristine' | 'dirty'; -``` - -### DValidatorFn - -- Define the DevUI Form synchronization validator: If the boolean value is returned, the current rule passes. -- If string|null is returned, null indicates that the check is passed. If no message is set for the current rule, the returned string is used as the current rule message. - -```TS -export type DValidatorFn = (value: any) => boolean | string | null; -``` - -### DAsyncValidatorFn - -- Define DevUI Form asynchronous validator: Similar to the synchronous rule, the difference is that your function needs to return an Observable object. - -```TS -export type DAsyncValidatorFn = (value: any) => Observable; -``` - -### ruleReservedWords - -- Define the reserved word of the DevUI rule. If your key is not a reserved word, it can be used as the current rule ID (default validator ID or customized validator ID). - -```TS -export const ruleReservedWords = ['id','validator','message','errorStrategy','priority','isNgValidator','popPosition', 'asyncDebounceTime']; -``` - -### dDefaultValidators - -```TS -export const dDefaultValidators = { -'required': Validators.required, // The configuration cannot be empty. The following is used in the rule: {required: true} -'minlength': Validators.minlength, // Indicates the minimum length. The value {minlength: 5} is used in the rule. -'maxlength': Validators.maxlength, // Configure the maximum length. {maxlength: 128} is used in the rule. -'min': Validators.min, // Minimum value. {min: 0} is used in the rule. -'max': Validators.max, // Indicates the maximum value. {max: 100} is used in the rule. -'requiredTrue': Validators.requiredTrue, // The value must be true. The value {requiredTrue: true} is used in the rule. -'email': Validators.email, // Configure email verification. Use {email: true} in the rule. -'pattern': Validators.pattern, // Configure regular expression verification. The rule uses {pattern: RegExp}. -'whitespace': DValidators.whiteSpace, // Indicates that the input cannot contain only spaces. The rule uses {whitespace: true}. -}; -``` diff --git a/devui/form/form.tsx b/devui/form/form.tsx deleted file mode 100644 index a459189715636652777a5ec762a77f704b9e6aae..0000000000000000000000000000000000000000 --- a/devui/form/form.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { defineComponent } from 'vue' - -export default defineComponent({ - name: 'd-form', - props: { - }, - setup(props, ctx) { - return () => { - return
    devui-form
    - } - } -}) \ No newline at end of file diff --git a/devui/fullscreen/demo/fullscreen-demo.tsx b/devui/fullscreen/demo/fullscreen-demo.tsx deleted file mode 100644 index 7c090c9844c1999000e93ee08452819fb159d1f4..0000000000000000000000000000000000000000 --- a/devui/fullscreen/demo/fullscreen-demo.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { defineComponent } from 'vue' - -export default defineComponent({ - name: 'd-fullscreen-demo', - props: { - }, - setup(props, ctx) { - return () => { - return
    devui-fullscreen-demo
    - } - } -}) \ No newline at end of file diff --git a/devui/fullscreen/demo/fullscreen.route.ts b/devui/fullscreen/demo/fullscreen.route.ts deleted file mode 100644 index 532ff0d9f91b0f901461b274948439d8f79fb407..0000000000000000000000000000000000000000 --- a/devui/fullscreen/demo/fullscreen.route.ts +++ /dev/null @@ -1,15 +0,0 @@ -import FullscreenDemoComponent from './fullscreen-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: FullscreenDemoComponent}, - { path: 'api', component: DevUIApiComponent, meta: { - 'zh-cn': ApiCn, - 'en-us': ApiEn - }} -] - -export default routes diff --git a/devui/fullscreen/doc/api-cn.md b/devui/fullscreen/doc/api-cn.md deleted file mode 100644 index 12b52833b0f30f7a8fe6e06b24e1f84aa264af48..0000000000000000000000000000000000000000 --- a/devui/fullscreen/doc/api-cn.md +++ /dev/null @@ -1,40 +0,0 @@ -# 如何使用 - -在 module 中引入： - -```ts -import { FullscreenModule } from 'ng-devui/fullscreen'; -``` - -在页面中使用： - -```html - -
    -
    -
    -     -``` - -# d-fullscreen - -## d-fullscreen 参数 - -| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | -| :----: | :-----------------------: | :---------: | :----------------: | ------------------------------------ | -| mode | `'immersive' \| 'normal'` | 'immersive' | 可选，设置全屏模式 | [普通全屏](demo#general-full-screen) | -| zIndex | `number` | 10 | 可选，设置全屏层级 | [普通全屏](demo#general-full-screen) | - -## d-fullscreen 事件 - -| 事件 | 类型 | 说明 | 跳转 Demo | -| :--------------: | :---------------------: | :------------------- | ---------------------------------------- | -| fullscreenLaunch | `EventEmitter` | 可选，全屏之后的回调 | [沉浸式全屏](demo#immersive-full-screen) | - -### fullscreen-target 选择器 - -必含指令，内容投影，设置需要全屏的元素[沉浸式全屏](demo#immersive-full-screen)。 - -### fullscreen-launch 选择器 - -必含指令，内容投影，设置触发进入全屏的按钮[沉浸式全屏](demo#immersive-full-screen)。 diff --git a/devui/fullscreen/doc/api-en.md b/devui/fullscreen/doc/api-en.md deleted file mode 100644 index 3b5fb095e0291ccaf8550e78ce2d851afeec9525..0000000000000000000000000000000000000000 --- a/devui/fullscreen/doc/api-en.md +++ /dev/null @@ -1,36 +0,0 @@ -# How To Use -Import in module： -```ts -import { FullscreenModule } from 'ng-devui/fullscreen'; -``` -In the page： -```html - -
    -
    -
    -     -``` - -# d-fullscreen - -## d-fullscreen parameters - -| Parameter | Type | Default | Description | Jump to Demo | -| :---------------: | :-----------------------: | :---------: | :------------------------------------: | --------------------------------------------------------- | -| fullscreen-target | `HTMLElement` | -- | Required. Content projection, set the elements to be displayed in full screen. | [Immersive full screen](demo#immersive-full-screen) | -| fullscreen-launch | `HTMLElement` | -- | Required. Content projection, set the button to trigger the full screen. | [Immersive full screen](demo#immersive-full-screen) | -| mode | `'immersive' \|'normal'` | 'immersive' | Optional. Set the full-screen mode. | [Common full screen](demo#general-full-screen) | -| zIndex | `number` | 10 | Optional. Set the full-screen level. | [Common full screen](demo#general-full-screen) | - -## d-fullscreen event - -| Event | Type | Description | Jump to Demo | -| :--------------: | :---------------------: | :------------------- | --------------------------------------------------------- | -| fullscreenLaunch | `EventEmitter` | Optional. Callback after full screen | [Immersive full screen](demo#immersive-full-screen) | - -### fullscreen-target directive -Required directive. Content projection, set the elements to be displayed in full screen.[Immersive full screen](demo#immersive-full-screen) - -### fullscreen-launch directive -Required directive. Content projection, set the button to trigger the full screen.[Immersive full screen](demo#immersive-full-screen) diff --git a/devui/fullscreen/fullscreen.tsx b/devui/fullscreen/fullscreen.tsx deleted file mode 100644 index adaee5f0cb5ebbc2ae7e2c5aab0d4ead9dcbe8b3..0000000000000000000000000000000000000000 --- a/devui/fullscreen/fullscreen.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { defineComponent } from 'vue' - -export default defineComponent({ - name: 'd-fullscreen', - props: { - }, - setup(props, ctx) { - return () => { - return
    devui-fullscreen
    - } - } -}) \ No newline at end of file diff --git a/devui/gantt/demo/gantt-demo.tsx b/devui/gantt/demo/gantt-demo.tsx deleted file mode 100644 index ce024b338fc738d033764a605a04d91ec0a56637..0000000000000000000000000000000000000000 --- a/devui/gantt/demo/gantt-demo.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { defineComponent } from 'vue' - -export default defineComponent({ - name: 'd-gantt-demo', - props: { - }, - setup(props, ctx) { - return () => { - return
    devui-gantt-demo
    - } - } -}) \ No newline at end of file diff --git a/devui/gantt/demo/gantt.route.ts b/devui/gantt/demo/gantt.route.ts deleted file mode 100644 index cb60daccea176eb650272d8ca3589e1184938470..0000000000000000000000000000000000000000 --- a/devui/gantt/demo/gantt.route.ts +++ /dev/null @@ -1,15 +0,0 @@ -import GanttDemoComponent from './gantt-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: GanttDemoComponent}, - { path: 'api', component: DevUIApiComponent, meta: { - 'zh-cn': ApiCn, - 'en-us': ApiEn - }} -] - -export default routes diff --git a/devui/gantt/doc/api-cn.md b/devui/gantt/doc/api-cn.md deleted file mode 100644 index 12440547959e72165c0463e95a5799dc2c787528..0000000000000000000000000000000000000000 --- a/devui/gantt/doc/api-cn.md +++ /dev/null @@ -1,98 +0,0 @@ -## 引入 - -当前组件为实验性组件，需要按需引入，路径如下： - -``` -import { GanttModule } from 'ng-devui/experimental/gantt'; -``` - -### d-gantt-scale 参数 - -| 参数 | 类型 | 默认值 | 描述 | 跳转 Demo | -| :---------------------------: | :----------------: | :---: | :----------------------------------------- | -------------------------------------------------------------------------- | -| milestoneList | `GanttMilestone[]` | [] | 可选，版本里程碑列表 | [与datatable组件结合的甘特图](demo#gantt-with-datatable) | -| ganttScaleContainerOffsetLeft | `number` | 0 | 可选，甘特图时间轴容器左偏移像素 | [与datatable组件结合的甘特图](demo#gantt-with-datatable) | -| ganttBarContainerElement | `Element` | null | 必选，甘特图时间条容器，用于显示甘特图标线 | [与datatable组件结合的甘特图](demo#gantt-with-datatable) | - -### d-gantt-bar 参数 - -| 参数 | 类型 | 默认值 | 描述 | 跳转 Demo | -| :---------------: | :----------------: | :--------: | :---------------------------------------------------------------- | -------------------------------------------------------------------------- | -| startDate | `Date` | null | 必选，开始时间 | [与datatable组件结合的甘特图](demo#gantt-with-datatable) | -| endDate | `Date` | null | 必选，结束时间 | [与datatable组件结合的甘特图](demo#gantt-with-datatable) | -| id | `string` | null | 可选，支持传入 id | [与datatable组件结合的甘特图](demo#gantt-with-datatable) | -| data | `object` | null | 可选，支持传入任意数据 | [与datatable组件结合的甘特图](demo#gantt-with-datatable) | -| progressRate | `number` | 0 | 可选，进度，例如 30 代表 30%进度 | [与datatable组件结合的甘特图](demo#gantt-with-datatable) | -| tipTemplateRef | `TemplateRef` | null | 可选，自定义提示内容模板 | [与datatable组件结合的甘特图](demo#gantt-with-datatable) | -| barMoveDisabled | `boolean` | false | 可选，是否禁止 bar 拖动 | [与datatable组件结合的甘特图](demo#gantt-with-datatable) | -| barResizeDisabled | `boolean` | false | 可选，是否禁止 bar 调整起止时间 | [与datatable组件结合的甘特图](demo#gantt-with-datatable) | -| progressDisabled | `boolean` | false | 可选，是否禁止 bar 调整进度 | [与datatable组件结合的甘特图](demo#gantt-with-datatable) | - -### d-gantt-bar 事件 - -| 事件 | 类型 | 描述 | 跳转 Demo | -| :-----------------: | :---------------------------: | :--------------------------: | -------------------------------------------------------------------------- | -| barMoveStartEvent | `EventEmitter` | 工作项时间条开始拖动事件 | [与datatable组件结合的甘特图](demo#gantt-with-datatable) | -| barMovingEvent | `EventEmitter` | 工作项时间条拖动中事件 | [与datatable组件结合的甘特图](demo#gantt-with-datatable) | -| barMoveEndEvent | `EventEmitter` | 工作项时间条拖动完成事件 | [与datatable组件结合的甘特图](demo#gantt-with-datatable) | -| barResizeStartEvent | `EventEmitter` | 工作项时间条宽度开始调整事件 | [与datatable组件结合的甘特图](demo#gantt-with-datatable) | -| barResizingEvent | `EventEmitter` | 工作项时间条宽度调整中事件 | [与datatable组件结合的甘特图](demo#gantt-with-datatable) | -| barResizeEndEvent | `EventEmitter` | 工作项时间条宽度调整完成事件 | [与datatable组件结合的甘特图](demo#gantt-with-datatable) | -| barProgressEvent | `EventEmitter` | 工作项进度调整事件 | [与datatable组件结合的甘特图](demo#gantt-with-datatable) | - - -### d-gantt-milestone 参数 -| 参数 | 类型 | 默认值 | 描述 | 跳转 Demo | -| :---------------: | :----------------: | :--------: | :---------------------------------------------------------------- | -------------------------------------------------------------------------- | -| startDate | `Date` | null | 必选，开始时间 | [与datatable组件结合的甘特图](demo#gantt-with-datatable) | -| id | `string` | null | 可选，支持传入 id | [与datatable组件结合的甘特图](demo#gantt-with-datatable) | -| title | `string` | null | 可选，支持传入 title，用于里程碑类型的标题 | [与datatable组件结合的甘特图](demo#gantt-with-datatable) | - - -### d-gantt-bar-parent 参数 -| 参数 | 类型 | 默认值 | 描述 | 跳转 Demo | -| :---------------: | :----------------: | :--------: | :---------------------------------------------------------------- | -------------------------------------------------------------------------- | -| startDate | `Date` | null | 必选，开始时间 | [与datatable组件结合的甘特图](demo#gantt-with-datatable) | -| endDate | `Date` | null | 必选，结束时间 | [与datatable组件结合的甘特图](demo#gantt-with-datatable) | -| id | `string` | null | 可选，支持传入 id | [与datatable组件结合的甘特图](demo#gantt-with-datatable) | -| data | `object` | null | 可选，支持传入任意数据 | [与datatable组件结合的甘特图](demo#gantt-with-datatable) | -| progressRate | `number` | 0 | 可选，进度，例如 30 代表 30%进度 | [与datatable组件结合的甘特图](demo#gantt-with-datatable) | - -### GanttService 公共方法 - -| 方法 | 参数 | 返回值类型 | 描述 | 跳转 Demo | -| :------------------: | :------------------------------: | :--------: | :----------------------------: | -------------------------------------------------------------------------- | -| setScaleConfig | `GanttScaleConfig` | void | 配置时间轴 | [与datatable组件结合的甘特图](demo#gantt-with-datatable) | -| getDurationWidth | `startDate: Date, endDate: Date` | number | 获取起止时间在时间轴上的宽度 | [与datatable组件结合的甘特图](demo#gantt-with-datatable) | -| getDatePostionOffset | `date: Date` | number | 获取时间点在时间轴上的左偏移量 | [与datatable组件结合的甘特图](demo#gantt-with-datatable) | - -#### 甘特图类型定义 - -```javascript -export interface GanttMilestone { - date: Date; - lable: string; -} - -export interface GanttTaskInfo { - id: string; - startDate: Date; - endDate: Date; - title?: string; - progress: string; // 当前进度 - duration: string; // 持续时间 - moveOffset?: number; // 拖动距离 -} - -export interface GanttScaleConfig { - startDate?: Date; - endDate?: Date; - unit?: GanttScaleUnit; -} - -export enum GanttScaleUnit { - day = 'day', - week = 'week', - month = 'month' -} -``` diff --git a/devui/gantt/doc/api-en.md b/devui/gantt/doc/api-en.md deleted file mode 100644 index 76c8c9c3dea92b45d03c8c344be36e780f35cc48..0000000000000000000000000000000000000000 --- a/devui/gantt/doc/api-en.md +++ /dev/null @@ -1,97 +0,0 @@ -## Import - -The current component is an experimental component and needs to be introduced as required. The path is as follows: - -``` -import {GanttModule} from' ng-devui/experimental/gantt'; -``` - -### d-gantt-scale parameter - -| Parameter | Type | Default | Description | Jump to Demo | -| :---------------------------: | :----------------: | :---: | :----------------------------------------- | -------------------------------------------------------------------------- | -| milestoneList | `GanttMilestone[]` | [] | Optional. Version milestone list | [Combined With Datatable](demo#gantt-with-datatable) | -| ganttScaleContainerOffsetLeft | `number` | 0 | Optional. Left offset pixel of the Gantt chart time axis container | [Combined With Datatable](demo#gantt-with-datatable) | -| ganttBarContainerElement | `Element` | null | Time bar container of the Gantt chart, which is mandatory. It is used to display the Gantt chart lines. | [Combined With Datatable](demo#gantt-with-datatable) | - -### d-gantt-bar parameter - -| Parameter | Type | Default | Description | Jump to Demo | -| :---------------: | :----------------: | :--------: | :---------------------------------------------------------------- | -------------------------------------------------------------------------- | -| startDate | `Date` | null | Required. Start time | [Combined With Datatable](demo#gantt-with-datatable) | -| endDate | `Date` | null | Required. End time | [Combined With Datatable](demo#gantt-with-datatable) | -| id | `string` | null | Optional. id is supported | [Combined With Datatable](demo#gantt-with-datatable) | -| data | `object` | null | Optional. Any data can be transferred. | [Combined With Datatable](demo#gantt-with-datatable) | -| progressRate | `number` | 0 | Optional. Progress. For example, 30 indicates 30% progress. | [Combined With Datatable](demo#gantt-with-datatable) | -| tipTemplateRef | `TemplateRef` | null | Optional. Customized prompt content template | [Combined With Datatable](demo#gantt-with-datatable) | -| barMoveDisabled | `boolean` | false | Optional. Whether bar dragging is forbidden | [Combined With Datatable](demo#gantt-with-datatable) | -| barResizeDisabled | `boolean` | false | Optional. Whether to forbid bar adjustment of the start time and end time. | [Combined With Datatable](demo#gantt-with-datatable) | -| progressDisabled | `boolean` | false | Optional. Whether to disable bar adjustment progress | [Combined With Datatable](demo#gantt-with-datatable) | - -### d-gantt-bar event - -| Event | Type | Description | Jump to Demo | -| :-----------------: | :---------------------------: | :--------------------------: | -------------------------------------------------------------------------- | -| barMoveStartEvent | `EventEmitter` | Work Item Time Bar Start Drag Event | [Combined With Datatable](demo#gantt-with-datatable) | -| barMovingEvent | `EventEmitter` | Work Item Time Bar Dragging Event | [Combined With Datatable](demo#gantt-with-datatable) | -| barMoveEndEvent | `EventEmitter` | Work Item Time Bar Drag Completion Event | [Combined With Datatable](demo#gantt-with-datatable) | -| barResizeStartEvent | `EventEmitter` | Work Item Time Bar Width Adjustment Event | [Combined With Datatable](demo#gantt-with-datatable) | -| barResizingEvent | `EventEmitter` | Work Item Time Bar Width Adjustment Event | [Combined With Datatable](demo#gantt-with-datatable) | -| barResizeEndEvent | `EventEmitter` | Work Item Time Bar Width Adjustment Completion Event | [Combined With Datatable](demo#gantt-with-datatable) | -| barProgressEvent | `EventEmitter` | Work Item Progress Adjustment Event | [Combined With Datatable](demo#gantt-with-datatable) | - -### d-gantt-milestone parameter -| Parameter | Type | Default | Description | Jump to Demo | -| :---------------: | :----------------: | :--------: | :---------------------------------------------------------------- | -------------------------------------------------------------------------- | -| startDate | `Date` | null | Required. Start time | [Combined With Datatable](demo#gantt-with-datatable) | -| id | `string` | null | Optional. Id is supported | [Combined With Datatable](demo#gantt-with-datatable) | -| title | `string` | null | Optional. The title can be transferred, which is used as the title of the milestone type | [Combined With Datatable](demo#gantt-with-datatable) | - - -### d-gantt-bar-parent parameter -| Parameter | Type | Default | Description | Jump to Demo | -| :---------------: | :----------------: | :--------: | :---------------------------------------------------------------- | -------------------------------------------------------------------------- | -| startDate | `Date` | null | Required. Start time | [Combined With Datatable](demo#gantt-with-datatable) | -| endDate | `Date` | null | Required. End time | [Combined With Datatable](demo#gantt-with-datatable) | -| id | `string` | null | Optional. Id is supported | [Combined With Datatable](demo#gantt-with-datatable) | -| data | `object` | null | Optional. Any data can be transferred | [Combined With Datatable](demo#gantt-with-datatable) | -| progressRate | `number` | 0 | Optional. Progress. For example, 30 indicates 30% progress | [Combined With Datatable](demo#gantt-with-datatable) | - -### GanttService Public Methods - -| Method | Parameter | Return value type | Description | Jump to Demo | -| :------------------: | :------------------------------: | :--------: | :----------------------------: | -------------------------------------------------------------------------- | -| setScaleConfig | `GanttScaleConfig` | void | Configuring the Timeline | [Combined With Datatable](demo#gantt-with-datatable) | -| getDurationWidth | `startDate: Date, endDate: Date` | number | Obtains the width of the start time and end time on the time axis. | [Combined With Datatable](demo#gantt-with-datatable) | -| getDatePostionOffset | `date: Date` | number | Obtaining the Left Offset of a Time Point on the Timeline | [Combined With Datatable](demo#gantt-with-datatable) | - -#### Gantt Chart Type Definition - -```javascript -export interface GanttMilestone { - date: Date; - lable: string; -} - -export interface GanttTaskInfo { - id: string; - startDate: Date; - endDate: Date; - title? : string; - progress: string; // Current progress - duration: string; // Duration - moveOffset? : number; // Drag the distance. -} - -export interface GanttScaleConfig { - startDate? : Date; - endDate? : Date; - unit? : GanttScaleUnit; -} - -export enum GanttScaleUnit { - day = 'day', - week = 'week', - month ='month' -} -``` diff --git a/devui/gantt/gantt.tsx b/devui/gantt/gantt.tsx deleted file mode 100644 index 7b95785cb1853f165043a2fd194775d50553771b..0000000000000000000000000000000000000000 --- a/devui/gantt/gantt.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { defineComponent } from 'vue' - -export default defineComponent({ - name: 'd-gantt', - props: { - }, - setup(props, ctx) { - return () => { - return
    devui-gantt
    - } - } -}) \ No newline at end of file diff --git a/devui/icon/index.ts b/devui/icon/index.ts index aedc16ad9af5ad8675d2fefa6466335c5c96288f..2af69614f14d2f09b1400f1b8e491e79d82faaa3 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/image-preview/demo/image-preview-demo.tsx b/devui/image-preview/demo/image-preview-demo.tsx deleted file mode 100644 index 3ef4fe827a2671bdc58eac23a859f67e4b0fd84b..0000000000000000000000000000000000000000 --- a/devui/image-preview/demo/image-preview-demo.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { defineComponent } from 'vue' - -export default defineComponent({ - name: 'd-image-preview-demo', - props: { - }, - setup(props, ctx) { - return () => { - return
    devui-image-preview-demo
    - } - } -}) \ No newline at end of file diff --git a/devui/image-preview/demo/image-preview.route.ts b/devui/image-preview/demo/image-preview.route.ts deleted file mode 100644 index 144b24405f5b08f7a14fa40e3fcae87f6dedb2e7..0000000000000000000000000000000000000000 --- a/devui/image-preview/demo/image-preview.route.ts +++ /dev/null @@ -1,15 +0,0 @@ -import ImagePreviewDemoComponent from './image-preview-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: ImagePreviewDemoComponent}, - { path: 'api', component: DevUIApiComponent, meta: { - 'zh-cn': ApiCn, - 'en-us': ApiEn - }} -] - -export default routes diff --git a/devui/image-preview/doc/README.md b/devui/image-preview/doc/README.md deleted file mode 100644 index 1b6a404f58f7b7404b37bbdfa39c190aa5d485c4..0000000000000000000000000000000000000000 --- a/devui/image-preview/doc/README.md +++ /dev/null @@ -1,4 +0,0 @@ -# 功能点 -## 第一版本 提供指令 -1. 可进行图片预览、变换、切换 - diff --git a/devui/image-preview/doc/api-cn.md b/devui/image-preview/doc/api-cn.md deleted file mode 100644 index 64d1342f04ce4c6dbc94e3f3fc169c8e45e044f2..0000000000000000000000000000000000000000 --- a/devui/image-preview/doc/api-cn.md +++ /dev/null @@ -1,20 +0,0 @@ -# 如何使用 -在module中引入： -```ts -import { ImagePreviewModule } from 'ng-devui/image-preview'; -``` -在页面中使用： -```html -
    -``` - -# dImagePreview - -## dImagePreview 参数 - -| 参数 | 类型 | 默认值 | 描述 | 跳转 Demo | -| :------------: | :--------------------: | :---: | :------------------------------------: | ------------------------------------------------- | -| customSub | `Subject` | -- | 可选，customsub 触发 next 时，打开预览 | [自定义开启预览窗口](demo#custom-usage) | -| disableDefault | `boolean` | false | 可选，关闭默认点击触发图片预览方式 | [自定义开启预览窗口](demo#custom-usage) | -| zIndex | `number` | 1050 | 可选，设置预览时图片的z-index值 | [设置zIndex](demo#z-index-usage) | -| backDropZIndex | `number` | 1040 | 可选，设置预览时图片背景的z-index值 | [设置zIndex](demo#z-index-usage) | diff --git a/devui/image-preview/doc/api-en.md b/devui/image-preview/doc/api-en.md deleted file mode 100644 index bc15479b41dda7849cf9808bd19c00c294f96923..0000000000000000000000000000000000000000 --- a/devui/image-preview/doc/api-en.md +++ /dev/null @@ -1,20 +0,0 @@ -# How To Use -Import in module： -```ts -import { ImagePreviewModule } from 'ng-devui/image-preview'; -``` -In the page： -```html -
    -``` - -# dImagePreview - -## dImagePreview Parameter - -| Parameter | Type | Default | Description | Jump to Demo | -| :------------: | :--------------------: | :---: | :------------------------------------: | ------------------------------------------------- | -| customSub | `Subject` | -- | Optional. When customsub triggers next, preview is opened. | [Customized preview window opening](demo#custom-usage) | -| disableDefault | `boolean` | false | Optional. Disable the default image preview mode triggered by clicking. | [Customized preview window enabling](demo#custom-usage) | -| zIndex | `number` | 1050 | Optional. Sets the z-index value of the image during preview. | [Setting zIndex](demo#z-index-usage) | -| backDropZIndex | `number` | 1040 | Optional. Sets the z-index value of the back drop of the image during preview. | [Setting zIndex](demo#z-index-usage) | diff --git a/devui/image-preview/image-preview.tsx b/devui/image-preview/image-preview.tsx deleted file mode 100644 index 5478f3614e2a6e505a5939cd7c2d1149d419565f..0000000000000000000000000000000000000000 --- a/devui/image-preview/image-preview.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { defineComponent } from 'vue' - -export default defineComponent({ - name: 'd-image-preview', - props: { - }, - setup(props, ctx) { - return () => { - return
    devui-image-preview
    - } - } -}) \ No newline at end of file diff --git a/devui/input-number/demo/input-number-demo.tsx b/devui/input-number/demo/input-number-demo.tsx deleted file mode 100644 index ce77296db7e6c2f1f36faffdbb40b7b636b22700..0000000000000000000000000000000000000000 --- a/devui/input-number/demo/input-number-demo.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { defineComponent } from 'vue' - -export default defineComponent({ - name: 'd-input-number-demo', - props: { - }, - setup(props, ctx) { - return () => { - return
    devui-input-number-demo
    - } - } -}) \ No newline at end of file diff --git a/devui/input-number/demo/input-number.route.ts b/devui/input-number/demo/input-number.route.ts deleted file mode 100644 index ab9b0d7f6b7e294bf34607f71735580776cda4fd..0000000000000000000000000000000000000000 --- a/devui/input-number/demo/input-number.route.ts +++ /dev/null @@ -1,15 +0,0 @@ -import InputNumberDemoComponent from './input-number-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: InputNumberDemoComponent}, - { path: 'api', component: DevUIApiComponent, meta: { - 'zh-cn': ApiCn, - 'en-us': ApiEn - }} -] - -export default routes diff --git a/devui/input-number/doc/api-cn.md b/devui/input-number/doc/api-cn.md deleted file mode 100644 index d0c9921744d3555b456819968c36b303644c8844..0000000000000000000000000000000000000000 --- a/devui/input-number/doc/api-cn.md +++ /dev/null @@ -1,36 +0,0 @@ -# 如何使用 - -在module中引入： -```ts -import { InputNumberModule } from 'ng-devui'; -``` - -在页面中使用： -```html - -``` - -# d-input-number -## d-input-number 参数 - -| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | -| :----------: | :----------------: | :---------------------: | :----------------------------------- | -------------------------------------------------------------------------------------- | -| max | `number` | Number.MAX_SAFE_INTEGER | 可选，最大值 | [基本用法](demo#number-basic) | -| min | `number` | Number.MIN_SAFE_INTEGER | 可选，最小值 | [基本用法](demo#number-basic) | -| step | `number` | 1 | 可选，步进值 | [基本用法](demo#number-basic) | -| disabled | `boolean` | false | 可选，禁止输入态开关 | [禁止输入态](demo#number-disabled) | -| size | `'' \| 'sm' \| 'lg'` | '' | 可选，组件大小 | [基本用法](demo#number-basic) | -| ngModel | `number` | -- | 可选，组件的值 | [基本用法](demo#number-basic) | -| decimalLimit | `number` | -- | 可选，限制小数点后的位数 | [限制小数](demo#decimal-limit) | -| autoFocus | `boolean` | false | 可选，自动获取焦点 | -- | -| allowEmpty | `boolean` | false | 可选，是否允许值为空 | [允许空值](demo#number-empty) | -| placeholder | `string` | -- | 可选，要显示的 placeholder | [placeholder 和 maxLength](demo#number-placeholder-maxlength) | -| maxLength | `number` | 0 | 可选，限制最大输入的长度，0 为不限制 | [placeholder 和 maxLength](demo#number-placeholder-maxlength) | -| reg | `RegExp \| string` | -- | 可选，用于限制输入的正则或正则字符串 | [正则限制](demo#number-reg) | - -## d-input-number 事件 - -| 事件 | 类型 | 说明 | 跳转 Demo | -| :----------------: | :--------------------: | :-------------------------------------------------------- | ------------------------------------------------------ | -| whileValueChanging | `EventEmitter` | 用户使用键盘输入时发出的事件 | [基本用法](demo#number-basic) | -| afterValueChanged | `EventEmitter` | 组件值变化时发出的事件，使用 ngModelChange 来监听值的变化 | [基本用法](demo#number-basic) | diff --git a/devui/input-number/doc/api-en.md b/devui/input-number/doc/api-en.md deleted file mode 100644 index 5966bd51eda9012229fccec6ff5421f9d3c0c3fd..0000000000000000000000000000000000000000 --- a/devui/input-number/doc/api-en.md +++ /dev/null @@ -1,35 +0,0 @@ -# How to use - -Import into module: -```ts -import { InputNumberModule } from 'ng-devui'; -``` - -In the page: -```html - -``` -# d-input-number -## d-input-number Parameters - -| Parameter | Type | Default | Description | Jump to Demo | -| :----------: | :----------------: | :---------------------: | :------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------- | -| max | `number` | Number.MAX_SAFE_INTEGER | Optional. Maximum value | [Basic Usage](demo#number-basic) | -| min | `number` | Number.MIN_SAFE_INTEGER | Optional. Minimum value | [Basic Usage](demo#number-basic) | -| step | `number` | 1 | Optional. Step value | [Basic Usage](demo#number-basic) | -| disabled | `boolean` | false | Optional. This parameter specifies whether to enable the input function. | [Disabled](demo#number-disabled) | -| size | `'' \| 'sm' \| 'lg'` | '' | Optional. Component size | [Basic Usage](demo#number-basic) | -| ngModel | `number` | -- | Optional. Component value | [Basic Usage](demo#number-basic) | -| decimalLimit | `number` | -- | Optional. Limit the number of decimal places. | [Avoid Decimal](demo#decimal-limit) | -| autoFocus | `boolean` | false | Optional. Automatically obtain focus | -- | -| allowEmpty | `boolean` | false | Optional. Whether to allow the value to be empty | [Allow Null](demo#number-empty) | -| placeholder | `string` | -- | Optional. Placeholder to be displayed. | [Set Placeholder and Maxlength](demo#number-placeholder-maxlength) | -| maxLength | `number` | 0 | Optional. Limit the maximum length. The value 0 indicates no limit. | [Set Placeholder and Maxlength](demo#number-placeholder-maxlength) | -| reg | `RegExp \| string` | -- | Optional. It is used to restrict the input regular or regular character string. | [Using Regular Expression](demo#number-reg) | - -## d-input-number Event - -| Event | Type | Description | Jump to Demo | -| :------------------------------: | :--------------------: | :----------------------------------------------------------------- | --------------------------------------------------------------------- | -| whileValueChanging | `EventEmitter` | Event triggered when a user uses the keyboard to enter information | [Basic Usage](demo#number-basic) | -| afterValueChanged | `EventEmitter` | Component changed. The value change is monitored using ngModelChange. | [Basic Usage](demo#number-basic) | diff --git a/devui/input-number/input-number.tsx b/devui/input-number/input-number.tsx deleted file mode 100644 index 369b99244aff64b8b5838b2ffc47c8a68c988154..0000000000000000000000000000000000000000 --- a/devui/input-number/input-number.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { defineComponent } from 'vue' - -export default defineComponent({ - name: 'd-input-number', - props: { - }, - setup(props, ctx) { - return () => { - return
    devui-input-number
    - } - } -}) \ No newline at end of file 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 ee3c28a0b6847384928e8dc5bf313e904f6ca829..3256372c999522de38624df244eec58974bcf5a5 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 0000000000000000000000000000000000000000..65c42ed5a95de5e187848b3439e9fea12940a44d --- /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 a02f10922bcfd07184f99ff5f2d4032b3836a162..d1c2073d70ba6541e64435729f18fc411918b9a8 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
    devui-layout-demo
    - } - } -}) \ No newline at end of file diff --git a/devui/layout/demo/layout.route.ts b/devui/layout/demo/layout.route.ts deleted file mode 100644 index dcc0f8afaae645b0ad42ddd6795f5f9ae63c6b88..0000000000000000000000000000000000000000 --- a/devui/layout/demo/layout.route.ts +++ /dev/null @@ -1,15 +0,0 @@ -import LayoutDemoComponent from './layout-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: LayoutDemoComponent}, - { path: 'api', component: DevUIApiComponent, meta: { - 'zh-cn': ApiCn, - 'en-us': ApiEn - }} -] - -export default routes diff --git a/devui/layout/doc/api-cn.md b/devui/layout/doc/api-cn.md deleted file mode 100644 index 85336386f097417b09c34e2873e40ed7866ec724..0000000000000000000000000000000000000000 --- a/devui/layout/doc/api-cn.md +++ /dev/null @@ -1,39 +0,0 @@ -# 如何使用 - -在 module 中使用： - -```ts -import { LayoutModule } from 'ng-devui'; -``` - -在页面中使用： - -```html - - - - - -``` - -# d-layout - -布局容器，可以与`d-header`, `d-content`, `d-footer`, `d-aside`组合实现布局； -`d-layout`下可嵌套元素：`d-header`, `d-content`, `d-aside`, `d-layout`。 - -# d-header - -顶部布局，只能放在`d-layout`容器中，作为`d-layout`容器的顶部实现。 -默认高度：40px。 - -# d-footer - -底部布局，只能放在`d-layout`容器中，作为`d-layout`容器的底部实现。 - -# d-content - -内容容器，只能放在`d-layout`容器中，作为`d-layout`容器`d-header`与`d-footer`之间的内容。 - -# d-aside - -侧边栏，只能放在`d-layout`容器中，作为`d-layout`容器的侧边栏部分。 diff --git a/devui/layout/doc/api-en.md b/devui/layout/doc/api-en.md deleted file mode 100644 index 3eb653e03bb83565da95de5427130d45f3a19bbc..0000000000000000000000000000000000000000 --- a/devui/layout/doc/api-en.md +++ /dev/null @@ -1,39 +0,0 @@ -# How to use - -Import into module: - -```ts -import { LayoutModule } from 'ng-devui'; -``` - -In the page: - -```html - - - - - -``` - -# d-layout - -Layout container, which can be combined with `d-header`, `d-content`, `d-footer`, `d-aside` to implement layout. -Elements that can be nested under `d-layout`: `d-header`, `d-content`, `d-aside`, `d-layout`. - -# d-header - -Top layout, which can be implemented only in the `d-layout` container as the top of the `d-layout` container. -Default height: 40 px - -# d-footer - -Bottom layout, which can be implemented only in the `d-layout` container as the bottom of the `d-layout` container. - -# d-content - -Content container, which can be placed only in the `d-layout` container as the content between `d-header` and `d-footer` in the `d-layout` container. - -# d-aside - -Sidebar, which can only be placed in the `d-layout` container as the sidebar part of the `d-layout` container. diff --git a/devui/layout/layout.tsx b/devui/layout/layout.tsx deleted file mode 100644 index e85505cc7a87380299f8f6ff159ae62403718e3f..0000000000000000000000000000000000000000 --- a/devui/layout/layout.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { defineComponent } from 'vue' - -export default defineComponent({ - name: 'd-layout', - props: { - }, - setup(props, ctx) { - return () => { - return
    devui-layout
    - } - } -}) \ No newline at end of file diff --git a/devui/modal/demo/modal-demo.tsx b/devui/modal/demo/modal-demo.tsx deleted file mode 100644 index 68ce4e32d2f8b3f43020396fac2f458c8f6f50c7..0000000000000000000000000000000000000000 --- a/devui/modal/demo/modal-demo.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { defineComponent } from 'vue' - -export default defineComponent({ - name: 'd-modal-demo', - props: { - }, - setup(props, ctx) { - return () => { - return
    devui-modal-demo
    - } - } -}) \ No newline at end of file diff --git a/devui/modal/demo/modal.route.ts b/devui/modal/demo/modal.route.ts deleted file mode 100644 index 6bf1e9965a1ef0ca8b5e44c12f487a2c70837b3d..0000000000000000000000000000000000000000 --- a/devui/modal/demo/modal.route.ts +++ /dev/null @@ -1,15 +0,0 @@ -import ModalDemoComponent from './modal-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: ModalDemoComponent}, - { path: 'api', component: DevUIApiComponent, meta: { - 'zh-cn': ApiCn, - 'en-us': ApiEn - }} -] - -export default routes diff --git a/devui/modal/doc/api-cn.md b/devui/modal/doc/api-cn.md deleted file mode 100644 index fa270f159538e9e45d3c2ae2f46934a01c6c4d12..0000000000000000000000000000000000000000 --- a/devui/modal/doc/api-cn.md +++ /dev/null @@ -1,128 +0,0 @@ -# 如何使用 -在module中引入： -```ts -import { ModalModule } from 'ng-devui/modal'; -``` - -在页面中使用： -```html -click me! -通过openstandardDialog函数中调用dialogService.open()或modalService.open()打开模态弹窗 -``` -```ts -openstandardDialog(dialogtype?: string) { - const results = this.dialogService.open({ - id: 'dialog-service', - width: '346px', - maxHeight: '600px', - showAnimate: true, - title: 'Start Snapshot Version', - content: ModalTestComponent, - backdropCloseable: true, - dialogtype: dialogtype, - onClose: () => { - console.log('on dialog closed'); - }, - data: { - name: 'Tom', - age: 10, - address: 'Chengdu', - }, - }); - } -``` - -# Modal - -**打开 modal**:modalService.**open** ( ~ : **IModalOptions** ) - -## IModalOptions 参数 - -| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | -| :----------------------: | :-----------------------------: | :------: | :--------------------------------------------- | --------------------------------------------------------------- | -| id | `string` | -- | 必选，弹出框 id | [自定义对话框](demo#custom-dialog) | -| width | `string` | -- | 可选，弹出框宽度(e.g '300px') | [自定义对话框](demo#custom-dialog) | -| zIndex | `number` | 1050 | 可选，弹出框 z-index 值 | -| backDropZIndex | `number` | 1040 | 可选，弹出框背景 z-index 值 | -| component | `Type` | -- | 可选，弹出框组件，弹出框会显示组件内容 | [自定义对话框](demo#custom-dialog) | -| injector | `Injector` | true | 可选，可以选择指定将用作组件的父级的注射器。 | -| data | `object` | -- | 可选，传入component实例中的属性 | [自定义对话框](demo#custom-dialog) | -| showAnimate | `boolean` | true | 可选，是否显示动画， | [自定义对话框](demo#custom-dialog) | -| backdropCloseable | `boolean` | true | 可选，点击空白处是否能关闭弹出框， | [自定义对话框](demo#custom-dialog) | -| componentFactoryResolver | `ComponentFactoryResolver` | -- | 可选，自定义动态渲染组件解析器， | -| onClose | `Function` | -- | 可选，弹出框关闭之后回调的函数， | [自定义对话框](demo#custom-dialog) | -| beforeHidden | `Function\|Promise\|Observable` | -- | 可选，关闭窗口之前的回调 | -| placement | `enum('center'\|'top'\|'bottom')` | 'center' | 可选，弹出框出现的位置 | -| offsetX | `string` | '0px' | 可选，弹出框横向偏移 | -| offsetY | `string` | '0px' | 可选，弹出框纵向偏移 | -| bodyScrollable | `boolean` | true | 可选，modal 打开后，body是否可滚动，默认可滚动，false时隐藏滚动条,隐藏滚动条可能会产生抖动，可以通过设置外层fixed来同时避免滚动与抖动 | [通过外层fixed同时避免滚动和抖动](demo#template-fixed) | -| contentTemplate | `TemplateRef` | -- | 可选，弹出框内容模板，与component不兼容 | [自定义弹出框内容模板](demo#template-content) | -| escapable | `boolean` | true | 可选，是否支持esc键关闭弹窗 | - -# dialog 说明 - -**打开 dialog**:dialogService.**open** ( ~ : **IDialogOptions** ) - -## IDialogOptions 参数 - -| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | -| :----------------------: | :-----------------------------: | :--------: | :----------------------------------------------------------------------- | ---------------------------------------------------------------- | -| id | `string` | -- | 必选，弹出框 id | [标准对话框](demo#standard-dialog) | -| width | `string` | -- | 可选，弹出框宽度(e.g '300px') | [标准对话框](demo#standard-dialog) | -| zIndex | `number` | 1050 | 可选，弹出框 z-index 值 | [信息提示](demo#message-hint) | -| backDropZIndex | `number` | 1040 | 可选，弹出框背景 z-index 值 | -| maxHeight | `string` | -- | 可选，弹出框最大高度(e.g '600px') | [标准对话框](demo#standard-dialog) | -| title | `string` | -- | 可选，弹出框 title | [标准对话框](demo#standard-dialog) | -| content | `string\|Type` | -- | 可选，弹出框内容，支持字符串和组件 | [标准对话框](demo#standard-dialog) | -| html | `boolean` | -- | 可选，content是否是html代码 | [警告弹出框](demo#warning-pop-up) | -| injector | `Injector` | true | 可选，可以选择指定将用作组件的父级的注射器。 | -| data | `object` | -- | 可选，当content为Component时，传递到Component实例中的属性 | [标准对话框](demo#standard-dialog) | -| buttons | `array` | -- | 可选，弹出框按钮，支持自定义文本、样式、禁用、点击事件 | [标准对话框](demo#standard-dialog) | -| showAnimate | `boolean` | true | 可选，是否显示动画， | [拦截对话框关闭](demo#intercept-dialog-closed) | -| backdropCloseable | `boolean` | true | 可选，点击空白处是否能关闭弹出框， | [拦截对话框关闭](demo#intercept-dialog-closed) | -| componentFactoryResolver | `ComponentFactoryResolver` | -- | 可选，自定义动态渲染组件解析器， | -| onClose | `Function` | -- | 可选，弹出框关闭之后回调的函数， | [标准对话框](demo#standard-dialog) | -| beforeHidden | `Function\|Promise\|Observable` | -- | 可选，可以阻止对话框关闭 | [拦截对话框关闭](demo#intercept-dialog-closed) | -| dialogtype | `string` | 'standard' | 可选，弹出框类型，有四种选择['standard'\|'success'\|'failed'\|'warning'\|'info'] | [标准对话框](demo#standard-dialog) | -| draggable | `boolean` | true | 可选，弹出框是否可拖拽 | -| placement | `enum('center'\|'top'\|'bottom')` | 'center' | 可选，弹出框出现的位置 | -| offsetX | `string` | '0px' | 可选，弹出框横向偏移 | -| offsetY | `string` | '0px' | 可选，弹出框纵向偏移 | -| bodyScrollable | `boolean` | true | 可选，dialog 打开后，body是否可滚动，默认可滚动，false时隐藏滚动条，隐藏滚动条可能会产生抖动，可以通过设置外层fixed来同时避免滚动与抖动 | [通过外层fixed同时避免滚动和抖动](demo#template-fixed) | -| contentTemplate | `TemplateRef` | -- | 可选，弹出框内容模板，与content不兼容 | [自定义弹出框内容模板](demo#template-content) | -| escapable | `boolean` | true | 可选，是否支持esc键关闭弹窗 | - -## ModalOpenResult - -| 属性 | 类型 | 说明 | 跳转 Demo | -| :------------------: | :--------------: | :-----------------------------------------------: | :--------------------------------------------------: | -| modalInstance | `ModalComponent` | 返回 Modal 对象，可以作为contentTemplate的context | [标准对话框](demo#standard-dialog) | -| modalContentInstance | `Type` | 返回 Modal 内容的对象 | [标准对话框](demo#standard-dialog) | - -## modalInstance 公共方法 -| 方法名 | 参数 | 默认值 | 说明 | 跳转 Demo | -| :----: | :---: | :----- | :-------: | :-------: | -| hide | -- | -- | 关闭modal | [标准对话框](demo#standard-dialog) | -| updateButtonOptions | buttons | [] | 动态更新dialog里边的button配置项，比如disabled | [更新弹出框按钮状态](demo#update-button-options) | - -## buttons 类型定义 - -```javascript -buttons: Array<{ - id?: string; - cssClass?: string; - text: string; - handler: ($event: Event) => void; - btnwidth?: string; - autofocus?: boolean; - disabled?: boolean; - }>; -``` - -## dMoveable 指令 - -| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | -| :-------: | :-----------: | :---: | :-------------------------------------------------- | --------- | -| dMoveable | `boolean` | false | 可选，是否启用拖动移动功能 |[自定义对话框](demo#custom-dialog)| -| handle | `HTMLElement` | -- | 可选，可以拖动的元素 |[自定义对话框](demo#custom-dialog)| -| moveEl | `HTMLElement` | -- | 可选，被拖动的区块，默认为使用 dMoveable 指令的元素 |[自定义对话框](demo#custom-dialog)| diff --git a/devui/modal/doc/api-en.md b/devui/modal/doc/api-en.md deleted file mode 100644 index 74891379261d0185f95edad824095d73612ac619..0000000000000000000000000000000000000000 --- a/devui/modal/doc/api-en.md +++ /dev/null @@ -1,128 +0,0 @@ -# How to use -Import into module: -```ts -import { ModalModule } from 'ng-devui/modal'; -``` - -In the page: -```html -click me! -Call dialogService.open() or modalService.open() in the openstandardDialog function to open the drawer board. -``` -```ts -openstandardDialog(dialogtype?: string) { - const results = this.dialogService.open({ - id: 'dialog-service', - width: '346px', - maxHeight: '600px', - showAnimate: true, - title: 'Start Snapshot Version', - content: ModalTestComponent, - backdropCloseable: true, - dialogtype: dialogtype, - onClose: () => { - console.log('on dialog closed'); - }, - data: { - name: 'Tom', - age: 10, - address: 'Chengdu', - }, - }); - } -``` - -# Modal - -**Open the modal**: modalService.**open** (~: **IModalOptions**). - -### IModalOptions - -| Parameter | Type | Default | Description | Jump to Demo | -| :----------------------: | :-----------------------------: | :------: | :--------------------------------------------- | --------------------------------------------------------------- | -| id | `string` | -- | Required. ID of the dialog box displayed. | [Custom Dialog Box](demo#custom-dialog) | -| width | `string` | -- | Optional. Width of the pop-up box (e.g '300px'). | [Custom Dialog Box](demo#custom-dialog) | -| zIndex | `number` | 1050 | Optional. Z-index value in the dialog box displayed. | -| backDropZIndex | `number` | 1040 | Optional. Z-index value in the back drop displayed of the dialog box. | -| component | `Type` | -- | Optional. Pop-up component. The component content is displayed in the pop-up box. | [Custom Dialog Box](demo#custom-dialog) | -| injector | `Injector` | true | Optional. You can specify the syringe that will be used as the parent of the component. | -| data | `object` | -- | Optional. The attribute of the component instance is transferred. | [Custom Dialog Box](demo#custom-dialog) | -| showAnimate | `boolean` | true | Optional. Indicating whether to display animations. | [Custom Dialog Box](demo#custom-dialog) | -| backdropCloseable | `boolean` | true | Optional. Can the dialog box be closed when you click a blank area? | [Custom Dialog Box](demo#custom-dialog) | -| componentFactoryResolver | `ComponentFactoryResolver` | -- | Optional. Customized dynamic rendering component parser. | -| onClose | `Function` | -- | Optional. Function called back after the dialog box is closed. | [Custom Dialog Box](demo#custom-dialog) | -| beforeHidden | `Function\|Promise\|Observable` | -- | Optional. Callback before closing a window. | -| placement | `enum('center'\|'top'\|'bottom')` | 'center' | Optional. This parameter is optional and specifies the position where the dialog box is displayed. | -| offsetX | `string` | '0px' | Optional. Horizontal offset of the pop-up box. | -| offsetY | `string` | '0px' | Optional. Vertical offset of the pop-up box. | -| bodyScrollable | `boolean` | true |Optional. Specifies whether the body can scroll after modal is enabled. The default value is false. The scroll bar is hidden. Hiding the scroll bar may cause jitter. You can set the outer fixed to avoid scrolling and jitter. |[The outer layer is fixed to solve the jitter and scrolling problem](demo#template-fixed) | -| contentTemplate | `TemplateRef` | -- | Optional. It is a dialog box content template, which is incompatible with the component. | [Customizing a pop-up box content template](demo#template-content) | -| escapable | `boolean` | true | Optional. Specifies whether to support pop-up window closure by pressing the Esc key. | - -## Dialog Description - -**open dialog**:dialogService.**open** ( ~ : **IDialogOptions** ) - -### IDialogOptions - -| Parameter | Type | Default | Description | Jump to Demo | -| :----------------------: | :-----------------------------: | :--------: | :----------------------------------------------------------------------- | ---------------------------------------------------------------- | -| id | `string` | -- | Required. The ID of the dialog box is displayed. | [Standard Dialog Box](demo#standard-dialog) | -| width | `string` | -- | Optional. Width of the dialog box (e.g '300px'). | [Standard Dialog Box](demo#standard-dialog) | -| zIndex | `number` | 1050 | Optional. Z-index value in the dialog box displayed. | [Information](demo#message-hint) | -| backDropZIndex | `number` | 1040 | Optional. Z-index value in the back drop displayed of the dialog box. | -| maxHeight | `string` | -- | Optional. The maximum height of the dialog box (e.g '600px'). | [Standard Dialog Box](demo#standard-dialog) | -| title | `string` | -- | Optional. Pop-up box title. | [Standard Dialog Box](demo#standard-dialog) | -| content | `string\|Type` | -- | Optional. Pop-up box content. Character strings and components are supported. | [Standard Dialog Box](demo#standard-dialog) | -| html | `boolean` | -- | Optional. Whether content is HTML code. | [Warning Dialog Box](demo#warning-pop-up) | -| injector | `Injector` | true | Optional. You can specify the syringe that will be used as the parent of the component. | -| data | `object` | -- | Optional. When content is set to Component, the attribute is transferred to the Component instance. | [Standard Dialog Box](demo#standard-dialog) | -| buttons | `array` | -- | Optional. Pop-up box button, which supports custom text, style, disabling, and click events. | [Standard Dialog Box](demo#standard-dialog) | -| showAnimate | `boolean` | true | Optional. Whether to display animation. | [Blocking dialog box closed](demo#intercept-dialog-closed) | -| backdropCloseable | `boolean` | true | Optional. Can the dialog box be closed when you click a blank area? | [Blocking dialog box closed](demo#intercept-dialog-closed) | -| componentFactoryResolver | `ComponentFactoryResolver` | -- | Optional. Customized dynamic rendering component parser. | -| onClose | `Function` | -- | Optional, Function called back after the dialog box is closed. | [Standard Dialog Box](demo#standard-dialog) | -| beforeHidden | `Function\|Promise\|Observable` | -- | Optional. It can prevent dialog boxes from closing. | [Blocking dialog box closed](demo#intercept-dialog-closed) | -| dialogtype | `string` | 'standard' | Optional. The options are ['standard'\|'success'\|'failed'\|'warning'\|'info']. | [Standard Dialog Box](demo#standard-dialog) | -| draggable | `boolean` | true | Optional. Whether the pop-up box can be dragged. | -| placement | `enum('center'\|'top'\|'bottom')` | 'center' | Optional. This parameter is optional and specifies the position where the dialog box is displayed. | -| offsetX | `string` | '0px' | Optional. Horizontal offset of the pop-up box. | -| offsetY | `string` | '0px' | Optional. Vertical offset of the pop-up box. | -| bodyScrollable | `boolean` | true |Optional. Specifies whether the body can scroll after dialog is enabled. The default value is false. The scroll bar is hidden. Hiding the scroll bar may cause jitter. You can set the outer fixed to avoid scrolling and jitter. |[The outer layer is fixed to solve the jitter and scrolling problem](demo#template-fixed) | -| contentTemplate | `TemplateRef` | -- | Optional. It is a pop-up box content template, which is incompatible with content. | [Customizing a pop-up box content template](demo#template-content) | -| escapable | `boolean` | true | Optional. Specifies whether to support the ESC key to close the pop-up window.| | - -### ModalOpenResult - -| Attribute | Type | Description | Jump to Demo | -| :------------------: | :--------------: | :-----------------------------------------------: | :--------------------------------------------------: | -| modalInstance | `ModalComponent` | Returns a Modal object. Which can be used as the context of the content template. | [Standard Dialog Box](demo#standard-dialog) | -| modalContentInstance | `Type` | Returns the object of Modal content. | [Standard Dialog Box](demo#standard-dialog) | - -### modalInstance 公共方法 -| Method name | Parameter | Default value | Description | Jump to Demo | -| :----: | :---: | :----- | :-------: | :-------: | -| hide | -- | -- | Close modal. | [Standard Dialog Box](demo#standard-dialog) | -| updateButtonOptions | buttons | [] | Dynamically updates the button configuration item in the dialog, for example, disabled. | [Update the button status in the dialog box](demo#update-button-options) | - -### buttons Type Definition - -```javascript -buttons: Array<{ - id?: string; - cssClass?: string; - text: string; - handler: ($event: Event) => void; - btnwidth?: string; - autofocus?: boolean; - disabled?: boolean; - }>; -``` - -## dMoveable directive - -| Parameter | Type | Default | Description | Jump to Demo | -| :-------: | :-----------: | :---: | :-------------------------------------------------- | --------- | -| dMoveable | `boolean` | false | Optional. Whether to enable the drag function. | [Custom Dialog Box](demo#custom-dialog)| -| handle | `HTMLElement` | -- | Optional. Elements that can be dragged. | [Custom Dialog Box](demo#custom-dialog)| -| moveEl | `HTMLElement` | -- | Optional. Dragged block. By default, the element using the dMoveable instruction is used. | [Custom Dialog Box](demo#custom-dialog)| diff --git a/devui/modal/modal.tsx b/devui/modal/modal.tsx deleted file mode 100644 index a2e25f330aa6c7eed93b3cf3ad3f47f9aad7d431..0000000000000000000000000000000000000000 --- a/devui/modal/modal.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { defineComponent } from 'vue' - -export default defineComponent({ - name: 'd-dragdrop', - props: { - }, - setup(props, ctx) { - return () => { - return
    devui-dragdrop
    - } - } -}) \ No newline at end of file diff --git a/devui/multi-auto-complete/demo/multi-auto-complete-demo.tsx b/devui/multi-auto-complete/demo/multi-auto-complete-demo.tsx deleted file mode 100644 index 5f375cd4a39753dec0e007562a05aa5ca21d4e69..0000000000000000000000000000000000000000 --- a/devui/multi-auto-complete/demo/multi-auto-complete-demo.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { defineComponent } from 'vue' - -export default defineComponent({ - name: 'd-multi-auto-complete-demo', - props: { - }, - setup(props, ctx) { - return () => { - return
    devui-multi-auto-complete-demo
    - } - } -}) \ No newline at end of file diff --git a/devui/multi-auto-complete/demo/multi-auto-complete.route.ts b/devui/multi-auto-complete/demo/multi-auto-complete.route.ts deleted file mode 100644 index 014b181162e89d43222c1a5349dfaa43815e62a0..0000000000000000000000000000000000000000 --- a/devui/multi-auto-complete/demo/multi-auto-complete.route.ts +++ /dev/null @@ -1,15 +0,0 @@ -import MultiAutoCompleteDemoComponent from './multi-auto-complete-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: MultiAutoCompleteDemoComponent}, - { path: 'api', component: DevUIApiComponent, meta: { - 'zh-cn': ApiCn, - 'en-us': ApiEn - }} -] - -export default routes diff --git a/devui/multi-auto-complete/doc/api-cn.md b/devui/multi-auto-complete/doc/api-cn.md deleted file mode 100644 index e07b81ba419bd4a507495503e6736209cd536e91..0000000000000000000000000000000000000000 --- a/devui/multi-auto-complete/doc/api-cn.md +++ /dev/null @@ -1,69 +0,0 @@ -# 如何使用 - -在 module 中引入： - -```ts -import { MultiAutoCompleteModule } from 'ng-devui/multi-auto-complete'; -``` - -在页面中使用： - -```html - -``` - -# d-multi-auto-complete - -## d-multi-auto-complete 参数 - -- 本组件基于 dAutoComplete 实现，itemTemplate、noResultItemTemplate 等参数使用方式与 dAutoComplete 一致（此类参数使用 Demo 跳转参考 dAutoComplete 使用）。 - -| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | -| :------------------: | :-----------------------------------: | :---------------------------------------: | :----------------------------------------------------------------------------- | ------------------------------------------ | -| appendToBody | `boolean` | -- | 可选，是否 appendToBody | [基本用法](demo#basic-usage) | -| width | `number` | -- | 可选，控制下拉框宽度，搭配 appendToBody 使用（`px`） | -| disabled | `boolean` | -- | 可选，是否禁用 | [使用禁用](demo#auto-complete-disabled) | -| source | `Array` | -- | 可选，数据列表 | [基本用法](demo#basic-usage) | -| itemTemplate | `TemplateRef` | -- | 可选，下拉选项模板 | [自定义模板展示](demo#auto-custom) | -| noResultItemTemplate | `TemplateRef` | -- | 可选，结果不存在时的显示模板 | [自定义模板展示](demo#auto-custom) | -| delay | `number` | 300 | 可选，输入结束 dalay 毫秒后启动查询（`ms`） | [自定义模板展示](demo#auto-custom) | -| searchFn | `(term: string) => Observable` | [`defaultSearchFn`](#defaultsearchfn) | 可选，自定义搜索过滤 | [自定义匹配方法](demo#auto-complete-array) | -| formatter | `(item: any) => string` | [`defaultFormatter`](#defaultformatter) | 可选，对 item 的数据进行自定义显示内容，默认显示 item.label 或 item.toString() | [设置禁用](demo#auto-disable) | -| valueParser | `(item: any) => any` | [`defaultValueParse`](#defaultvalueparse) | 可选，对选中数据进行转化 | [启用懒加载](demo#auto-lazy-load) | -| tipsText | `string` | -- | 可选，提示文字 | [设置禁用](demo#auto-disable) | -| placeholder | `string` | -- | 可选，placeholder | [基本用法](demo#basic-usage) | -| latestSource | `Array` | -- | 可选， 最近输入 | [最近输入](demo#auto-latest) | - -## d-multi-auto-complete 事件 - -| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | -| :--------: | :-----------------: | :--: | :------------------------------------------------- | ------------------------------------------ | -| autoSubmit | `EventEmitter` | -- | 可选，当前已选择数据发生变化时，回传当前已选择数据 | [自定义匹配方法](demo#auto-complete-array) | - -# 接口 & 类型定义 - -### defaultSearchFn - -```ts -defaultSearchFn = (term) => { - return of(this.source.filter((lang) => this.formatter(lang).toLowerCase().indexOf(term.toLowerCase()) !== -1)); -}; -``` - -term 为输入的关键字。 - -### defaultFormatter - -```ts -defaultFormatter = (item) => (item ? item.label || item.toString() : ''); -``` - -item 为数据项。 - -### defaultValueParse - -```ts -defaultValueParse = (item) => item; -``` - -item 为数据项。 diff --git a/devui/multi-auto-complete/doc/api-en.md b/devui/multi-auto-complete/doc/api-en.md deleted file mode 100644 index 03f1f8a18346e1a02dce9834f6bfda3f5250a396..0000000000000000000000000000000000000000 --- a/devui/multi-auto-complete/doc/api-en.md +++ /dev/null @@ -1,69 +0,0 @@ -# How to use - -Import into module: - -```ts -import { MultiAutoCompleteModule } from ' ng-devui/multi-auto-complete'; -``` - -In the page: - -```html - -``` - -# d-multi-auto-complete - -## d-multi-auto-complete parameters - -- This component is implemented based on dAutoComplete. The usage of parameters such as itemTemplate and noResultItemTemplate is the same as that of dAutoComplete. (For details about how to use the Demo to jump to such parameters, see dAutoComplete.) - -| Parameter | Type | Default | Description | Jump to Demo | -| :------------------: | :-----------------------------------: | :---------------------------------------: | :-------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------ | -| appendToBody | `boolean` | -- | Optional. AppendToBody | [Basic usage](demo#basic-usage) | -| width | `number` | -- | Optional. Controls the width of the drop-down list box. This parameter is used with appendToBody (`px`) | -| disabled | `boolean` | -- | Optional. Indicating whether to disable it | [Disabled](demo#auto-complete-disabled) | -| source | `Array` | -- | Optional. Data list | [Basic usage](demo#basic-usage) | -| itemTemplate | `TemplateRef` | -- | Optional. The drop-down list box contains a template. | [Customized template display](demo#auto-custom) | -| noResultItemTemplate | `TemplateRef` | -- | Optional. Template for displaying the result when the result does not exist | [Customized template display](demo#auto-custom) | -| delay | `number` | 300 | Optional. The query starts after the specified delay milliseconds (`ms`) | [Customized template display](demo#auto-custom) | -| searchFn | `(term: string) => Observable` | [`defaultSearchFn`](#defaultsearchfn) | Optional. Customized search filtering | [Customized matching method](demo#auto-complete-array) | -| formatter | `(item: any) => string` | [`defaultFormatter`](#defaultformatter) | : Optional. Customize the display content of item data. By default, item.label or item.toString() is displayed. | [Disabled](demo#auto-disable) | -| valueParser | `(item: any) => any` | [`defaultValueParse`](#defaultvalueparse) | Optional. Converts the selected data | [Enable lazy loading](demo#auto-lazy-load) | -| tipsText | `string` | -- | Optional. Prompt text | [Disabled](demo#auto-disable) | -| placeholder | `string` | -- | Optional. Placeholder | [Basic usage](demo#basic-usage) | -| latestSource | `Array` | -- | Optional. Latest input | [Last input](demo#auto-latest) | - -## d-multi-auto-complete events - -| Parameter | Type | Default | Description | Jump to Demo | -| :--------: | :-----------------: | :-----: | :----------------------------------------------------------------------- | ------------------------------------------------------ | -| autoSubmit | `EventEmitter` | -- | Optional. When the selected data changes, the selected data is returned. | [Customized matching method](demo#auto-complete-array) | - -# Interface & Type Definition - -### defaultSearchFn - -```ts -defaultSearchFn = (term) => { - return of(this.source.filter((lang) => this.formatter(lang).toLowerCase().indexOf(term.toLowerCase()) !== -1)); -}; -``` - -term indicates the entered keyword. - -### defaultFormatter - -```ts -defaultFormatter = (item) => (item ? item.label || item.toString() : ''); -``` - -item indicates a data item. - -### defaultValueParse - -```ts -defaultValueParse = (item) => item; -``` - -item indicates a data item. diff --git a/devui/multi-auto-complete/multi-auto-complete.tsx b/devui/multi-auto-complete/multi-auto-complete.tsx deleted file mode 100644 index 1839de40a7eb3090ed6fbcea64c20d8596b828a4..0000000000000000000000000000000000000000 --- a/devui/multi-auto-complete/multi-auto-complete.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { defineComponent } from 'vue' - -export default defineComponent({ - name: 'd-multi-auto-complete', - props: { - }, - setup(props, ctx) { - return () => { - return
    devui-multi-auto-complete
    - } - } -}) \ No newline at end of file diff --git a/devui/pagination/demo/pagination-demo.tsx b/devui/pagination/demo/pagination-demo.tsx deleted file mode 100644 index 01431d60715103523064b830e018388c76a60d73..0000000000000000000000000000000000000000 --- a/devui/pagination/demo/pagination-demo.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { defineComponent } from 'vue' - -export default defineComponent({ - name: 'd-pagination-demo', - props: { - }, - setup(props, ctx) { - return () => { - return
    devui-pagination-demo
    - } - } -}) \ No newline at end of file diff --git a/devui/pagination/demo/pagination.route.ts b/devui/pagination/demo/pagination.route.ts deleted file mode 100644 index 60683f86b2c27460d4c79da07f115e934adc8919..0000000000000000000000000000000000000000 --- a/devui/pagination/demo/pagination.route.ts +++ /dev/null @@ -1,15 +0,0 @@ -import PaginationDemoComponent from './pagination-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: PaginationDemoComponent}, - { path: 'api', component: DevUIApiComponent, meta: { - 'zh-cn': ApiCn, - 'en-us': ApiEn - }} -] - -export default routes diff --git a/devui/pagination/doc/api-cn.md b/devui/pagination/doc/api-cn.md deleted file mode 100644 index 1f0f03a0e76b383edc8bc51690650d24bb25e8ac..0000000000000000000000000000000000000000 --- a/devui/pagination/doc/api-cn.md +++ /dev/null @@ -1,71 +0,0 @@ -# 如何使用 - -在 module 中引入： - -```ts -import { PaginationModule } from 'ng-devui/pagination'; -``` - -在页面中使用： - -```html - -``` -# d-pagination - -## d-pagination 参数 - -| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | -| :---------------: | :-------------------------------------------------------------------------------------------------------: | :------------------------: | :------------------------------------------------------------------------------------------------------- | ---------------------------------------- | -| pageSize | `number` | 10 | 可选，每页显示最大条目数量 | [基本用法](demo#basic-usage) | -| total | `number` | 0 | 可选，显示的总条目数 | [基本用法](demo#basic-usage) | -| pageSizeOptions | `number[]` | 10 | 可选，分页每页最大条目数量的下拉框的数据源，默认有四种选择 5, 10, 20, 50 | [多种配置](demo#multiple-configurations) | -| pageSizeDirection | `Array<`[`AppendToBodyDirection`](#appendtobodydirection)`\|`[`ConnectedPosition`](#connectedposition)`>` | ['centerDown', 'centerUp'] | 可选，设置分页每页条目的下拉框展示的方向 | [多种配置](demo#multiple-configurations) | -| pageIndex | `number` | 1 | 可选，初始化页码 | [基本用法](demo#basic-usage) | -| maxItems | `number` | 10 | 可选，分页最多显示几个按钮 | [基本用法](demo#basic-usage) | -| preLink | `string` | -- | 可选，上一页按钮显示图标,默认设置为左箭头图标 | [基本用法](demo#basic-usage) | -| nextLink | `string` | -- | 可选， 下一页按钮显示图标,默认设置为右箭头图标 | [基本用法](demo#basic-usage) | -| size | `number` | '' | 可选，分页组件尺寸，有三种选择 lg,``,sm,分别代表大，中，小 | [基本用法](demo#basic-usage) | -| canJumpPage | `boolean` | true | 可选，是否显示分页输入跳转 | [基本用法](demo#basic-usage) | -| canChangePageSize | `boolean` | false | 可选，是否显示用于选择更改分页每页最大条目数量的下拉框 | [基本用法](demo#basic-usage) | -| canViewTotal | `boolean` | true | 可选，是否显示总条目 | [基本用法](demo#basic-usage) | -| totalItemText | `string` | '所有条目' | 可选，总条目文本 | [极简模式](demo#minimalist-model) | -| goToText | `string` | '跳至' | 可选，跳转文本 | [基本用法](demo#basic-usage) | -| showJumpButton | `boolean` | false | 可选，是否显示跳转按钮 | [多种配置](demo#multiple-configurations) | -| showTruePageIndex | `boolean` | false | 可选，页码超出分页范围时候也显示当前页码的开关 | [多种配置](demo#multiple-configurations) | -| lite | `boolean` | false | 可选，是否切换为极简模式 | [极简模式](demo#minimalist-model) | -| showPageSelector | `boolean` | true | 可选，`极简模式`下是否显示页码下拉 | [极简模式](demo#minimalist-model) | -| haveConfigMenu | `boolean` | false | 可选，`极简模式`下是否显示配置 | [极简模式](demo#minimalist-model) | -| autoFixPageIndex | `boolean` | true | 可选，改变 pageSize 时是否自动修正页码，若`pageSizeChange`事件中会对`pageIndex`做处理，建议设置为`false` | [极简模式](demo#minimalist-model) | - -## d-pagination 事件 - -| 参数 | 类型 | 说明 | 跳转 Demo | -| :-------------: | :--------------------: | :--------------------------------------------------------- | ---------------------------------------- | -| pageIndexChange | `EventEmitter` | 可选，页码变化的回调,返回当前页码值 | [多种配置](demo#multiple-configurations) | -| pageSizeChange | `EventEmitter` | 可选，每页最大条目数量变更时的回调，返回当前每页显示条目数 | [多种配置](demo#multiple-configurations) | - -# 接口 & 类型定义 - -### AppendToBodyDirection - -```ts -export type AppendToBodyDirection = 'rightDown' | 'rightUp' | 'leftUp' | 'leftDown' | 'centerDown' | 'centerUp'; -``` - -### ConnectedPosition - -```ts -export interface ConnectedPosition { - originX: 'start' | 'center' | 'end'; - originY: 'top' | 'center' | 'bottom'; - - overlayX: 'start' | 'center' | 'end'; - overlayY: 'top' | 'center' | 'bottom'; - - weight?: number; - offsetX?: number; - offsetY?: number; - panelClass?: string | string[]; -} -``` diff --git a/devui/pagination/doc/api-en.md b/devui/pagination/doc/api-en.md deleted file mode 100644 index 1be44204f450db4e1f63bd767068f4f6b317a5c5..0000000000000000000000000000000000000000 --- a/devui/pagination/doc/api-en.md +++ /dev/null @@ -1,72 +0,0 @@ -# How to use - -Import into module: - -```ts -import { PaginationModule } from 'ng-devui/pagination'; -``` - -In the page: - -```html - -``` -# d-pagination - - -## d-pagination parameter - -| Parameter | Type | Default | Description | Jump to Demo | -| :---------------: | :-------------------------------------------------: | :------------------------: | :-------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------- | -| pageSize | `number` | 10 | Optional. Maximum number of entries displayed on each page | [Basic usage](demo#basic-usage) | -| total | `number` | 0 | Optional. Total number of displayed items | [Basic usage](demo#basic-usage) | -| pageSizeOptions | `number[]` | 10 | Optional. Data source of the drop-down list box for the maximum number of items on each page. The options are 5, 10, 20, and 50 by default. | [Multiple configurations](demo#multiple-configurations) | -| pageSizeDirection | `Array` | ['centerDown','centerUp'] | Optional. Sets the display direction of the drop-down list box on each page. For details about AppendToBodyDirection and ConnectedPosition, see dropdown | [Multiple configurations](demo#multiple-configurations) | -| pageIndex | `number` | 1 | Optional. Initializing the page number | [Basic usage](demo#basic-usage) | -| maxItems | `number` | 10 | Optional. Maximum number of buttons that can be displayed on multiple pages. | [Basic usage](demo#basic-usage) | -| preLink | `string` | -- | Optional. Icon of the button on the previous page. The default value is the left arrow icon. | [Basic usage](demo#basic-usage) | -| nextLink | `string` | -- | Optional. The icon is displayed on the next page. The default icon is the right arrow icon. | [Basic usage](demo#basic-usage) | -| size | `number` |'' | Optional. Size of the pagination component. The options are lg, ``, and sm, indicating large, medium, and small respectively. | [Basic usage](demo#basic-usage) | -| canJumpPage | `boolean` | true | Optional. Indicates whether to display pagination input jump. | [Basic usage](demo#basic-usage) | -| canChangePageSize | `boolean` | false | Optional. Display the drop-down list box for selecting the maximum number of entries on each page. | [Basic usage](demo#basic-usage) | -| canViewTotal | `boolean` | true | Optional. Indicating whether to display the total number of entries. | [Basic usage](demo#basic-usage) | -| totalItemText | `string` |'All items' | Optional. Total item text | [Simplified mode](demo#minimalist-model) | -| goToText | `string` |'Jump to' | Optional. Jump to text | [Basic usage](demo#basic-usage) | -| showJumpButton | `boolean` | false | Optional. Whether to display the jump button | [Multiple configurations](demo#multiple-configurations) | -| showTruePageIndex | `boolean` | false | Optional. Whether to display the current page number when the page number exceeds the paging range. | [Special circumstances](demo#exceptional-case) | -| lite | `boolean` | false | Optional. Specifies Whether to switch to the simplified mode. | [Simplified mode](demo#minimalist-model) | -| showPageSelector | `boolean` | true | Optional. Whether to display the page number drop-down list in simplified mode. | [Simplified mode](demo#minimalist-model) | -| haveConfigMenu | `boolean` | false | Optional. Whether to display the configuration in simplified mode | [Simplified mode](demo#minimalist-model) | -| autoFixPageIndex | `boolean` | true | Optional. Indicates whether to automatically correct the page number when the page size is changed. If the pageIndex is processed in the `pageSizeChange` event, you are advised to set the value to `false` | [Simplified Mode](demo#minimalist-model) |. - -## d-pagination event - -| Parameter | Type | Description | Jump to Demo | -| :-------------: | :--------------------: | :--------------------------------------------------------- | --------------------------------------------------------------- | -| pageIndexChange | `EventEmitter` | Optional. Callback of page number change, which returns the current page number. | [Multiple configurations](demo#multiple-configurations) | -| pageSizeChange | `EventEmitter` |Optional. Callback function when the maximum number of items on each page changes. | [Multiple configurations](demo#multiple-configurations) | - -# Interface & Type Definition - -### AppendToBodyDirection - -```ts -export type AppendToBodyDirection = 'rightDown' | 'rightUp' | 'leftUp' | 'leftDown' | 'centerDown' | 'centerUp'; -``` - -### ConnectedPosition - -```ts -export interface ConnectedPosition { - originX: 'start' | 'center' | 'end'; - originY: 'top' | 'center' | 'bottom'; - - overlayX: 'start' | 'center' | 'end'; - overlayY: 'top' | 'center' | 'bottom'; - - weight?: number; - offsetX?: number; - offsetY?: number; - panelClass?: string | string[]; -} -``` \ No newline at end of file diff --git a/devui/pagination/pagination.tsx b/devui/pagination/pagination.tsx deleted file mode 100644 index b144b0ba58484d7c6a5cac5dafe807f4e4a70aad..0000000000000000000000000000000000000000 --- a/devui/pagination/pagination.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { defineComponent } from 'vue' - -export default defineComponent({ - name: 'd-pagination', - props: { - }, - setup(props, ctx) { - return () => { - return
    devui-pagination
    - } - } -}) \ No newline at end of file diff --git a/devui/panel/demo/basic/basic.tsx b/devui/panel/demo/basic/basic.tsx deleted file mode 100644 index 0f59e9ef580a9c93dcdcc7caee48037f1de2f5d2..0000000000000000000000000000000000000000 --- a/devui/panel/demo/basic/basic.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import { defineComponent } from 'vue'; -import Panel from '../../panel'; - -export default defineComponent({ - name: 'd-panel-basic', - setup() { - 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 b561f79ae545140dc79fe5b7a039375b9841e81c..0000000000000000000000000000000000000000 --- 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 acb5bdfdc1cb9d00b3b7b63e27b93033d4d767d8..0000000000000000000000000000000000000000 --- 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 ad7619f90564b671dd1acdb14f4954b92961fe34..0000000000000000000000000000000000000000 --- 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 4900481b46e152c34cbfce32f5827546d187a7f8..0000000000000000000000000000000000000000 --- 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 2ec4c7bcf7e1c5ae12b091ce362f6cbd683b60f7..0000000000000000000000000000000000000000 --- 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 13a855ee6696f89bafa33eb1e666eb4ee7764042..0000000000000000000000000000000000000000 --- 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 a5e6113689b03d835eba59021df21aea29565996..796da02bc85b4211a1b451833fe7760fc8c515f6 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 1e69555c7be2aa34d0aa2c8694281c6f27721a9b..38be0fd28e04eaf85077dea912ba04539ae3b52c 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 3babad2f9ec4025e33431cb92b64bcacfe878cb4..12ccc03d0560807ac6659381bfe70882f3cd7764 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/popover/demo/popover-demo.tsx b/devui/popover/demo/popover-demo.tsx deleted file mode 100644 index bf43f4d516ccfb1fa7a3b8e211edb69adcd59722..0000000000000000000000000000000000000000 --- a/devui/popover/demo/popover-demo.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { defineComponent } from 'vue' - -export default defineComponent({ - name: 'd-popover-demo', - props: { - }, - setup(props, ctx) { - return () => { - return
    devui-popover-demo
    - } - } -}) \ No newline at end of file diff --git a/devui/popover/demo/popover.route.ts b/devui/popover/demo/popover.route.ts deleted file mode 100644 index 55ddabfcd9b3271a06009ee4fa080906702b4733..0000000000000000000000000000000000000000 --- a/devui/popover/demo/popover.route.ts +++ /dev/null @@ -1,15 +0,0 @@ -import PopoverDemoComponent from './popover-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: PopoverDemoComponent}, - { path: 'api', component: DevUIApiComponent, meta: { - 'zh-cn': ApiCn, - 'en-us': ApiEn - }} -] - -export default routes diff --git a/devui/popover/doc/api-cn.md b/devui/popover/doc/api-cn.md deleted file mode 100644 index 28704674204084169d9bdf1d712dc48d732ecce9..0000000000000000000000000000000000000000 --- a/devui/popover/doc/api-cn.md +++ /dev/null @@ -1,56 +0,0 @@ -# 如何使用 - -在 module 中引入： - -```ts -import { PopoverModule } from 'ng-devui/popover'; -``` - -在页面中使用： - -```html - -``` - -# dPopover - -## dPopover 参数 - -| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | -| :------------------: | :--------------------------------------------------------: | :--------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------- | -| content | `string\|HTMLElement\|TemplateRef` | -- | 必选，弹出框的显示内容或模板引用 | [基本用法](demo#basic-usage) | -| visible | `boolean` | false | 可选，弹框的初始化弹出状态 | [手动控制显示](demo#manual-control-display) | -| trigger | `'hover'\|'click'` | 'click' | 弹框触发方式 | [延时触发](demo#hover-delay-time) | -| controlled | `boolean` | false | 可选，是否通过`trigger`方式触发弹框 | [基本用法](demo#basic-usage) | -| position | [`PositionType`](#positiontype) `\| PositionType[]` | ['top', 'right', 'bottom', 'left'] | 可选，内容弹出方向，以 top-left 为例，top 是指从上边弹出，left 是指左对齐，若不设置对齐方向默认为居中。如果传入数组形式，则当前将按照传入数组次序，自适应选取一个方向。 | [弹出位置](demo#position) | -| popType | `'success' \| 'error' \| 'warning' \| 'info' \| 'default'` | 'default' | 可选，弹出框类型，样式不同 | [基本用法](demo#basic-usage) | -| popMaxWidth | `number` | -- | 可选，限制弹出框最大宽度（`px`） | [自定义提示内容](demo#custom-prompt-content) | -| showAnimate | `boolean` | false | 可选，是否显示动画 | [基本用法](demo#basic-usage) | -| appendToBody | `boolean` | true | 可选，默认为 true，仅当 popover 绑定元素外层宽高不够时，overflow 为 hidden，popover 的弹出框不会被一并隐藏掉。 | [基本用法](demo#basic-usage) | -| zIndex | `number` | 1060 | 可选，z-index 值，用于手动控制层高 | [自定义提示内容](demo#custom-prompt-content) | -| scrollElement | `Element` | window | 可选，在这里默认是`window` , 只有当页面的滚动不在`window`上且`appendToBody`的属性为`true`时候才需要传值 | [父容器设置](demo#parent-container-settings) | -| ~~hoverToContent~~ | `boolean` | false | 可选，是否允许鼠标从宿主移动到内容上，仅需要在 trigger 为 hover 的时候设置（`已废弃`） | [延时触发](demo#hover-delay-time) | -| ~~hoverDelayTime~~ | `number` | 0 | 可选，仅需要在 trigger 为 hover 的时候设置鼠标从宿主移开后到隐藏 popover 的延迟时间，以便鼠标移动到内容上，单位`ms` （`已废弃，请使用mouseLeaveDelay`） | [延时触发](demo#hover-delay-time) | -| mouseEnterDelay | `number` | 150 | 可选，仅需要在 trigger 为 hover 的时候，设置鼠标移入后延时多少才显示 Popover，单位是 `ms` | [延时触发](demo#hover-delay-time) | -| mouseLeaveDelay | `number` | 100 | 可选，仅需要在 trigger 为 hover 的时候，设置鼠标移出后延时多少才隐藏 popover，单位是 `ms` | [延时触发](demo#hover-delay-time) | - - -# 接口 & 类型定义 - -### PositionType - -```ts -export type PositionType = - | 'left' - | 'right' - | 'top' - | 'bottom' - | 'bottom-left' - | 'bottom-right' - | 'top-left' - | 'top-right' - | 'left-top' - | 'left-bottom' - | 'right-top' - | 'right-bottom'; -``` diff --git a/devui/popover/doc/api-en.md b/devui/popover/doc/api-en.md deleted file mode 100644 index 927375d1f4d2adad48bbf72f4c6bdc0746005940..0000000000000000000000000000000000000000 --- a/devui/popover/doc/api-en.md +++ /dev/null @@ -1,55 +0,0 @@ -# How to use - -Import into module: - -```ts -import { PopoverModule } from 'ng-devui/popover'; -``` - -In the page: - -```html - -``` - -# dPopover - -## dPopover parameters - -| Parameter | Type | Default | Description | Jump to Demo | -| :-------------------------: | :--------------------------------------------------------: | :--------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------- | -| content | `string\|HTMLElement\|TemplateRef` | -- | Required. The display content of the pop-up box or template reference | [Basic Usage](demo#basic-usage) | -| visible | `boolean` | false | Optional. Initial pop-up status of the pop-up dialog box | [Manual Control Display ](demo#manual-control-display) | -| trigger | `hover'\|'click'` | 'click' | Pop-up message triggering mode | [Delay Trigger](demo#hover-delay-time) | -| controlled | `boolean` | false | Optional. Specifies whether to trigger a dialog box in `trigger` mode | [Basic Usage](demo#basic-usage) | -| position | [`PositionType`](#positiontype) `\| PositionType[]` | ['top', 'right', 'bottom', 'left'] | Optional. Specifies the content pop-up direction. For example, top-left indicates the content pop-up direction, and left indicates the left-aligned content. If the alignment direction is not set, the default value is centered. If an array is passed in, a direction is selected adaptively in the array order | [Position](demo#position) | -| popType | `'success' \| 'error' \| 'warning' \| 'info' \| 'default'` | 'default' | Optional. Which indicates the type of the pop-up box with different styles | [Basic Usage](demo#basic-usage) | -| popMaxWidth | `number` | -- | Optional. Limit the maximum width of the pop-up box (`px`) | [Custom Tips](demo#custom-prompt-content) | -| showAnimate | `boolean` | false | Optional. Whether to display animation | [Basic Usage](demo#basic-usage) | -| appendToBody | `boolean` | true | Optional. The default value is true. If the width and height of the outer layer of the element bound to the popover are insufficient, the overflow is hidden and the popover dialog box is not hidden | [Basic Usage](demo#basic-usage) | -| zIndex | `number` | 1060 | Optional. Z-index value, which is used to manually control the height of the layer | [Custom Tips](demo#custom-prompt-content) | -| scrollElement | `Element` | window | Optional. The default value is `window`. This parameter needs to be transferred only when the page scrolling is not on `window` and the attribute of `appendToBody` is `true` | [Parent Container Settings](demo#parent-container-settings) | -| ~~hoverToContent~~ | `boolean` | false | Optional. Whether to allow the cursor to be moved from the host to the content. This parameter is set only when trigger is set to hover （`deprecated`） | [Delay Trigger](demo#hover-delay-time) | -| ~~hoverDelayTime~~ | `number` | 0 | Optional. You need to set the delay from moving the cursor to hiding the popover only when trigger is set to hover so that the cursor can be moved to the content. The unit is `ms` （`deprecated，Use mouseLeaveDelay`） | [Delay Trigger](demo#hover-delay-time) | -| mouseEnterDelay | `number` | 150 | Optional. Only when the type of trigger is hover. Delay for displaying Popover after the mouse is enter. The unit is `ms` | [Delay Trigger](demo#hover-delay-time) | -| mouseLeaveDelay | `number` | 100 | Optional. Only when the type of trigger is hover. Delay for hiding Tooltip after the mouse is leave. The unit is `ms` | [Delay Trigger](demo#hover-delay-time) | - -# Interface & Type Definition - -### PositionType - -```ts -export type PositionType = - | 'left' - | 'right' - | 'top' - | 'bottom' - | 'bottom-left' - | 'bottom-right' - | 'top-left' - | 'top-right' - | 'left-top' - | 'left-bottom' - | 'right-top' - | 'right-bottom'; -``` diff --git a/devui/popover/popover.tsx b/devui/popover/popover.tsx deleted file mode 100644 index acc5cc7925909e0367c90aa86e4db0bf5b032ae4..0000000000000000000000000000000000000000 --- a/devui/popover/popover.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { defineComponent } from 'vue' - -export default defineComponent({ - name: 'd-popover', - props: { - }, - setup(props, ctx) { - return () => { - return
    devui-popover
    - } - } -}) \ No newline at end of file diff --git a/devui/progress/doc/api-cn.md b/devui/progress/doc/api-cn.md deleted file mode 100644 index 9b3ea2f177ab67dc8281bd6b65ef3209be984389..0000000000000000000000000000000000000000 --- 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 5343ceebdc1e8a1c70711d80d6386bef43f4c0d9..0000000000000000000000000000000000000000 --- 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 e654ac18825e2c30212a263f54354f87a86ffc1d..c7d4516bec7be843f092ff1f1bf1d561208a7e8a 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/quadrant-diagram/demo/quadrant-diagram-demo.tsx b/devui/quadrant-diagram/demo/quadrant-diagram-demo.tsx deleted file mode 100644 index 79ab887a52c31adc478dc8ee85e8afa8025120a4..0000000000000000000000000000000000000000 --- a/devui/quadrant-diagram/demo/quadrant-diagram-demo.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { defineComponent } from 'vue' - -export default defineComponent({ - name: 'd-quadrant-diagram-demo', - props: { - }, - setup(props, ctx) { - return () => { - return
    devui-quadrant-diagram-demo
    - } - } -}) \ No newline at end of file diff --git a/devui/quadrant-diagram/demo/quadrant-diagram.route.ts b/devui/quadrant-diagram/demo/quadrant-diagram.route.ts deleted file mode 100644 index a52c468a0b87aa84ca0ed9e0e3b5132f6f5d80b1..0000000000000000000000000000000000000000 --- a/devui/quadrant-diagram/demo/quadrant-diagram.route.ts +++ /dev/null @@ -1,15 +0,0 @@ -import QuadrantDiagramDemoComponent from './quadrant-diagram-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: QuadrantDiagramDemoComponent}, - { path: 'api', component: DevUIApiComponent, meta: { - 'zh-cn': ApiCn, - 'en-us': ApiEn - }} -] - -export default routes diff --git a/devui/quadrant-diagram/doc/api-cn.md b/devui/quadrant-diagram/doc/api-cn.md deleted file mode 100644 index 336155ae5c41dbc8b5362275376dc2238bd10a89..0000000000000000000000000000000000000000 --- a/devui/quadrant-diagram/doc/api-cn.md +++ /dev/null @@ -1,127 +0,0 @@ -## 引入 - -当前组件为实验性组件，需要按需引入，路径如下： - -``` -import { QuadrantDiagramModule } from 'ng-devui/experimental/quadrant-diagram'; -``` - -### d-quadrant-diagram 参数 - -| 参数 | 类型 | 默认值 | 描述 | 跳转 Demo | -| :-----------------: | :------------------------: | :------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------- | -| view | `IViewConfigs` | {height:900,width:950} | 可选，指定象限图所占宽高，由于需要计算坐标轴及象限区域，值必须为具体数字，若需要根据容器大小变更，建议使用 document 相关方法计算出实际值后传入 | [配置自定义象限图](demo#custom-quadrant) | -| axisConfigs | `IAxisConfigs` | 参考下方`DEFAULT_AXIS_CONFIGS` | 可选，设置坐标轴相关属性，具体配置参数意义参考下方`IAxisConfigs` | [配置自定义象限图](demo#custom-quadrant) | -| showQuadrants | `boolean` | true | 可选，是否显示四个象限区域 | -| quadrantConfigs | `Array` | 参考下方`DEFAULT_QUADRANT_CONFIGS` | 可选，设置四个象限区域的相关属性，数组中数据的顺序分别代表第一象限、第二象限、第三象限、第四象限，具体配置参数意义参考下方`IQuadrantConfigs` | [配置自定义象限图](demo#custom-quadrant) | -| labelData | `Array` | [] | 可选，指定警告提示的样式 | [基本用法](demo#basic-usage) | -| currentLabelSize | `labelSize` | 'large' | 可选，设置当前的标签尺寸，`'small'`表现为点，`'normal'`表现为含有标题的标签，`'large'`表现为含有标题和进度条的标签 | -| smallLabelTemplate | `TemplateRef` | -- | 可选，自定义`currentLabelSize='small'`时的标签样式 | -| normalLabelTemplate | `TemplateRef` | -- | 可选，自定义`currentLabelSize='normal'`时的标签样式 | -| largeLabelTemplate | `TemplateRef` | -- | 可选，自定义`currentLabelSize='large'`时的标签样式 | -| diagramId | `string` | 'devui-quadrant-diagram-'+当前组件顺序 | 可选，为象限图组件添加 id 属性，用于区分不同实例 | [基本用法](demo#basic-usage) | -| dropScope | `string` | 'default' | 可选， 限制 drop 的位置，必须匹配对应的 dragScope ，详情参考`DragDropAPI` | [配置自定义象限图](demo#custom-quadrant) | - -### d-quadrant-diagram 事件 - -| 参数 | 类型 | 描述 |跳转 Demo | -| :-------------: | :-----------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------- |:-----------------: | -| dropEvent | `EventEmitter` | 可选，拖拽放置时的触发事件，返回值`{ dragData: e.dragData, xAxisValue: xAxisValue, yAxisValue: yAxisValue }` ,分别对应当前标签数据，标签放置的 x 值，标签放置的 y 值 | [基本用法](demo#basic-usage) | -| zoomOutEvent | `EventEmitter` | 可选，点击缩小按钮的触发事件，返回值为当前的标签尺寸 | | -| zoomInEvent | `EventEmitter` | 可选，点击放大按钮的触发事件，返回值为当前的标签尺寸 | | -| fullScreenEvent | `EventEmitter` | 可选，点击全屏按钮的触发事件，返回值为当前的是否是全屏状态 | | - -### d-quadrant-diagram 相关类型定义及默认值如下 - -```typescript -export interface IAxisConfigs { - tickWidth?: number; // 刻度的宽(高)度，默认为10 - spaceBetweenLabelsAxis?: number; // 刻度值和坐标轴之间的距离，默认为20 - xAxisLabel?: string; // X轴名称，默认值为'紧急度' - yAxisLabel?: string; // Y轴名称，默认值为'重要度' - axisMargin?: number; // 右侧留出的空白区域 - xWeight?: number; // X轴权重，默认值为1 - yWeight?: number; // Y轴权重，默认值为1 - xAxisRange?: IRangeConfigs; // X轴的坐标值范围和间距设置,默认值为{min:0,max:100,step:10} - yAxisRange?: IRangeConfigs; // Y轴的坐标值范围和间距设置,默认值为{min:0,max:100,step:10} - originPosition?: { - left: number; - bottom: number; - }; // 原点的位置设置，默认值为{left:30,bottom:30} -} -export interface IQuadrantConfigs { - backgroundColor?: any; - color?: any; - title?: string; - top?: number; - left?: number; -} -export interface ILabelDataConfigs { - x: number; // X轴坐标值 - y: number; // Y轴坐标值 - title: string; // 标签的名称 - content?: string; // 鼠标悬浮在标签上时的提示内容 - progress?: number; // 标签对应事项的进度 - [propName: string]: any; // 其他数据 -} - -export interface IViewConfigs { - height: number; // 象限图高度 - width: number; // 象限图宽度 -} - -export interface IRangeConfigs { - min: number; // 坐标轴起始值 - max: number; // 坐标轴终止值 - step: number; // 坐标轴刻度值的间隔 -} - -export type labelSize = 'small' | 'normal' | 'large'; - -export const DEFAULT_AXIS_CONFIGS = { - tickWidth: 10, - spaceBetweenLabelsAxis: 20, - xAxisLabel: '紧急度', - yAxisLabel: '重要度', - xAxisRange: { - min: 0, - max: 100, - step: 10, - }, - yAxisRange: { - min: 0, - max: 50, - step: 5, - }, - originPosition: { - left: 30, - bottom: 30, - }, - axisMargin: 50, - xWeight: 1, - yWeight: 1, -}; -export const DEFAULT_QUADRANT_CONFIGS = [ - { title: '重要紧急' }, - { title: '重要不紧急' }, - { title: '不重要不紧急' }, - { title: '不重要紧急' }, -]; -``` - -```xml - - - -``` - -labelData: 传入的 labelData 数据 - -通过使用`[style.top.px]="labelInstance.getLabelTopValue(yAxisValue,offsetY)"`设置当前标签的 top 位置，其中 yAxisValue 为 y 轴坐标，offsetY 为偏移量，一般取标签高度的一半 -通过使用`[style.left.px]="labelInstance.getLabelLeftValue(xAxisValue,offsetX)"`设置当前标签的 left 位置，其中 yAxisValue 为 x 轴坐标，offsetX 为偏移量，一般取标签宽度度的一半 - -### d-quadrant-diagram 设计原则 - -#### 坐标值的确定 - -标签的坐标轴是根据标签中心点的位置所得出 diff --git a/devui/quadrant-diagram/doc/api-en.md b/devui/quadrant-diagram/doc/api-en.md deleted file mode 100644 index b66c46a304a4fc42eba1adec2eff402886ffde0e..0000000000000000000000000000000000000000 --- a/devui/quadrant-diagram/doc/api-en.md +++ /dev/null @@ -1,127 +0,0 @@ -## Import - -The current component is an experimental component and needs to be introduced as required. The path is as follows: - -``` -import {QuadrantDiagramModule} from' ng-devui/experimental/quadrant-diagram'; -``` - -### d-quadrant-diagram parameter - -| Parameter | Type | Default | Description | Jump to Demo | -| :-----------------: | :------------------------: | :------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------- | -| view | `IViewConfigs` | {height:900,width:950} | Optional. Specifies the width and height of the quadrant map. The value must be a specific number because the coordinate axis and quadrant area need to be calculated. If you need to change the value based on the container size, you are advised to use the document method to calculate the actual value and then transfer the value. | [Customize](demo#custom-quadrant) | -| axisConfigs | `IAxisConfigs` | Set the attributes of the coordinate axis by referring to `DEFAULT_AXIS_CONFIGS` | For details about the configuration parameters, see `IAxisConfigs` | [Customize](demo#custom-quadrant) | -| showQuadrants | `boolean` | true | Optional. Indicates whether to display four quadrants. | -| quadrantConfigs | `Array` | Set the attributes of the four quadrants by referring to `DEFAULT_QUADRANT_CONFIGS` | Optional. The sequence of data in the array indicates the first quadrant, second quadrant, third quadrant, and fourth quadrant respectively. For details about the parameter meaning, see `IQuadrantConfigs` | [Customize](demo#custom-quadrant) |. -| labelData | `Array` | [] | Optional. Specifies the style of the warning prompt. | [Basic Usage](demo#basic-usage) | -| currentLabelSize | `labelSize` | 'large' | Optional. Sets the current label size. The value `small'` is represented as a dot, and the value `normal'` is represented as a label with a title, `large'` is a label with a title and progress bar. | -| smallLabelTemplate | `TemplateRef` | -- |: Optional. Customize the label style when `currentLabelSize='small '`. | -| normalLabelTemplate | `TemplateRef` | -- |: Optional. Customize the label style when `currentLabelSize='normal '`. | -| largeLabelTemplate | `TemplateRef` | -- |: Optional. Customize the label style when `currentLabelSize='large'`. | -| diagramId | `string` | 'devui-quadrant-diagram-'+current component sequence | Optional. Add the ID attribute to the quadrant component to distinguish different instances. | [Basic Usage](demo#basic-usage) | -| dropScope | `string` | 'default' | Optional. This parameter specifies the drop position. The value must match the corresponding dragScope. For details, see `DragDropAPI` | [Customize](demo#custom-quadrant) |. - -### d-quadrant-diagram event - -| Parameter | Type | Description | Jump to Demo | -| :-------------: | :-----------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------- |:-----------------: | -| dropEvent | `EventEmitter` | Optional. Triggered event when a tag is dragged. The return value is `{dragData: e.dragData, xAxisValue: xAxisValue, yAxisValue: yAxisValue}`, which corresponds to the current tag data, x value of the tag, and y value of the tag. | [Basic Usage](demo#basic-usage) | -| zoomOutEvent | `EventEmitter` | Optional. Triggering event when the zoom-in button is clicked. The return value is the current label size. | -| zoomInEvent | `EventEmitter` | OptionaL. Triggering event when the zoom-in button is clicked. The return value is the current label size. | -| fullScreenEvent | `EventEmitter` | Optional. Triggering event when the full-screen button is clicked. The return value is whether the current status is full-screen. | - -### d-quadrant-diagram: - -```typescript -export interface IAxisConfigs { -tickWidth? : number; // Scale width (height). The default value is 10. -spaceBetweenLabelsAxis?: number; // Distance between the scale value and the coordinate axis. The default value is 20. -xAxisLabel? : string; // X axis name. The default value is Critical. -yAxisLabel? : string; // Y axis name. The default value is Importance. -axisMargin? : number; // Blank area on the right -xWeight? : number; // Weight of the X axis. The default value is 1. -yWeight? : number; // Y-axis weight. The default value is 1. -Set the coordinate value range and spacing of the xAxisRange?: IRangeConfigs; // X axis. The default value is {min:0,max:100,step:10}. -Set the coordinate value range and spacing of the yAxisRange?: IRangeConfigs; // Y axis. The default value is {min:0,max:100,step:10}. -originPosition? : { -left: number; -bottom: number; -}; // Origin position. The default value is {left:30,bottom:30}. -} -export interface IQuadrantConfigs { -backgroundColor? : any; -color? : any; -title? : string; -top? : number; -left? : number; -} -export interface ILabelDataConfigs { -x: number; // X-axis value -y: number; // Y-axis value -title: string; // Tag name -content? : string; // Message displayed when the cursor is hovered on the label. -progress? : number; // Progress of the item corresponding to the label -[propName: string]: any; // Other data -} - -export interface IViewConfigs { -height: number; // Quadrant image height -width: number; // Quadrant image width -} - -export interface IRangeConfigs { -min: number; // Start value of the coordinate axis. -max: number; // End value of the coordinate axis. -step: number; // Interval between scale values on the coordinate axis. -} - -export type labelSize = 'small' | 'normal' | 'large'; - -export const DEFAULT_AXIS_CONFIGS = { -tickWidth: 10, -spaceBetweenLabelsAxis: 20, -xAxisLabel: 'Urgent', -yAxisLabel: 'Importance', -xAxisRange: { -min: 0, -max: 100, -step: 10, -}, -yAxisRange: { -min: 0, -max: 50, -step: 5, -}, -originPosition: { -left: 30, -bottom: 30, -}, -axisMargin: 50, -xWeight: 1, -yWeight: 1, -}; -export const DEFAULT_QUADRANT_CONFIGS = [ -{title:'Major and Critical'}, -{title:'Major but not critical'}, -{title:'Not critical'}, -{title:'Not critical'}, -]; -``` - -```xml - - - -``` - -labelData: input labelData data. - -Use `[style.top.px]="labelInstance.getLabelTopValue(yAxisValue, offsetY)"` to set the top position of the current label. yAxisValue indicates the y axis, and offsetY indicates the offset. Generally, the value is half of the label height. -Use `[style.left.px]="labelInstance.getLabelLeftValue(xAxisValue, offsetX)"` to set the left position of the current label. yAxisValue indicates the x coordinate, and offsetX indicates the offset. Generally, the value is half of the width of the label. - -### D-quadrant-diagram Design Principles - -#### Determining Coordinates - -The axis of the label is determined by the position of the label's center point. diff --git a/devui/quadrant-diagram/quadrant-diagram.tsx b/devui/quadrant-diagram/quadrant-diagram.tsx deleted file mode 100644 index 9370e36dbffe88108cdf39b037f59b7a40acd90c..0000000000000000000000000000000000000000 --- a/devui/quadrant-diagram/quadrant-diagram.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { defineComponent } from 'vue' - -export default defineComponent({ - name: 'd-quadrant-diagram', - props: { - }, - setup(props, ctx) { - return () => { - return
    devui-quadrant-diagram
    - } - } -}) \ No newline at end of file diff --git a/devui/radio/demo/demo-column.tsx b/devui/radio/demo/demo-column.tsx deleted file mode 100644 index 4f425ff961fdd8d559d48002c7d78dce036b7af8..0000000000000000000000000000000000000000 --- 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 cd989527fc396fcefb964a710146efe0765a6f0a..0000000000000000000000000000000000000000 --- 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 be63d4fc214d4fcfe3fe7b80dfe0b47c29a91cbb..0000000000000000000000000000000000000000 --- 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 f3c554550c8fc04bcb8240e8ba9b515964b23fcf..0000000000000000000000000000000000000000 --- 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 ca9894b1ee37efae9c4056bb2ef7ae8c5be8395e..0000000000000000000000000000000000000000 --- 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 16f8e6ffab2dad237784df532f583f03267e86dc..0000000000000000000000000000000000000000 --- 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 f025bf24e596cc73802406c6b6a036bc68653dfa..0000000000000000000000000000000000000000 --- 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 db63ab2261aca3eb693638a080b892c495244f61..0000000000000000000000000000000000000000 --- 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 ea254c90f0202613cc16417ec064241e47c90c4e..0000000000000000000000000000000000000000 --- 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 8e6500eea786d07d669908ab4fa6be5c831e3a75..e2000d70fe9fa0a31e80ceb87ce7630cad68c93e 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 2a0afb0a11f17a6dfa39c58b987187b324a5a078..0000000000000000000000000000000000000000 --- 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 2e44d3161c28d4651b11dfece5fde68abcab715d..0000000000000000000000000000000000000000 --- 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 354704ff17b6f0cee6696c1dce7458a0653d4733..0000000000000000000000000000000000000000 --- 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 6461b839bd06eeffbc326e74d0651e8b2164130c..0000000000000000000000000000000000000000 --- 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 ce96b2192d0c03143e61cd9ef89cd6c4148a1bfe..0000000000000000000000000000000000000000 --- 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 e67c1e7724a0b07c4f885d8b57bc4a71d7381081..0000000000000000000000000000000000000000 --- 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 b54491e900441f961c7a79555e80bd5bd11fb273..0000000000000000000000000000000000000000 --- 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 6904c6b32a378803f78c8ae8e6af44345d4c8e2a..0000000000000000000000000000000000000000 --- 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 0000000000000000000000000000000000000000..172f6b02301061548f55bf66b798a1bd6c33a19a --- /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 2e35ff0575510a3efc142e6169b8fe25173ca906..0c54f08b19885be73c44d902ef92f533130848a4 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 85ceaafd2a905f8bae407dbe295805218cf15e56..b0b6a53ecd80020fa57fab3a4e1338d77f1046b1 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/read-tip/demo/read-tip-demo.tsx b/devui/read-tip/demo/read-tip-demo.tsx deleted file mode 100644 index e9d918c79a0fc052deab4bdaf13e355c843620fc..0000000000000000000000000000000000000000 --- a/devui/read-tip/demo/read-tip-demo.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { defineComponent } from 'vue' - -export default defineComponent({ - name: 'd-read-tip-demo', - props: { - }, - setup(props, ctx) { - return () => { - return
    devui-read-tip-demo
    - } - } -}) \ No newline at end of file diff --git a/devui/read-tip/demo/read-tip.route.ts b/devui/read-tip/demo/read-tip.route.ts deleted file mode 100644 index f839e91ef7ca473cbc492d45ee97b589d7f1b412..0000000000000000000000000000000000000000 --- a/devui/read-tip/demo/read-tip.route.ts +++ /dev/null @@ -1,15 +0,0 @@ -import ReadTipDemoComponent from './read-tip-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: ReadTipDemoComponent}, - { path: 'api', component: DevUIApiComponent, meta: { - 'zh-cn': ApiCn, - 'en-us': ApiEn - }} -] - -export default routes diff --git a/devui/read-tip/doc/api-cn.md b/devui/read-tip/doc/api-cn.md deleted file mode 100644 index a4686b94eae69848229b3dad242bd6c82745d63a..0000000000000000000000000000000000000000 --- a/devui/read-tip/doc/api-cn.md +++ /dev/null @@ -1,59 +0,0 @@ -# 如何使用 - -在 module 中引入： - -```ts -import { ReadTipModule } from 'ng-devui/read-tip'; -``` - -在页面中使用： - -```html - ... -``` - -# dReadTip - -## dReadTip 参数 - -| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | -| :------------------: | :---------------------------------: | :-------------------------: | :------------------------------ | -------------------------------------------- | -| readTipOptions | [`ReadTipOptions`](#readtipoptions) | [详见下方](#readtipoptions) | 必选，配置提示选项 | [基本用法](demo#basic) | -| readTipOptions.rules | [`ReadTipRules`](#readtiprules) | -- | 必选，配置 readtip 内容 | [包括多个提示的 readtip](demo#multi-readtip) | -| contentTemplate | `TemplateRef` | -- | 可选，传入模板显示 readtip 内容 | [传入模板显示内容](demo#readtip-template) | - -# 接口 & 类型定义 - -### ReadTipOptions - -```ts -export interface ReadTipOptions { - trigger?: 'hover' | 'click'; // 默认值是 hover - showAnimate?: boolean; // 默认值是 false - mouseenterTime?: number; // 默认值是 100 - mouseleaveTime?: number; // 默认值是 100 - position?: PositionType | PositionType[]; // 默认值是 'top' - overlayClassName?: string; // 默认值为空字符串 - rules: ReadTipRules; -} -``` - -### ReadTipRules - -```ts -export type ReadTipRules = ReadTipRule | ReadTipRule[]; - -export interface ReadTipRule { - key?: string; - selector: string; - trigger?: 'hover' | 'click'; // 可以继承自 ReadTipOptions - title?: string; - content?: string; - showAnimate?: boolean; // 可以继承自 ReadTipOptions - mouseenterTime?: number; // 可以继承自 ReadTipOptions - mouseleaveTime?: number; // 可以继承自 ReadTipOptions - position?: PositionType | PositionType[]; // 可以继承自 ReadTipOptions - overlayClassName?: string; // 可以继承自 ReadTipOptions - dataFn?: ({ element, rule: ReadTipRule }) => Observable<{ title?: string; content?: string; template?: TemplateRef }>; -} -``` diff --git a/devui/read-tip/doc/api-en.md b/devui/read-tip/doc/api-en.md deleted file mode 100644 index 99998286a601776cdb68a491d9fc184cb56794a2..0000000000000000000000000000000000000000 --- a/devui/read-tip/doc/api-en.md +++ /dev/null @@ -1,59 +0,0 @@ -# How to use - -Import into module: - -```ts -import { ReadTipModule } from 'ng-devui/read-tip'; -``` - -In the page: - -```html - ... -``` - -# dReadTip - -## dReadTip parameters - -| Parameter | Type | Default | Description | Jump to Demo | -| :------------------: | :---------------------------------: | :-----: | :------------------------------------------- | ------------------------------------------------------ | -| readTipOptions | [`ReadTipOptions`](#readtipoptions) | -- | Required. Set readtip options. | [Basic Usage](demo#basic-usage) | -| readTipOptions.rules | [`ReadTipRules`](#readtiprules) | -- | Option. Set the content of readtip | [Include Multiple Readtip](demo#multi-readtip) | -| contentTemplate | `TemplateRef` | -- | Options. Using template to customize content | [Display Content with Template](demo#readtip-template) | - -# Interface & Type Definition - -### ReadTipOptions - -```ts -export interface ReadTipOptions { - trigger?: 'hover' | 'click'; // default is hover - showAnimate?: boolean; // default is false - mouseenterTime?: number; // default is 100 - mouseleaveTime?: number; // default is 100 - position?: PositionType | PositionType[]; // default is 'top' - overlayClassName?: string; // default is '' - rules: ReadTipRules; -} -``` - -### ReadTipRules - -```ts -export type ReadTipRules = ReadTipRule | ReadTipRule[]; - -export interface ReadTipRule { - key?: string; - selector: string; - trigger?: 'hover' | 'click'; // can inherit from ReadTipOptions - title?: string; - content?: string; - showAnimate?: boolean; // can inherit from ReadTipOptions - mouseenterTime?: number; // can inherit from ReadTipOptions - mouseleaveTime?: number; // can inherit from ReadTipOptions - position?: PositionType | PositionType[]; // can inherit from ReadTipOptions - overlayClassName?: string; // can inherit from ReadTipOptions - dataFn?: ({ element, rule: ReadTipRule }) => Observable<{ title?: string; content?: string; template?: TemplateRef }>; -} -``` diff --git a/devui/read-tip/read-tip.tsx b/devui/read-tip/read-tip.tsx deleted file mode 100644 index a66e730e66835c5b07f0381d6a1aadd79a6b87a6..0000000000000000000000000000000000000000 --- a/devui/read-tip/read-tip.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { defineComponent } from 'vue' - -export default defineComponent({ - name: 'd-read-tip', - props: { - }, - setup(props, ctx) { - return () => { - return
    devui-read-tip
    - } - } -}) \ No newline at end of file diff --git a/devui/search/demo/demo-basic.tsx b/devui/search/demo/demo-basic.tsx deleted file mode 100644 index c94830dfccde0c77b72150a0900fa32b54cc2885..0000000000000000000000000000000000000000 --- 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 f03923e917aa1d66e96aa898fd8ef4a9736b2f81..0000000000000000000000000000000000000000 --- 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 87f008d7ed9714f92761df74316a06b59e64ce82..0000000000000000000000000000000000000000 --- 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 e8ef9bd3aaef780b97f1e980bbb636263eb3d9f5..0000000000000000000000000000000000000000 --- 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 ead7e61c5569e69f0ab4b945eb4d65323032c178..0000000000000000000000000000000000000000 --- 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 0a8bcbfeb0dea115e275a0a7c68f3b98be723002..0000000000000000000000000000000000000000 --- 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 197e0c2cb2d55feac2b3ec321727f8f1b15b04b1..87b0b7ff01264c55b5cfb317fe3d76ea9cf1a708 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 2794d35f36484b8e20378362939a198df330b05e..7b0656e6c72af4e8ab640a897a9c99714add6314 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 fca145f67fe8202becf5e40eadeae11cf78e3334..acf2fdd9c1ce0316bc22cb79cfb7ea20f55dac5c 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 160de4aab8aa0ab3594ab1a68b3bc0af2220587e..1cf778a291cb9b750ee71562c06d0e49a560797a 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/splitter/demo/splitter-demo.tsx b/devui/splitter/demo/splitter-demo.tsx deleted file mode 100644 index 2834e09515eeecb12a59745c2c62ca162c7e8559..0000000000000000000000000000000000000000 --- a/devui/splitter/demo/splitter-demo.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { defineComponent } from 'vue' - -export default defineComponent({ - name: 'd-splitter-demo', - props: { - }, - setup(props, ctx) { - return () => { - return
    devui-splitter-demo
    - } - } -}) \ No newline at end of file diff --git a/devui/splitter/demo/splitter.route.ts b/devui/splitter/demo/splitter.route.ts deleted file mode 100644 index 6d6a38f7f48c77b4d83e0b7424669fd4465d6f32..0000000000000000000000000000000000000000 --- a/devui/splitter/demo/splitter.route.ts +++ /dev/null @@ -1,15 +0,0 @@ -import SplitterDemoComponent from './splitter-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: SplitterDemoComponent}, - { path: 'api', component: DevUIApiComponent, meta: { - 'zh-cn': ApiCn, - 'en-us': ApiEn - }} -] - -export default routes diff --git a/devui/splitter/doc/api-cn.md b/devui/splitter/doc/api-cn.md deleted file mode 100644 index 43ea5200a31da3b4882770849fedde3833f7ff75..0000000000000000000000000000000000000000 --- a/devui/splitter/doc/api-cn.md +++ /dev/null @@ -1,47 +0,0 @@ -# 如何使用 -在module中引入： -```ts -import { SplitterModule } from 'ng-devui/splitter'; -``` -在页面中使用： -```html - - - - -``` - -# d-splitter - -## d-splitter 参数 - -| 参数 | 类型 | 默认值 | 描述 | 跳转 Demo | -| :----------------: | :------------------------: | :----------: | :---------------------------------------------------------- | ------------------------------------------------- | -| orientation | `'vertical'\|'horizontal'` | 'horizontal' | 可选，指定 Splitter 分割方向,可选值'vertical'\|'horizontal' | [基本用法](demo#basic-usage) | -| splitBarSize | `string` | '2px' | 可选，分隔条大小，默认 2px | [基本用法](demo#basic-usage) | -| disabledBarSize | `string` | '1px' | 可选，pane 设置不可调整宽度时生效 | [垂直布局用法](demo#vertical-layout) | -| showCollapseButton | `boolean` | true | 可选，是否显示收起/展开按钮 | [折叠收缩显示菜单](demo#shrink-show-menu) | - -# d-splitter-pane - -## d-splitter-pane 参数 - -| 参数 | 类型 | 默认值 | 描述 | 跳转 Demo | -| :---------------: | :-------------------------: | :----: | :---------------------------------------------------- | ---------------------------------------------------------------------- | -| size | `string` | -- | 可选，指定 pane 宽度，设置像素值或者百分比 | [基本用法](demo#basic-usage) | -| minSize | `string` | -- | 可选，指定 pane 最小宽度，设置像素值或者百分比 | [基本用法](demo#basic-usage) | -| maxSize | `string` | -- | 可选，指定 pane 最大宽度，设置像素值或者百分比 | [基本用法](demo#basic-usage) | -| resizable | `boolean` | true | 可选，指定 pane 是否可调整大小，会影响相邻 pane | [垂直布局用法](demo#vertical-layout) | -| collapsible | `boolean` | false | 可选，指定 pane 是否可折叠收起 | [基本用法](demo#basic-usage) | -| collapsed | `boolean` | false | 可选，指定 pane 初始化是否收起，配合`collapsible`使用 | [垂直布局用法](demo#vertical-layout) | -| collapseDirection | `'before'\|'after'\|'both'` | 'both' | 可选，指定非边缘 pane 收起方向，配合`collapsible`使用 | [指定折叠收起方向](demo#certain-unfold-direction) | -| shrink | `boolean` | false | 可选，是否在 pane 进行折叠后收缩 pane 宽度而非收起 | [折叠收缩显示菜单](demo#shrink-show-menu) | -| shrinkWidth | `number` | 36 | 可选，折叠后收缩的 pane 宽度 （单位：px） | [折叠收缩显示菜单](demo#shrink-show-menu) | - -## d-splitter-pane 事件 - -| 事件 | 类型 | 描述 | 跳转 Demo | -| :----------------: | :---------------------: | :-----------------------------------------: | ------------------------------------------------- | -| sizeChange | `EventEmitter` | 大小变动时，返回改变后的值,像素值或者百分比 | [基本用法](demo#basic-usage) | -| collapsedChange | `EventEmitter` | 折叠和展开时，返回当前 pane 是否折叠 | [基本用法](demo#basic-usage) | -| shrinkStatusChange | `EventEmitter` | 收缩和展开时，返回当前 pane 是否收缩 | [折叠收缩显示菜单](demo#shrink-show-menu) | diff --git a/devui/splitter/doc/api-en.md b/devui/splitter/doc/api-en.md deleted file mode 100644 index 1a0867cc8e1d9d674ce5188bbe89e5c06ce074b8..0000000000000000000000000000000000000000 --- a/devui/splitter/doc/api-en.md +++ /dev/null @@ -1,47 +0,0 @@ -# How To Use -Import in module： -```ts -import { SplitterModule } from 'ng-devui/splitter'; -``` -In the page： -```html - - - - -``` - -# d-splitter - -## d-splitter parameters - -| Parameter | Type | Default | Description | Jump to Demo | -| :----------------: | :------------------------: | :----------: | :---------------------------------------------------------- | ------------------------------------------------- | -| orientation | `'vertical'\|'horizontal'` | 'horizontal' | Optional. It specifies the split direction of the splitter. The value can be'vertical'\|'horizontal' | [Basic usage](demo#basic-usage) | -| splitBarSize | `string` | '2px' | Optional. The default value is 2px. | [Basic usage](demo#basic-usage) | -| disabledBarSize | `string` | '1px' | Optional. This parameter is valid when the unadjustable width is set for the panel. | [Vertical layout usage](demo#vertical-layout) | -| showCollapseButton | `boolean` | true | Optional. Whether to display the collapse/expand button | [Collapse and collapse menu](demo#shrink-show-menu) | - -# d-splitter-pane - -## d-splitter-pane parameters - -| Parameter | Type | Default | Description | Jump to Demo | -| :---------------: | :-------------------------: | :----: | :---------------------------------------------------- | ---------------------------------------------------------------------- | -| size | `string` | -- | Optional. Specifies the width of the pane and sets the pixel value or percentage. | [Basic usage](demo#basic-usage) | -| minSize | `string` | -- | Optional. Specifies the minimum width of the pane and sets the pixel value or percentage. | [Basic usage](demo#basic-usage) | -| maxSize | `string` | -- | Optional. This parameter specifies the maximum width of the pane and sets the pixel value or percentage. | [Basic usage](demo#basic-usage) | -| resizable | `boolean` | true | Optional. Specifies whether the size of a pane can be adjusted, which affects adjacent panes. | [Vertical layout usage](demo#vertical-layout) | -| collapsible | `boolean` | false | Optional. Specifies whether the pane can be collapsed or collapsed. | [Basic usage](demo#basic-usage) | -| collapsed | `boolean` | false | Optional. Specifies whether to collapse the pane during initialization. This parameter is used together with `collapsible`. | [Vertical layout usage](demo#vertical-layout) | -| collapseDirection | `before'\|'after'\|'both'` | 'both' | Optional. This parameter specifies the folding direction of a non-edge pane. This parameter is used together with `collapsible`. | [Specify the folding direction](demo#certain-unfold-direction) | -| shrink | `boolean` | false | Optional. Indicating whether to shrink the pane width after the pane is collapsed. | [Collapse and collapse menu](demo#shrink-show-menu) | -| shrinkWidth | `number` | 36 | Optional. Width of the pane to be collapsed after collapse (unit: px). | [Collapse and collapse menu](demo#shrink-show-menu) | - -## d-splitter-pane event - -| Event | Type | Description | Jump to Demo | -| :----------------: | :---------------------: | :-----------------------------------------: | ------------------------------------------------- | -| sizeChange | `EventEmitter` | When the size changes, the changed value (pixel value or percentage) is returned. | [Basic usage](demo#basic-usage) | -| collapsedChange | `EventEmitter` | Whether the current pane is collapsed or expanded. | [Basic usage](demo#basic-usage) | -| shrinkStatusChange | `EventEmitter` | Whether to collapse the current pane when the current pane is collapsed or expanded. | [Collapse and collapse menu](demo#shrink-show-menu) | diff --git a/devui/splitter/splitter.tsx b/devui/splitter/splitter.tsx deleted file mode 100644 index d1cf671d8dd30f9e934e8062e8f9ac259b5906fe..0000000000000000000000000000000000000000 --- a/devui/splitter/splitter.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { defineComponent } from 'vue' - -export default defineComponent({ - name: 'd-splitter', - props: { - }, - setup(props, ctx) { - return () => { - return
    devui-splitter
    - } - } -}) \ No newline at end of file diff --git a/devui/steps-guide/demo/steps-guide-demo.tsx b/devui/steps-guide/demo/steps-guide-demo.tsx deleted file mode 100644 index dfb46a4138c75e704938354283283465065726a5..0000000000000000000000000000000000000000 --- a/devui/steps-guide/demo/steps-guide-demo.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { defineComponent } from 'vue' - -export default defineComponent({ - name: 'd-steps-guide-demo', - props: { - }, - setup(props, ctx) { - return () => { - return
    devui-steps-guide-demo
    - } - } -}) \ No newline at end of file diff --git a/devui/steps-guide/demo/steps-guide.route.ts b/devui/steps-guide/demo/steps-guide.route.ts deleted file mode 100644 index 0e58b13d2575a52a9ad81207ada4fdf78363273d..0000000000000000000000000000000000000000 --- a/devui/steps-guide/demo/steps-guide.route.ts +++ /dev/null @@ -1,15 +0,0 @@ -import StepsGuideDemoComponent from './steps-guide-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: StepsGuideDemoComponent}, - { path: 'api', component: DevUIApiComponent, meta: { - 'zh-cn': ApiCn, - 'en-us': ApiEn - }} -] - -export default routes diff --git a/devui/steps-guide/doc/api-cn.md b/devui/steps-guide/doc/api-cn.md deleted file mode 100644 index 232c5f58cd92262b93c66163e3dcac42cae9763a..0000000000000000000000000000000000000000 --- a/devui/steps-guide/doc/api-cn.md +++ /dev/null @@ -1,75 +0,0 @@ -# 如何使用 - -在 module 中引入: - -```ts -import { StepsGuideModule } from 'ng-devui/steps-guide'; -``` - -在页面中使用: - -```html - - -``` - -# dStepsGuide - -## dStepsGuide 参数 - -| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | -| :------------------: | :-------------------------------------------------: | :--: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- | -| pageName | `string` | -- | 必选，用于标识操作指引是否显示，一组操作指引序列建议使用相同值 | [基本用法](demo#basic-usage) | -| steps | `Array<`[`StepItem`](#stepitem)`>` | [] | 必选，操作指引步骤数组，如通过 StepsGuideService.setSteps 设置了操作指引步骤，则优先使用服务中的，StepItem 对象定义见下 | [基本用法](demo#basic-usage) | -| stepIndex | `number` | -- | 必选，当前步骤在整个操作指引序列中的索引 | [基本用法](demo#basic-usage) | -| ~~position~~ | [`StepsGuidePositionType`](#stepsguidepositiontype) | top | 可选，指引信息弹出的位置方向，可选值：top、top-left、top-right、bottom、bottom-left、bottom-right、left、right（`已废弃，请使用dStepsGuidePosition`） | [基本用法](demo#basic-usage) | -| dStepsGuidePosition | [`StepsGuidePositionType`](#stepsguidepositiontype) | top | 可选，指引信息弹出的位置方向，可选值：top、top-left、top-right、bottom、bottom-left、bottom-right、left、right | [基本用法](demo#basic-usage) | -| leftFix | `number` | 0 | 可选，用于修正指引信息的位置 | [自定义位置](demo#custom-usage) | -| topFix | `number` | 0 | 可选，用于修正指引信息的位置 | [自定义位置](demo#custom-usage) | -| zIndex | `number` | 1100 | 可选，用于调整指引信息的显示层级 | [自定义位置](demo#custom-usage) | -| targetElement | `HTMLElement` | -- | 可选，指引信息显示的目标 dom ，如果指定，不再使用指令所在的 dom 作为目标 | [自定义位置](demo#custom-usage) | -| scrollElement | `HTMLElement` | -- | 可选，指引信息跟随滚动定位的容器 dom ，默认会自动获取，如果与预想 dom 不同时需要指定 | | -| scrollToTargetSwitch | `boolean` | true | 可选，是否自动滚动页面至指引信息显示的位置 dom | [基本用法](demo#basic-usage) | -| observerDom | `HTMLElement` | -- | 可选，允许用户指定一个 dom 反馈页面变化。主要用于用户无法控制或判断的且不会触发 resize 事件的 dom 改变导致指引信息位置变化的情况，例如：指引信息绑定在 fixed 定位的头部菜单，页面随路由跳转内容变化会显示或隐藏滚动条导致头部菜单的 dom 位置发生变化 | [自定义位置](demo#custom-usage) | -| extraConfig | [`ExtraConfig`](#extraconfig) | -- | 可选，扩展配置，用于隐藏上一步按钮和步骤圆点图标，ExtraConfig 对象定义见下文 | [自定义位置](demo#custom-usage) | - -### StepItem - -```ts -export interface StepItem { - title: string; // 引导标题 - content: string; // 引导介绍内容 -} -``` - -### StepsGuidePositionType - -```ts -export type StepsGuidePositionType = 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'right'; -``` - -### ExtraConfig - -```ts -export interface ExtraConfig { - hidePreStep: boolean; // 隐藏上一步按钮 - hideStepNav: boolean; // 隐藏步骤圆点图标显示 -} -``` - -### dStepsGuide 事件 - -| 参数 | 类型 | 说明 | 跳转 Demo | -| :-----------: | :-----------------------------------------------------: | :--------------------------------------------------------------- | :--------------------------- | -| operateChange | `EventEmitter<`[`OperateResponse`](#operateresponse)`>` | 可选，返回当前步骤索引和当前操作，OperateResponse 对象定义见下文 | [基本用法](demo#basic-usage) | - -# 接口 & 类型定义 - -### OperateResponse - -```ts -OperateResponse { - currentIndex: number; // 当前索引 - clickType: 'prev' | 'next' | 'close'; // 当前操作 -} -``` diff --git a/devui/steps-guide/doc/api-en.md b/devui/steps-guide/doc/api-en.md deleted file mode 100644 index cd98f1fba7859d0f58b59caf91e7707be068ed46..0000000000000000000000000000000000000000 --- a/devui/steps-guide/doc/api-en.md +++ /dev/null @@ -1,76 +0,0 @@ -# How to use - -Import into module - -```ts -import { StepsGuideModule } from 'ng-devui/steps-guide'; -``` - -In the page - -```html - - -``` - -# dStepsGuide - -## dStepsGuide Parameter - -| Parameter | Type | Default | Description | Jump to Demo | -| :------------------: | :-------------------------------------------------: | :-----: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | -| pageName | `string` | -- | Required. This parameter specifies whether to display the operation guide. It is recommended that you use the same value for a group of operation guide sequences. | [Basic usage](demo#basic-usage) | -| steps | `Array<`[`StepItem`](#stepitem)`>` | [] | Required. Operation guide step array. If an operation guide step is set through StepsGuideService.setSteps, the step in the service is preferentially used. For the definition of the StepItem object, see the following | [Basic usage](demo#basic-usage) | -| stepIndex | `number` | -- | Required. Index of the current step in the operation guide sequence. | [Basic usage](demo#basic-usage) | -| ~~position~~ | [`StepsGuidePositionType`](#stepsguidepositiontype) | top | Optional. Guide the position and direction of information dragging, optional values: top, top-left, top-right, bottom, left-left, bottom-right, left, right (`deprecated, please use dStepsGuidePosition`). | [Basic usage](demo#basic-usage) | -| dStepsGuidePosition | [`StepsGuidePositionType`](#stepsguidepositiontype) | top | Optional. Guide the position and direction of the information pop-up, optional values: top, top-left, top-right, bottom, bottom-left, bottom-right, left, right | [Basic usage](demo#basic-usage) | -| leftFix | `number` | 0 | Optional. It is used to correct the location of the guidance information. | [Customized location](demo#custom-usage) | -| topFix | `number` | 0 | Optional. Used to correct the location of guidance information. | [Customized location](demo#custom-usage) | -| zIndex | `number` | 1100 | Optional. This parameter is used to adjust the display level of guidance information. | [Customized position](demo#custom-usage) | -| targetElement | `HTMLElement` | -- | Optional. This parameter specifies the target dom in the instruction information. If this parameter is specified, the dom where the instruction is located is not used as the target. | [Customized location](demo#custom-usage) | -| scrollToTargetSwitch | `boolean` | true | Optional. Indicates whether to automatically scroll to the location where the guide information is displayed. dom | [Customized location](demo#custom-usage) | -| targetElement | `HTMLElement` | -- | Optional. This parameter specifies the target dom in the instruction information. If this parameter is specified, the dom where the instruction is located is not used as the target. | [Customized location](demo#custom-usage) | -| scrollToTargetSwitch | `boolean` | true | Optional. Indicates whether to automatically scroll to the location where the guide information is displayed. dom | [Customized location](demo#custom-usage) | -| observerDom | `HTMLElement` | -- | Optional. Allows users to specify a dom to report page changes. This parameter is used when the location of the guide information changes due to the dom change that cannot be controlled or determined by the user and does not trigger the resize event. For example, the guide information is bound to the header menu of fixed positioning, the dom position of the header menu changes because the scroll bar is displayed or hidden when the page changes with the route. | [Customized position](demo#custom-usage) | -| extraConfig | [`ExtraConfig`](#extraconfig) | -- | Optional. Extended configuration used to hide the button and dot icon of the previous step. For details about the definition of the ExtraConfig object, see the following description. | [Customized location](demo#custom-usage) | - -### StepItem - -```ts -export interface StepItem { - title: string; // guide title - content: string; // guide content -} -``` - -### StepsGuidePositionType - -```ts -export type StepsGuidePositionType = 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'right'; -``` - -### ExtraConfig - -```ts -export interface ExtraConfig { - hidePreStep: boolean; // Hide Previous Button - hideStepNav: boolean; // Hide step dot icon display -} -``` - -### dStepsGuide Event - -| Parameter | Type | Description | Jump to Demo | -| :-----------: | :-----------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------ | :------------------------------ | -| operateChange | `EventEmitter<`[`OperateResponse`](#operateresponse)`>` | Optional. Returns the index of the current step and the current operation. For details about the OperateResponse object, see the following description. | [Basic usage](demo#basic-usage) | - -# Interface & Type Definition - -### OperateResponse - -```ts -OperateResponse { - currentIndex: number; // Current index - clickType: 'prev' | 'next' | 'close'; // Current Operation -} -``` diff --git a/devui/steps-guide/steps-guide.tsx b/devui/steps-guide/steps-guide.tsx deleted file mode 100644 index 35704156e50ad69165bc55816df944ca6a5a116a..0000000000000000000000000000000000000000 --- a/devui/steps-guide/steps-guide.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { defineComponent } from 'vue' - -export default defineComponent({ - name: 'd-steps-guide', - props: { - }, - setup(props, ctx) { - return () => { - return
    devui-steps-guide
    - } - } -}) \ No newline at end of file diff --git a/devui/sticky/demo/sticky-demo.tsx b/devui/sticky/demo/sticky-demo.tsx deleted file mode 100644 index abf4917d69af99b5f48e40334f57eeaad402dffe..0000000000000000000000000000000000000000 --- a/devui/sticky/demo/sticky-demo.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { defineComponent } from 'vue' - -export default defineComponent({ - name: 'd-sticky-demo', - props: { - }, - setup(props, ctx) { - return () => { - return
    devui-sticky-demo
    - } - } -}) \ No newline at end of file diff --git a/devui/sticky/demo/sticky.route.ts b/devui/sticky/demo/sticky.route.ts deleted file mode 100644 index 508c883b905f5e309698834090ffa9fd9d574585..0000000000000000000000000000000000000000 --- a/devui/sticky/demo/sticky.route.ts +++ /dev/null @@ -1,15 +0,0 @@ -import StickyDemoComponent from './sticky-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: StickyDemoComponent}, - { path: 'api', component: DevUIApiComponent, meta: { - 'zh-cn': ApiCn, - 'en-us': ApiEn - }} -] - -export default routes diff --git a/devui/sticky/doc/api-cn.md b/devui/sticky/doc/api-cn.md deleted file mode 100644 index 0bf45b30cf4dcff727d73715d35dae70638bb36c..0000000000000000000000000000000000000000 --- a/devui/sticky/doc/api-cn.md +++ /dev/null @@ -1,53 +0,0 @@ -# 如何使用 - -在module中引入： -```ts -import { StickyModule } from 'ng-devui'; -``` - -在页面中使用： -```html - -``` - -# d-sticky - -使用了一个组件能在父容器或者指定容器出现在可视区域的时候，跟随可视区域移动，在父容器或者指定容器从可视区域消失的时候，跟随父容器移动到可视区域外。如果父容器等于可视窗口，那组件不会消失。 - -便贴组件的内容必须有自己的宽度和高度，否则浮动的时候可能会宽度高度不正确。 - -目前只支持垂直方向跟随。 - -**注意**：父容器必须有个高度，并且不会由于组件的浮动出现高度塌陷，否则组件无法跟随浮动。 - -**注意**：由于监听了页面的滚动，一个页面里的 sticky 元素不应有太多，影响性能。 - -## d-sticky 参数 - -| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | -| :----------: | :----------------------------: | :----------------------: | :------------------------------------------------------------------------------------: | ----------------------------------------------------- | -| zIndex | `number` | -- | 可选，指定包裹层的 z-index，用于浮动的时候控制 z 轴的叠放 | [基本用法](demo#basic-usage) | -| container | `HTMLElement` | 父容器 | 可选，触发的容器，可不同于父容器 | [基本用法](demo#basic-usage) | -| view | `{top?:number,bottom?:number}` | {top:0,bottom:0} | 可选，用于可视区域的调整，比如顶部有固定位置的头部等，数值对应被遮挡的顶部或底部的高度 | [基本用法](demo#basic-usage) | -| scrollTarget | `HTMLElement` | document.documentElement | 可选，设置要发生滚动的容器，一般为滚动条所在容器，为主页面的滚动条时候可以不设置 | [更换滚动容器](demo#scroll-target) | - -**注意**： container 范围如果大于 scrollTarget，生效的只有 scrollTarget 范围。 - -## d-sticky 事件 - -| 事件 | 类型 | 说明 | 跳转 Demo | -| :----------: | :--------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | ----------------------------------------------- | -| statusChange | [`EventEmitter`](#stickystatus) | 可选，状态变化的时候触发，值为变化后的状态值 | [基本用法](demo#basic-usage) | - -# 接口 & 类型定义 - -### StickyStatus -```ts -/** - * normal: 表示处于正常状态 - * follow: 表示处于跟着页面滚动固定位置状态 - * stay: 表示横向滚动时候的跟随固定状态 - * remain: 表示被容器托起处于容器底部跟着容器走的状态 - */ -export type StickyStatus = 'normal' | 'follow' | 'stay' | 'remain'; -``` diff --git a/devui/sticky/doc/api-en.md b/devui/sticky/doc/api-en.md deleted file mode 100644 index aef39b5dcb252bf54caa0221b3bc87744c11bfde..0000000000000000000000000000000000000000 --- a/devui/sticky/doc/api-en.md +++ /dev/null @@ -1,53 +0,0 @@ -# How to use - -Import into module: -```ts -import { StickyModule } from 'ng-devui'; -``` - -In the page: -```html - -``` - -# d-sticky - -A component is used to move with the visual area when the parent container or specified container appears in the visual area, when a parent container or a specified container disappears from the visible area, the container moves out of the visible area with the parent container. If the parent container is equal to the visible window, the component does not disappear. - -The content of the notepad must have its own width and height; otherwise, the width and height may be incorrect when floating. - -Currently, only the vertical direction is supported. - -**Note**: that the parent container must have a height and do not collapse due to component floats, otherwise the component cannot follow the float. - -**Note**: that the page scrolling is monitored. Therefore, there should be no too many sticky elements on a page, which affects the performance. - -## d-sticky Parameters - -| Parameter | Type | Default | Description | Jump to Demo | -| :----------: | :----------------------------: | :----------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | --------------------------------------------------------------------- | -| zIndex | `number` | -- | Optional. This parameter specifies the z-index of the wrapping layer, which is used to control the stacking of the z axis during floating. | [Basic Usage](demo#basic-usage) | -| container | `HTMLElement` | Parent container | Optional. Triggered container, which can be different from the parent container. | [Basic Usage](demo#basic-usage) | -| 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) | -| scrollTarget | `HTMLElement` | document.documentElement | 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) | - -Note: If the container range is greater than the scrollTarget range, only the scrollTarget range takes effect. - -## d-sticky Event - -| Event | Type | Description | Jump to Demo | -| :----------: | :--------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | -------------------------------------------------- | -| statusChange | [`EventEmitter`](#stickystatus) | Optional. It is triggered when the status changes. The value is the status after the change. | [Basic Usage](demo#basic-usage) | - -# Interface & Type Definition - -### StickyStatus -```ts -/** - * normal: Normal state. - * follow: Indicates that the page is scrolled to a fixed position. - * stay: Indicates the following fixed status during horizontal scrolling. - * remain: Represents being lifted by the container in the condition of following the container at the bottom of the container. - */ -export type StickyStatus = 'normal' | 'follow' | 'stay' | 'remain'; -``` diff --git a/devui/sticky/sticky.tsx b/devui/sticky/sticky.tsx deleted file mode 100644 index b0e714cd7e33e99d662075d815dfb132828d7227..0000000000000000000000000000000000000000 --- a/devui/sticky/sticky.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { defineComponent } from 'vue' - -export default defineComponent({ - name: 'd-sticky', - props: { - }, - setup(props, ctx) { - return () => { - return
    devui-sticky
    - } - } -}) \ No newline at end of file diff --git a/devui/style/core/_form.scss b/devui/style/core/_form.scss index c2527f0f45590097d3e3805b4aaa008c43873cdd..1be1406bad56c6cd39c281a64aa885d43225b41c 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 678a10e276e422ff3c01fc3fffe403639c9d6e93..0000000000000000000000000000000000000000 --- 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 d704a59208a605275032d3d2d9a59bc257febafa..0000000000000000000000000000000000000000 --- 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 8704c9a3772bb17654df7ed0610de3d48c6c3e28..0000000000000000000000000000000000000000 --- 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 372b1facdc84811acea3d37114c4a2e54ddf19ce..0000000000000000000000000000000000000000 --- 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 e8d59f6a41b28d7a3ac60f549c12e92d8cd31b6d..0000000000000000000000000000000000000000 --- 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 510852bb4cee35091c7adff650f936f9cf7cb4b3..0000000000000000000000000000000000000000 --- 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 ec8e8efe2b629724cc49d8e8f24655faf75f0ad0..a7dd88e22fef925b7aa661511f041d47e665f252 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 0000000000000000000000000000000000000000..1f947c1d2413ba21f29e843e007cfeac06935b45 --- /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 bf31071cc9cd125fc3911fc42f4353c702eb8823..d4dcd7cc700287ca3f0620e3590d3804a5a8eed8 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 95c8dc13c604ef8f07fac3ac4689b0b203130847..a2cc63c2c283baafd78553656bf78a08f0df3571 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 9b5934b2c9e15ed7f5e666bb6fa00bc3e18845ad..76a2c91581675db1faf1bdb969705598637cf2fa 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 e6f28eece40afd2143d590d669ca99847a168982..0000000000000000000000000000000000000000 --- 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 42c3fd37e86ddc9e7f8ead66235c634fe34e68d4..0000000000000000000000000000000000000000 --- 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 b0d44dfe0ffcdcc4f736d2db26d821afbcb62f79..0000000000000000000000000000000000000000 --- 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 477fccc72c84f7d127c1e098d5cbd8cc4019001a..0000000000000000000000000000000000000000 --- 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 6a1e89a351f6f02ae51da49509034ac7d673e75b..0000000000000000000000000000000000000000 --- 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 f51b36c74a4bf9dbc3ceac4e75ae581a14b7552f..0b3d644f76152ba60db1afe2dc0de36b3a04932f 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 0000000000000000000000000000000000000000..5e0c7515378b07f281d8373ddd7e352dccc581c4 --- /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 f713924c9708faeb69543346bdbda80300038b70..8ed491cbe549f9e6518decf9d53e49d6fa5abcd4 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 79a88d65c01140c952023b8f8b76d52c92a12764..0000000000000000000000000000000000000000 --- 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 e83473317d897c660ed89ce4a21566b4955e1ae1..0000000000000000000000000000000000000000 --- 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 b9829246474601f7302d8eafeef1809fecb86d69..0000000000000000000000000000000000000000 --- 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 7fc7f8f2de5ef172a755399f8db324a84dd8517e..0000000000000000000000000000000000000000 --- 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 ed498c9d85ba48e3a39c889cbc19b458abf2246b..0000000000000000000000000000000000000000 --- 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 ab81c23d98ad13424a6cc1ba8108124d80fdcb38..0000000000000000000000000000000000000000 --- 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 f055ddea856396f3d073fc591eb0a53bad92727e..0000000000000000000000000000000000000000 --- 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/tags/demo/tags-demo.tsx b/devui/tags/demo/tags-demo.tsx deleted file mode 100644 index c14f79c07ea36143a6124439fa8e6f445f83b66b..0000000000000000000000000000000000000000 --- a/devui/tags/demo/tags-demo.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { defineComponent } from 'vue' - -export default defineComponent({ - name: 'd-tags-demo', - props: { - }, - setup(props, ctx) { - return () => { - return
      devui-tags-demo
      - } - } -}) \ No newline at end of file diff --git a/devui/tags/demo/tags.route.ts b/devui/tags/demo/tags.route.ts deleted file mode 100644 index 932cbc2ac0f369b4170b4623118e0f125275d131..0000000000000000000000000000000000000000 --- a/devui/tags/demo/tags.route.ts +++ /dev/null @@ -1,15 +0,0 @@ -import TagsDemoComponent from './tags-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: TagsDemoComponent}, - { path: 'api', component: DevUIApiComponent, meta: { - 'zh-cn': ApiCn, - 'en-us': ApiEn - }} -] - -export default routes diff --git a/devui/tags/doc/api-cn.md b/devui/tags/doc/api-cn.md deleted file mode 100644 index 2d90fe1e06e365cdf83e7d32a947df90ab049bf0..0000000000000000000000000000000000000000 --- a/devui/tags/doc/api-cn.md +++ /dev/null @@ -1,47 +0,0 @@ -# 如何使用 -在module中引入： -```ts -import { TagsModule } from 'ng-devui/tags'; -``` - -在页面中使用： -```html - -``` -# Tags - -## d-tag 参数 - -| 参数 | 类型 | 默认值 | 描述 | 跳转 Demo | -| :----------------: | :-----------: | :-------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------- | -| tag | `string` | -- | 必选，记录输入的标签和选择的标签 | [单个标签](demo#single-tag) | -| mode | `ITagMode` | 'default' | 可选，标签的类型 `'default' \| 'checkable' \| 'closeable'` | [单个标签](demo#single-tag) | -| titleContent | `string` | -- | 可选，设置鼠标悬浮时 title 的显示内容 | [单个标签](demo#single-tag) | -| labelStyle | `string` | '' | 可选，标签的样式 可使用'blue-w98'、'aqua-w98' 、'olivine-w98' 、'green-w98' 、'yellow-w98' 、'orange-w98'、'pink-w98'、'red-w98'、'purple-w98',或可传入自定义 class | [单个标签](demo#single-tag) | -| deletable | `boolean` | false | 可选，设置标签是否可删除 | [单个标签](demo#single-tag) | -| customViewTemplate | `TemplateRef` | -- | 可选，自定义标签模板 | [单个标签](demo#single-tag) | -| checked | `boolean` | false | 可选，标签选中的初始状态 | [单个标签](demo#single-tag) | -| customColor | `string` | '' | 可选，传入颜色字符串（如'#f50'），自定义彩色标签的颜色 | [单个标签](demo#single-tag) | - -## d-tag 事件 - -| 事件名称 | 类型 | 描述 | 跳转 Demo | -| :-----------: | :----------------------------------------: | :-------------------------------- | -------------------------------------------- | -| tagDelete | `EventEmitter<{ tag: tag, event: event }>` | 删除 tag 的时候触发的事件 | [单个标签](demo#single-tag) | -| checkedChange | `EventEmitter` | tag 的 check 状态改变时触发的事件 | | - -## d-tags 参数 - -| 参数 | 类型 | 默认值 | 描述 | 跳转 Demo | -| :-------------: | :--------: | :-------: | :--------------------------------------------------------- | ------------------------------------------ | -| tags | `Array` | [] | 必选，记录输入的标签和选择的标签 | [标签组](demo#tags-group) | -| mode | `ITagMode` | 'default' | 可选，标签的类型 `'default' \| 'checkable' \| 'closeable'` | [标签组](demo#tags-group) | -| displayProperty | `string` | '' | 可选，设置属性名，使得标签名为该属性对应的值 | [标签组](demo#tags-group) | -| deletable | `boolean` | false | 可选，设置标签是否可删除 | [标签组](demo#tags-group) | -| titleProperty | `string` | '' | 可选，设置属性名，鼠标悬浮时 title 显示的值 | [标签组](demo#tags-group) | - -## d-tags 事件 - -| 事件名称 | 类型 | 描述 | 跳转 Demo | -| :-------: | :------------------------------------------------------: | :---------------------------- | ------------------------------------------ | -| tagDelete | `EventEmitter<{ tag: tag, index: index, event: event }>` | 删除某个 tag 的时候触发的事件 | [标签组](demo#tags-group) | diff --git a/devui/tags/doc/api-en.md b/devui/tags/doc/api-en.md deleted file mode 100644 index c7ba9df91441536faca55055ef04c621b785a46a..0000000000000000000000000000000000000000 --- a/devui/tags/doc/api-en.md +++ /dev/null @@ -1,44 +0,0 @@ -# How to use -Import into module: -```ts -import { TagsModule } from 'ng-devui/tags'; -``` - -In the page: -```html - -``` -# Tags - -## d-tag parameter - -| Parameter | Type | Default | Description | Jump to Demo | -| :-------------------------: | :-----------: | :-----: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | -| tag | `string` | -- | Required. The entered tag and selected tag are recorded. | [Single Tag](demo#single-tag) | -| titleContent | `string` | -- | Optional. Sets the title displayed when the cursor is hovered. | [Single Tag](demo#single-tag) | -| labelStyle | `string` | '' | Optional. The label can be blue-w98, aqua-w98, olivine-w98, green-w98, yellow-w98, orange-w98, pink-w98, red-w98, or purple-w98, you can also transfer a custom class. | [Single Tag](demo#single-tag) | . | -| deleteable | `boolean` | false | Optional. Specifies whether a tag can be deleted. | [Single Tag](demo#single-tag) | -| customViewTemplate Template | `TemplateRef` | -- | Optional. Custom tag template. | [Single Tag](demo#single-tag) | -| checked | `boolean` | false | Optional. Initial status of a tag. selected. | [Single Tag](demo#single-tag) | -| customColor | `string` | '' | Optional. Enter a color string (for example, '#f50') and customize the color label. | [Single Tag](demo#single-tag) | - -## d-tag event - -| Event name | Type | Description | Jump to Demo | -| :--------: | :--------------------------------------: | :------------------------------------ | ---------------------------------------------- | -| tagDelete | `EventEmitter<{tag: tag, event: event}>` | Event triggered when a tag is deleted. | [Single Tag](demo#single-tag) | - -## d-tags parameter - -| Parameter | Type | Default | Description | Jump to Demo | -| :-------------: | :-------: | :-----: | :-------------------------------------------------------------------------------------------------- | --------------------------------------------- | -| tags | `Array` | [] | Required. It records the entered tag and selected tag. | [Tag Group](demo#tags-group) | -| displayProperty | `string` | '' | Optional. Set the attribute name to the value of the attribute. | [Tag Group](demo#tags-group) | -| deleteable | `boolean` | false | Optional. Specifies whether a tag can be deleted. | [Tag Group](demo#tags-group) | -| titleProperty | `string` | '' | Optional. Sets the attribute name. When the cursor is hovered, the value of the title is displayed. | [Tag Group](demo#tags-group) | - -## d-tags event - -| Event name | Type | Description | Jump to Demo | -| :--------: | :----------------------------------------------------: | :------------------------------------ | --------------------------------------------- | -| tagDelete | `EventEmitter<{tag: tag, index: index, event: event}>` | Event triggered when a tag is deleted. | [Tag Group](demo#tags-group) | diff --git a/devui/tags/tags.tsx b/devui/tags/tags.tsx deleted file mode 100644 index 431486ed3e6e413436c8f2a5e1920319d3688e17..0000000000000000000000000000000000000000 --- a/devui/tags/tags.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { defineComponent } from 'vue' - -export default defineComponent({ - name: 'd-tags', - props: { - }, - setup(props, ctx) { - return () => { - return
      devui-tags
      - } - } -}) \ No newline at end of file diff --git a/devui/text-input/demo/demo-basic.tsx b/devui/text-input/demo/demo-basic.tsx deleted file mode 100644 index b4bf82be22d74738aa5b09b0fd47517b6c297bf1..0000000000000000000000000000000000000000 --- 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 2b8bb83ec31232de8cc81c0d013bf2d84dd285a7..0000000000000000000000000000000000000000 --- 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 66ef800c9ee8e9dd7cd82051ca83a52033a9e43c..0000000000000000000000000000000000000000 --- 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 52fe195c041001c994cbe5036fcf221324830274..0000000000000000000000000000000000000000 --- 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 34be38cee214eed9da24962656041bd17805c6f6..0000000000000000000000000000000000000000 --- 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 9144e9365bea494657c152e5836f88cbfb131f4d..0000000000000000000000000000000000000000 --- 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 4a68f956771b742e4b25b947af484eb95c3bd935..0000000000000000000000000000000000000000 --- 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/devui/textarea/demo/textarea-demo.tsx b/devui/textarea/demo/textarea-demo.tsx deleted file mode 100644 index 59ee8c252362831176e59fffc4c738b50cca0221..0000000000000000000000000000000000000000 --- a/devui/textarea/demo/textarea-demo.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { defineComponent } from 'vue' - -export default defineComponent({ - name: 'd-textarea-demo', - props: { - }, - setup(props, ctx) { - return () => { - return
      devui-textarea-demo
      - } - } -}) \ No newline at end of file diff --git a/devui/textarea/demo/textarea.route.ts b/devui/textarea/demo/textarea.route.ts deleted file mode 100644 index 178aedb03db65e8174fe1e3b103f4a9fb502b315..0000000000000000000000000000000000000000 --- a/devui/textarea/demo/textarea.route.ts +++ /dev/null @@ -1,15 +0,0 @@ -import TextareaDemoComponent from './textarea-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: TextareaDemoComponent}, - { path: 'api', component: DevUIApiComponent, meta: { - 'zh-cn': ApiCn, - 'en-us': ApiEn - }} -] - -export default routes diff --git a/devui/textarea/doc/api-cn.md b/devui/textarea/doc/api-cn.md deleted file mode 100644 index 711dfee9fd6bd1ebb785006002dc36651e695cfe..0000000000000000000000000000000000000000 --- a/devui/textarea/doc/api-cn.md +++ /dev/null @@ -1,24 +0,0 @@ -# 如何使用 - -在module中引入： - -```ts -import { TextareaModule } from 'ng-devui/textarea'; -``` - -在页面中使用： - -```xml - -``` - -# dTextarea -## dTextarea 参数 - -| 参数 | 类型 | 默认 | 说明 | 跳转 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) | -| resize | `none \| vertical \| horizontal \| both \| inherit` | none | 可选，文本框是否可调整大小，可选项：不可调整，水平调整，垂直调整，自由调整，默认继承 | [调整大小](demo#resize) | diff --git a/devui/textarea/doc/api-en.md b/devui/textarea/doc/api-en.md deleted file mode 100644 index bc07881651c4bc0818f61767a32537d7d1a28aeb..0000000000000000000000000000000000000000 --- a/devui/textarea/doc/api-en.md +++ /dev/null @@ -1,23 +0,0 @@ -# How to use - -Import into module: - -```ts -import { TextareaModule } from 'ng-devui/textarea'; -``` - -In the page: - -```xml - -``` -# dTextarea -## dTextarea Parameter - -| Parameter | Type | Default | Description | Jump to Demo | -| :---------: | :-----------------------------------------: | :---: | :----------------------------------------------------------------------------------: | --------------------------------------------- | -| id | `string` | -- | Optional. Textarea ID | [Basic Usage](demo#basic-usage) | -| placeholder | `string` | -- | Optional. Textarea placeholder | [Basic Usage](demo#basic-usage) | -| disabled | `boolean` | false | Optional. Indicating whether the textarea is disabled | [Basic Usage](demo#basic-usage) | -| error | `boolean` | false | Optional. Indicating whether an input error occurs in the textarea | [Basic Usage](demo#basic-usage) | -| resize | `none \| vertical \| horizontal \| both \| inherit` | none | Optional. Indicates whether the textarea can be resized. The options are as follows: Unadjustable, Horizontal, Vertical, and Free. The default value is inherited | [Resizable](demo#resize) | diff --git a/devui/textarea/textarea.tsx b/devui/textarea/textarea.tsx deleted file mode 100644 index 2dd6c8ede2a35723c4e10b90fff5bf064b2fe59a..0000000000000000000000000000000000000000 --- a/devui/textarea/textarea.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { defineComponent } from 'vue' - -export default defineComponent({ - name: 'd-textarea', - props: { - }, - setup(props, ctx) { - return () => { - return
      devui-textarea
      - } - } -}) \ No newline at end of file diff --git a/devui/time-axis/demo/time-axis-demo.tsx b/devui/time-axis/demo/time-axis-demo.tsx deleted file mode 100644 index b5447a3e2d95d9a50ebac364bcafa0d3b1d853f6..0000000000000000000000000000000000000000 --- a/devui/time-axis/demo/time-axis-demo.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { defineComponent } from 'vue' - -export default defineComponent({ - name: 'd-time-axis-demo', - props: { - }, - setup(props, ctx) { - return () => { - return
      devui-time-axis-demo
      - } - } -}) \ No newline at end of file diff --git a/devui/time-axis/demo/time-axis.route.ts b/devui/time-axis/demo/time-axis.route.ts deleted file mode 100644 index 48c7b5e9162d0571ed5344c3d8d77bf745f403fe..0000000000000000000000000000000000000000 --- a/devui/time-axis/demo/time-axis.route.ts +++ /dev/null @@ -1,15 +0,0 @@ -import TimeAxisDemoComponent from './time-axis-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: TimeAxisDemoComponent}, - { path: 'api', component: DevUIApiComponent, meta: { - 'zh-cn': ApiCn, - 'en-us': ApiEn - }} -] - -export default routes diff --git a/devui/time-axis/doc/api-cn.md b/devui/time-axis/doc/api-cn.md deleted file mode 100644 index 40575c9e1bb15946e52e6b8fb2325052aa6ca2cf..0000000000000000000000000000000000000000 --- a/devui/time-axis/doc/api-cn.md +++ /dev/null @@ -1,57 +0,0 @@ -# 如何使用 - -在module中引入： - -```ts -import { TimeAxisModule } from 'ng-devui/time-axis'; -``` -在页面中使用： -``` - -``` - -# d-time-axis - -## d-time-axis 参数 - -| 参数 | 类型 | 默认值 | 描述 | 跳转 Demo | -| :------------: | :------: | :--: | :-------------------------------------------------------- | -------------------------------------------------------- | -| data | `TimeAxisData` | -- | 可选，配置数据，是一个对象 | [基本用法](demo#basic-usage) | -| contentTemplate | `TemplateRef` | -- | 可选，内容模板，默认为空，当 model 为 `template` 时需要设置 | [内容使用模板自定义](demo#content-with-template) | - -## data 参数 - -| 参数 | 类型 | 默认值 | 描述 | 跳转 Demo | -| :-------: | :--------------------------: | :--: | :-------------- | -------------------------------------------------------- | -| direction | `'vertical'\|'horizontal'` | '' | 可选，方向 | [设置方向](demo#direction) | -| position | `'left'\|'bottom'` | '' | 可选,时间点定位 | [基本用法](demo#basic-usage) | -| model | `'text'\|'html'\|'template'` | '' | 可选，模型 | [内容使用html](demo#content-with-html) | -| list | `array` | [] | 可选，列表数据 | [基本用法](demo#basic-usage) | - -## list 参数 - -| 参数 | 类型 | 默认值 | 描述 | 跳转 Demo | -| :----: | :-----------------------------------------: | :--: | :------------------------------------------------------- | ------------------------------------------------------ | -| time | `string` | -- | 可选，时间 | [基本用法](demo#basic-usage) | -| text | `string` | -- | 可选，文本内容 | [基本用法](demo#basic-usage) | -| type | `'primary'\|'success'\|'danger'\|'warning'` | -- | 可选，类型 | [设置方向](demo#direction) | -| status | `'runned'\|'running'` | -- | 可选，状态，默认为空，值可以是 runned 已完成，running 运行中 | [设置方向](demo#direction) | -| data | `array` | -- | 可选，模板数据，当 model 设置为 template 时生效 | [内容使用模板自定义](demo#content-with-template) | - -## TimeAxisData - -``` -interface TimeAxisData { - direction?: 'vertical' | 'horizontal'; - position?: 'bottom' | 'left'; - model: 'text' | 'html' | 'template'; - list: Array<{ - time?: string; - text?: string; - type?: 'primary' | 'success' | 'danger' | 'warning'; - status?: 'runned' | 'running' | ''; - iconClass?: string; - data?: any; - }>; -} -``` diff --git a/devui/time-axis/doc/api-en.md b/devui/time-axis/doc/api-en.md deleted file mode 100644 index e6c4a0143bacfbba12f66de09d776d23aa445683..0000000000000000000000000000000000000000 --- a/devui/time-axis/doc/api-en.md +++ /dev/null @@ -1,56 +0,0 @@ -# How to use - -Import into the module: -```ts -import { TimeAxisModule } from 'ng-devui/time-axis'; -``` -In the page: -``` - -``` - -# d-time-axis - -## d-time-axis parameter - -| Parameter | Type | Default | Description | Jump to Demo | -| :------------: | :------: | :--: | :-------------------------------------------------------- | -------------------------------------------------------- | -| data | `TimeAxisData` | -- | Optional, configuration data. It is an object. | [Basic usage](demo#basic-usage) | -| contentTemplate | `TemplateRef` | -- | Optional, Content template. This parameter is left empty by default. This parameter is mandatory when model is set to `template`. | [Customize content using a template](demo#content-with-template) | - -## data parameter - -| Parameter | Type | Default | Description | Jump to Demo | -| :-------: | :--------------------------: | :--: | :-------------- | -------------------------------------------------------- | -| direction | `'vertical'\|'horizontal'` |'' | Optional, direction | [Setting direction parameters](demo#direction) | -| position | `'left'\|'bottom'` |'' | Optional, It is used to locate the time point. | [Basic usage](demo#basic-usage) | -| model | `'text'\|'html'\|'template'` |'' | Optional, Model | [Content Use HTML](demo#content-with-html) | -| list | `array` | [] | Optional, List data | [Basic usage](demo#basic-usage) | - -## list parameter - -| Parameter | Type | Default | Description | Jump to Demo | -| :----: | :-----------------------------------------: | :--: | :----------------------------------------------------------- | ----------------------------------------------- | -| time | `string` | -- | Optional, time | [Basic usage](demo#basic-usage) | -| text | `string` | -- | Optional, Text content | [Basic usage](demo#basic-usage) | -| type | `'primary'\|'success'\|'danger'\|'warning'` | -- | Optional, type | [Setting direction parameters](demo#direction) | -| status | `'runned'\|'running'` | -- | Optional, The default value is empty. The value can be runned or running. | [Setting direction parameters](demo#direction) | -| data | `array` | -- | Optional, Template data. This parameter is valid only when model is set to template. | [Customize content using a template](demo#content-with-template) | - -## TimeAxisData - -``` -interface TimeAxisData { - direction?: 'vertical' | 'horizontal'; - position?: 'bottom' | 'left'; - model: 'text' | 'html' | 'template'; - list: Array<{ - time?: string; - text?: string; - type?: 'primary' | 'success' | 'danger' | 'warning'; - status?: 'runned' | 'running' | ''; - iconClass?: string; - data?: any; - }>; -} -``` \ No newline at end of file diff --git a/devui/time-axis/time-axis.tsx b/devui/time-axis/time-axis.tsx deleted file mode 100644 index 689b4a2351a8ab1862d6f8e0abe287e5fe49f786..0000000000000000000000000000000000000000 --- a/devui/time-axis/time-axis.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { defineComponent } from 'vue' - -export default defineComponent({ - name: 'd-time-axis', - props: { - }, - setup(props, ctx) { - return () => { - return
      devui-time-axis
      - } - } -}) \ No newline at end of file diff --git a/devui/time-picker/demo/time-picker-demo.tsx b/devui/time-picker/demo/time-picker-demo.tsx deleted file mode 100644 index fc36e3e5c34f8697d9fc600041bd669c8a7ba92e..0000000000000000000000000000000000000000 --- a/devui/time-picker/demo/time-picker-demo.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { defineComponent } from 'vue' - -export default defineComponent({ - name: 'd-time-picker-demo', - props: { - }, - setup(props, ctx) { - return () => { - return
      devui-time-picker-demo
      - } - } -}) \ No newline at end of file diff --git a/devui/time-picker/demo/time-picker.route.ts b/devui/time-picker/demo/time-picker.route.ts deleted file mode 100644 index 65bfd2d6d293a828eb35e81239969310a037e67b..0000000000000000000000000000000000000000 --- a/devui/time-picker/demo/time-picker.route.ts +++ /dev/null @@ -1,15 +0,0 @@ -import TimePickerDemoComponent from './time-picker-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: TimePickerDemoComponent}, - { path: 'api', component: DevUIApiComponent, meta: { - 'zh-cn': ApiCn, - 'en-us': ApiEn - }} -] - -export default routes diff --git a/devui/time-picker/doc/api-cn.md b/devui/time-picker/doc/api-cn.md deleted file mode 100644 index 941f7a66ecfc7886ad745a7d3a82cf4699abbded..0000000000000000000000000000000000000000 --- a/devui/time-picker/doc/api-cn.md +++ /dev/null @@ -1,52 +0,0 @@ -# 如何使用 - -在module中引入： - -``` -import { TimePickerModule } from 'ng-devui/time-picker'; -``` -在页面中使用： -``` - -``` -# TimePicker - -## TimePicker参数 - -| 参数 | 类型 | 默认 | 说明 | 跳转Demo | -| :-----------------------: | :------------: | :--------: | :-------------------------------------------| :-----------------------------------------------------------------| -| disabled | `boolean` | false | 可选，禁用选择 |[基本用法](demo#basic-usage) | -| timePickerWidth | `number` | -- | 可选，下拉框的宽度 |[基本用法](demo#basic-usage) | -| autoOpen | `boolean` | false | 可选，初始化是否直接展开 |[基本用法](demo#basic-usage) | -| format | `string` | 'hh:mm:ss' | 可选，传入格式化，控制时间格式 |[格式化](demo#format) | -| minTime | `string` | '00:00:00' | 可选，限制最小可选时间 |[格式化](demo#format) | -| maxTime | `string` | '23:59:59' | 可选，限制最大可选时间 |[格式化](demo#format) | -| customViewTemplate | `TemplateRef` | -- | 可选，自定义快捷设置时间或自定义操作区内容 |[传入模板](demo#custom) | -| appendToBodyDirections | `Array` | `['rightDown', 'leftDown', 'rightUp', 'leftUp']` | 方向数组优先采用数组里靠前的位置 | -- | - -## TimePicker事件 - -| 事件 | 类型 | 说明 | 跳转Demo | -| :----------------: | :--------------------: | :------------------------------------------: | :------------------------------------------------------------------| -| selectedTimeChange | `EventEmitter` | 可选，确定的时候会发出新激活的子项的数据 |[基本用法](demo#basic-usage) | - -## 可调用的组件内部方法 - -详情参见[传入模板](demo#custom) - -```TypeScript -// 参数timeObj为必传，选择对应时间，触发selectedTimeChange -chooseTime(timeObj) -// 其中必须包含time：他是一个时间字符串，若不传type，则time必须是完整的时间，并且会直接选中对应时间，若传type，则time必须是单个时间，并且会选中对应的事件 -// type为可选：他是一个字符串，并且只能传'hh'、'mm'、'ss'的其中一个，大小写不敏感，需要和上述time结合使用 -TimeObj { - time: string; - type?: string; -} -// 参数timeObj为必传，选择对应时间，触发confirmTimeChange -confirmTime(timeObj) -// 清空已选择的时间 -clearAll() -// 隐藏选择器，在调用chooseTime的时候不会触发关闭，需要自行手动关闭，在调用confirmTime的时候会直接关闭 -hide() -``` diff --git a/devui/time-picker/doc/api-en.md b/devui/time-picker/doc/api-en.md deleted file mode 100644 index 6497e9b7649ad5f125c50817ce9cf88d5778e495..0000000000000000000000000000000000000000 --- a/devui/time-picker/doc/api-en.md +++ /dev/null @@ -1,53 +0,0 @@ -# How to use - -Import into module: - -``` -import {TimePickerModule} from' ng-devui/time-picker'; -``` -In the page: -``` - -``` - -# TimePicker - -## TimePicker Parameters - -| Parameter | Type | Default | Description | Jump to Demo | -| :-----------------------: | :------------: | :--------: | :-------------------------------------------| :-----------------------------------------------------------------| -| disabled | `boolean` | false | Optional. Disable selection. | [Basic usage](demo#basic-usage) | -| timePickerWidth | `number` | -- | Optional, width of the drop-down list box | [Basic usage](demo#basic-usage) | -| autoOpen | `boolean` | false | Optional, indicating whether to expand the initialization directly. | [Basic usage](demo#basic-usage) | -| format | `string` | 'hh:mm:ss' | Optional. The input format is used to control the time format. | [Format](demo#format) | -| minTime | `string` | '00:00:00' | Optional. The minimum available time is limited. | [formatting](demo#format) | -| maxTime | `string` | '23:59:59' | Optional. The maximum time allowed is limited. | [formatting](demo#format) | -| customViewTemplate | `TemplateRef` | -- | Optional. Customize the time or content in the operation area. | [Input template](demo#custom) | -| appendToBodyDirections | `Array` | ` ['rightDown','leftDown','rightUp','leftUp']` | The first position in the array is preferred for the direction array. | -- | - -## TimePicker Event - -| Event | Type | Description | Jump Demo | -| :----------------: | :--------------------: | :------------------------------------------: | :------------------------------------------------------------------| -| selectedTimeChange | `EventEmitter` |: optional. When you confirm it, the data of the newly activated subitem is sent. | [Basic usage](demo#basic-usage) | - -## Internal methods that can be invoked - -For details, see(demo#custom). - -```TypeScript -// The timeObj parameter is mandatory. Select the corresponding time to trigger selectedTimeChange. -chooseTime(timeObj) -// The value must contain time: a time character string. If type is not transferred, the value of time must be a complete time and the corresponding time is selected. If type is transferred, the value of time must be a single time and the corresponding event is selected. -// type is optional. It is a character string and can only be hh, mm, or ss. The value is case-insensitive and must be used together with time. -TimeObj { -time: string; -type? : string; -} -// The timeObj parameter is mandatory. Select the corresponding time to trigger confirmTimeChange. -confirmTime(timeObj) -// Clear the selected time. -clearAll() -// Hide the selector. The selector is not closed when chooseTime is called. You need to manually close the selector. The selector is directly closed when confirmTime is called. -hide() -``` diff --git a/devui/time-picker/time-picker.tsx b/devui/time-picker/time-picker.tsx deleted file mode 100644 index 946613a2f51628e202b3052d9780aa5a4c66fb9d..0000000000000000000000000000000000000000 --- a/devui/time-picker/time-picker.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { defineComponent } from 'vue' - -export default defineComponent({ - name: 'd-time-picker', - props: { - }, - setup(props, ctx) { - return () => { - return
      devui-time-picker
      - } - } -}) \ No newline at end of file diff --git a/devui/tooltip/demo/tooltip-demo.tsx b/devui/tooltip/demo/tooltip-demo.tsx deleted file mode 100644 index b442322ecf68b195ea83d59b87cf71cc102ae0a9..0000000000000000000000000000000000000000 --- a/devui/tooltip/demo/tooltip-demo.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { defineComponent } from 'vue' - -export default defineComponent({ - name: 'd-tooltip-demo', - props: { - }, - setup(props, ctx) { - return () => { - return
      devui-tooltip-demo
      - } - } -}) \ No newline at end of file diff --git a/devui/tooltip/demo/tooltip.route.ts b/devui/tooltip/demo/tooltip.route.ts deleted file mode 100644 index 9487805e08f67e1b625d94083bb9b3f2787adcf4..0000000000000000000000000000000000000000 --- a/devui/tooltip/demo/tooltip.route.ts +++ /dev/null @@ -1,15 +0,0 @@ -import TooltipDemoComponent from './tooltip-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: TooltipDemoComponent}, - { path: 'api', component: DevUIApiComponent, meta: { - 'zh-cn': ApiCn, - 'en-us': ApiEn - }} -] - -export default routes diff --git a/devui/tooltip/doc/api-cn.md b/devui/tooltip/doc/api-cn.md deleted file mode 100644 index 45ed3303dcb567c33f7ed949979c8fdaf6a250b6..0000000000000000000000000000000000000000 --- a/devui/tooltip/doc/api-cn.md +++ /dev/null @@ -1,34 +0,0 @@ -# 如何使用 - -在 module 中引入: - -```ts -import { TooltipModule } from 'ng-devui/tooltip'; -``` - -在页面中使用: - -```html - - -``` - -# dTooltip - -## dTooltip 参数 - -| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | -| :-------------: | :-------------------------------------------------: | :--------------------------------: | :-------------------------------------------------: | ------------------------------ | -| content | `string\|DOMString` | -- | 必选，tooltip 显示内容 | [基本用法](demo#basic-usage) | -| position | [`PositionType`](#positiontype) `\| PositionType[]` | ['top', 'right', 'bottom', 'left'] | 可选，tooltip 显示位置 | [基本用法](demo#basic-usage) | -| showAnimate | `boolean` | false | 可选，是否显示划出动画 | [基本用法](demo#basic-usage) | -| mouseEnterDelay | `number` | 150 | 可选，鼠标移入后延时多少才显示 Tooltip，单位是 `ms` | [延时触发](demo#delay-trigger) | -| mouseLeaveDelay | `number` | 100 | 可选，鼠标移出后延时多少才隐藏 Tooltip，单位是 `ms` | [延时触发](demo#delay-trigger) | - -# 接口 & 类型定义 - -### PositionType - -```ts -export type PositionType = 'left' | 'right' | 'top' | 'bottom'; -``` diff --git a/devui/tooltip/doc/api-en.md b/devui/tooltip/doc/api-en.md deleted file mode 100644 index 91b5c469d715c82f28abe4ae46af48a35485ea33..0000000000000000000000000000000000000000 --- a/devui/tooltip/doc/api-en.md +++ /dev/null @@ -1,34 +0,0 @@ -# How to use - -Import into module - -```ts -import { TooltipModule } from 'ng-devui/tooltip'; -``` - -In the page - -```html - - -``` - -# dTooltip - -### dTooltip Parameter - -| Parameter | Type | Default | Description | Jump to Demo | -| :-------------: | :-------------------------------------------------: | :--------------------------------: | :-------------------------------------------------------------------------------: | ----------------------------------- | -| content | `string\|DOMString` | -- | Required. Tooltip display content | [Basic Usage](demo#basic-usage) | -| position | [`PositionType`](#positiontype) `\| PositionType[]` | ['top', 'right', 'bottom', 'left'] | Optional. Tooltip display position | [Basic Usage](demo#basic-usage) | -| showAnimate | `boolean` | false | Optional. Whether to display the drawing animation | [Basic Usage](demo#basic-usage) | -| mouseEnterDelay | `number` | 150 | Optional. Delay for displaying Tooltip after the mouse is enter. The unit is `ms` | [Delay Trigger](demo#delay-trigger) | -| mouseLeaveDelay | `number` | 100 | Optional. Delay for hiding Tooltip after the mouse is leave, The unit is `ms` | [Delay Trigger](demo#delay-trigger) | - -# Interface & Type Definition - -### PositionType - -```ts -export type PositionType = 'left' | 'right' | 'top' | 'bottom'; -``` diff --git a/devui/tooltip/tooltip.tsx b/devui/tooltip/tooltip.tsx deleted file mode 100644 index a84a0c67629310c2a9e6c695891760f5b330a6f3..0000000000000000000000000000000000000000 --- a/devui/tooltip/tooltip.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { defineComponent } from 'vue' - -export default defineComponent({ - name: 'd-tooltip', - props: { - }, - setup(props, ctx) { - return () => { - return
      devui-tooltip
      - } - } -}) \ No newline at end of file diff --git a/devui/transfer/demo/transfer-demo.tsx b/devui/transfer/demo/transfer-demo.tsx deleted file mode 100644 index de3341b01f3761ceab28e44155d2ca77b5d13396..0000000000000000000000000000000000000000 --- a/devui/transfer/demo/transfer-demo.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { defineComponent } from 'vue' - -export default defineComponent({ - name: 'd-transfer-demo', - props: { - }, - setup(props, ctx) { - return () => { - return
      devui-transfer-demo
      - } - } -}) \ No newline at end of file diff --git a/devui/transfer/demo/transfer.route.ts b/devui/transfer/demo/transfer.route.ts deleted file mode 100644 index 9618e4bd36f0e93b4d0cd36ab4dee9b9fcf59cad..0000000000000000000000000000000000000000 --- a/devui/transfer/demo/transfer.route.ts +++ /dev/null @@ -1,15 +0,0 @@ -import TransferDemoComponent from './transfer-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: TransferDemoComponent}, - { path: 'api', component: DevUIApiComponent, meta: { - 'zh-cn': ApiCn, - 'en-us': ApiEn - }} -] - -export default routes diff --git a/devui/transfer/doc/api-cn.md b/devui/transfer/doc/api-cn.md deleted file mode 100644 index 7d13f18391bb991f6f94488980a05c0ab578c2bd..0000000000000000000000000000000000000000 --- a/devui/transfer/doc/api-cn.md +++ /dev/null @@ -1,32 +0,0 @@ -# 如何使用 -在module中引入： -```ts -import { TransferModule } from 'ng-devui/transfer'; -``` -在页面中使用： -```html - -``` - -# d-transfer - -## d-transfer 参数 - -| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | -| :---------------: | :-----: | :---: | :------------------------- | ------------------------------------------------------------ | -| sourceOption | `array` | [] | 可选参数，穿梭框源数据 | [基本用法](demo#transfer-demo-base) | -| targetOption | `array` | [] | 可选参数，穿梭框目标数据 | [基本用法](demo#transfer-demo-base) | -| titles | `array` | [] | 可选参数，穿梭框标题 | [基本用法](demo#transfer-demo-base) | -| height | `string` | 320px | 可选参数，穿梭框高度 | -| isSearch | `number` | false | 可选参数，是否可以搜索 | [搜索穿梭框](demo#transfer-demo-search) | -| isSourceDroppable | `boolean` | false | 可选参数，源是否可以拖拽 | -| isTargetDroppable | `boolean` | false | 可选参数，目标是否可以拖拽 | [排序穿梭框](demo#transfer-demo-sort) | -| disabled | `boolean` | false | 可选参数 穿梭框禁止使用 | [基本用法](demo#transfer-demo-base) | -| beforeTransfer | `(sourceOption, targetOption) => boolean \| Promise \| Observable` | - | 可选参数 在transfer事件发生前判断事件是否允许触发 | [基本用法](demo#transfer-demo-base) | - -## d-transfer 事件 - -| 事件 | 类型 | 说明 | 跳转 Demo | -| :--------------: | :--------------------: | :--------------------------------: | -------------------------------------------------------- | -| transferToSource | 返回穿梭框源和目标数据 | 当点击右穿梭时，返回源和目标数据； | [基本用法](demo#transfer-demo-base) | -| transferToTarget | 返回穿梭框源和目标数据 | 当点击左穿梭时，返回源和目标数据； | [基本用法](demo#transfer-demo-base) | diff --git a/devui/transfer/doc/api-en.md b/devui/transfer/doc/api-en.md deleted file mode 100644 index dabb0e54efe57ea93480b51e43fb475bc4c4210a..0000000000000000000000000000000000000000 --- a/devui/transfer/doc/api-en.md +++ /dev/null @@ -1,32 +0,0 @@ -# How To Use -Import into module： -```ts -import { TransferModule } from 'ng-devui/transfer'; -``` -In the page： -```html - -``` - -# d-transfer - -## d-transfer parameter - -| Parameter | Type | Default | Description | Jump to Demo | -| :---------------: | :-----: | :---: | :------------------------- | ------------------------------------------------------------ | -| sourceOption | `array` | [] | Optional. This parameter indicates the source data of the shuttle box. | [Basic Usage](demo#transfer-demo-base) | -| targetOption | `array` | [] | Optional. This parameter indicates the target data of the shuttle box. | [Basic Usage](demo#transfer-demo-base) | -| titles | `array` | [] | Optional. Title of the shuttle box. | [Basic Usage](demo#transfer-demo-base) | -| height | `string` | 320px | Optional. It indicates the height of the shuttle box. | -| isSearch | `number` | false | Optional. Specifies whether to search. | [Search Shuttle Box](demo#transfer-demo-search) | -| isSourceDroppable | `boolean` | false | Optional. Indicates whether the source can be dragged. | -| isTargetDroppable | `boolean` | false | Optional. Indicates whether the object can be dragged. | [Sorting Shuttle Box](demo#transfer-demo-sort) | -| disabled | `boolean` | false | Optional. The shuttle box cannot be used. | [Basic Usage](demo#transfer-demo-base) | -| beforeTransfer | `(sourceOption, targetOption) => boolean \| Promise \| Observable` | - | Optional. Determines whether the transfer event can be triggered before the transfer event occurs. | [Basic Usage](demo#transfer-demo-base) | - -## d-transfer event - -| Event | Type | Description | Jump to Demo | -| :--------------: | :--------------------: | :--------------------------------: | -------------------------------------------------------- | -| transferToSource | Return the source and target data in the shuttle box. | When you click the right button, the source and target data are returned. | [Basic Usage](demo#transfer-demo-base) | -| transferToTarget | Return the source and target data in the shuttle box. | When you click the left button, the source and target data are returned. | [Basic Usage](demo#transfer-demo-base) | diff --git a/devui/transfer/transfer.tsx b/devui/transfer/transfer.tsx deleted file mode 100644 index 3b5ff1415559d4a5b94d4a7df5d88abad42bea8d..0000000000000000000000000000000000000000 --- a/devui/transfer/transfer.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { defineComponent } from 'vue' - -export default defineComponent({ - name: 'd-transfer', - props: { - }, - setup(props, ctx) { - return () => { - return
      devui-transfer
      - } - } -}) \ No newline at end of file diff --git a/devui/tree-select/demo/tree-select-demo.tsx b/devui/tree-select/demo/tree-select-demo.tsx deleted file mode 100644 index cec2c1f338fb936bb85943435e425a631b2adbe9..0000000000000000000000000000000000000000 --- a/devui/tree-select/demo/tree-select-demo.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { defineComponent } from 'vue' - -export default defineComponent({ - name: 'd-tree-select-demo', - props: { - }, - setup(props, ctx) { - return () => { - return
      devui-tree-select-demo
      - } - } -}) \ No newline at end of file diff --git a/devui/tree-select/demo/tree-select.route.ts b/devui/tree-select/demo/tree-select.route.ts deleted file mode 100644 index 4e2259c0122aed1502288189106d1ade1ee1334f..0000000000000000000000000000000000000000 --- a/devui/tree-select/demo/tree-select.route.ts +++ /dev/null @@ -1,15 +0,0 @@ -import TreeSelectDemoComponent from './tree-select-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: TreeSelectDemoComponent}, - { path: 'api', component: DevUIApiComponent, meta: { - 'zh-cn': ApiCn, - 'en-us': ApiEn - }} -] - -export default routes diff --git a/devui/tree-select/doc/api-cn.md b/devui/tree-select/doc/api-cn.md deleted file mode 100644 index af5bd33f19bc804e8f9291822dd0b4d11c224f35..0000000000000000000000000000000000000000 --- a/devui/tree-select/doc/api-cn.md +++ /dev/null @@ -1,86 +0,0 @@ -# 如何使用 - -在 module 中引入： - -```ts -import { TreeSelectModule } from 'ng-devui/treeSelect'; -``` - -在页面中使用： - -```html - -``` -# d-tree-select - -## d-tree-select 参数 - -| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | -| :------------------: | :-------------------------------------: | :-------------------------------------: | :------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------- | -| treeData | `Array` | -- | 必选，需要展示的源数据 | [基本用法](demo#basic-usage) | -| placeholder | `string` | -- | 可选，占位字符串 | [基本用法](demo#basic-usage) | -| disabled | `boolean` | false | 可选，禁止输入态 | [基本用法](demo#basic-usage) | -| expandTree | `boolean` | false | 可选，是否自动展开树 | [基本用法](demo#basic-usage) | -| multiple | `boolean` | false | 可选，多选开关 | [基本用法](demo#basic-usage) | -| treeNodeIdKey | `string` | 'id' | 可选，id 键值名 | [设置key](demo#keys) | -| treeNodeChildrenKey | `string` | 'children' | 可选，children 子节点键值名 | [设置key](demo#keys) | -| treeNodeTitleKey | `string` | 'title' | 可选，title 键值名 | [设置key](demo#keys) | -| disabledKey | `string` | 'disabled' | 可选，disabled 节点禁选键值名 | [基本用法](demo#basic-usage) | -| leafOnly | `boolean` | false | 可选，仅叶节点可选开关 | [仅叶节点可选](demo#leaf-only) | -| delimiter(废弃) | `string` | `,` | 可选，选中结果分隔符（用于多选） | -| iconParentOpen | `string` | DefaultIcons.iconParentOpen | 可选，树节点打开时图标 | [设置节点展开关闭图标](demo#icon-parent) | -| iconParentClose | `string` | DefaultIcons.iconParentClose | 可选，树节点关闭时图标 | [设置节点展开关闭图标](demo#icon-parent) | -| iconLeaf | `string` | DefaultIcons.iconLeaf | 可选，节点图标 | [设置key](demo#keys) | -| closeOnNodeSelected | `boolean` | true | 可选，选中节点时关闭下拉框的开关（仅用于单选） | [设置key](demo#keys) | -| width | `'auto' \| '~px' \| '~%'` | -- | 可选，下拉框宽度 | [基本用法](demo#basic-usage) | -| searchable | `boolean` | false | 可选，是否可搜索树 | [可简易搜索树](demo#simple-search) | -| readyEvent | `function` | (treeSelect: TreeSelectComponent) => {} | 可选，当组件初始化完成时可调用的钩子函数 | [初始化完成时调用的钩子](demo#init-hooks) | -| appendTo | `string` | -- | 可选，将下拉框附着到输入值的 DOM 选择器节点中，值为空时下拉框在此组件内 | [Append To Element 能力](demo#append-to-element) | -| allowUnselect | `boolean` | true | 可选，是否允许单选模式下反选已选中的项目 | [基本用法](demo#basic-usage) | -| iconTemplatePosition | `'before-checkbox' \| 'after-checkbox'` | 'before-checkbox' | 可选，自定义 template 的位置 | [自定义icon能力](demo#custom-icon) | -| allowClear | `boolean` | false | 可选，是否允许单选模式下点击输入框上的清除按钮来清空已选中的项目。`allowUnselect`必须为`true`，否则将破坏体验一致性规则。`enableLabelization`为`false`时才会生效 | [基本用法](demo#basic-usage) | -| enableLabelization | `boolean` | true | 可选，是否启用标签化展示效果，配合公有云视觉默认启用。 | [不使用标签化](demo#labelization) | -| iconTemplateInput | `TemplateRef` | -- | 可选，自定义 icon 的 template | [自定义icon能力](demo#custom-icon) | -| customViewTemplate | `TemplateRef` | -- | 可选,支持自定义区域显示内容定制 | [自定义区域](demo#custom-template) | -| customViewDirection | `'bottom' \| 'right'\| 'left'` | 'bottom' | 可选, customViewTemplate 所处的相对下拉列表的位置 | [自定义区域](demo#custom-template) | -| virtualScroll | `boolean` | false | 可选，是否开启虚拟滚动，常用于大数据量场景 | [虚拟滚动](demo#virtual-scroll) | -| virtualScrollHeightPx | `number` | 300 | 可选，设置虚拟滚动内容区域的高度 ，单位为`px` | [虚拟滚动](demo#virtual-scroll) | -| virtualScrollMinBufferPx | `number` | 600 | 可选,设置虚拟滚动时的最小 buffer 尺寸，单位为`px` ，参考https://material.angular.io/cdk/scrolling/overview#scrolling-over-fixed-size-items | [虚拟滚动](demo#virtual-scroll) | -| virtualScrollMaxBufferPx | `number` | 900 | 可选, 设置虚拟滚动时的最大 buffer 尺寸，单位为`px` ，参考https://material.angular.io/cdk/scrolling/overview#scrolling-over-fixed-size-items | [虚拟滚动](demo#virtual-scroll) | -| virtualScrollItemSize | `number` | 30 | 可选, 设置虚拟滚动内元素的尺寸，单位为`px` ，参考https://material.angular.io/cdk/scrolling/overview#scrolling-over-fixed-size-items | [虚拟滚动](demo#virtual-scroll) | - -## d-tree-select 事件 - -| 事件 | 类型 | 说明 | 跳转 Demo | -| :------------: | :------------: | :------------------------------------: | --------- | -| valueChanged | `EventEmitter>` | 可选，选择节点时触发的变化，返回值为当前选中的节点 | [基本用法](demo#basic-usage) | -| nodeToggleEvent | `EventEmitter<`[`TreeNode`](#treenode)`>` | 可选，展开收起节点时触发，返回值为触发的节点 | [基本用法](demo#basic-usage) | - -# 接口 & 类型定义 - -### TreeNode - -```ts -export class TreeNode implements ITreeNodeData { - constructor(public id, public parentId, public data) {} -} - -export interface ITreeNodeData { - id?: number | string; - parentId?: number | string; - title?: string; - isOpen?: boolean; - data?: any; - isParent?: boolean; - loading?: boolean; - isMatch?: boolean; - isHide?: boolean; - isActive?: boolean; - isChecked?: boolean; - disabled?: boolean; - - [prop: string]: any; - - children?: []; -} -``` \ No newline at end of file diff --git a/devui/tree-select/doc/api-en.md b/devui/tree-select/doc/api-en.md deleted file mode 100644 index 8d754dc2a1520ce83ce3e192e4cfd5b25861c50b..0000000000000000000000000000000000000000 --- a/devui/tree-select/doc/api-en.md +++ /dev/null @@ -1,86 +0,0 @@ -# How to use - -Import into module: - -```ts -import { TreeSelectModule } from 'ng-devui/treeSelect'; -``` - -In the page: - -```html - -``` -# d-tree-select - -## d-tree-select Parameter - -| Parameter | Type | Default | Description | Jump to Demo | -| :------------------: | :-------------------------------------: | :-------------------------------------: | :------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------- | -| placeholder | `string` | -- | Optional. placeholder string | [Basic usage](demo#basic-usage) | -| treeData | `Array` | -- | Required. Source data to be displayed. | [Basic usage](demo#basic-usage) | -| disabled | `boolean` | false | Optional. The input state is forbidden. | [Basic usage](demo#basic-usage) | -| expandTree | `boolean` | false | Optional. indicating whether to expand the tree automatically. | [Basic usage](demo#basic-usage) | -| multiple | `boolean` | false | Optional. It indicates the multi-choice switch. | [Basic usage](demo#basic-usage) | -| treeNodeIdKey | `string` | 'id' | Optional. ID key name | [Custom key](demo#keys) | -| treeNodeChildrenKey | `string` | 'children' | Optional. child node key name | [Custom key](demo#keys) | -| treeNodeTitleKey | `string` | 'title' | Optional. title key name | [Custom key](demo#keys) | -| disabledKey | `string` | 'disabled' | Optional. The disabled node cannot be selected. | [Basic usage](demo#basic-usage) | -| leafOnly | `boolean` | false | Optional. This parameter is optional only for leaf nodes. | [Only leaf nodes can be selected](demo#leaf-only) | -| delimiter (deprecated) | `string` | `,` | Optional. Selected result separator (used for multiple selections) | -| iconParentOpen | `string` | DefaultIcons.iconParentOpen | Optional. Icon when a tree node is opened | [Expand and close the icon](demo#icon-parent) | -| iconParentClose | `string` | DefaultIcons.iconParentClose | Optional. Icon when a tree node is closed | [Expand and close the icon](demo#icon-parent) | -| iconLeaf | `string` | DefaultIcons.iconLeaf | Optional. node icon. | [Custom key](demo#keys) | -| closeOnNodeSelected | `boolean` | true | Optional. When a node is selected, the drop-down list box is disabled (only for single selection). | [Custom key](demo#keys) | -| width | `'auto' \| '~px' \| '~%'` | -- | Optional. width of the drop-down list box | [Basic usage](demo#basic-usage) | -| searchable | `boolean` | false | Optional. indicating whether a tree can be searched. | [Simple search tree](demo#simple-search) | -| readyEvent | `function` | (treeSelect: TreeSelectComponent) => {} | Optional. Hook function that can be called when the component initialization is complete | [Hook called upon completion of initialization](demo#init-hooks) | -| appendTo | `string` | -- | Optional. Attach the drop-down list box to the DOM selector node of the input value. If the value is empty, the drop-down list box is in the component. | [Append To Element Capability](demo#append-to-element) | -| allowUnselect | `boolean` | true | Optional. Whether to allow deselecting selected items in single-select mode. | [Basic usage](demo#basic-usage) | -| iconTemplatePosition | `'before-checkbox' \|'after-checkbox'` | 'before-checkbox' | Optional. position of the customized template | [Customizing icons](demo#custom-icon) | -| allowClear | `boolean` | false | Optional. indicates whether to clear selected items by clicking the clear button in the text box in radio mode. The value of `allowUnselect` must be `true`. Otherwise, the experience consistency rule will be damaged. This parameter is valid only when the value of enableLabelization is false. | [Basic usage](demo#basic-usage) | -| enableLabelization | `boolean` | true | Optional. Indicates whether to enable the tagged display effect. This parameter is enabled by default when the public cloud visual function is used. | [Tag-based configuration](demo#labelization) | -| iconTemplateInput | `TemplateRef` | -- | Optional. Template of the customized icon | [Customizing icons](demo#custom-icon) | -| customViewTemplate | `TemplateRef` | -- | Optional. The display content of a customized region can be customized. | [Custom Area](demo#custom-template) | -| customViewDirection | `'bottom' \| 'right'\| 'left'` | 'bottom' | Optional, relative position of the customViewTemplate drop-down list box | [Custom Area](demo#custom-template) | -| virtualScroll | `boolean` | false | Optional. Specifies whether to enable virtual scrolling. This parameter is usually used in scenarios with a large amount of data. | [Virtual scrolling] (demo#virtual-scroll) | -| virtualScrollHeightPx | `number` | 300| Optional. Set the height of the virtual scrolling content area(`px`). | [Virtual scroll](demo#virtual-scroll) | -| virtualScrollMinBufferPx | `number` | 600 | Optional. Set the minimum buffer size during virtual scrolling(`px`). For details, see https://material.angular.io/cdk/scrolling/overview#scrolling-over-fixed-size-items | [Virtual Scroll](demo#virtual-scroll) | -| virtualScrollMaxBufferPx | `number` | 900 | Optional. Set the maximum buffer size during virtual scrolling.(`px`) For details, see https://material.angular.io/cdk/scrolling/overview#scrolling-over-fixed-size-items | [Virtual Scroll](demo#virtual-scroll) | -| virtualScrollItemSize | `number` | 30 | Optional. Set the element size in the virtual scrolling(`px`). For details, see https://material.angular.io/cdk/scrolling/overview#scrolling-over-fixed-size-items | [Virtual Scroll](demo#virtual-scroll) | - -## d-tree-select Event - -| Event | Type | Description | Jump to Demo | -| :------------: | :------------: | :------------------------------------: | --------- | -| valueChanged | `EventEmitter>` | Optional.Changes triggered when a node is selected. The returned value is the currently selected node. | [Basic usage](demo#basic-usage) | -| nodeToggleEvent | `EventEmitter<`[`TreeNode`](#treenode)`>` | Optional.Triggered when a node is expanded or collapsed. The parameter is the triggered node. | [Basic usage](demo#basic-usage) | - - -# Interface & Type Definition -### TreeNode - -```ts -export class TreeNode implements ITreeNodeData { - constructor(public id, public parentId, public data) {} -} - -export interface ITreeNodeData { - id?: number | string; - parentId?: number | string; - title?: string; - isOpen?: boolean; - data?: any; - isParent?: boolean; - loading?: boolean; - isMatch?: boolean; - isHide?: boolean; - isActive?: boolean; - isChecked?: boolean; - disabled?: boolean; - - [prop: string]: any; - - children?: []; -} -``` \ No newline at end of file diff --git a/devui/tree-select/tree-select.tsx b/devui/tree-select/tree-select.tsx deleted file mode 100644 index 3fb1e81c10eb3662b55ea10e658a4959ca1c50a8..0000000000000000000000000000000000000000 --- a/devui/tree-select/tree-select.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { defineComponent } from 'vue' - -export default defineComponent({ - name: 'd-tree-select', - props: { - }, - setup(props, ctx) { - return () => { - return
      devui-tree-select
      - } - } -}) \ No newline at end of file diff --git a/devui/tree/demo/tree-demo.tsx b/devui/tree/demo/tree-demo.tsx deleted file mode 100644 index 96bf7a57cb012e322e909c049b05cc3e8a0c7b2c..0000000000000000000000000000000000000000 --- a/devui/tree/demo/tree-demo.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { defineComponent } from 'vue' - -export default defineComponent({ - name: 'd-tree-demo', - props: { - }, - setup(props, ctx) { - return () => { - return
      devui-tree-demo
      - } - } -}) \ No newline at end of file diff --git a/devui/tree/demo/tree.route.ts b/devui/tree/demo/tree.route.ts deleted file mode 100644 index 6ae5117b538579e47b97cc3e5ef8212ae31de9e9..0000000000000000000000000000000000000000 --- a/devui/tree/demo/tree.route.ts +++ /dev/null @@ -1,15 +0,0 @@ -import TreeDemoComponent from './tree-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: TreeDemoComponent}, - { path: 'api', component: DevUIApiComponent, meta: { - 'zh-cn': ApiCn, - 'en-us': ApiEn - }} -] - -export default routes diff --git a/devui/tree/doc/api-cn.md b/devui/tree/doc/api-cn.md deleted file mode 100644 index bbc4ca294e7c070b1a719ea54729c9f5b914132b..0000000000000000000000000000000000000000 --- a/devui/tree/doc/api-cn.md +++ /dev/null @@ -1,278 +0,0 @@ -# 如何使用 - -在 module 中引入： - -```ts -import { TreeModule } from 'ng-devui/tree'; -``` - -在页面中使用： - -```html - -``` - -# d-tree - -## d-tree 参数 - -##### 基本的树，没有增删改查等操作 - -| 参数 | 类型 | 默认值 | 描述 | 跳转 Demo | -| :-----------------: | :----------------------------------: | :-------------: | :----------------------------------------------------------------------------------------------------------------------------: | ------------------------------------------ | -| tree | `Array<`[`ITreeItem`](#itreeitem)`>` | -- | 必选，根据传入的数据进行树的渲染 | [基本用法](demo#basic-usage) | -| treeNodeIdKey | `string` | 'id' | 可选，id 键值名，用来标识节点的唯一性 | [自定显示字段](demo#custom-display-field) | -| treeNodeChildrenKey | `string` | 'items' | 可选，子节点数组的键值名 | [自定显示字段](demo#custom-display-field) | -| treeNodeTitleKey | `string` | 'title' | 可选，节点显示数据的键值名 | [自定显示字段](demo#custom-display-field) | -| checkboxDisabledKey | `string` | 'disabled' | 可选，节点禁止点选 checkbox 的键值名 | [自定显示字段](demo#custom-display-field) | -| selectDisabledKey | `string` | 'disabled' | 可选，节点禁止选中的键值名 | [可勾选树](demo#checkable-tree) | -| toggleDisabledKey | `string` | 'disableToggle' | 可选，节点禁止展开收起的键值名 | [可勾选树](demo#checkable-tree) | -| iconParentOpen | `string` | -- | 可选，自定义父节点展开时的图标 | [自定义图标](demo#custom-icon) | -| iconParentClose | `string` | -- | 可选，自定义父节点收起时的图标 | [自定义图标](demo#custom-icon) | -| iconLeaf | `string` | -- | 可选，自定义叶子节点图标 | [自定义图标](demo#custom-icon) | -| treeNodesRef | `TemplateRef` | -- | 可选，自定义节点的显示模板 | -| loadingTemplateRef | `TemplateRef` | -- | 可选，自定义加载中的模板 | [自定义 loading 模板](demo#custom-loading) | -| virtualScroll | `boolean` | false | 可选，是否开启虚拟滚动，用于处理大数据量的情形 | [大数据量可操作树](demo#virtual-scroll) | -| virtualScrollHeight | `string` | '800px' | 可选，设置虚拟滚动时树的高度 | [大数据量可操作树](demo#virtual-scroll) | -| minBufferPx | `number` | 600 | 可选，设置虚拟滚动时的最小 buffer 尺寸，参考https://material.angular.io/cdk/scrolling/overview#scrolling-over-fixed-size-items | [大数据量可操作树](demo#virtual-scroll) | -| maxBufferPx | `number` | 900 | 可选，设置虚拟滚动时的最大 buffer 尺寸，参考https://material.angular.io/cdk/scrolling/overview#scrolling-over-fixed-size-items | [大数据量可操作树](demo#virtual-scroll) | -| showAnimation | `boolean` | true | 可选，是否展示动画 | [无动画](demo#without-animation) | - -## d-tree 事件 - -| 参数 | 类型 | 描述 | 跳转 Demo | -| :--------------: | :---------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------- | -| nodeSelected | `EventEmitter<`[`TreeNode`](#treenode)`>` | 可选，节点选中的回调函数，返回当前选中节点的数据 | [基本用法](demo#basic-usage) | -| nodeDblClicked | `EventEmitter<`[`TreeNode`](#treenode)`>` | 可选，节点双击时的回调函数，返回当前操作的节点的数据 | [自定显示字段](demo#custom-display-field) | -| nodeRightClicked | `EventEmitter<{event:MouseEvent,node:`[`TreeNode`](#treenode)`}>` | 可选，节点鼠标右键点击时的回调函数，返回当前操作的节点的数据以及鼠标事件 | [自定显示字段](demo#custom-display-field) | -| nodeToggled | `EventEmitter<`[`TreeNode`](#treenode)`>` | 可选，节点展开收起的回调函数，返回当前操作的节点的数据 | [基本用法](demo#basic-usage) | -| afterTreeInit | `EventEmitter>` | 可选，树节点生成完毕后的回调事件，返回当前树的所有节点信息，多用于大数据量情况下需要渲染完成后执行特定操作 | 与 d-operable-tree 的[大数据量可操作树](demo#virtual-scroll)使用一致 | - -# d-operable-tree - -## d-operable-tree 参数 - -##### 鼠标滑过或者选中支持增删改按钮操作 - -| 参数 | 类型 | 默认值 | 描述 | 跳转 Demo | -| :-------------------: | :------------------------------------------: | :-------------: | :----------------------------------------------------------------------------------------------------------------------------: | ---------------------------------------------- | -| tree | `Array<`[`ITreeItem`](#itreeitem)`>` | -- | 必选，根据传入的数据进行树的渲染 | [可勾选树](demo#checkable-tree) | -| treeNodeIdKey | `string` | 'id' | 可选，id 键值名，用来标识节点的唯一性 | [可勾选树](demo#checkable-tree) | -| treeNodeChildrenKey | `string` | 'items' | 可选，子节点数组的键值名 | [可勾选树](demo#checkable-tree) | -| treeNodeTitleKey | `string` | 'title' | 可选，节点显示数据的键值名 | [可勾选树](demo#checkable-tree) | -| checkboxDisabledKey | `string` | 'disabled' | 可选，节点禁止点选的键值名 | [可勾选树](demo#checkable-tree) | -| selectDisabledKey | `string` | 'disabled' | 可选，节点禁止选中的键值名 | [可勾选树](demo#checkable-tree) | -| toggleDisabledKey | `string` | 'disableToggle' | 可选，节点禁止展开收起的键值名 | [可勾选树](demo#checkable-tree) | -| iconParentOpen | `string` | -- | 可选，自定义父节点展开时的图标 | [自定义图标](demo#custom-icon) | -| iconParentClose | `string` | -- | 可选，自定义父节点收起时的图标 | [自定义图标](demo#custom-icon) | -| iconLeaf | `string` | -- | 可选，自定义叶子节点图标 | [自定义图标](demo#custom-icon) | -| checkable | `boolean` | true | 可选，是否显示 checkbox，即是否为多选模式 | [操作按钮](demo#operation-button) | -| addable | `boolean` | false | 可选，是否显示新增子节点按钮 | [操作按钮](demo#operation-button) | -| editable | `boolean` | false | 可选，是否显示编辑子节点按钮 | [操作按钮](demo#operation-button) | -| deletable | `boolean` | false | 可选，是否显示删除子节点按钮 | [操作按钮](demo#operation-button) | -| draggable | `boolean` | false | 可选，树节点是否支持 drag、drop 操作 | [可拖拽树](demo#drag-and-drop-tree) | -| checkboxInput | [`ICheckboxInput`](#icheckboxinput) | {} | 可选，设置 checkbox 的相关属性 | [可勾选树](demo#checkable-tree) | -| canActivateNode | `boolean` | true | 可选，是否可以选中节点 ,false 时点击节点触发 nodeChecked 事件，不触发 nodeSelected 事件 | [操作按钮](demo#operation-button) | -| canActivateParentNode | `boolean` | true | 可选，父节点是否可选中,false 时点击节点触发 nodeChecked 事件，不触发 nodeSelected 事件 | [操作按钮](demo#operation-button) | -| iconTemplatePosition | `string` | -- | 可选，设置图标的位置，可选`'before-checkbox'`或`'after-checkbox'` | [自定义图标](demo#custom-icon) | -| checkableRelation | `'upward' \| 'downward' \| 'both' \| 'none'` | 'both' | 可选，设置父子节点的 check 规则 | [控制父子 check 关系](demo#check-control-tree) | -| beforeAddNode | `Promise` | -- | 可选，新增子节点前回调(参数为当前节点), 返回值中可指定添加节点的 index | [操作按钮](demo#operation-button) | -| beforeDeleteNode | `Promise` | -- | 可选，删除节点前回调(参数为当前节点) | [操作按钮](demo#operation-button) | -| beforeNodeDrop | `Promise` | -- | 可选，子节点内部拖动 drop 前回调(参数为当前拖动的节点，释放位置的节点，放置类型（`prev`，`inner`，`next`）) | [可拖拽树](demo#drag-and-drop-tree) | -| beforeEditNode | `Promise` | -- | 可选，子节点编辑前回调(参数为当前编辑的节点) | [操作按钮](demo#operation-button) | -| postAddNode | `Promise` | -- | 可选，新增节点后回调(参数为新增节点) | [操作按钮](demo#operation-button) | -| dropType | [`IDropType`](#idroptype) | -- | 可选，设置拖拽放置的位置，`dropPrev`为放置在节点前，`dropNext`为放置在节点后，`dropInner`为放置在节点中 | [可拖拽树](demo#drag-and-drop-tree) | -| virtualScroll | `boolean` | false | 可选，是否开启虚拟滚动，用于处理大数据量的情形 | [大数据量可操作树](demo#virtual-scroll) | -| virtualScrollHeight | `string` | '800px' | 可选，设置虚拟滚动时树的高度 | [大数据量可操作树](demo#virtual-scroll) | -| minBufferPx | `number` | 600 | 可选，设置虚拟滚动时的最小 buffer 尺寸，参考https://material.angular.io/cdk/scrolling/overview#scrolling-over-fixed-size-items | [大数据量可操作树](demo#virtual-scroll) | -| maxBufferPx | `number` | 900 | 可选，设置虚拟滚动时的最大 buffer 尺寸，参考https://material.angular.io/cdk/scrolling/overview#scrolling-over-fixed-size-items | [大数据量可操作树](demo#virtual-scroll) | -| disableMouseEvent | `boolean` | false | 可选，设置是否禁用鼠标的移入移出事件，主要用于兼容使用 appendTobody 时无法悬停到下拉框内容的情况 | [自定义图标](demo#custom-icon) | -| showAnimation | `boolean` | true | 可选，是否展示动画 | [无动画](demo#without-animation) | - -## d-operable-tree 事件 - -| 参数 | 类型 | 描述 | 跳转 Demo | -| :----------------: | :------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------- | -| nodeSelected | `EventEmitter<`[`TreeNode`](#treenode)`>` | 可选，节点点击事件回调,返回当前选中节点的数据 | [可勾选树](demo#checkable-tree) | -| nodeDblClicked | `EventEmitter<`[`TreeNode`](#treenode)`>` | 可选，节点双击时的回调函数，返回当前操作的节点的数据 | [可勾选树](demo#checkable-tree) | -| nodeRightClicked | `EventEmitter<{event:MouseEvent,node:`[`TreeNode`](#treenode)`}>` | 可选，节点鼠标右键点击时的回调函数，返回当前操作的节点的数据以及鼠标事件 | [可勾选树](demo#checkable-tree) | -| nodeDeleted | `EventEmitter<`[`TreeNode`](#treenode)`>` | 可选，节点删除事件回调,返回当前删除节点的数据 | [操作按钮](demo#operation-button) | -| nodeToggled | `EventEmitter<`[`TreeNode`](#treenode)`>` | 可选，节点展开收起事件回调,返回当前操作的节点的数据 | [可勾选树](demo#checkable-tree) | -| nodeChecked | `EventEmitter<`[`TreeNode`](#treenode)`>` | 可选，节点选中事件回调，返回所有选中的节点数据 | [可勾选树](demo#checkable-tree) | -| currentNodeChecked | `EventEmitter<`[`TreeNode`](#treenode)`>` | 可选，节点选中事件回调，返回当前选中的节点数据 | [可勾选树](demo#checkable-tree) | -| nodeEdited | `EventEmitter<`[`TreeNode`](#treenode)`>` | 可选，节点 title 编辑事件回调，返回当前编辑的节点数据 | [操作按钮](demo#operation-button) | -| editValueChange | `EventEmitter<{ value: string, callback: Function }>` | 可选，节点编辑中数据变化的回调函数，返回校验后的值；可通过对返回值中的 callback 函数的调用实现校验错误提示(callback 接收两个参数，`errTips`为错误信息，`errTipsPosition`为信息弹出位置) | [操作按钮](demo#operation-button) | -| nodeOnDrop | `EventEmitter<{ event: DragEvent, treeNode:`[`TreeNode`](#treenode)`, dropType:`[`IDropType`](#idroptype)` }>` | 可选，节点 onDrop 事件回调(任意可拖动元素 drop)，返回拖拽事件，释放位置的节点数据，放置类型（`prev`,`inner`,`next`） | [可拖拽树](demo#drag-and-drop-tree) | -| afterTreeInit | `EventEmitter` | 可选，树节点生成完毕后的回调事件，返回当前树的所有节点信息，多用于大数据量情况下需要渲染完成后执行特定操作 | [大数据量可操作树](demo#virtual-scroll) | - -**注意** - -- `treeNodeIdKey`: 用来作为节点的唯一表示，默认情况下取 `id`，如果不需要异步加载节点，可以不用传入，组件会自动分配一个唯一标识 -- `treeNodeChildrenKey`: 用来表示传入数据子节点的 children 名称，默认取 `items` -- `checkboxDisabledKey`: 用来标识子节点是否可选，默认取 `disabled`作为标识 -- `treeNodeTitleKey`: 用来标识节点显示字段的键值，默认为 `title` -- `checkboxInput`: 用来给 checkbox 设置相关属性，其默认值为 `{ color: 'F38826' }`, ~~disableType 属性用来统一所有子节点的 disableType~~。 - -# 接口 & 类型定义 - -## TreeFactoryAPI - -组件提供一个 TreeFactory，你可以从 TreeFactory 的实例上拿到下列方法来进行操作: -参考：[常用TreeFactory函数](demo#tree-factory) - -```ts - -`treeRoot`: 获取整颗树 - -`mapTreeItems({treeItems,parentId, treeNodeChildrenKey = 'items',treeNodeIdKey = 'id',checkboxDisabledKey = 'disabled', - selectDisabledKey = 'disableSelect',toggleDisabledKey = 'disableToggle',treeNodeTitleKey = 'title'})`: 将原始的treeItems数据转为组件所需TreeNode后添加到指定的父节点上，常用于懒加载等功能 - -`getNodeById(id: number | string): TreeNode`: 根据 id 获取节点信息并返回 - -`getCompleteNodeById(id: number | string): TreeNode`: 根据 id 获取节点信息，包含节点的 id，parentId - -`addChildNode(parentNode:TreeNode,childNode:TreeNode,index?)`: 添加指定子节点到指定父节点上，可通过index控制子节点所处位置 - -`deleteNodeById(id: number | string)`: 根据id删除指定节点 - -`toggleNodeById(id: number | string)`: 根据id展开收起指定节点 - -`openNodesById(id: number | string) `: 根据id展开指定节点 - -`closeNodesById(id: number | string, closeChildren = false)`: 根据id收起指定节点，可根据closeChildren的值决定子节点是否需要收起 - -`disabledNodesById(id: number | string)`: 根据 id 使某个节点的 checkbox 变为不可选 - -`checkNodesById(id: number | string, checked: boolean, checkableRelation: 'upward' | 'downward' | 'both' | 'none' = 'both'): Array `: - 根据 id 决定指定节点的check状态，可传入checkableRelation控制父子节点选中关系，返回所有选中节点 - -`getCheckedNodes()`: 返回所有check状态为true的节点 - -`getDisabledNodes()`: 返回所有禁止check的节点 - -`activeNodeById(id: number | string)`: 根据 id 使指定节点的状态变为active - -`getChildrenById(id: number | string): Array `: 根据 id 获得指定节点的子节点，返回子节点的数组 - -`startLoading(id: number | string)`: 根据id使指定节点显示加载状态 - -`endLoading(id: number | string)`: 根据id关闭指定节点加载状态 - -`searchTree(target: string, hideUnmatched = false, keyword='title', pattern?:RegExp)`: - 在树中搜索是否存在匹配target字段的节点. hideUnmatched控制是否隐藏不匹配的节点；keyword控制在指定关键字中搜索；pattern控制与target匹配的方式 - -`hideNodeById(id: number | string, hide: boolean)`: 根据 id 选择隐藏或显示节点 - -`deactivateAllNodes()`: 取消所有节点的active状态 - -`checkAllNodes(checked:boolean)`: 根据checked决定所有节点的check状态 - -`mergeTreeNodes(targetNode:TreeNode)`: 传入需要合并显示的节点，默认为整个树，此操作将合并只有一个子节点的父节点，用于优化树形显示 - -`getNodeIndex(node: TreeNode)`: 获取指定节点处于父节点中位置 - -`editNodeTitle(id: number | string)`: 根据id编辑指定节点 - -`disableAllNodesChecked(disable:boolean = true)`: 禁止所有节点的check状态修改 - -`disableAllNodesSelected(disable:boolean = true)`: 禁止所有节点的select状态修改 - -`disableAllNodesToggled(disable:boolean = true)`: 禁止所有节点的展开收起状态修改 - -``` - -## 自定义模板 - -自定义额外图标相关参数如下 - -| 参数 | 类型 | 默认值 | 描述 | 跳转 Demo | -| :------------------: | :----------------: | :---------------: | :----------------------: | :-----------------------------------------------------------------------------------------------------: | -| iconTemplatePosition | `'before-checkbox' \| 'after-checkbox'` | 'after-checkbox' | 可选，设置 icon 放置的位置，`before-checkbox`为放置在 checkbox 前，`after-checkbox`为放置在 checkbox 后 | [自定义图标](demo#custom-icon) | -| iconTemplate | `TemplateRef` | -- | 可选，自定义图标的展示 | [自定义图标](demo#custom-icon) | -| nodeTemplate | `TemplateRef` | -- | 可选，自定义树节点的显示 | [自定义图标](demo#custom-icon) | -| operatorTemplate | `TemplateRef` | -- | 可选，自定义操作图标区域 | [自定义图标](demo#custom-icon) | -| statusTemplate | `TemplateRef` | -- | 可选，自定义状态等信息 | [自定义图标](demo#custom-icon) | - -```xml - - - - - - - - -``` -**Note** -The `node` parameter in `let-node="node"` in iconTemplate and nodeTemplate does not include id and parentId. Use `completeNode` in `let-completeNode="completeNode"` - -### ITreeItem - -```ts -export interface ITreeItem { - title: string; // 节点显示名称 - open?: boolean; // 节点是否展开 - loading?: boolean; // 节点是否显示加载中 - isMatch?: boolean; // 搜索场景下，节点是否匹配 - items?: ITreeItem[]; // 节点的子节点 - isParent?: boolean; // 节点是否为父节点，控制是否出现展开收起按钮 - data?: any; // 额外的节点数据存放处 - id?: any; // 节点id - isHide?: boolean; // 节点是否隐藏 - isActive?: boolean; // 节点是否为selected状态 - isChecked?: boolean; // 节点是否为checked状态 - halfChecked?: boolean; // 节点是否为半选状态 - disabled?: boolean; // 节点是否为半选状态 - disableAdd?: boolean; // 节点是否禁止check - disableEdit?: boolean; // 节点是否禁止编辑 - disableDelete?: boolean; // 节点是否禁止删除 - disableSelect?: boolean; // 节点是否禁止select - disableToggle?: boolean; // 节点是否禁止展开收起 - [prop: string]: any; -} -``` - -### ICheckboxInput - -```ts -export interface ICheckboxInput { - color?: string; -} -``` - -### IDropType - -```ts -export interface IDropType { - dropPrev?: boolean; // 是否允许放置在节点前 - dropNext?: boolean; // 是否允许放置在节点后 - dropInner?: boolean; // 是否允许放置在节点中，成为该节点的子节点 -} -``` - -### TreeNode - -```ts -export class TreeNode implements ITreeNodeData { - constructor(public id, public parentId, public data) {} -} - -export interface ITreeNodeData { - id?: number | string; - parentId?: number | string; - title?: string; - isOpen?: boolean; - data?: any; - isParent?: boolean; - loading?: boolean; - isMatch?: boolean; - isHide?: boolean; - isActive?: boolean; - isChecked?: boolean; - disabled?: boolean; - - [prop: string]: any; - - children?: []; -} -``` diff --git a/devui/tree/doc/api-en.md b/devui/tree/doc/api-en.md deleted file mode 100644 index 19b486a695f39942c860643110cea8e42fdbbcd0..0000000000000000000000000000000000000000 --- a/devui/tree/doc/api-en.md +++ /dev/null @@ -1,276 +0,0 @@ -# How to use - -Import into module: - -```ts -import { TreeModule } from 'ng-devui/tree'; -``` - -In the page: - -```html - -``` - -# d-tree - -## d-tree parameters - -##### Basic tree, without adding, deleting, modifying, and querying - -| Parameter | Type | Default | Description | Jump to Demo | -| :-----------------: | :----------------------------------: | :-------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------: | ---------------------------------------------------------- | -| tree | `Array<`[`ITreeItem`](#itreeitem)`>` | -- | Required. It is used to render the tree based on the input data. | [Basic Usage](demo#basic-usage) | -| treeNodeIdKey | `string` | 'id' | Optional. ID key value name, which uniquely identifies a node. | [Custom Display Fields](demo#custom-display-field) | -| treeNodeChildrenKey | `string` | 'items' | Optional. key value name of the subnode array | [Custom Display Fields](demo#custom-display-field) | -| treeNodeTitleKey | `string` | 'title' | Optional. This parameter indicates the key value of the data displayed on the node. | [Custom Display Fields](demo#custom-display-field) | -| checkboxDisabledKey | `string` | 'disabled' | Optional. Do not select the key value of the check box on the node. | [Customized field](demo#custom-display-field) | -| selectDisabledKey | `string` | 'disabled' | Optional. It indicates the name of a key value that cannot be selected on the node. | [Checkable Tree](demo#checkable-tree) | -| toggleDisabledKey | `string` | 'disableToggle' | Optional. Collapsed key names cannot be expanded on the node. | [Checkable Tree](demo#checkable-tree) | -| iconParentOpen | `string` | -- | Optional. Customize the icon when the parent node is expanded. | [Custom Icon](demo#custom-icon) | -| iconParentClose | `string` | -- | Optional. Customize the icon when the parent node is folded. | [Custom Icon](demo#custom-icon) | -| iconLeaf | `string` | -- | Optional. Custom leaf node icon | [Custom Icon](demo#custom-icon) | -| treeNodesRef | `TemplateRef` | -- | Optional. It specifies the display template of a customized node. | -| loadingTemplateRef | `TemplateRef` | -- | Optional. Customizing the template being loaded | [Customizing a Loading Template](demo#custom-loading) | -| virtualScroll | `boolean` | false | Optional. Whether to enable virtual scrolling. This parameter is used to process a large amount of data. | [Operation tree of large data volume](demo#virtual-scroll) | -| virtualScrollHeight | `string` | '800px' | Optional. Sets the tree height during virtual scrolling. | [Operation tree of large data volume](demo#virtual-scroll) | -| minBufferPx | `number` | 600 | Optional. Sets the minimum buffer size during virtual scrolling. For details, see https://material.angular.io/cdk/scrolling/overview#scrolling-over-fixed-size-items | [Operation tree of large data volume](demo#virtual-scroll) | . | -| maxBufferPx | `number` | 900 | Optional. Sets the maximum buffer size during virtual scrolling. For details, see https://material.angular.io/cdk/scrolling/overview#scrolling-over-fixed-size-items | [Operation tree of large data volume](demo#virtual-scroll) | . | -| showAnimation | `boolean` | true | Optional. Indicating whether to display animations. | [Without Animation](demo#without-animation) | - -## d-tree Event - -| Parameter | Type | Description | Jump to Demo | -| :--------------: | :---------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | -| nodeSelected | `EventEmitter<`[`TreeNode`](#treenode)`>` | Optional. Callback function for node selection. It returns the data of the selected node. | [Basic Usage](demo#basic-usage) | -| nodeDblClicked | `EventEmitter<`[`TreeNode`](#treenode)`>` | Optional. Callback function used when a node is double-clicked. It returns the data of the current node. | [Custom Display Fields](demo#custom-display-field) | -| nodeRightClicked | `EventEmitter<{event:MouseEvent,node:`[`TreeNode`](#treenode)`}>` | Optional. Callback function used when a node is right-clicked. It returns the data and mouse event of the current node. | [Custom Display Fields](demo#custom-display-field) | -| nodeToggled | `EventEmitter<`[`TreeNode`](#treenode)`>` | Optional. Callback function for expanding and folding a node. It returns the data of the current node. | | [Basic Usage](demo#basic-usage) | -| afterTreeInit | `EventEmitter>` | Optional. It is a callback event after tree nodes are generated. It returns information about all nodes in the current tree. This event is mainly used to perform specific operations after rendering is completed in the case of a large amount of data. | The function is the same as that of [Operation tree of large data volume](demo#virtual-scroll) in the d-operable-tree. | - -# d-operable-tree - -## d-operable-tree parameter - -##### Add, delete, and modify buttons when you move the mouse over or select them. - -| Parameter | Type | Default | Description | Jump to Demo | -| :-------------------: | :---------------------------------------: | :-------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | ---------------------------------------------------------------------- | -| tree | `Array<`[`ITreeItem`](#itreeitem)`>` | -- | Required. Renders the tree based on the input data. | [Checkable Tree](demo#checkable-tree) | -| treeNodeIdKey | `string` | 'id' | Optional. ID key value name, which is used to identify the uniqueness of a node. | [Checkable Tree](demo#checkable-tree) | -| treeNodeChildrenKey | `string` | 'items' | Optional. key value name of the subnode array | [Checkable Tree](demo#checkable-tree) | -| treeNodeTitleKey | `string` | 'title' | Optional. It indicates the key value of the data displayed on the node. | [Checkable Tree](demo#checkable-tree) | -| checkboxDisabledKey | `string` | 'disabled' | Optional. Key value names that cannot be selected on a node. | [Checkable Tree](demo#checkable-tree) | -| selectDisabledKey | `string` | 'disabled' | Optional. It indicates the name of a key value that cannot be selected on the node. | [Checkable Tree](demo#checkable-tree) | -| toggleDisabledKey | `string` | 'disableToggle' | Optional. Collapsed key names cannot be expanded on the node. | [Checkable Tree](demo#checkable-tree) | -| iconParentOpen | `string` | -- | Optional. Customize the icon when the parent node is expanded. | [Custom Icon](demo#custom-icon) | -| iconParentClose | `string` | -- | Optional. Customize the icon when the parent node is folded. | [Custom Icon](demo#custom-icon) | -| iconLeaf | `string` | -- | Optional. Custom leaf node icon | [Custom Icon](demo#custom-icon) | -| checkable | `boolean` | true | Optional. Whether to display the checkbox, that is, whether the checkbox is in multi-selection mode. | [Operation button](demo#operation-button) | -| addable | `boolean` | false | Optional. indicating whether to display the button for adding a child node. | [Operation button](demo#operation-button) | -| editable | `boolean` | false | Optional. indicating whether to display the edit subnode button | [Operation button](demo#operation-button) | -| deleteable | `boolean` | false | Optional. Whether to display the button for deleting subnodes. | [Operation button](demo#operation-button) | -| draggable | `boolean` | false | Optional. indicating whether a tree node supports drag and drop operations. | [Draggable tree](demo#drag-and-drop-tree) | -| checkboxInput | `ICheckboxInput` | {} | Optional. Sets the attributes of the checkbox. | [Checkable Tree](demo#checkable-tree) | -| canActivateNode | `boolean` | true | : indicates whether a node can be selected. If the value is false, the nodeChecked event is triggered when a node is clicked. | [Operation button](demo#operation-button) | -| canActivateParentNode | `boolean` | true | Optional. indicates whether a parent node is optional. If the value is false, the nodeChecked event is triggered when a node is clicked. | [Operation button](demo#operation-button) | -| iconTemplatePosition | `string` | -- | Optional. Sets the position of the icon, which can be `before-checkbox'` or `after-checkbox'` | [Custom Icon](demo#custom-icon) | -| checkableRelation | `'upward' \|'downward' \|'both' \|'none'` | 'both' | Optional. Sets the check rule of the parent-child node | [Control the parent-child check relationship](demo#check-control-tree) | -| beforeAddNode | `Promise` | -- | Optional. Call back before adding a subnode (the parameter is the current node). The return value can specify the index of the added node. | [Operation button](demo#operation-button) | -| beforeDeleteNode | `Promise` | -- | Optional. Callback before deleting a node (parameter: current node) | [Operation button](demo#operation-button) | -| beforeNodeDrop | `Promise` | -- | Optional. Callback before dragging a subnode (parameters are the currently dragged node, release node, and placement type (`prev`, `inner`, and `next`)) | [drragable tree](demo#drag-and-drop-tree) | -| beforeEditNode | `Promise` | -- | Optional. callback before editing a subnode (parameters are the currently edited node) | [Operation button](demo#operation-button) | -| postAddNode | `Promise` | -- | Optional. Callback after a node is added (parameters are added) | [Operation button](demo#operation-button) | -| dropType | `IDropType` | -- | Optional. Sets the position where a node is to be dragged. `dropPrev` indicates to be placed before a node, `dropNext` indicates to be placed after a node, and `dropInner` indicates to be placed in a node. | [Draggable tree](demo#drag-and-drop-tree) | -| virtualScroll | `boolean` | false | Optional. Whether to enable virtual scrolling. This parameter is used to process a large amount of data. | [Operation tree of large data volume](demo#virtual-scroll) | -| virtualScrollHeight | `string` | '800px' | Optional. Sets the tree height during virtual scrolling. | [Operation tree of large data volume](demo#virtual-scroll) | -| minBufferPx | `number` | 600 | Optional. Sets the minimum buffer size during virtual scrolling. For details, see https://material.angular.io/cdk/scrolling/overview#scrolling-over-fixed-size-items | [Operation tree of large data volume](demo#virtual-scroll) | . | -| maxBufferPx | `number` | 900 | Optional. Sets the maximum buffer size during virtual scrolling. For details, see https://material.angular.io/cdk/scrolling/overview#scrolling-over-fixed-size-items | [Operation tree of large data volume](demo#virtual-scroll) | . | -| disableMouseEvent | `boolean` | false | Optional. Sets whether to disable the mouse move-in event. This parameter is used when the appendTobody function is used and the content in the drop-down list box cannot be hovered. | [Custom Icon](demo#custom-icon) | -| showAnimation | `boolean` | true | Optional. Indicating whether to display animations. | [Without Animation](demo#without-animation) | - -## d-operable-tree event - -| Parameter | Type | Description | Jump to Demo | -| :----------------: | :------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----| -| nodeSelected | `EventEmitter<`[`TreeNode`](#treenode)`>` | Optional. The node click event is called back to return the data of the currently selected node. | [Checkable Tree](demo#checkable-tree) | -| nodeDblClicked | `EventEmitter<`[`TreeNode`](#treenode)`>` | Optional. Callback function used when a node is double-clicked. It returns the data of the current node. | [Checkable Tree](demo#checkable-tree) | -| nodeRightClicked | `EventEmitter<{event:MouseEvent,node:`[`TreeNode`](#treenode)`}>` | Optional. Callback function used when a node is right-clicked. It returns the data and mouse event of the current node. | [Checkable Tree](demo#checkable-tree) | -| nodeDeleted | `EventEmitter<`[`TreeNode`](#treenode)`>` | Optional. Callback of the node deletion event to return the data of the deleted node. | [Operation button](demo#operation-button) | -| nodeToggled | `EventEmitter<`[`TreeNode`](#treenode)`>` | Optional. It is the callback function of the node expansion and collapse event. The data of the current node is returned. | [Checkable Tree](demo#checkable-tree) | -| nodeChecked | `EventEmitter<`[`TreeNode`](#treenode)`>` | Optional. Callback of the node selection event to return data of all selected nodes. | [Checkable Tree](demo#checkable-tree) | -| currentNodeChecked | `EventEmitter<`[`TreeNode`](#treenode)`>` | Optional. Callback of the node selection event to return the data of the currently selected node. | [Checkable Tree](demo#checkable-tree) | -| nodeEdited | `EventEmitter<`[`TreeNode`](#treenode)`>` | Optional. This parameter is used to call back the node title editing event to return the currently edited node data. | [Operation button](demo#operation-button) | -| editValueChange | `EventEmitter<{ value: string, callback: Function }>` | Optional. Callback function for data changes during node editing. It returns the verified value. The callback function in the return value can be invoked to verify the error message. (The callback function receives two parameters, where `errTips` indicates the error information and `errTipsPosition` indicates the information pop-up position.) | [Operation button](demo#operation-button) | -| nodeOnDrop | `EventEmitter<{ event: DragEvent, treeNode:`[`TreeNode`](#treenode)`, dropType:`[`IDropType`](#idroptype)` }>` | Optional. It is the node onDrop event callback function (drop any dragable element). It returns the drag event and releases the node data in the position. The placement type is (`prev`, `inner`, `next`) | [Draggable tree](demo#drag-and-drop-tree) | -| afterTreeInit | `EventEmitter` | Optional. This is a callback event after tree nodes are generated. It returns information about all nodes in the current tree. This event is mainly used when a large amount of data needs to be rendered and specific operations need to be performed after the rendering is complete. | [Large-volume-data-operable tree](demo#virtual-scroll) | - -**Note** - -- `treeNodeIdKey`: Unique ID of a node. The default value is `id`. If the node does not need to be loaded asynchronously, you do not need to transfer this parameter. The component automatically allocates a unique ID. -- `treeNodeChildrenKey`: indicates the child name of the transferred data child node. The default value is `items`. -- `checkboxDisabledKey`: indicates whether a subnode is optional. The default value is Disabled. -- `treeNodeTitleKey`: key value of the node display field. The default value is `title`. -- `checkboxInput`: Sets related attributes for the checkbox. The default value is `{color: 'F38826'}`. ~~disableType is used to unify disableType of all subnodes. - -# Interface & Type Definition - -## **TreeFactoryAPI** - -The component provides a TreeFactory. You can perform the following operations on the TreeFactory instance: -see: [Common treeFactory functions](demo#tree-factory) - -```ts - -`treeRoot`: Obtains the entire tree data. - -`mapTreeItems({treeItems,parentId, treeNodeChildrenKey = 'items',treeNodeIdKey ='id',checkboxDisabledKey ='disabled', -selectDisabledKey = 'disableSelect', toggleDisabledKey = 'disableToggle', treeNodeTitleKey = 'title'})`: Converts the original treeItems data to the tree node required by the component and adds the tree node to the specified parent node. This method is used for lazy loading and other functions. - -The `getNodeById(id: number | string): TreeNode`: obtains the node information based on the node ID and returns the information. - -`getCompleteNodeById(id: number | string): TreeNode`: Obtains node information based on the node ID, including the node ID and parent ID. - -`addChildNode(parentNode:TreeNode, childNode:TreeNode, index?)`: Adds a specified child node to a specified parent node. The location of the child node can be controlled by index. - -`deleteNodeById(id: number | string)`: Deleting a Specified Node by ID - -`toggleNodeById(id: number | string)`: Expands and collapses specified nodes based on IDs. - -`openNodesById(id: number | string) `: Expanding a Specified Node by ID - -`closeNodesById(id: number | string, closeChildren = false)`: Collapses specified nodes based on IDs and determines whether to collapse subnodes based on the value of closeChildren. - -The `disabledNodesById(id: number | string)`: disables the checkbox of a node based on the node ID. - -`checkNodesById(id: number | string, checked: boolean, checkableRelation:'upward '|'downward '| 'both' | 'none' = 'both'): Array `: -Determines the check status of a specified node based on the id. CheckableRelation can be transferred to control the parent-child node selection relationship and return all selected nodes. - -`getCheckedNodes()`: Returns all nodes whose check status is true. - -`getDisabledNodes()`: Returns all nodes whose check is forbidden. - -The `activeNodeById(id: number | string)`: changes the status of a specified node to active based on the node ID. - -`getChildrenById(id: number | string): Array `: Obtains the subnodes of a specified node based on the ID and returns the array of the subnodes. - -`startLoading(id: number | string)`: Displays the loading status of a specified node based on the node ID. - -`endLoading(id: number | string)`: Disables the loading status of a specified node based on the ID. - -`searchTree(target: string, hideUnmatched = false, keyword='title', pattern?:RegExp)`: -Searches for nodes that match the target field in the tree. hideUnmatched controls whether to hide unmatched nodes. The keyword parameter specifies the keyword to be searched. Pattern Controls the Mode of Matching Targets - -`hideNodeById(id: number | string, hide: boolean)`: Hide or Display Nodes by ID - -`deactivateAllNodes()`: cancels the active state of all nodes. - -The `checkAllNodes(checked:boolean)`: determines the check status of all nodes based on the checked value. - -`mergeTreeNodes(targetNode:TreeNode)`: indicates the node to be combined. The default value is the entire tree. This operation combines the parent node with only one child node to optimize the tree display. - -`getNodeIndex(node: TreeNode)`: Obtains the position of a specified node in the parent node. - -`editNodeTitle(id: number | string)`: Editing a Specified Node by ID - -`disableAllNodesChecked(disable:boolean = true)`: Do not change the check status of all nodes. - -`disableAllNodesSelected(disable:boolean = true)`: Do not change the select status of all nodes. - -`disableAllNodesToggled(disable:boolean = true)`: Do not change the expand and collapse status of all nodes. - -``` - -## Customizing a Template - -Parameters for customizing extra icons are as follows: - -| Parameter | Type | Default | Description | Jump to Demo | -| :------------------: | :------------------------------------: | :--------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------: | -| iconTemplatePosition | `'before-checkbox' \|'after-checkbox'` | 'after-checkbox' | Optional. Sets the position where the icon is placed. `before-checkbox` indicates that the icon is placed before the checkbox, `after-checkbox` is placed after the checkbox | [Custom Icon](demo#custom-icon) | -| iconTemplate | `TemplateRef` | -- | Optional. Custom icon display | [Custom Icon](demo#custom-icon) | -| nodeTemplate | `TemplateRef` | -- | Optional. Custom tree node display | [Custom Icon](demo#custom-icon) | -| operatorTemplate | `TemplateRef` | -- | : Optional. customized operation icon area | [Custom Icon](demo#custom-icon) | -| statusTemplate | `TemplateRef` | -- | : Optional. customized status information | [Custom Icon](demo#custom-icon) | - -```xml - - - - - - - - -``` - -### ITreeItem - -```ts -export interface ITreeItem { - title: string; // Display name of the node. - open?: boolean; // Indicates whether the node is expanded. - loading?: boolean; //Whether the node is being loaded - isMatch?: boolean; // Whether the node is matched in the search scenario. - items?: ITreeItem[]; // Subnode of the node - isParent?: boolean; // Indicates whether a node is a parent node and whether to display the expand and collapse button. - data?: any; // Stores extra node data. - id?: any; // Node ID. - isHide?: boolean; // Indicates whether the node is hidden. - isActive?: boolean; // Check whether the node is in the selected state. - isChecked?: boolean; // Check whether the node is in the checked state. - halfChecked?: boolean; //Whether the node is in the half-selected state - disabled?: boolean; //Whether the node is in the half-selected state - disableAdd?: boolean; // Indicates whether to disable the check function on the node. - disableEdit?: boolean; // Indicates whether the node cannot be edited. - disableDelete?: boolean; // Indicates whether the node cannot be deleted. - disableSelect?: boolean; // Indicates whether to disable the select function on the node. - disableToggle?: boolean; // Indicates whether the node is not expanded or collapsed. - [prop: string]: any; -} -``` - -### ICheckboxInput - -```ts -export interface ICheckboxInput { - color?: string; -} -``` - -### IDropType - -```ts -export interface IDropType { - dropPrev?: boolean; // Indicates whether to allow the node to be placed before the node. - dropNext?: boolean; // Indicates whether to allow placement after a node. - dropInner?: boolean; // Indicates whether to allow the node to be placed in the node and become the child node of the node. -} -``` - -### TreeNode - -```ts -export class TreeNode implements ITreeNodeData { - constructor(public id, public parentId, public data) {} -} - -export interface ITreeNodeData { - id?: number | string; - parentId?: number | string; - title?: string; - isOpen?: boolean; - data?: any; - isParent?: boolean; - loading?: boolean; - isMatch?: boolean; - isHide?: boolean; - isActive?: boolean; - isChecked?: boolean; - disabled?: boolean; - - [prop: string]: any; - - children?: []; -} -``` diff --git a/devui/tree/tree.tsx b/devui/tree/tree.tsx deleted file mode 100644 index 1a2a5bb9a820df63745bf480464b26e2559bb60f..0000000000000000000000000000000000000000 --- a/devui/tree/tree.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { defineComponent } from 'vue' - -export default defineComponent({ - name: 'd-tree', - props: { - }, - setup(props, ctx) { - return () => { - return
      devui-tree
      - } - } -}) \ No newline at end of file diff --git a/devui/upload/demo/upload-demo.tsx b/devui/upload/demo/upload-demo.tsx deleted file mode 100644 index 520eecc941f2a0f05f2601c78fb07aadf1443f10..0000000000000000000000000000000000000000 --- a/devui/upload/demo/upload-demo.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { defineComponent } from 'vue' - -export default defineComponent({ - name: 'd-upload-demo', - props: { - }, - setup(props, ctx) { - return () => { - return
      devui-upload-demo
      - } - } -}) \ No newline at end of file diff --git a/devui/upload/demo/upload.route.ts b/devui/upload/demo/upload.route.ts deleted file mode 100644 index 0c831473394cfa7c67b4312087d56e3e0d93f735..0000000000000000000000000000000000000000 --- a/devui/upload/demo/upload.route.ts +++ /dev/null @@ -1,15 +0,0 @@ -import UploadDemoComponent from './upload-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: UploadDemoComponent}, - { path: 'api', component: DevUIApiComponent, meta: { - 'zh-cn': ApiCn, - 'en-us': ApiEn - }} -] - -export default routes diff --git a/devui/upload/doc/api-cn.md b/devui/upload/doc/api-cn.md deleted file mode 100644 index 746a37d6274384e536b317067ae22f2536b44c18..0000000000000000000000000000000000000000 --- a/devui/upload/doc/api-cn.md +++ /dev/null @@ -1,181 +0,0 @@ -# 如何使用 - -在module中引入： - -```ts -import { UploadModule } from 'ng-devui/upload'; -``` - -在页面中使用： - -```xml -//单文件上传 - -//多文件上传 - -//使用dUpload指令 -
      -``` -# d-single-upload -## d-single-upload 参数 - -| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | -| :--------------: | :--------------------------------------------------: | :--------: | :--------------------------------------------------------------------------------------- | ----------------------------------------------- | -| fileOptions | [`IFileOptions`](#ifileoptions) | -- | 必选，待上传文件配置 | [基本用法](demo#basic-usage) | -| filePath | `string` | -- | 必选，文件路径 | [基本用法](demo#basic-usage) | -| uploadOptions | [`IUploadOptions`](#iuploadoptions) | -- | 必选，上传配置 | [基本用法](demo#basic-usage) | -| autoUpload | `boolean` | false | 可选，是否自动上传 | [基本用法](demo#basic-usage) | -| placeholderText | `string` | '选择文件' | 可选，上传输入框中的 Placeholder 文字 | [基本用法](demo#basic-usage) | -| preloadFilesRef | `TemplateRef` | -- | 可选，用于创建自定义 已选择文件列表模板 | [自定义](demo#custom) | -| uploadText | `string` | '上传' | 可选，上传按钮文字 | [基本用法](demo#basic-usage) | -| uploadedFiles | `Array` | [] | 可选，获取已上传的文件列表 | [基本用法](demo#basic-usage) | -| uploadedFilesRef | `TemplateRef` | -- | 可选，用于创建自定义 已上传文件列表模板 | [自定义](demo#custom) | -| withoutBtn | `boolean` | false | 可选，是否舍弃按钮 | [基本用法](demo#basic-usage) | -| enableDrop | `boolean` | false | 可选，是否支持拖拽 | [基本用法](demo#basic-usage) | -| beforeUpload | `boolean \| Promise \| Observable` | -- | 可选，上传前的回调，通过返回`true` or `false` ,控制文件是否上传,参数为文件信息及上传配置 | [基本用法](demo#basic-usage) | -| dynamicUploadOptionsFn | [`IUploadOptions`](#iuploadoptions) | -- | 为文件动态设置自定义的上传参数, 参数为当前选中文件及`uploadOptions`的值 | [基本用法](demo#basic-usage) | -| disabled | `boolean` | false | 可选，是否禁用上传组件 | [基本用法](demo#basic-usage) | -| showTip | `boolean` | false | 可选，是否显示上传提示信息 | [自动上传](demo#auto-upload) | - -## d-single-upload 事件 - -| 参数 | 类型 | 说明 | 跳转 Demo | -| :---------------------: | :-----------------: | :--------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------- | -| fileOver | `EventEmitter` | 支持拖拽上传时，文件移动到可拖放区域触发事件,可拖动的元素移出放置目标时返回`false`，元素正在拖动到放置目标时返回`true` | [基本用法](demo#basic-usage) | -| fileDrop | `EventEmitter` | 支持拖拽上传时，当前拖拽的文件列表回调，单文件上传默认返回第一个文件 | [基本用法](demo#basic-usage) | -| successEvent | `EventEmitter>` | 上传成功时的回调函数,返回文件及 xhr 的响应信息 | [基本用法](demo#basic-usage) | -| errorEvent | `EventEmitter<{file: File; response: any}>` | 上传错误时的回调函数，返回上传失败的错误信息 | [基本用法](demo#basic-usage) | -| deleteUploadedFileEvent | `EventEmitter` | 删除上传文件的回调函数，返回删除文件的路径信息 | [基本用法](demo#basic-usage) | -| fileSelect | `EventEmitter` | 文件选择后的回调函数，返回已选择文件信息 | [基本用法](demo#basic-usage) | - -# d-multiple-upload -## d-multiple-upload 参数 - -| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | -| :--------------------: | :--------------------------------------------------: | :------------: | :--------------------------------------------------------------------------------- | -------------------------------------------------------------- | -| fileOptions | [`IFileOptions`](#ifileoptions) | -- | 必选，待上传文件配置 | [多文件上传](demo#multi-files) | -| filePath | `string` | -- | 必选，文件路径 | [多文件上传](demo#multi-files) | -| uploadOptions | [`IUploadOptions`](#iuploadoptions) | -- | 必选，上传配置 | [多文件上传](demo#multi-files) | -| autoUpload | `boolean` | false | 可选，是否自动上传 | [自动上传](demo#auto-upload) | -| placeholderText | `string` | '选择多个文件' | 可选，上传输入框中的 Placeholder 文字 | [基本用法](demo#basic-usage) | -| preloadFilesRef | `TemplateRef` | -- | 可选，用于创建自定义 已选择文件列表模板 | [自定义](demo#custom) | -| uploadText | `string` | '上传' | 可选，上传按钮文字 | [基本用法](demo#basic-usage) | -| uploadedFiles | `Array` | [] | 可选，获取已上传的文件列表 | [多文件上传](demo#multi-files) | -| uploadedFilesRef | `TemplateRef` | -- | 可选，用于创建自定义 已上传文件列表模版 | [自定义](demo#custom) | -| withoutBtn | `boolean` | false | 可选，是否舍弃按钮 | [自定义](demo#custom) | -| enableDrop | `boolean` | false | 可选，是否支持拖拽 | [多文件上传](demo#multi-files) | -| beforeUpload | `boolean \| Promise \| Observable` | -- | 上传前的回调，通过返回`true` or `false` ,控制文件是否上传,参数为文件信息及上传配置 | [动态上传参数](demo#dynamic-upload-options) | -| setCustomUploadOptions | [`IUploadOptions`](#iuploadoptions) | -- | 为每个文件设置自定义的上传参数, 参数为当前选中文件及`uploadOptions`的值 | [自定义](demo#custom) | -| oneTimeUpload | `boolean` | false | 可选，是否只调用一次接口上传所有文件 | [多文件上传](demo#multi-files) | -| disabled | `boolean` | false | 可选，是否禁用上传组件 | [多文件上传](demo#multi-files) | -| showTip | `boolean` | false | 可选，是否显示上传提示信息 | [多文件上传](demo#multi-files) | - -## d-multiple-upload 事件 - -| 参数 | 类型 | 说明 | 跳转 Demo | -| :---------------------: | :-----------------: | :--------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------- | -| fileOver | `EventEmitter` | 支持拖拽上传时，文件移动到可拖放区域触发事件,可拖动的元素移出放置目标时返回`false`，元素正在拖动到放置目标时返回`true` | [多文件上传](demo#multi-files) | -| fileDrop | `EventEmitter` | 支持拖拽上传时，当前拖拽的文件列表回调，单文件上传默认返回第一个文件 | [多文件上传](demo#multi-files) | -| successEvent | `EventEmitter>` | 上传成功时的回调函数,返回文件及 xhr 的响应信息 | [多文件上传](demo#multi-files) | -| errorEvent | `EventEmitter<{file: File; response: any}>` | 上传错误时的回调函数，返回上传失败的错误信息 | [多文件上传](demo#multi-files) | -| deleteUploadedFileEvent | `EventEmitter` | 删除上传文件的回调函数，返回删除文件的路径信息 | [多文件上传](demo#multi-files) | -| fileSelect | `EventEmitter` | 文件选择后的回调函数，返回已选择文件信息 | [多文件上传](demo#multi-files) | - -# dUpload -## dUpload 指令 - -| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | -| :--------------: | :--------------------------------------------------: | :--------: | :--------------------------------------------------------------------------------------- | ----------------------------------------------- | -| fileOptions | [`IFileOptions`](#ifileoptions) | -- | 必选，待上传文件配置 | [任意区域上传](demo#customize-area-upload) | -| uploadOptions | [`IUploadOptions`](#iuploadoptions) | -- | 必选，上传配置 | [任意区域上传](demo#customize-area-upload) | -| uploadedFiles | `Array` | [] | 可选，获取已上传的文件列表 | [任意区域上传](demo#customize-area-upload) | -| fileUploaders | `Array` | [] | 可选，获取已选择的文件列表 | [任意区域上传](demo#customize-area-upload) | -| enableDrop | `boolean` | false | 可选，是否支持拖拽 | [任意区域上传](demo#customize-area-upload) | -| dynamicUploadOptionsFn | [`IUploadOptions`](#iuploadoptions) | -- | 为文件动态设置自定义的上传参数, 参数为当前选中文件及`uploadOptions`的值 | [任意区域上传](demo#customize-area-upload) | - -## dUpload 事件 - -| 参数 | 类型 | 说明 | 跳转 Demo | -| :---------------------: | :-----------------: | :--------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------- | -| fileOver | `EventEmitter` | 支持拖拽上传时，文件移动到可拖放区域触发事件,可拖动的元素移出放置目标时返回`false`，元素正在拖动到放置目标时返回`true` | [任意区域上传](demo#customize-area-upload) | -| fileDrop | `EventEmitter` | 支持拖拽上传时，当前拖拽的文件列表回调，单文件上传默认返回第一个文件 | [任意区域上传](demo#customize-area-upload) | -| successEvent | `EventEmitter>` | 上传成功时的回调函数,返回文件及 xhr 的响应信息 | [任意区域上传](demo#customize-area-upload) | -| errorEvent | `EventEmitter<{file: File; response: any}>` | 上传错误时的回调函数，返回上传失败的错误信息 | [任意区域上传](demo#customize-area-upload) | -| alertMsgEvent | `EventEmitter` | 上传文件不符合上传文件配置uploadOptions时的回调函数，返回错误提示信息息 | [任意区域上传](demo#customize-area-upload) | -| fileSelect | `EventEmitter` | 文件选择后的回调函数，返回已选择文件信息 | [任意区域上传](demo#customize-area-upload) | - -### preloadFilesRef 模板参数 - -```xml - - -``` - -其中每项值代表： - -`fileUploaders`：FileUploader 类型的数组，FileUploader中包含 send()， cancel()方法 - -`UploadStatus`：上传状态，存在 preLoad = 0，uploading，uploaded，failed 四种状态 - -`deleteFile`: 传入需要删除的上传文件 - -### uploadedFilesRef 模板参数 - -```xml - - -``` - -其中每项值代表： - -`uploadedFiles`：上传的文件列表 - -`filePath`：文件路径 - -`deleteFile`: 传入需要删除的上传文件 - -# 接口 & 类型定义 -### IUploadOptions - -```ts -export class IUploadOptions { - // 上传接口地址 - uri: string; - // http 请求方法 - method?: string; - // 上传文件大小限制 - maximumSize?: number; - // 自定义请求headers - headers?: {[key: string]: any}; - // 认证token - authToken?: string; - // 认证token header标示 - authTokenHeader?: string; - // 上传额外自定义参数 - additionalParameter?: {[key: string]: any}; - // 上传文件字段名称，默认file - fileFieldName?: string; - // 多文件上传,是否检查文件重名，设置为true，重名文件不会覆盖，否则会覆盖上传 - checkSameName?: boolean; - // 指示了是否该使用类似cookies,authorization headers(头部授权)或者TLS客户端证书这一类资格证书来创建一个跨站点访问控制（cross-site Access-Control）请求 - withCredentials?: boolean; - // 手动设置返回数据类型 - responseType?: 'arraybuffer' | 'blob' | 'json' | 'text'; -} -``` -### IFileOptions - -```ts -export class IFileOptions { - // 规定能够通过文件上传进行提交的文件类型,例如 accept: '.xls,.xlsx,.pages,.mp3,.png' - accept?: string; - // 输入字段可选择多个值 - multiple?: boolean; -} -``` \ No newline at end of file diff --git a/devui/upload/doc/api-en.md b/devui/upload/doc/api-en.md deleted file mode 100644 index bf9fcc07891375ab7c09cfef0e602102f78e2299..0000000000000000000000000000000000000000 --- a/devui/upload/doc/api-en.md +++ /dev/null @@ -1,179 +0,0 @@ -# How to use - -Import into module: - -```ts -import { UploadModule } from 'ng-devui/upload'; -``` - -In the page: - -```xml -//Single file upload - -//Multiple files upload - -//use dUpload directive -
      -``` -# d-single-upload -## d-single-upload Parameter - -| Parameter | Type | Default | Description | Jump to Demo | -| :--------------: | :--------------------------------------------------: | :--------: | :--------------------------------------------------------------------------------------- | ----------------------------------------------- | -| fileOptions | [`IFileOptions`](#ifileoptions) | -- | Required. Configuration of the file to be uploaded | [Basic Usage](demo#basic-usage) | -| filePath | `string` | -- | Required. File path | [Basic Usage](demo#basic-usage) | -| uploadOptions | [`IUploadOptions`](#iuploadoptions) | -- | Required. Upload configuration | [Basic Usage](demo#basic-usage) | -| autoUpload | `boolean` | false | Optional. Indicating whether to automatically upload files | [Basic Usage](demo#basic-usage) | -| placeholderText | `string` |'Select file' | Optional. This parameter is used to upload the Placeholder text in the text box | [Basic Usage](demo#basic-usage) | -| preloadFilesRef | `TemplateRef` | -- | Optional. Used to create a customized template of the selected file list | [Customize](demo#custom) | -| uploadText | `string` | 'Upload' | Optional. This parameter specifies the text of the upload button | [Basic Usage](demo#basic-usage) | -| uploadedFiles | `Array` | [] | Optional. Obtains the list of uploaded files | [Basic Usage](demo#basic-usage) | -| uploadedFilesRef | `TemplateRef` | -- | Optional. Used to create a customized template for the list of uploaded files | [Customize](demo#custom) | -| withoutBtn | `boolean` | false | Optional. Whether to discard the button | [Basic Usage](demo#basic-usage) | -| enableDrop | `boolean` | false | Optional. Indicating whether drag is supported | [Basic Usage](demo#basic-usage) | -| beforeUpload | `boolean \| Promise \| Observable` | -- | Optional. It is a callback before upload. The return value is true or false to control whether to upload a file, file information and upload configuration | [Basic Usage](demo#basic-usage) | -| dynamicUploadOptionsFn | [`IUploadOptions`](#iuploadoptions) | -- | Set upload parameters dynamically for file. The parameters are the currently selected file and the value of `uploadOptions` | [Basic Usage](demo#basic-usage) | -| disabled | `boolean` | false | Optional. Specifies whether to disable the upload component. | [Basic Usage](demo#basic-usage) | -| showTip | `boolean` | false | Optional. Indicating whether to display the upload message. | [Automatic Upload](demo#auto-upload) | - -## d-single-upload event - -| Parameter | Type | Description | Jump to Demo | -| :---------------------: | :-----------------: | :--------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------- | -| fileOver | `EventEmitter` | Supports drag-and-drop upload. When a file is moved to a drag-and-drop area, an event is triggered. If a drag-and-drop element is moved out of the target, `false` is returned. If an element is being dragged to the target, `true` is returned | [Basic Usage](demo#basic-usage) | -| fileDrop | `EventEmitter` | Supports the callback of the list of dragged files during upload. The first file is returned by default when a single file is uploaded | [Basic Usage](demo#basic-usage) | -| successEvent | `EventEmitter>` | Callback function when the upload is successful. It returns the file and Xhr response information | [Basic Usage](demo#basic-usage) | -| errorEvent | `EventEmitter<{file: File; response: any}>` | Callback function when an upload error occurs. The error information about the upload failure is returned | [Basic Usage](demo#basic-usage) | -| deleteUploadedFileEvent | `EventEmitter` | Callback function for deleting uploaded files. The callback function returns the path information of the deleted files | [Basic Usage](demo#basic-usage) | -| fileSelect | `EventEmitter` | Callback function for selecting files. The callback function returns the path information of the selected files | [Basic Usage](demo#basic-usage) | - -# d-multiple-upload -## d-multiple-upload Parameter - -| Parameter | Type | Default | Description | Jump to Demo | -| :--------------------: | :--------------------------------------------------: | :------------: | :--------------------------------------------------------------------------------- | -------------------------------------------------------------- | -| fileOptions | [`IFileOptions`](#ifileoptions) | -- | Required. Configuration of the file to be uploaded | [Upload Multiple Files](demo#multi-files) | -| filePath | `string` | -- | Required. File path | [Multiple file upload](demo#multi-files) | -| uploadOptions | [`IUploadOptions`](#iuploadoptions)| -- | Required. Upload configuration | [Upload Multiple Files](demo#multi-files) | -| autoUpload | `boolean` | false | Optional. Indicating whether to automatically upload the file | [Automatic Upload](demo#auto-upload) | -| placeholderText | `string` |'Select multiple files' | Optional. Upload the Placeholder text in the text box | [Basic Usage](demo#basic-usage) | -| preloadFilesRef | `TemplateRef` | -- | Optional. Used to create a customized template of the selected file list | [Customize](demo#custom) | -| uploadText | `string` | 'Upload' | Optional. This parameter specifies the text of the upload button | [Basic Usage](demo#basic-usage) | -| uploadedFiles | `Array` | [] | Optional. Obtains the list of uploaded files | [Upload Multiple Files](demo#multi-files) | -| uploadedFilesRef | `TemplateRef` | -- | Optional. Used to create a customized template for the list of uploaded files | [Customize](demo#custom) | -| withoutBtn | `boolean` | false | Optional. Whether to discard the button | [Customize](demo#custom) | -| enableDrop | `boolean` | false | Optional. Indicating whether dragging is supported | [Upload Multiple Files](demo#multi-files) | -| beforeUpload |`boolean \| Promise \| Observable` | -- | Callback before upload. The return value `true` or `false` determines whether to upload a file, the parameters are file information and upload configuration | [Dynamic Upload Parameters](demo#dynamic-upload-options) | -| setCustomUploadOptions | [`IUploadOptions`](#iuploadoptions) | -- | Set customized upload parameters for each file. The parameters are the currently selected file and the value of `uploadOptions` | [Customize](demo#custom) | -| oneTimeUpload | `boolean` | false | Optional. Indicates whether to invoke the interface only once to upload all files| [Upload Multiple Files](demo#multi-files) | -| disabled | `boolean` | false | Optional. Specifies whether to disable the upload component | [Upload Multiple Files](demo#multi-files) | -| showTip | `boolean` | false | Optional. indicating whether to display the upload message | [Upload Multiple Files](demo#multi-files) | - -## d-multiple-upload event - -| Parameter | Type | Description | Jump to Demo | -| :---------------------: | :-----------------: | :--------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------- | -| fileOver | `EventEmitter` | Supports dragging and uploading. When a file is moved to a dragable area, an event is triggered. If a dragable element is moved out of the target, the value `false` is returned. If an element is being dragged to the target, the value `true` is returned | [Upload Multiple Files](demo#multi-files) | -| fileDrop | `EventEmitter` | Supports the callback of the list of dragged files during upload. The first file is returned by default when a single file is uploaded | [Upload Multiple Files](demo#multi-files) | -| successEvent | `EventEmitter>` | Callback function when the upload is successful, which returns the file and Xhr response information | [Upload Multiple Files](demo#multi-files) | -| errorEvent | `EventEmitter<{file: File; response: any}>` | Callback function when an upload error occurs. The error information about the upload failure is returned | [Upload Multiple Files](demo#multi-files) | -| deleteUploadedFileEvent | `EventEmitter` | Callback function for deleting uploaded files. The file path information is returned | [Upload Multiple Files](demo#multi-files) | -| fileSelect | `EventEmitter` | Callback function for selecting files. The callback function returns the path information of the selected files | [Upload Multiple Files](demo#multi-files) | - -# dUpload -## dUpload Directive - -| Parameter | Type | Default | Description | Jump to Demo | -| :--------------: | :--------------------------------------------------: | :--------: | :--------------------------------------------------------------------------------------- | ----------------------------------------------- | -| fileOptions | [`IFileOptions`](#ifileoptions)| -- | Required. Configuration of the file to be uploaded | [Customize Area to Upload](demo#customize-area-upload) | -| uploadOptions | [`IUploadOptions`](#iuploadoptions) | -- | Required. Upload configuration | [Customize Area to Upload](demo#customize-area-upload) | -| uploadedFiles | `Array` | [] | Optional. Obtain the list of uploaded files | [Customize Area to Upload](demo#customize-area-upload) | -| fileUploaders | `Array` | [] | Optional. Obtain the list of selected files | [Customize Area to Upload](demo#customize-area-upload) | -| enableDrop | `boolean` | false | Optional. Indicating whether drag is supported | [Customize Area to Upload](demo#customize-area-upload) | -| dynamicUploadOptionsFn | [`IUploadOptions`](#iuploadoptions) | -- | Set upload parameters dynamically for each file. The parameters are the currently selected file and the value of `uploadOptions` | [Customize Area to Upload](demo#customize-area-upload) | - -## dUpload Event - -| Parameter | Type | Description | Jump to Demo | -| :---------------------: | :-----------------: | :--------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------- | -| fileOver | `EventEmitter` | Supports dragging and uploading. When a file is moved to a dragable area, an event is triggered. If a dragable element is moved out of the target area, the value `false` is returned. If an element is being dragged to the target area, the value `true` is returned | [Customize Area to Upload](demo#customize-area-upload) | -| fileDrop | `EventEmitter` | Supports the callback of the list of dragged files during upload. The first file is returned by default when a single file is uploaded | [Customize Area to Upload](demo#customize-area-upload) | -| successEvent | `EventEmitter>` | Callback function when the upload is successful, which returns the file and Xhr response information | [Customize Area to Upload](demo#customize-area-upload) | -| errorEvent | `EventEmitter<{file: File; response: any}>` | Callback function when an upload error occurs. An upload failure error message is returned | [Customize Area to Upload](demo#customize-area-upload) | -| alertMsgEvent | `EventEmitter` | The file to be uploaded does not comply with the callback function used when uploadOptions is configured for the file to be uploaded. An error message is returned | [Customize Area to Upload](demo#customize-area-upload) | -| fileSelect | `EventEmitter` | Callback function for selecting files. The callback function returns the path information of the selected files | [Customize Area to Upload](demo#customize-area-upload) | - -### preloadFilesRef Template parameters - -```xml - - -``` - -Each value represents: - -`fileUploaders`: array of the FileUploader type. FileUploader contains the send() and cancel() methods. - -`UploadStatus`: upload status, which can be preLoad = 0,uploading,uploaded,failed'. - -`deleteFile`: transfer the file to be deleted. - -### uploadedFilesRef Template parameters - -```xml - - -``` - -Each value represents: - -`uploadedFiles`: list of uploaded files - -`filePath`: file path - -`deleteFile`: transfer the file to be deleted. - -# Interface & Type Definition -### IUploadOptions - -```ts -export class IUploadOptions { - // Upload interface address. - uri: string; - // HTTP request method - method? : string; - // Maximum size of the file to be uploaded. - maximumSize? : number; - // Customize request headers. - headers? : {[key: string]: any}; - // Authenticate the token. - authToken? : string; - // Authentication token header ID. - authTokenHeader? : string; - // Upload additional customized parameters. - additionalParameter? : {[key: string]: any}; - // Field name of the file to be uploaded. The default value is file. - fileFieldName? : string; - // Indicates whether to check whether duplicate files are uploaded. If this parameter is set to true, duplicate files are not overwritten. Otherwise, duplicate files are overwritten. - checkSameName? : boolean; - // Indicates whether to use a certificate such as cookies, authorization headers (header authorization), or TLS client certificate to create a cross-site access-control request. - withCredentials? : boolean; -} -``` -### IFileOptions - -```ts -export class IFileOptions { - // Specify the type of files that can be submitted through file upload, for example, accept:' .xls, .xlsx, .pages, .mp3, .png'. - accept?: string; - // Multiple values can be selected for the input field. - multiple?: boolean; -} -``` diff --git a/devui/upload/upload.tsx b/devui/upload/upload.tsx deleted file mode 100644 index 4fc9f7e349a9e0766862f47b2fd05a17b826158d..0000000000000000000000000000000000000000 --- a/devui/upload/upload.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { defineComponent } from 'vue' - -export default defineComponent({ - name: 'd-upload', - props: { - }, - setup(props, ctx) { - return () => { - return
      devui-upload
      - } - } -}) \ No newline at end of file diff --git a/sites/.vitepress/config/sidebar.ts b/sites/.vitepress/config/sidebar.ts index 2d639b4ff14139647fa4aa011514bbdb89df9a46..da971953ed9879dfe62728563adf36842691c78d 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 0000000000000000000000000000000000000000..da243f871636e81b076c0b41e0ff3a824253a8d9 --- /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 0000000000000000000000000000000000000000..cbd1f3c2d133f33d12b147ac372b4514cfafbf8c --- /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 150884520b87217fb95c5e840e71bcb37d307ab5..0ec457294f29cd5cf96a4582801af80b0628c557 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 edab79c2027336557df896514b69c98ef4b80085..69e75b83bfe632ebef6a9336e821f65e9dafe692 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 值 | [基本用法](#基本用法) | + +