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.