feat: add filter docs for table, improve code
This commit is contained in:
@@ -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.
|
||||
|
||||
@@ -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.
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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, ...}`.
|
||||
|
||||
@@ -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. |
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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. |
|
||||
+++
|
||||
^^^
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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>`${from}:00–${to + 1}:00`</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>`${hour}:00–${hour + 1}:00`</code> for current hour by default.
|
||||
|
||||
+++Scope properties
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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.
|
||||
|
||||
Reference in New Issue
Block a user