diff --git a/README.md b/README.md index cf175231..059b6ce7 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,6 @@

+ 1212

diff --git a/components.json b/components.json index 62d74870..27f0b103 100644 --- a/components.json +++ b/components.json @@ -80,6 +80,7 @@ "cascader-panel": "./packages/cascader-panel/index.js", "avatar": "./packages/avatar/index.js", "drawer": "./packages/drawer/index.js", + "statistic": "./packages/statistic/index.js" "popconfirm": "./packages/popconfirm/index.js", "skeleton": "./packages/skeleton/index.js", "skeleton-item": "./packages/skeleton-item/index.js", diff --git a/examples/docs/en-US/statistic.md b/examples/docs/en-US/statistic.md new file mode 100644 index 00000000..ed46adb2 --- /dev/null +++ b/examples/docs/en-US/statistic.md @@ -0,0 +1,218 @@ +## Statistic + +Used to highlight a certain number or group of numbers, such as showing a numerical value, such as a dollar amount, ranking, etc. + + + +Countdown mode + + +### Basic usage +The component provides a thousandth place display, but you can use rate to set the 10,000th place, and so on +:::demo +```html + + + + +``` +::: + + +### 倒计时 +:::warning +Suspend is tentative, it ** just pauses the countdown, not the time, because value points to a future time node ** + +If you need to add time to the original, please note that the overall time (the amount of time added and the original time) must be a ** future ** time node, otherwise it is still the end of the countdown +::: +:::demo Providing a future time via 'value' will enable the countdown function +```html + + + + +``` +::: + + + + +### Statistic Attributes + +| Attribute | Description | Type | Accepted Values | Default | +|------------- |---------------- |---------------- |---------------------- |-------- | +| value | Numerical content | string \| number | - | - | +| decimalSeparator | Setting the decimal point | string | - | . | +| formatter | Custom numerical presentation| v-slot \|({value}) => VNode | - | - | +| groupSeparator | Sets the thousandth identifier | string | - | , | +| precision | numerical precision | number | - | 0 | +| prefix | Sets the prefix of a number | string \| v-slot | - | - | +| suffix |Sets the suffix of a number | string \| v-slot | - | - | +| title | Numeric titles | string \| v-slot | - | - | +| valueStyle | Styles numeric values | style | - | - | +| rate | Set the ratio | number | - | 1000 | + + +### Statistic Slots +| Name | Description | +|------|--------| +| prefix | Numeric prefix | +| suffix | Suffixes for numeric values | +| formatter | Numerical content | +| title | Numeric titles | + + +### Statistic.Countdown Attributes + +| Attribute | Description | Type | Options | Default | +|------------- |---------------- |---------------- |---------------------- |-------- | +| timeIndices | Whether to enable the countdown function | boolean | true\|false | false | +| value | Required value, enter the bound value | string | — | — | +| format | Formatting the countdown display | string | — | 'HH:mm:ss' | +### Statistic.Countdown Events +| Method | Description | Parameters | +|---------|--------|---------| +| change | Enable in the 'countdown' function | (value: Date) | +| finish | Launched after the 'countdown' is complete | (value: boolean) | + +### Statistic Methods +| Method | Description | Parameters |CallBack| +| ---- | ---- | ---- |---- | +| suspend | Pause the countdown|(value:boolean) |(value: Date) | + + diff --git a/examples/docs/es/statistic.md b/examples/docs/es/statistic.md new file mode 100644 index 00000000..ed46adb2 --- /dev/null +++ b/examples/docs/es/statistic.md @@ -0,0 +1,218 @@ +## Statistic + +Used to highlight a certain number or group of numbers, such as showing a numerical value, such as a dollar amount, ranking, etc. + + + +Countdown mode + + +### Basic usage +The component provides a thousandth place display, but you can use rate to set the 10,000th place, and so on +:::demo +```html + + + + +``` +::: + + +### 倒计时 +:::warning +Suspend is tentative, it ** just pauses the countdown, not the time, because value points to a future time node ** + +If you need to add time to the original, please note that the overall time (the amount of time added and the original time) must be a ** future ** time node, otherwise it is still the end of the countdown +::: +:::demo Providing a future time via 'value' will enable the countdown function +```html + + + + +``` +::: + + + + +### Statistic Attributes + +| Attribute | Description | Type | Accepted Values | Default | +|------------- |---------------- |---------------- |---------------------- |-------- | +| value | Numerical content | string \| number | - | - | +| decimalSeparator | Setting the decimal point | string | - | . | +| formatter | Custom numerical presentation| v-slot \|({value}) => VNode | - | - | +| groupSeparator | Sets the thousandth identifier | string | - | , | +| precision | numerical precision | number | - | 0 | +| prefix | Sets the prefix of a number | string \| v-slot | - | - | +| suffix |Sets the suffix of a number | string \| v-slot | - | - | +| title | Numeric titles | string \| v-slot | - | - | +| valueStyle | Styles numeric values | style | - | - | +| rate | Set the ratio | number | - | 1000 | + + +### Statistic Slots +| Name | Description | +|------|--------| +| prefix | Numeric prefix | +| suffix | Suffixes for numeric values | +| formatter | Numerical content | +| title | Numeric titles | + + +### Statistic.Countdown Attributes + +| Attribute | Description | Type | Options | Default | +|------------- |---------------- |---------------- |---------------------- |-------- | +| timeIndices | Whether to enable the countdown function | boolean | true\|false | false | +| value | Required value, enter the bound value | string | — | — | +| format | Formatting the countdown display | string | — | 'HH:mm:ss' | +### Statistic.Countdown Events +| Method | Description | Parameters | +|---------|--------|---------| +| change | Enable in the 'countdown' function | (value: Date) | +| finish | Launched after the 'countdown' is complete | (value: boolean) | + +### Statistic Methods +| Method | Description | Parameters |CallBack| +| ---- | ---- | ---- |---- | +| suspend | Pause the countdown|(value:boolean) |(value: Date) | + + diff --git a/examples/docs/fr-FR/statistic.md b/examples/docs/fr-FR/statistic.md new file mode 100644 index 00000000..2d762eb9 --- /dev/null +++ b/examples/docs/fr-FR/statistic.md @@ -0,0 +1 @@ +## Statistic diff --git a/examples/docs/zh-CN/statistic.md b/examples/docs/zh-CN/statistic.md new file mode 100644 index 00000000..8ea864f6 --- /dev/null +++ b/examples/docs/zh-CN/statistic.md @@ -0,0 +1,216 @@ +## Statistic 统计数值 + +用于突出某个或某组数字时，如显示数值，如金额，排名等。 + +倒计时模式 + + +### 基础用法 + 组件提供千分位的展示，不过可以通过rate来设置相应万分位等 +:::demo +```html + + + + +``` +::: + + +### 倒计时 +:::warning +suspend 暂定，它**只是暂停倒计时，并非暂停了时间，因为value指向的是未来的时间节点**。 + +如果需要在原基础上添加时间，请注意：整体的时间（添加的时间量和原定时间）必须是**未来**的时间节点，否则依旧是倒计时结束 +::: +:::demo 通过 `value` 提供未来的时间，将开启倒计时功能 +```html + + + + +``` +::: + + + + +### Statistic Attributes + +| 参数 | 说明 | 类型 | 可选值 | 默认值 | +|------------- |---------------- |---------------- |---------------------- |-------- | +| value | 数值内容 | string \| number | - | - | +| decimalSeparator | 设置小数点 | string | - | . | +| formatter | 自定义数值展示| v-slot \|({value}) => VNode | - | - | +| groupSeparator | 设置千分位标识符 | string | - | , | +| precision | 数值精度 | number | - | 0 | +| prefix | 设置数值的前缀 | string \| v-slot | - | - | +| suffix |设置数值的后缀 | string \| v-slot | - | - | +| title | 数值的标题 | string \| v-slot | - | - | +| valueStyle | 设置数值的样式 | style | - | - | +| rate | 设置倍率 | number | - | 1000 | + + +### Statistic Slots +| name | 说明 | +|------|--------| +| prefix | 数值的前缀 | +| suffix | 数值的后缀 | +| formatter | 数值内容 | +| title | 数值的标题 | + + +### Statistic.Countdown Attributes + +| 参数 | 说明 | 类型 | 可选值 | 默认值 | +|------------- |---------------- |---------------- |---------------------- |-------- | +| timeIndices | 是否开启倒计时功能 | boolean | true\|false | false | +| value | 必填值，输入绑定值 | string | — | — | +| format | 格式化倒计时展示 | string | — | 'HH:mm:ss' | +### Statistic.Countdown Events +| 事件名称 | 说明 | 回调参数 | +|---------|--------|---------| +| change | 在`倒计时`的功能中开启 | (value: Date) | +| finish | 在`倒计时` 完成后启动 | (value: boolean) | + +### Statistic Methods +| 方法名 | 说明 | 参数 |回调参数| +| ---- | ---- | ---- |---- | +| suspend | 暂停倒计时|(value:boolean) |(value: Date) | + + diff --git a/examples/nav.config.json b/examples/nav.config.json index 3377ac93..f648024c 100644 --- a/examples/nav.config.json +++ b/examples/nav.config.json @@ -192,6 +192,10 @@ { "path": "/result", "title": "Result 结果" + }, + { + "path": "/statistic", + "title": "Statistic 统计数值" } ] }, @@ -621,6 +625,10 @@ { "path": "/drawer", "title": "Drawer" + }, + { + "path": "/statistic", + "title": "Statistic" } ] } @@ -935,6 +943,10 @@ { "path": "/drawer", "title": "Drawer" + }, + { + "path": "/statistic", + "title": "Statistic" } ] } @@ -1249,6 +1261,10 @@ { "path": "/drawer", "title": "Drawer" + }, + { + "path": "/statistic", + "title": "Statistic" } ] } diff --git a/packages/statistic/index.js b/packages/statistic/index.js new file mode 100644 index 00000000..0223bf87 --- /dev/null +++ b/packages/statistic/index.js @@ -0,0 +1,8 @@ +import Statistic from './src/main'; + +/* istanbul ignore next */ +Statistic.install = function(Vue) { + Vue.component(Statistic.name, Statistic); +}; + +export default Statistic; diff --git a/packages/statistic/src/main.vue b/packages/statistic/src/main.vue new file mode 100644 index 00000000..92e7585f --- /dev/null +++ b/packages/statistic/src/main.vue @@ -0,0 +1,204 @@ + + + diff --git a/packages/theme-chalk/src/index.scss b/packages/theme-chalk/src/index.scss index 0d81c531..a965f9ef 100644 --- a/packages/theme-chalk/src/index.scss +++ b/packages/theme-chalk/src/index.scss @@ -77,6 +77,7 @@ @import "./cascader-panel.scss"; @import "./avatar.scss"; @import "./drawer.scss"; +@import "./statistic.scss"; @import "./popconfirm.scss"; @import "./skeleton.scss"; @import "./skeleton-item.scss"; @@ -84,3 +85,4 @@ @import "./descriptions.scss"; @import "./descriptions-item.scss"; @import "./result.scss"; + diff --git a/packages/theme-chalk/src/statistic.scss b/packages/theme-chalk/src/statistic.scss new file mode 100644 index 00000000..d38432cc --- /dev/null +++ b/packages/theme-chalk/src/statistic.scss @@ -0,0 +1,36 @@ +@import "mixins/mixins"; +@import "common/var"; + +@include b(statistic) { + width: 100%; + box-sizing: border-box; + margin: 0; + padding: 0; + color: $--color-black; + font-size: 14px; + font-variant: tabular-nums; + line-height: 1.5715; + list-style: none; + font-feature-settings: "tnum"; + text-align: center; + .head { + margin-bottom: 4px; + color: #00000073; + font-size: 14px; + + } + + .con{ + display: flex; + justify-content :center; + align-items: center ; + .number{ + font-size: 20px; + padding: 0 4px; + } + span{ display: inline-block; + margin: 0; + line-height: 100%; + } + } +} \ No newline at end of file diff --git a/src/index.js b/src/index.js index 30340feb..7ee3ad63 100644 --- a/src/index.js +++ b/src/index.js @@ -81,6 +81,9 @@ import PageHeader from '../packages/page-header/index.js'; import CascaderPanel from '../packages/cascader-panel/index.js'; import Avatar from '../packages/avatar/index.js'; import Drawer from '../packages/drawer/index.js'; + +import Statistic from '../packages/statistic/index.js'; + import Popconfirm from '../packages/popconfirm/index.js'; import Skeleton from '../packages/skeleton/index.js'; import SkeletonItem from '../packages/skeleton-item/index.js'; @@ -88,6 +91,7 @@ import Empty from '../packages/empty/index.js'; import Descriptions from '../packages/descriptions/index.js'; import DescriptionsItem from '../packages/descriptions-item/index.js'; import Result from '../packages/result/index.js'; + import locale from 'element-ui/src/locale'; import CollapseTransition from 'element-ui/src/transitions/collapse-transition'; @@ -168,6 +172,7 @@ const components = [ CascaderPanel, Avatar, Drawer, + Statistic, Popconfirm, Skeleton, SkeletonItem, @@ -296,6 +301,9 @@ export default { CascaderPanel, Avatar, Drawer, + + Statistic, + Popconfirm, Skeleton, SkeletonItem, @@ -303,4 +311,5 @@ export default { Descriptions, DescriptionsItem, Result + }; diff --git a/test/unit/specs/statistic.spec.js b/test/unit/specs/statistic.spec.js new file mode 100644 index 00000000..25b07921 --- /dev/null +++ b/test/unit/specs/statistic.spec.js @@ -0,0 +1,15 @@ +import { createTest, destroyVM } from '../util'; +import Statistic from 'packages/statistic'; + +describe('Statistic', () => { + let vm; + afterEach(() => { + destroyVM(vm); + }); + + it('create', () => { + vm = createTest(Statistic, true); + expect(vm.$el).to.exist; + }); +}); + diff --git a/types/element-ui.d.ts b/types/element-ui.d.ts index 9657a652..1521ae69 100644 --- a/types/element-ui.d.ts +++ b/types/element-ui.d.ts @@ -1,378 +1,727 @@ -import Vue, { PluginObject } from 'vue' -import { ElementUIComponent, ElementUIComponentSize, ElementUIHorizontalAlignment } from './component' - -import { ElAlert } from './alert' -import { ElAside } from './aside' -import { ElAutocomplete } from './autocomplete' -import { ElBadge } from './badge' -import { ElBreadcrumb } from './breadcrumb' -import { ElBreadcrumbItem } from './breadcrumb-item' -import { ElButton } from './button' -import { ElButtonGroup } from './button-group' -import { ElCard } from './card' -import { ElCarousel } from './carousel' -import { ElCarouselItem } from './carousel-item' -import { ElCascader } from './cascader' -import { ElCheckbox } from './checkbox' -import { ElCheckboxButton } from './checkbox-button' -import { ElCheckboxGroup } from './checkbox-group' -import { ElCol } from './col' -import { ElCollapse } from './collapse' -import { ElCollapseItem } from './collapse-item' -import { ElColorPicker } from './color-picker' -import { ElContainer } from './container' -import { ElDatePicker } from './date-picker' -import { ElDialog } from './dialog' -import { ElDropdown } from './dropdown' -import { ElDropdownItem } from './dropdown-item' -import { ElDropdownMenu } from './dropdown-menu' -import { ElFooter } from './footer' -import { ElForm } from './form' -import { ElFormItem } from './form-item' -import { ElHeader } from './header' -import { ElInput } from './input' -import { ElInputNumber } from './input-number' -import { ElLoading } from './loading' -import { ElMain } from './main' -import { ElMenu } from './menu' -import { ElMenuItem } from './menu-item' -import { ElMenuItemGroup } from './menu-item-group' -import { ElMessage } from './message' -import { ElMessageBox } from './message-box' -import { ElNotification } from './notification' -import { ElOption } from './option' -import { ElOptionGroup } from './option-group' -import { ElPagination } from './pagination' -import { ElPopover } from './popover' -import { ElProgress } from './progress' -import { ElRate } from './rate' -import { ElRadio } from './radio' -import { ElRadioButton } from './radio-button' -import { ElRadioGroup } from './radio-group' -import { ElRow } from './row' -import { ElSelect } from './select' -import { ElSlider } from './slider' -import { ElStep } from './step' -import { ElSteps } from './steps' -import { ElSubmenu } from './submenu' -import { ElSwitch } from './switch' -import { ElTable } from './table' -import { ElTableColumn } from './table-column' -import { ElTag } from './tag' -import { ElTabs } from './tabs' -import { ElTabPane } from './tab-pane' -import { ElTimeline } from './timeline' -import { ElTimelineItem } from './timeline-item' -import { ElTimePicker } from './time-picker' -import { ElTimeSelect } from './time-select' -import { ElTooltip } from './tooltip' -import { ElTransfer } from './transfer' -import { ElTree, TreeData } from './tree' -import { ElUpload } from './upload' -import { ElLink } from './link' -import { ElDivider } from './divider' -import { ElIcon } from './icon' -import { ElCalendar } from './calendar' -import { ElImage } from './image' -import { ElBacktop } from './backtop' -import { ElInfiniteScroll } from './infinite-scroll' -import { ElPageHeader } from './page-header' -import { ElAvatar } from './avatar' -import { ElDrawer } from './drawer' -import { ElPopconfirm } from './popconfirm' -import { ElSkeleton } from './skeleton' -import { ElSkeletonItem } from './skeleton-item' -import { ElCascaderPanel } from './cascader-panel' -import { ElEmpty } from './empty' -import { ElSpinner } from './spinner' -import { ElDescriptions } from './descriptions' -import { ElDescriptionsItem } from './descriptions-item' -import { ElResult } from './result' - -export interface InstallationOptions { - locale: any, - i18n: any, - size: string -} - -/** The version of element-ui */ -export const version: string - -/** - * Install all element-ui components into Vue. - * Please do not invoke this method directly. - * Call `Vue.use(ElementUI)` to install. - */ -export function install (vue: typeof Vue, options: InstallationOptions): void - -/** ElementUI component common definition */ -export type Component = ElementUIComponent - -/** Component size definition for button, input, etc */ -export type ComponentSize = ElementUIComponentSize - -/** Horizontal alignment */ -export type HorizontalAlignment = ElementUIHorizontalAlignment - -/** Show animation while loading data */ -export const Loading: ElLoading - -/** Used to show feedback after an activity. The difference with Notification is that the latter is often used to show a system level passive notification. */ -export const Message: ElMessage - -/** A set of modal boxes simulating system message box, mainly for message prompt, success tips, error messages and query information */ -export const MessageBox: ElMessageBox - -/** Displays a global notification message at the upper right corner of the page */ -export const Notification: ElNotification - -// TS cannot merge imported class with namespace, so declare subclasses instead - -/** Alert Component */ -export class Alert extends ElAlert {} - -/** Aside Component */ -export class Aside extends ElAside {} - -/** Autocomplete Component */ -export class Autocomplete extends ElAutocomplete {} - -/** Bagde Component */ -export class Badge extends ElBadge {} - -/** Breadcrumb Component */ -export class Breadcrumb extends ElBreadcrumb {} - -/** Breadcrumb Item Component */ -export class BreadcrumbItem extends ElBreadcrumbItem {} - -/** Button Component */ -export class Button extends ElButton {} - -/** Button Group Component */ -export class ButtonGroup extends ElButtonGroup {} - -/** Card Component */ -export class Card extends ElCard {} - -/** Cascader Component */ -export class Cascader extends ElCascader {} - -/** Carousel Component */ -export class Carousel extends ElCarousel {} - -/** Carousel Item Component */ -export class CarouselItem extends ElCarouselItem {} - -/** Checkbox Component */ -export class Checkbox extends ElCheckbox {} - -/** Checkbox Button Component */ -export class CheckboxButton extends ElCheckboxButton {} - -/** Checkbox Group Component */ -export class CheckboxGroup extends ElCheckboxGroup {} - -/** Colunm Layout Component */ -export class Col extends ElCol {} - -/** Collapse Component */ -export class Collapse extends ElCollapse {} - -/** Collapse Item Component */ -export class CollapseItem extends ElCollapseItem {} - -/** Color Picker Component */ -export class ColorPicker extends ElColorPicker {} - -/** Container Component */ -export class Container extends ElContainer {} - -/** Date Picker Component */ -export class DatePicker extends ElDatePicker {} - -/** Dialog Component */ -export class Dialog extends ElDialog {} - -/** Dropdown Component */ -export class Dropdown extends ElDropdown {} - -/** Dropdown Item Component */ -export class DropdownItem extends ElDropdownItem {} - -/** Dropdown Menu Component */ -export class DropdownMenu extends ElDropdownMenu {} - -/** Footer Component */ -export class Footer extends ElFooter {} - -/** Form Component */ -export class Form extends ElForm {} - -/** Form Item Component */ -export class FormItem extends ElFormItem {} - -/** Header Component */ -export class Header extends ElHeader {} - -/** Input Component */ -export class Input extends ElInput {} - -/** Input Number Component */ -export class InputNumber extends ElInputNumber {} - -/** Main Component */ -export class Main extends ElMain {} - -/** Menu that provides navigation for your website */ -export class Menu extends ElMenu {} - -/** Menu Item Component */ -export class MenuItem extends ElMenuItem {} - -/** Menu Item Group Component */ -export class MenuItemGroup extends ElMenuItemGroup {} - -/** Dropdown Select Option Component */ -export class Option extends ElOption {} - -/** Dropdown Select Option Group Component */ -export class OptionGroup extends ElOptionGroup {} - -/** Pagination Component */ -export class Pagination extends ElPagination {} - -/** Popover Component */ -export class Popover extends ElPopover {} - -/** Progress Component */ -export class Progress extends ElProgress {} - -/** Rate Component */ -export class Rate extends ElRate {} - -/** Radio Component */ -export class Radio extends ElRadio {} - -/** Radio Button Component */ -export class RadioButton extends ElRadioButton {} - -/** Radio Group Component */ -export class RadioGroup extends ElRadioGroup {} - -/** Row Layout Component */ -export class Row extends ElRow {} - -/** Dropdown Select Component */ -export class Select extends ElSelect {} - -/** Slider Component */ -export class Slider extends ElSlider {} - -/** Step Component */ -export class Step extends ElStep {} - -/** Steps Component */ -export class Steps extends ElSteps {} - -/** Submenu Component */ -export class Submenu extends ElSubmenu {} - -/** Switch Component */ -export class Switch extends ElSwitch {} - -/** Table Component */ -export class Table extends ElTable {} - -/** Table Column Component */ -export class TableColumn extends ElTableColumn {} - -/** Tabs Component */ -export class Tabs extends ElTabs {} - -/** Tab Pane Component */ -export class TabPane extends ElTabPane {} - -/** Tag Component */ -export class Tag extends ElTag {} - -/** Timeline Component */ -export class Timeline extends ElTimeline {} - -/** Timeline Item Component */ -export class TimelineItem extends ElTimelineItem {} - -/** TimePicker Component */ -export class TimePicker extends ElTimePicker {} - -/** TimeSelect Component */ -export class TimeSelect extends ElTimeSelect {} - -/** Tooltip Component */ -export class Tooltip extends ElTooltip {} - -/** Transfer Component */ -export class Transfer extends ElTransfer {} - -/** Tree Component */ -export class Tree extends ElTree {} - -/** Upload Component */ -export class Upload extends ElUpload {} - -/** Divider Component */ -export class Divider extends ElDivider {} - -/** Link Component */ -export class Link extends ElLink {} - -/** Image Component */ -export class Image extends ElImage {} - -/** Icon Component */ -export class Icon extends ElIcon {} - -/** Calendar Component */ -export class Calendar extends ElCalendar {} - -/** Backtop Component */ -export class Backtop extends ElBacktop {} - -/** InfiniteScroll Directive */ -export const InfiniteScroll: PluginObject; - -/** PageHeader Component */ -export class PageHeader extends ElPageHeader {} - -/** Avatar Component */ -export class Avatar extends ElAvatar {} - -/** Drawer Component */ -export class Drawer extends ElDrawer {} - -/** Popconfirm Component */ -export class Popconfirm extends ElPopconfirm {} - -/** Skeleton Component */ -export class Skeleton extends ElSkeleton {} - -/** Skeleton Item Component */ -export class SkeletonItem extends ElSkeletonItem {} - -/** CascaderPanel Component */ -export class CascaderPanel extends ElCascaderPanel {} - -/** Empty Component */ -export class Empty extends ElEmpty {} - -/** Spinner Component */ -export class Spinner extends ElSpinner {} - -/** Description Component */ -export class Descriptions extends ElDescriptions {} - -/** Description Item Component */ -export class DescriptionsItem extends ElDescriptionsItem {} - -/** Result Component */ -export class Result extends ElResult {} \ No newline at end of file + +import Vue, { PluginObject } from 'vue' +import { ElementUIComponent, ElementUIComponentSize, ElementUIHorizontalAlignment } from './component' + +import { ElAlert } from './alert' +import { ElAside } from './aside' +import { ElAutocomplete } from './autocomplete' +import { ElBadge } from './badge' +import { ElBreadcrumb } from './breadcrumb' +import { ElBreadcrumbItem } from './breadcrumb-item' +import { ElButton } from './button' +import { ElButtonGroup } from './button-group' +import { ElCard } from './card' +import { ElCarousel } from './carousel' +import { ElCarouselItem } from './carousel-item' +import { ElCascader } from './cascader' +import { ElCheckbox } from './checkbox' +import { ElCheckboxButton } from './checkbox-button' +import { ElCheckboxGroup } from './checkbox-group' +import { ElCol } from './col' +import { ElCollapse } from './collapse' +import { ElCollapseItem } from './collapse-item' +import { ElColorPicker } from './color-picker' +import { ElContainer } from './container' +import { ElDatePicker } from './date-picker' +import { ElDialog } from './dialog' +import { ElDropdown } from './dropdown' +import { ElDropdownItem } from './dropdown-item' +import { ElDropdownMenu } from './dropdown-menu' +import { ElFooter } from './footer' +import { ElForm } from './form' +import { ElFormItem } from './form-item' +import { ElHeader } from './header' +import { ElInput } from './input' +import { ElInputNumber } from './input-number' +import { ElLoading } from './loading' +import { ElMain } from './main' +import { ElMenu } from './menu' +import { ElMenuItem } from './menu-item' +import { ElMenuItemGroup } from './menu-item-group' +import { ElMessage } from './message' +import { ElMessageBox } from './message-box' +import { ElNotification } from './notification' +import { ElOption } from './option' +import { ElOptionGroup } from './option-group' +import { ElPagination } from './pagination' +import { ElPopover } from './popover' +import { ElProgress } from './progress' +import { ElRate } from './rate' +import { ElRadio } from './radio' +import { ElRadioButton } from './radio-button' +import { ElRadioGroup } from './radio-group' +import { ElRow } from './row' +import { ElSelect } from './select' +import { ElSlider } from './slider' +import { ElStep } from './step' +import { ElSteps } from './steps' +import { ElSubmenu } from './submenu' +import { ElSwitch } from './switch' +import { ElTable } from './table' +import { ElTableColumn } from './table-column' +import { ElTag } from './tag' +import { ElTabs } from './tabs' +import { ElTabPane } from './tab-pane' +import { ElTimeline } from './timeline' +import { ElTimelineItem } from './timeline-item' +import { ElTimePicker } from './time-picker' +import { ElTimeSelect } from './time-select' +import { ElTooltip } from './tooltip' +import { ElTransfer } from './transfer' +import { ElTree, TreeData } from './tree' +import { ElUpload } from './upload' +import { ElLink } from './link' +import { ElDivider } from './divider' +import { ElIcon } from './icon' +import { ElCalendar } from './calendar' +import { ElImage } from './image' +import { ElBacktop } from './backtop' +import { ElInfiniteScroll } from './infinite-scroll' +import { ElPageHeader } from './page-header' +import { ElAvatar } from './avatar' +import { ElDrawer } from './drawer' + +import { ElStatistic } from './statistic' + +export interface InstallationOptions { + locale: any, + i18n: any, + size: string +} + +/** The version of element-ui */ +export const version: string + +/** + * Install all element-ui components into Vue. + * Please do not invoke this method directly. + * Call `Vue.use(ElementUI)` to install. + */ +export function install (vue: typeof Vue, options: InstallationOptions): void + +/** ElementUI component common definition */ +export type Component = ElementUIComponent + +/** Component size definition for button, input, etc */ +export type ComponentSize = ElementUIComponentSize + +/** Horizontal alignment */ +export type HorizontalAlignment = ElementUIHorizontalAlignment + +/** Show animation while loading data */ +export const Loading: ElLoading + +/** Used to show feedback after an activity. The difference with Notification is that the latter is often used to show a system level passive notification. */ +export const Message: ElMessage + +/** A set of modal boxes simulating system message box, mainly for message prompt, success tips, error messages and query information */ +export const MessageBox: ElMessageBox + +/** Displays a global notification message at the upper right corner of the page */ +export const Notification: ElNotification + +// TS cannot merge imported class with namespace, so declare subclasses instead + +/** Alert Component */ +export class Alert extends ElAlert {} + +/** Aside Component */ +export class Aside extends ElAside {} + +/** Autocomplete Component */ +export class Autocomplete extends ElAutocomplete {} + +/** Bagde Component */ +export class Badge extends ElBadge {} + +/** Breadcrumb Component */ +export class Breadcrumb extends ElBreadcrumb {} + +/** Breadcrumb Item Component */ +export class BreadcrumbItem extends ElBreadcrumbItem {} + +/** Button Component */ +export class Button extends ElButton {} + +/** Button Group Component */ +export class ButtonGroup extends ElButtonGroup {} + +/** Card Component */ +export class Card extends ElCard {} + +/** Cascader Component */ +export class Cascader extends ElCascader {} + +/** Carousel Component */ +export class Carousel extends ElCarousel {} + +/** Carousel Item Component */ +export class CarouselItem extends ElCarouselItem {} + +/** Checkbox Component */ +export class Checkbox extends ElCheckbox {} + +/** Checkbox Button Component */ +export class CheckboxButton extends ElCheckboxButton {} + +/** Checkbox Group Component */ +export class CheckboxGroup extends ElCheckboxGroup {} + +/** Colunm Layout Component */ +export class Col extends ElCol {} + +/** Collapse Component */ +export class Collapse extends ElCollapse {} + +/** Collapse Item Component */ +export class CollapseItem extends ElCollapseItem {} + +/** Color Picker Component */ +export class ColorPicker extends ElColorPicker {} + +/** Container Component */ +export class Container extends ElContainer {} + +/** Date Picker Component */ +export class DatePicker extends ElDatePicker {} + +/** Dialog Component */ +export class Dialog extends ElDialog {} + +/** Dropdown Component */ +export class Dropdown extends ElDropdown {} + +/** Dropdown Item Component */ +export class DropdownItem extends ElDropdownItem {} + +/** Dropdown Menu Component */ +export class DropdownMenu extends ElDropdownMenu {} + +/** Footer Component */ +export class Footer extends ElFooter {} + +/** Form Component */ +export class Form extends ElForm {} + +/** Form Item Component */ +export class FormItem extends ElFormItem {} + +/** Header Component */ +export class Header extends ElHeader {} + +/** Input Component */ +export class Input extends ElInput {} + +/** Input Number Component */ +export class InputNumber extends ElInputNumber {} + +/** Main Component */ +export class Main extends ElMain {} + +/** Menu that provides navigation for your website */ +export class Menu extends ElMenu {} + +/** Menu Item Component */ +export class MenuItem extends ElMenuItem {} + +/** Menu Item Group Component */ +export class MenuItemGroup extends ElMenuItemGroup {} + +/** Dropdown Select Option Component */ +export class Option extends ElOption {} + +/** Dropdown Select Option Group Component */ +export class OptionGroup extends ElOptionGroup {} + +/** Pagination Component */ +export class Pagination extends ElPagination {} + +/** Popover Component */ +export class Popover extends ElPopover {} + +/** Progress Component */ +export class Progress extends ElProgress {} + +/** Rate Component */ +export class Rate extends ElRate {} + +/** Radio Component */ +export class Radio extends ElRadio {} + +/** Radio Button Component */ +export class RadioButton extends ElRadioButton {} + +/** Radio Group Component */ +export class RadioGroup extends ElRadioGroup {} + +/** Row Layout Component */ +export class Row extends ElRow {} + +/** Dropdown Select Component */ +export class Select extends ElSelect {} + +/** Slider Component */ +export class Slider extends ElSlider {} + +/** Step Component */ +export class Step extends ElStep {} + +/** Steps Component */ +export class Steps extends ElSteps {} + +/** Submenu Component */ +export class Submenu extends ElSubmenu {} + +/** Switch Component */ +export class Switch extends ElSwitch {} + +/** Table Component */ +export class Table extends ElTable {} + +/** Table Column Component */ +export class TableColumn extends ElTableColumn {} + +/** Tabs Component */ +export class Tabs extends ElTabs {} + +/** Tab Pane Component */ +export class TabPane extends ElTabPane {} + +/** Tag Component */ +export class Tag extends ElTag {} + +/** Timeline Component */ +export class Timeline extends ElTimeline {} + +/** Timeline Item Component */ +export class TimelineItem extends ElTimelineItem {} + +/** TimePicker Component */ +export class TimePicker extends ElTimePicker {} + +/** TimeSelect Component */ +export class TimeSelect extends ElTimeSelect {} + +/** Tooltip Component */ +export class Tooltip extends ElTooltip {} + +/** Transfer Component */ +export class Transfer extends ElTransfer {} + +/** Tree Component */ +export class Tree extends ElTree {} + +/** Upload Component */ +export class Upload extends ElUpload {} + +/** Divider Component */ +export class Divider extends ElDivider {} + +/** Link Component */ +export class Link extends ElLink {} + +/** Image Component */ +export class Image extends ElImage {} + +/** Icon Component */ +export class Icon extends ElIcon {} + +/** Calendar Component */ +export class Calendar extends ElCalendar {} + +/** Backtop Component */ +export class Backtop extends ElBacktop {} + +/** InfiniteScroll Directive */ +export const InfiniteScroll: PluginObject; + +/** PageHeader Component */ +export class PageHeader extends ElPageHeader {} + +/** Avatar Component */ +export class Avatar extends ElAvatar {} + +/** Drawer Component */ +export class Drawer extends ElDrawer {} + +/** Statistic Component */ +export class Statistic extends ElStatistic {} + +import Vue, { PluginObject } from 'vue' +import { ElementUIComponent, ElementUIComponentSize, ElementUIHorizontalAlignment } from './component' + +import { ElAlert } from './alert' +import { ElAside } from './aside' +import { ElAutocomplete } from './autocomplete' +import { ElBadge } from './badge' +import { ElBreadcrumb } from './breadcrumb' +import { ElBreadcrumbItem } from './breadcrumb-item' +import { ElButton } from './button' +import { ElButtonGroup } from './button-group' +import { ElCard } from './card' +import { ElCarousel } from './carousel' +import { ElCarouselItem } from './carousel-item' +import { ElCascader } from './cascader' +import { ElCheckbox } from './checkbox' +import { ElCheckboxButton } from './checkbox-button' +import { ElCheckboxGroup } from './checkbox-group' +import { ElCol } from './col' +import { ElCollapse } from './collapse' +import { ElCollapseItem } from './collapse-item' +import { ElColorPicker } from './color-picker' +import { ElContainer } from './container' +import { ElDatePicker } from './date-picker' +import { ElDialog } from './dialog' +import { ElDropdown } from './dropdown' +import { ElDropdownItem } from './dropdown-item' +import { ElDropdownMenu } from './dropdown-menu' +import { ElFooter } from './footer' +import { ElForm } from './form' +import { ElFormItem } from './form-item' +import { ElHeader } from './header' +import { ElInput } from './input' +import { ElInputNumber } from './input-number' +import { ElLoading } from './loading' +import { ElMain } from './main' +import { ElMenu } from './menu' +import { ElMenuItem } from './menu-item' +import { ElMenuItemGroup } from './menu-item-group' +import { ElMessage } from './message' +import { ElMessageBox } from './message-box' +import { ElNotification } from './notification' +import { ElOption } from './option' +import { ElOptionGroup } from './option-group' +import { ElPagination } from './pagination' +import { ElPopover } from './popover' +import { ElProgress } from './progress' +import { ElRate } from './rate' +import { ElRadio } from './radio' +import { ElRadioButton } from './radio-button' +import { ElRadioGroup } from './radio-group' +import { ElRow } from './row' +import { ElSelect } from './select' +import { ElSlider } from './slider' +import { ElStep } from './step' +import { ElSteps } from './steps' +import { ElSubmenu } from './submenu' +import { ElSwitch } from './switch' +import { ElTable } from './table' +import { ElTableColumn } from './table-column' +import { ElTag } from './tag' +import { ElTabs } from './tabs' +import { ElTabPane } from './tab-pane' +import { ElTimeline } from './timeline' +import { ElTimelineItem } from './timeline-item' +import { ElTimePicker } from './time-picker' +import { ElTimeSelect } from './time-select' +import { ElTooltip } from './tooltip' +import { ElTransfer } from './transfer' +import { ElTree, TreeData } from './tree' +import { ElUpload } from './upload' +import { ElLink } from './link' +import { ElDivider } from './divider' +import { ElIcon } from './icon' +import { ElCalendar } from './calendar' +import { ElImage } from './image' +import { ElBacktop } from './backtop' +import { ElInfiniteScroll } from './infinite-scroll' +import { ElPageHeader } from './page-header' +import { ElAvatar } from './avatar' +import { ElDrawer } from './drawer' +import { ElPopconfirm } from './popconfirm' +import { ElSkeleton } from './skeleton' +import { ElSkeletonItem } from './skeleton-item' +import { ElCascaderPanel } from './cascader-panel' +import { ElEmpty } from './empty' +import { ElSpinner } from './spinner' +import { ElDescriptions } from './descriptions' +import { ElDescriptionsItem } from './descriptions-item' +import { ElResult } from './result' + +export interface InstallationOptions { + locale: any, + i18n: any, + size: string +} + +/** The version of element-ui */ +export const version: string + +/** + * Install all element-ui components into Vue. + * Please do not invoke this method directly. + * Call `Vue.use(ElementUI)` to install. + */ +export function install (vue: typeof Vue, options: InstallationOptions): void + +/** ElementUI component common definition */ +export type Component = ElementUIComponent + +/** Component size definition for button, input, etc */ +export type ComponentSize = ElementUIComponentSize + +/** Horizontal alignment */ +export type HorizontalAlignment = ElementUIHorizontalAlignment + +/** Show animation while loading data */ +export const Loading: ElLoading + +/** Used to show feedback after an activity. The difference with Notification is that the latter is often used to show a system level passive notification. */ +export const Message: ElMessage + +/** A set of modal boxes simulating system message box, mainly for message prompt, success tips, error messages and query information */ +export const MessageBox: ElMessageBox + +/** Displays a global notification message at the upper right corner of the page */ +export const Notification: ElNotification + +// TS cannot merge imported class with namespace, so declare subclasses instead + +/** Alert Component */ +export class Alert extends ElAlert {} + +/** Aside Component */ +export class Aside extends ElAside {} + +/** Autocomplete Component */ +export class Autocomplete extends ElAutocomplete {} + +/** Bagde Component */ +export class Badge extends ElBadge {} + +/** Breadcrumb Component */ +export class Breadcrumb extends ElBreadcrumb {} + +/** Breadcrumb Item Component */ +export class BreadcrumbItem extends ElBreadcrumbItem {} + +/** Button Component */ +export class Button extends ElButton {} + +/** Button Group Component */ +export class ButtonGroup extends ElButtonGroup {} + +/** Card Component */ +export class Card extends ElCard {} + +/** Cascader Component */ +export class Cascader extends ElCascader {} + +/** Carousel Component */ +export class Carousel extends ElCarousel {} + +/** Carousel Item Component */ +export class CarouselItem extends ElCarouselItem {} + +/** Checkbox Component */ +export class Checkbox extends ElCheckbox {} + +/** Checkbox Button Component */ +export class CheckboxButton extends ElCheckboxButton {} + +/** Checkbox Group Component */ +export class CheckboxGroup extends ElCheckboxGroup {} + +/** Colunm Layout Component */ +export class Col extends ElCol {} + +/** Collapse Component */ +export class Collapse extends ElCollapse {} + +/** Collapse Item Component */ +export class CollapseItem extends ElCollapseItem {} + +/** Color Picker Component */ +export class ColorPicker extends ElColorPicker {} + +/** Container Component */ +export class Container extends ElContainer {} + +/** Date Picker Component */ +export class DatePicker extends ElDatePicker {} + +/** Dialog Component */ +export class Dialog extends ElDialog {} + +/** Dropdown Component */ +export class Dropdown extends ElDropdown {} + +/** Dropdown Item Component */ +export class DropdownItem extends ElDropdownItem {} + +/** Dropdown Menu Component */ +export class DropdownMenu extends ElDropdownMenu {} + +/** Footer Component */ +export class Footer extends ElFooter {} + +/** Form Component */ +export class Form extends ElForm {} + +/** Form Item Component */ +export class FormItem extends ElFormItem {} + +/** Header Component */ +export class Header extends ElHeader {} + +/** Input Component */ +export class Input extends ElInput {} + +/** Input Number Component */ +export class InputNumber extends ElInputNumber {} + +/** Main Component */ +export class Main extends ElMain {} + +/** Menu that provides navigation for your website */ +export class Menu extends ElMenu {} + +/** Menu Item Component */ +export class MenuItem extends ElMenuItem {} + +/** Menu Item Group Component */ +export class MenuItemGroup extends ElMenuItemGroup {} + +/** Dropdown Select Option Component */ +export class Option extends ElOption {} + +/** Dropdown Select Option Group Component */ +export class OptionGroup extends ElOptionGroup {} + +/** Pagination Component */ +export class Pagination extends ElPagination {} + +/** Popover Component */ +export class Popover extends ElPopover {} + +/** Progress Component */ +export class Progress extends ElProgress {} + +/** Rate Component */ +export class Rate extends ElRate {} + +/** Radio Component */ +export class Radio extends ElRadio {} + +/** Radio Button Component */ +export class RadioButton extends ElRadioButton {} + +/** Radio Group Component */ +export class RadioGroup extends ElRadioGroup {} + +/** Row Layout Component */ +export class Row extends ElRow {} + +/** Dropdown Select Component */ +export class Select extends ElSelect {} + +/** Slider Component */ +export class Slider extends ElSlider {} + +/** Step Component */ +export class Step extends ElStep {} + +/** Steps Component */ +export class Steps extends ElSteps {} + +/** Submenu Component */ +export class Submenu extends ElSubmenu {} + +/** Switch Component */ +export class Switch extends ElSwitch {} + +/** Table Component */ +export class Table extends ElTable {} + +/** Table Column Component */ +export class TableColumn extends ElTableColumn {} + +/** Tabs Component */ +export class Tabs extends ElTabs {} + +/** Tab Pane Component */ +export class TabPane extends ElTabPane {} + +/** Tag Component */ +export class Tag extends ElTag {} + +/** Timeline Component */ +export class Timeline extends ElTimeline {} + +/** Timeline Item Component */ +export class TimelineItem extends ElTimelineItem {} + +/** TimePicker Component */ +export class TimePicker extends ElTimePicker {} + +/** TimeSelect Component */ +export class TimeSelect extends ElTimeSelect {} + +/** Tooltip Component */ +export class Tooltip extends ElTooltip {} + +/** Transfer Component */ +export class Transfer extends ElTransfer {} + +/** Tree Component */ +export class Tree extends ElTree {} + +/** Upload Component */ +export class Upload extends ElUpload {} + +/** Divider Component */ +export class Divider extends ElDivider {} + +/** Link Component */ +export class Link extends ElLink {} + +/** Image Component */ +export class Image extends ElImage {} + +/** Icon Component */ +export class Icon extends ElIcon {} + +/** Calendar Component */ +export class Calendar extends ElCalendar {} + +/** Backtop Component */ +export class Backtop extends ElBacktop {} + +/** InfiniteScroll Directive */ +export const InfiniteScroll: PluginObject; + +/** PageHeader Component */ +export class PageHeader extends ElPageHeader {} + +/** Avatar Component */ +export class Avatar extends ElAvatar {} + +/** Drawer Component */ +export class Drawer extends ElDrawer {} + +/** Popconfirm Component */ +export class Popconfirm extends ElPopconfirm {} + +/** Skeleton Component */ +export class Skeleton extends ElSkeleton {} + +/** Skeleton Item Component */ +export class SkeletonItem extends ElSkeletonItem {} + +/** CascaderPanel Component */ +export class CascaderPanel extends ElCascaderPanel {} + +/** Empty Component */ +export class Empty extends ElEmpty {} + +/** Spinner Component */ +export class Spinner extends ElSpinner {} + +/** Description Component */ +export class Descriptions extends ElDescriptions {} + +/** Description Item Component */ +export class DescriptionsItem extends ElDescriptionsItem {} + +/** Result Component */ +export class Result extends ElResult {} diff --git a/types/statistic.d.ts b/types/statistic.d.ts new file mode 100644 index 00000000..9f9b1fbc --- /dev/null +++ b/types/statistic.d.ts @@ -0,0 +1,27 @@ +import { ElementUIComponent } from './component' + +/** Statistic Component */ +export declare class ElStatistic extends ElementUIComponent { + /** Set the decimal point */ + decimalSeparator:string + /** Sets the thousandth identifier */ + groupSeparator:string + /** numerical precision */ + precision:number + /** Numerical content */ + value:string|number + /** Title of numerical value */ + title:string|number + /**Whether to enable the countdown function */ + timeIndices:boolean + /** Sets the style of the value */ + valueStyle:object + /** Numeric content formatting countdown display*/ + format:string + /** Set the ratio */ + rate:number + /** Set the suffix of the value*/ + suffix:string + /** Set the prefix of the value*/ + prefix:string +}