feat: add filter docs for table, improve code

This commit is contained in:
Justineo
2020-12-22 16:33:30 +08:00
parent 9337660240
commit 4b8ad76e60
48 changed files with 260 additions and 190 deletions

View File

@@ -60,12 +60,12 @@ The index of current message displayed when having multiple messages.
| Name | Description |
| -- | -- |
| `default` | [^scoped-slot-default] |
| `default` | [^slot-default] |
| `title` | The content area of the alert title. |
| `extra` | The extra content after the alert message. |
| `content` | The content of the whole component, including message text, status icon, previous/next navigation and close button. |
^^^scoped-slot-default
^^^slot-default
The content of the message.
Default: message text.

View File

@@ -69,9 +69,9 @@ The datasource array for buttons in the group. The type of each item is `{label,
| Name | Description |
| -- | -- |
| `default` | Button group's content. |
| `item` | [^scoped-slot-item] |
| `item` | [^slot-item] |
^^^scoped-slot-item
^^^slot-item
The content of each button.
Shows the text specified by the `label` prop by default.

View File

@@ -62,9 +62,9 @@ Selected date(s) or date range(s). Data type differs according to `multiple` and
| -- | -- |
| `before` | Customizable area before the content of the month panel(s). |
| `after` | Customizable area after the content of the month panel(s). |
| `date` | [^scoped-slot-date] |
| `date` | [^slot-date] |
^^^scoped-slot-date
^^^slot-date
The content of each date cell. Displays the corresponding day of month by default.
+++Scope properties

View File

@@ -81,9 +81,9 @@ The behavior triggers item switch when radio indicator is displayed.
| Name | Description |
| -- | -- |
| `item` | [^scoped-slot-item] |
| `item` | [^slot-item] |
^^^scoped-slot-item
^^^slot-item
The content of each carousel item. Displays the corresponding image by default.
The slot scope properties are the same as each item inside `datasource` (including custom properties), with an extra `index: number`, which denotes the index within the datasource. i.e. The `slot-scope` is in the form of `{src, alt, label, index, ...}`.

View File

@@ -55,9 +55,9 @@ The `value`s of the selected items.
| Name | Description |
| -- | -- |
| `item` | [^scoped-slot-item] |
| `item` | [^slot-item] |
^^^scoped-slot-item
^^^slot-item
The label content of each button. Displays the value of the `label` prop by default.
+++Scope properties
@@ -85,3 +85,9 @@ Additionally, custom properties apart from the listed ones will also be passes i
Triggers when the selected item changed. The callback parameter list is `(value: Array)` and `value` is the value array of the selected items.
^^^
### Icons
| Name | Description |
| -- | -- |
| `check` | The loading spinner. |

View File

@@ -56,9 +56,9 @@ The `value`s of the selected items.
| Name | Description |
| -- | -- |
| `item` | [^scoped-slot-item] |
| `item` | [^slot-item] |
^^^scoped-slot-item
^^^slot-item
The label content of each checkbox. Displays the value of the `label` prop by default.
+++Scope properties

View File

@@ -20,6 +20,8 @@ See [the demos of `Table`](./table#demos).
| `sortable` | `boolean=` | `false` | [^sortable] |
| `align` | `string=` | - | The alignment of cell content in the column. Supports `left`/`center`/`right`. |
| `span` | `function(number): Object=` | | [^span] |
| `desc` | `string` | - | The description of the column head. |
| `filter-value` | `*` | - | The value of filter condition. `true` is the only value supported for now which indicates the column is filtered. |
^^^sortable
Whether current column is sortable.
@@ -43,8 +45,10 @@ You can learn more abut how to use this in `Table` component's [Demos Advanc
| -- | -- |
| `head` | The table head. |
| `foot` | [^slot-foot] |
| `default` | [^scoped-slot-default] |
| `sub-row` | [^scoped-slot-sub-row] |
| `default` | [^slot-default] |
| `sub-row` | [^slot-sub-row] |
| `desc` | [^slot-desc] |
| `filter` | [^slot-filter] |
^^^slot-foot
The table foot.
@@ -54,13 +58,13 @@ The table foot.
:::
^^^
^^^scoped-slot-default
^^^slot-default
The content of the table cell. Displays the property value corresponds to the `field` property in table's `data` prop.
The slot scope properties are the same as each item inside `data`, with an extra `index: number`, which denotes the index within the row data.
^^^
^^^scoped-slot-sub-row
^^^slot-sub-row
The content of cells in a sub row. Sub row data comes from the `children` array inside the row data in `Table`s `data` prop. The number of sub rows are determined by the length of the `children` array and the sub rows share the same column configuration with the table.
Displays the value keyed by the `field` prop inside the sub row data, which is `data[i].children[j]` of the parent table.
@@ -71,3 +75,23 @@ The slot scope properties are the same as each item inside `children`, with an e
The `sub-row` slot of `Column` will be ignored when content is provided for `Table`'s `sub-row` slot.
:::
^^^
^^^slot-desc
The content of the description overlay. Will override the `desc` prop when set.
+++Scope properties
| Name | Type | Description |
| -- | -- | -- |
| `close` | `function(): void` | Used to close the description overlay. |
+++
^^^
^^^slot-filter
The content of the filter dropdown.
+++Scope properties
| Name | Type | Description |
| -- | -- | -- |
| `close` | `function(): void` | Used to close the filter dropdown. |
+++
^^^

View File

@@ -173,9 +173,9 @@ Whether the dropdown overlay is expanded.
| Name | Description |
| -- | -- |
| `date` | [^scoped-slot-date] |
| `date` | [^slot-date] |
^^^scoped-slot-date
^^^slot-date
The content of each date cell in the dropdown overlay. Displays the corresponding day of month by default.
+++Scope properties

View File

@@ -99,12 +99,12 @@ Whether the dropdown menu is expanded.
| `default` | The content of the options dropdown layer. Can be used to place `Option`s or `OptionGroups`s when the `options` prop is not specified. |
| `before` | The content before the options in the dropdown layer. |
| `after` | The content after the options in the dropdown layer. |
| `label` | [^scoped-slot-label] |
| `group-label` | [^scoped-slot-group-label] |
| `option-label` | [^scoped-slot-option-label] |
| `option` | [^scoped-slot-option] |
| `label` | [^slot-label] |
| `group-label` | [^slot-group-label] |
| `option-label` | [^slot-option-label] |
| `option` | [^slot-option] |
^^^scoped-slot-label
^^^slot-label
The content of the select button. Displays the `label` prop by default.
+++Scope properties
@@ -114,7 +114,7 @@ The content of the select button. Displays the `label` prop by default.
+++
^^^
^^^scoped-slot-group-label
^^^slot-group-label
The label text of each option group (option with child `options`). Displays the `label` of the option by default.
+++Scope properties
@@ -127,7 +127,7 @@ The label text of each option group (option with child `options`). Displays the
Additionally, custom properties in current option, apart from the listed ones, will also be passes into the scope object via `v-bind`.
^^^
^^^scoped-slot-option-label
^^^slot-option-label
The label text of each option (option without child `options`). Displays the `label` of the option by default.
+++Scope properties
@@ -142,7 +142,7 @@ The label text of each option (option without child `options`). Displays the `la
Additionally, custom properties in current option, apart from the listed ones, will also be passes into the scope object via `v-bind`.
^^^
^^^scoped-slot-option
^^^slot-option
The entire content area of each option (option without child `options`). Displays the default content of `Options` component by default.
+++Scope properties

View File

@@ -47,12 +47,12 @@ The way to display child options.
| Name | Description |
| -- | -- |
| `default` | The content of the options dropdown. Can be used to place `Option`s or `OptionGroups`s when the `options` prop is not specified. |
| `label` | [^scoped-slot-label] |
| `group-label` | [^scoped-slot-group-label] |
| `option-label` | [^scoped-slot-option-label] |
| `option` | [^scoped-slot-option] |
| `label` | [^slot-label] |
| `group-label` | [^slot-group-label] |
| `option-label` | [^slot-option-label] |
| `option` | [^slot-option] |
^^^scoped-slot-label
^^^slot-label
The label of the option group. Displays the `label` prop by default.
+++Scope properties
@@ -63,7 +63,7 @@ The label of the option group. Displays the `label` prop by default.
+++
^^^
^^^scoped-slot-group-label
^^^slot-group-label
The label text of each option group (option with child `options`). Displays the `label` of the option by default.
+++Scope properties
@@ -76,7 +76,7 @@ The label text of each option group (option with child `options`). Displays the
Additionally, custom properties in current option, apart from the listed ones, will also be passes into the scope object via `v-bind`.
^^^
^^^scoped-slot-option-label
^^^slot-option-label
The label text of each option (option without child `options`). Displays the `label` of the option by default.
+++Scope properties
@@ -91,7 +91,7 @@ The label text of each option (option without child `options`). Displays the `la
Additionally, custom properties in current option, apart from the listed ones, will also be passes into the scope object via `v-bind`.
^^^
^^^scoped-slot-option
^^^slot-option
The entire content area of each option (option without child `options`). Displays the default content of `Options` component by default.
+++Scope properties

View File

@@ -43,9 +43,9 @@ The status of the progress. Available values are `success`/`alert`, denoting suc
| Name | Description |
| -- | -- |
| `default` | [^scoped-slot-default] |
| `default` | [^slot-default] |
^^^scoped-slot-default
^^^slot-default
The description content. Displays the percentage value of the progress by default.
+++Scope properties

View File

@@ -54,9 +54,9 @@ The `value`s of the selected items.
| Name | Description |
| -- | -- |
| `item` | [^scoped-slot-item] |
| `item` | [^slot-item] |
^^^scoped-slot-item
^^^slot-item
The label content of each button. Displays the value of the `label` prop by default.
+++Scope properties

View File

@@ -54,9 +54,9 @@ The `value` of the selected item.
| Name | Description |
| -- | -- |
| `item` | [^scoped-slot-item] |
| `item` | [^slot-item] |
^^^scoped-slot-item
^^^slot-item
The label content of each radio. Displays the value of the `label` prop by default.
+++Scope properties

View File

@@ -41,9 +41,9 @@ The array of selected `value`s.
| Name | Description |
| -- | -- |
| `label` | [^scoped-slot-label] |
| `label` | [^slot-label] |
^^^scoped-slot-label
^^^slot-label
The label content of each node. Displays the `label` property of each item by default.
+++Scope properties

View File

@@ -59,12 +59,12 @@ Shortcut selection list. The type is `{label: string, selected: boolean|Array}`.
| `header-content` | The content of the header section, not including the container. |
| `shortcuts` | The shortcuts section of the header section. |
| `legend` | The legends section of the header section. |
| `legend-label` | [^scoped-slot-legend-label] |
| `hour` | [^scoped-slot-hour] |
| `label` | [^scoped-slot-label] |
| `tooltip` | [^scoped-slot-tooltip] |
| `legend-label` | [^slot-legend-label] |
| `hour` | [^slot-hour] |
| `label` | [^slot-label] |
| `tooltip` | [^slot-tooltip] |
^^^scoped-slot-legend-label
^^^slot-legend-label
The text label of each legend. Displays the `label` property of each legend by default.
+++Scope properties
@@ -77,7 +77,7 @@ The text label of each legend. Displays the `label` property of each legend by d
Additionally, custom properties inside `statuses` apart from the listed ones will also be passes into the scope object via `v-bind`.
^^^
^^^scoped-slot-hour
^^^slot-hour
The content of each hour cell.
+++Scope properties
@@ -88,7 +88,7 @@ The content of each hour cell.
+++
^^^
^^^scoped-slot-label
^^^slot-label
The content of the selected label. By default, displays the time range in the form of <code>&#0096;${from}:00${to + 1}:00&#0096;</code> when it's more than 3 hours, displays “Entire Day” when every hour of a day are selected; displays nothing for less than 3 hours.
+++Scope properties
@@ -99,7 +99,7 @@ The content of the selected label. By default, displays the time range in the fo
+++
^^^
^^^scoped-slot-tooltip
^^^slot-tooltip
The tooltip for each hour cell. Displays <code>&#0096;${hour}:00${hour + 1}:00&#0096;</code> for current hour by default.
+++Scope properties

View File

@@ -98,12 +98,12 @@ Whether the dropdown menu is expanded.
| `default` | The content of the options dropdown layer. Can be used to place `Option`s or `OptionGroups`s when the `options` prop is not specified. |
| `before` | The content before the options in the dropdown layer. |
| `after` | The content after the options in the dropdown layer. |
| `label` | [^scoped-slot-label] |
| `group-label` | [^scoped-slot-group-label] |
| `option-label` | [^scoped-slot-option-label] |
| `option` | [^scoped-slot-option] |
| `label` | [^slot-label] |
| `group-label` | [^slot-group-label] |
| `option-label` | [^slot-option-label] |
| `option` | [^slot-option] |
^^^scoped-slot-label
^^^slot-label
The content of the select button. Displays the `label` of selected option or the text content of the selected embedded option by default.
+++Scope properties
@@ -118,7 +118,7 @@ The content of the select button. Displays the `label` of selected option or the
Additionally, custom properties apart from the listed ones will also be passes into the scope object via `v-bind`.
^^^
^^^scoped-slot-group-label
^^^slot-group-label
The label text of each option group (option with child `options`). Displays the `label` of the option by default.
+++Scope properties
@@ -131,7 +131,7 @@ The label text of each option group (option with child `options`). Displays the
Additionally, custom properties in current option, apart from the listed ones, will also be passes into the scope object via `v-bind`.
^^^
^^^scoped-slot-option-label
^^^slot-option-label
The label text of each option (option without child `options`). Displays the `label` of the option by default.
+++Scope properties
@@ -146,7 +146,7 @@ The label text of each option (option without child `options`). Displays the `la
Additionally, custom properties in current option, apart from the listed ones, will also be passes into the scope object via `v-bind`.
^^^
^^^scoped-slot-option
^^^slot-option
The entire content area of each option (option without child `options`). Displays the default content of `Options` component by default.
+++Scope properties

View File

@@ -83,10 +83,10 @@ When `parse` and `format` are specified, values can be of any type, and `parse`
| -- | -- |
| `track` | The track of the slider. Displays a bar by default. |
| `tip-label` | The tooltip content. Displays the current `value` or its item by default. |
| `thumb` | [^scoped-slot-thumb] |
| `tip` | [^scoped-slot-tip] |
| `thumb` | [^slot-thumb] |
| `tip` | [^slot-tip] |
^^^scoped-slot-thumb
^^^slot-thumb
The thumb(s) of the slider. Displays a round button by default.
+++Scope properties
@@ -99,7 +99,7 @@ The thumb(s) of the slider. Displays a round button by default.
+++
^^^
^^^scoped-slot-tip
^^^slot-tip
The entire tooltip for each thumb. Displays a `Tooltip` component with `value` as its content by default.
+++Scope properties

View File

@@ -54,12 +54,12 @@ The datasource of steps with item type being `{ label, desc, to, status }`.
| Name | Description |
| -- | -- |
| `default` | [^scoped-slot-default] |
| `default` | [^slot-default] |
| `index` | The step index. Displays an index value starts from `1`, a success icon for finished steps by default and an error icon for error steps. Resides inside the default slot and share the same scope properties. |
| `label` | The step label. Displays the `label` prop by default. Resides inside the default slot and share the same scope properties. |
| `desc` | The step description. Displays the `desc` prop by default. Resides inside the default slot and share the same scope properties. |
^^^scoped-slot-default
^^^slot-default
The content of each step. Displays the step index/completed icon, label and description by default.
+++Scope properties

View File

@@ -91,9 +91,9 @@ The values of expanded rows. Each item is the value keyed by the `key-field` pro
| `default` | The columns of the table. Can only have `Column` components as children. |
| `no-data` | The content to be displayed when there's no data to show. |
| `foot` | The content of the table foot. Will span across all columns when defined. |
| `sub-row` | [^scoped-slot-sub-row] |
| `sub-row` | [^slot-sub-row] |
^^^scoped-slot-sub-row
^^^slot-sub-row
The content of the expanded sub-row. Will span across all columns and override the `sub-row` slot of the `Column` components inside the table.
The slot scope properties are the same as each item inside `datasource`, with an extra `index: number`, which denotes the index within the datasource.

View File

@@ -17,7 +17,7 @@
VEUI is designed to keep components and styles separated. Users can develop and specify their own theme package for VEUI. `veui-theme-dls` is the built-in theme package.
VEUI is published as ES modules with untranspiled ES next code thus requires to be compiled along with the application project.
VEUI is published as Vue single file components and ES modules with untranspiled ES next code thus requires to be compiled along with the application project.
Apart from components, VEUI also offers various powerful directives and plugins to boost application development based on Vue.js.