mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-02-17 13:20:52 +08:00
feat(form): add n-form-item-gi (grid-item) component
This commit is contained in:
07akioni
parent
371078a6a2
commit
606cb19429
@ -2,6 +2,10 @@
|
||||
|
||||
## 2.4.2
|
||||
|
||||
### Feats
|
||||
|
||||
- Add `n-form-item-gi` component.
|
||||
|
||||
### Fixes
|
||||
|
||||
- Fix `n-ellipsis` & `n-data-table` ellpisis cell mis-vertical-aligned.
|
||||
|
||||
@ -2,6 +2,10 @@
|
||||
|
||||
## 2.4.2
|
||||
|
||||
### Feats
|
||||
|
||||
- 添加 `n-form-item-gi` 组件
|
||||
|
||||
### Fixes
|
||||
|
||||
- 修正 `n-ellipsis` & `n-data-table` ellpisis 单元格文本垂直排列错位
|
||||
|
||||
@ -103,7 +103,7 @@
|
||||
trigger="click"
|
||||
>
|
||||
<n-button size="small" class="nav-picker">
|
||||
{{ configProviderLabels[configProviderName] }}
|
||||
{{ cfgProviderLabelMap[configProviderName] }}
|
||||
</n-button>
|
||||
</n-popselect>
|
||||
<n-popselect
|
||||
@ -363,8 +363,8 @@ export default {
|
||||
// locale
|
||||
const localeNameRef = useLocaleName()
|
||||
const localeLabelMap = {
|
||||
'zh-CN': '中文',
|
||||
'en-US': 'English'
|
||||
'zh-CN': 'English',
|
||||
'en-US': '中文'
|
||||
}
|
||||
const localeOptions = [
|
||||
{
|
||||
@ -396,7 +396,7 @@ export default {
|
||||
|
||||
// config provider
|
||||
const configProviderNameRef = useConfigProviderName()
|
||||
const configProviderLabelsRef = computed(() => ({
|
||||
const cfgProviderLabelMapRef = computed(() => ({
|
||||
tusimple: t('tusimpleTheme'),
|
||||
default: t('defaultTheme')
|
||||
}))
|
||||
@ -476,7 +476,7 @@ export default {
|
||||
// configProvider
|
||||
configProviderName: configProviderNameRef,
|
||||
configProviderOptions: configProviderOptionsRef,
|
||||
configProviderLabels: configProviderLabelsRef,
|
||||
cfgProviderLabelMap: cfgProviderLabelMapRef,
|
||||
// search
|
||||
searchPattern: searchPatternRef,
|
||||
searchOptions: searchOptionsRef,
|
||||
|
||||
@ -62,13 +62,9 @@ async
|
||||
| size | `'small' \| 'medium' \| 'large'` | `'medium'` | |
|
||||
| validation-status | `'error' \| 'success' \| 'warning'` | `undefined` | The validation status of the form item. If not set to `undefined`, it will take place of the result of rule-based validation. |
|
||||
|
||||
### Form Item Row Props
|
||||
### FormItemGi Props
|
||||
|
||||
Accept all props from form-item & [Row](n-row#Row-Props)
|
||||
|
||||
### Form Item Col Props
|
||||
|
||||
Accept all props from form-item & [Col](n-row#Col-Props)
|
||||
Accept all props from FormItem & [GridItem](grid#GridItem-Props)
|
||||
|
||||
## Methods
|
||||
|
||||
@ -86,7 +82,7 @@ Accept all props from form-item & [Col](n-row#Col-Props)
|
||||
| validate | `(validateCallback?: (errors?: Array<ValidationError>) => void, shouldRuleBeApplied?: FormItemRule => boolean) => Promise<void>` | Validate the form. The rejection value type of returned promise is `Array<ValidationError>`. |
|
||||
| clearValidationEffect | `() => void` | |
|
||||
|
||||
### Form Item, Form Item Row, Form Item Col Methods
|
||||
### FormItem, FormItemGi Methods
|
||||
|
||||
| Name | Type | Description |
|
||||
| --- | --- | --- |
|
||||
@ -97,13 +93,13 @@ About AsyncValidatorOptions, see <n-a href="https://github.com/yiminghe/async-va
|
||||
|
||||
## Slots
|
||||
|
||||
### Form, Form Item, Form Item Row, Form Item Col Slots
|
||||
### Form, FormItem, FormItemGi Slots
|
||||
|
||||
| Name | Parameters | Description |
|
||||
| ------- | ---------- | ----------- |
|
||||
| default | `()` | |
|
||||
|
||||
### Form Item, Form Item Row, Form Item Col Slots
|
||||
### FormItem, FormItemGi Slots
|
||||
|
||||
| Name | Parameters | Description |
|
||||
| ----- | ---------- | ----------- |
|
||||
|
||||
@ -22,10 +22,10 @@
|
||||
maxWidth: '640px'
|
||||
}"
|
||||
>
|
||||
<n-form-item-row label="Input" path="inputValue">
|
||||
<n-form-item label="Input" path="inputValue">
|
||||
<n-input placeholder="Input" v-model:value="model.inputValue" />
|
||||
</n-form-item-row>
|
||||
<n-form-item-row label="Textarea" path="textareaValue">
|
||||
</n-form-item>
|
||||
<n-form-item label="Textarea" path="textareaValue">
|
||||
<n-input
|
||||
placeholder="Textarea"
|
||||
v-model:value="model.textareaValue"
|
||||
@ -35,29 +35,29 @@
|
||||
maxRows: 5
|
||||
}"
|
||||
/>
|
||||
</n-form-item-row>
|
||||
<n-form-item-row label="Select" path="selectValue">
|
||||
</n-form-item>
|
||||
<n-form-item label="Select" path="selectValue">
|
||||
<n-select
|
||||
placeholder="Select"
|
||||
:options="generalOptions"
|
||||
v-model:value="model.selectValue"
|
||||
/>
|
||||
</n-form-item-row>
|
||||
<n-form-item-row label="Multiple Select" path="multipleSelectValue">
|
||||
</n-form-item>
|
||||
<n-form-item label="Multiple Select" path="multipleSelectValue">
|
||||
<n-select
|
||||
placeholder="Select"
|
||||
:options="generalOptions"
|
||||
v-model:value="model.multipleSelectValue"
|
||||
multiple
|
||||
/>
|
||||
</n-form-item-row>
|
||||
<n-form-item-row label="Datetime" path="datetimeValue">
|
||||
</n-form-item>
|
||||
<n-form-item label="Datetime" path="datetimeValue">
|
||||
<n-date-picker type="datetime" v-model:value="model.datetimeValue" />
|
||||
</n-form-item-row>
|
||||
<n-form-item-row label="Switch" path="switchValue">
|
||||
</n-form-item>
|
||||
<n-form-item label="Switch" path="switchValue">
|
||||
<n-switch v-model:value="model.switchValue" />
|
||||
</n-form-item-row>
|
||||
<n-form-item-row label="Checkbox Group" path="checkboxGroupValue">
|
||||
</n-form-item>
|
||||
<n-form-item label="Checkbox Group" path="checkboxGroupValue">
|
||||
<n-checkbox-group v-model:value="model.checkboxGroupValue">
|
||||
<n-space>
|
||||
<n-checkbox value="Option 1">Option 1</n-checkbox>
|
||||
@ -65,8 +65,8 @@
|
||||
<n-checkbox value="Option 3">Option 3</n-checkbox>
|
||||
</n-space>
|
||||
</n-checkbox-group>
|
||||
</n-form-item-row>
|
||||
<n-form-item-row label="Radio Group" path="radioGroupValue">
|
||||
</n-form-item>
|
||||
<n-form-item label="Radio Group" path="radioGroupValue">
|
||||
<n-radio-group v-model:value="model.radioGroupValue" name="radiogroup1">
|
||||
<n-space>
|
||||
<n-radio value="Radio 1">Radio 1</n-radio>
|
||||
@ -74,52 +74,48 @@
|
||||
<n-radio value="Radio 3">Radio 3</n-radio>
|
||||
</n-space>
|
||||
</n-radio-group>
|
||||
</n-form-item-row>
|
||||
<n-form-item-row label="Radio Button Group" path="radioGroupValue">
|
||||
</n-form-item>
|
||||
<n-form-item label="Radio Button Group" path="radioGroupValue">
|
||||
<n-radio-group v-model:value="model.radioGroupValue" name="radiogroup2">
|
||||
<n-radio-button value="Radio 1">Radio 1</n-radio-button>
|
||||
<n-radio-button value="Radio 2">Radio 2</n-radio-button>
|
||||
<n-radio-button value="Radio 3">Radio 3</n-radio-button>
|
||||
</n-radio-group>
|
||||
</n-form-item-row>
|
||||
<n-form-item-row label="Input Number" path="inputNumberValue">
|
||||
</n-form-item>
|
||||
<n-form-item label="Input Number" path="inputNumberValue">
|
||||
<n-input-number v-model:value="model.inputNumberValue" />
|
||||
</n-form-item-row>
|
||||
<n-form-item-row label="Time Picker" path="timePickerValue">
|
||||
</n-form-item>
|
||||
<n-form-item label="Time Picker" path="timePickerValue">
|
||||
<n-time-picker v-model:value="model.timePickerValue" />
|
||||
</n-form-item-row>
|
||||
<n-form-item-row label="Slider" path="sliderValue">
|
||||
</n-form-item>
|
||||
<n-form-item label="Slider" path="sliderValue">
|
||||
<n-slider v-model:value="model.sliderValue" :step="5" />
|
||||
</n-form-item-row>
|
||||
<n-form-item-row label="Transfer" path="transferValue">
|
||||
</n-form-item>
|
||||
<n-form-item label="Transfer" path="transferValue">
|
||||
<n-transfer v-model:value="model.transferValue" :options="generalOptions" />
|
||||
</n-form-item-row>
|
||||
<n-form-item-row :gutter="[28, 0]" label="Nested Path">
|
||||
<n-row :gutter="[28, 0]">
|
||||
<n-form-item-col :span="12" path="nestedValue.path1">
|
||||
</n-form-item>
|
||||
<n-form-item label="Nested Path" :show-feedback="false">
|
||||
<n-grid :cols="2" :x-gap="24">
|
||||
<n-form-item-gi path="nestedValue.path1">
|
||||
<n-input
|
||||
placeholder="Nested Path 1"
|
||||
v-model:value="model.nestedValue.path1"
|
||||
/>
|
||||
</n-form-item-col>
|
||||
<n-form-item-col :span="12" path="nestedValue.path2">
|
||||
</n-form-item-gi>
|
||||
<n-form-item-gi path="nestedValue.path2">
|
||||
<n-select
|
||||
placeholder="Nested Path 2"
|
||||
:options="generalOptions"
|
||||
v-model:value="model.nestedValue.path2"
|
||||
/>
|
||||
</n-form-item-col>
|
||||
</n-row>
|
||||
</n-form-item-row>
|
||||
<n-row>
|
||||
<n-col :span="24">
|
||||
<div style="display: flex; justify-content: flex-end;">
|
||||
<n-button @click="handleValidateButtonClick" round type="primary"
|
||||
>Validate</n-button
|
||||
>
|
||||
</div>
|
||||
</n-col>
|
||||
</n-row>
|
||||
</n-form-item-gi>
|
||||
</n-grid>
|
||||
</n-form-item>
|
||||
<div style="display: flex; justify-content: flex-end;">
|
||||
<n-button @click="handleValidateButtonClick" round type="primary"
|
||||
>Validate</n-button
|
||||
>
|
||||
</div>
|
||||
</n-form>
|
||||
|
||||
<pre>
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
# Label Placement Top
|
||||
|
||||
Use `n-grid` and `n-form-item-gi` (grid item) and make form easily.
|
||||
|
||||
```html
|
||||
<n-radio-group
|
||||
v-model:value="size"
|
||||
@ -17,11 +19,11 @@
|
||||
ref="formRef"
|
||||
label-placement="top"
|
||||
>
|
||||
<n-row :gutter="24">
|
||||
<n-form-item-col :span="12" label="Input" path="inputValue">
|
||||
<n-grid :span="24" :x-gap="24">
|
||||
<n-form-item-gi :span="12" label="Input" path="inputValue">
|
||||
<n-input placeholder="Input" v-model:value="model.inputValue" />
|
||||
</n-form-item-col>
|
||||
<n-form-item-col :span="12" label="Textarea" path="textareaValue">
|
||||
</n-form-item-gi>
|
||||
<n-form-item-gi :span="12" label="Textarea" path="textareaValue">
|
||||
<n-input
|
||||
placeholder="Textarea"
|
||||
v-model:value="model.textareaValue"
|
||||
@ -31,17 +33,15 @@
|
||||
maxRows: 5
|
||||
}"
|
||||
/>
|
||||
</n-form-item-col>
|
||||
</n-row>
|
||||
<n-row :gutter="24">
|
||||
<n-form-item-col :span="12" label="Select" path="selectValue">
|
||||
</n-form-item-gi>
|
||||
<n-form-item-gi :span="12" label="Select" path="selectValue">
|
||||
<n-select
|
||||
placeholder="Select"
|
||||
:options="generalOptions"
|
||||
v-model:value="model.selectValue"
|
||||
/>
|
||||
</n-form-item-col>
|
||||
<n-form-item-col
|
||||
</n-form-item-gi>
|
||||
<n-form-item-gi
|
||||
:span="12"
|
||||
label="Multiple Select"
|
||||
path="multipleSelectValue"
|
||||
@ -52,22 +52,14 @@
|
||||
v-model:value="model.multipleSelectValue"
|
||||
multiple
|
||||
/>
|
||||
</n-form-item-col>
|
||||
</n-row>
|
||||
<n-row :gutter="24">
|
||||
<n-form-item-col :span="12" label="Datetime" path="datetimeValue">
|
||||
</n-form-item-gi>
|
||||
<n-form-item-gi :span="12" label="Datetime" path="datetimeValue">
|
||||
<n-date-picker type="datetime" v-model:value="model.datetimeValue" />
|
||||
</n-form-item-col>
|
||||
<n-form-item-col :span="12" label="Switch" path="switchValue">
|
||||
</n-form-item-gi>
|
||||
<n-form-item-gi :span="12" label="Switch" path="switchValue">
|
||||
<n-switch v-model:value="model.switchValue" />
|
||||
</n-form-item-col>
|
||||
</n-row>
|
||||
<n-row :gutter="24">
|
||||
<n-form-item-col
|
||||
:span="12"
|
||||
label="Checkbox Group"
|
||||
path="checkboxGroupValue"
|
||||
>
|
||||
</n-form-item-gi>
|
||||
<n-form-item-gi :span="12" label="Checkbox Group" path="checkboxGroupValue">
|
||||
<n-checkbox-group v-model:value="model.checkboxGroupValue">
|
||||
<n-space>
|
||||
<n-checkbox value="Option 1">Option 1</n-checkbox>
|
||||
@ -75,8 +67,8 @@
|
||||
<n-checkbox value="Option 3">Option 3</n-checkbox>
|
||||
</n-space>
|
||||
</n-checkbox-group>
|
||||
</n-form-item-col>
|
||||
<n-form-item-col :span="12" label="Radio Group" path="radioGroupValue">
|
||||
</n-form-item-gi>
|
||||
<n-form-item-gi :span="12" label="Radio Group" path="radioGroupValue">
|
||||
<n-radio-group v-model:value="model.radioGroupValue" name="radiogroup1">
|
||||
<n-space>
|
||||
<n-radio value="Radio 1">Radio 1</n-radio>
|
||||
@ -84,10 +76,8 @@
|
||||
<n-radio value="Radio 3">Radio 3</n-radio>
|
||||
</n-space>
|
||||
</n-radio-group>
|
||||
</n-form-item-col>
|
||||
</n-row>
|
||||
<n-row :gutter="24">
|
||||
<n-form-item-col
|
||||
</n-form-item-gi>
|
||||
<n-form-item-gi
|
||||
:span="12"
|
||||
label="Radio Button Group"
|
||||
path="radioGroupValue"
|
||||
@ -97,51 +87,45 @@
|
||||
<n-radio-button value="Radio 2">Radio 2</n-radio-button>
|
||||
<n-radio-button value="Radio 3">Radio 3</n-radio-button>
|
||||
</n-radio-group>
|
||||
</n-form-item-col>
|
||||
<n-form-item-col :span="12" label="Input Number" path="inputNumberValue">
|
||||
</n-form-item-gi>
|
||||
<n-form-item-gi :span="12" label="Input Number" path="inputNumberValue">
|
||||
<n-input-number v-model:value="model.inputNumberValue" />
|
||||
</n-form-item-col>
|
||||
</n-row>
|
||||
<n-row :gutter="24">
|
||||
<n-form-item-col :span="12" label="Time Picker" path="timePickerValue">
|
||||
</n-form-item-gi>
|
||||
<n-form-item-gi :span="12" label="Time Picker" path="timePickerValue">
|
||||
<n-time-picker v-model:value="model.timePickerValue" />
|
||||
</n-form-item-col>
|
||||
<n-form-item-col :span="12" label="Slider" path="sliderValue">
|
||||
</n-form-item-gi>
|
||||
<n-form-item-gi :span="12" label="Slider" path="sliderValue">
|
||||
<n-slider v-model:value="model.sliderValue" :step="5" />
|
||||
</n-form-item-col>
|
||||
</n-row>
|
||||
<n-row :gutter="24">
|
||||
<n-form-item-col :span="14" label="Transfer" path="transferValue">
|
||||
</n-form-item-gi>
|
||||
<n-form-item-gi :span="14" label="Transfer" path="transferValue">
|
||||
<n-transfer
|
||||
style="width: 100%;"
|
||||
v-model:value="model.transferValue"
|
||||
:options="generalOptions"
|
||||
/>
|
||||
</n-form-item-col>
|
||||
<n-form-item-col :span="5" label="Nested Path" path="nestedValue.path1">
|
||||
</n-form-item-gi>
|
||||
<n-form-item-gi :span="5" label="Nested Path" path="nestedValue.path1">
|
||||
<n-cascader
|
||||
placeholder="Nested Path 1"
|
||||
v-model:value="model.nestedValue.path1"
|
||||
:options="cascaderOptions"
|
||||
/>
|
||||
</n-form-item-col>
|
||||
<n-form-item-col :span="5" path="nestedValue.path2">
|
||||
</n-form-item-gi>
|
||||
<n-form-item-gi :span="5" path="nestedValue.path2">
|
||||
<n-select
|
||||
placeholder="Nested Path 2"
|
||||
:options="generalOptions"
|
||||
v-model:value="model.nestedValue.path2"
|
||||
/>
|
||||
</n-form-item-col>
|
||||
</n-row>
|
||||
<n-row>
|
||||
<n-col :span="24">
|
||||
</n-form-item-gi>
|
||||
<n-gi :span="24">
|
||||
<div style="display: flex; justify-content: flex-end;">
|
||||
<n-button @click="handleValidateButtonClick" round type="primary"
|
||||
>Validate</n-button
|
||||
>
|
||||
</div>
|
||||
</n-col>
|
||||
</n-row>
|
||||
</n-gi>
|
||||
</n-grid>
|
||||
</n-form>
|
||||
|
||||
<pre>
|
||||
|
||||
@ -63,13 +63,9 @@ validator-debug
|
||||
| size | `'small' \| 'medium' \| 'large'` | `'medium'` | |
|
||||
| validation-status | `'error' \| 'success' \| 'warning'` | `undefined` | 表单的验证状态。不设为 `undefined`时，会覆盖规则验证的结果 |
|
||||
|
||||
### FormItemRow Props
|
||||
### FormItemGi Props
|
||||
|
||||
接受 FormItem & [Row](n-row#Row-Props) 所有的 Props。
|
||||
|
||||
### FormItemCol Props
|
||||
|
||||
接受 FormItem & [Col](n-row#Col-Props) 所有的 Props。
|
||||
接受 FormItem & [GridItem](grid#GridItem-Props) 所有的 Props。
|
||||
|
||||
## Methods
|
||||
|
||||
@ -87,7 +83,7 @@ validator-debug
|
||||
| validate | `(validateCallback?: (errors?: Array<ValidationError>) => void, shouldRuleBeApplied?: FormItemRule => boolean) => Promise<void>` | 验证表单。Promise rejection 的返回值类型是 `Array<ValidationError>`。 |
|
||||
| clearValidationEffect | `() => void` | |
|
||||
|
||||
### FormItem, FormItemRow, FormItemCol Methods
|
||||
### FormItem, FormItemGi Methods
|
||||
|
||||
| 名称 | 类型 | 说明 |
|
||||
| --- | --- | --- |
|
||||
@ -98,13 +94,13 @@ validator-debug
|
||||
|
||||
## Slots
|
||||
|
||||
### Form, FormItem, FormItemRow, FormItemCol Slots
|
||||
### Form, FormItem, FormItemGi Slots
|
||||
|
||||
| 名称 | 参数 | 说明 |
|
||||
| ------- | ---- | ---- |
|
||||
| default | `()` | |
|
||||
|
||||
### FormItem, FormItem Row, FormItemCol Slots
|
||||
### FormItem, FormItemGi Slots
|
||||
|
||||
| 名称 | 参数 | 说明 |
|
||||
| ----- | ---- | ---- |
|
||||
|
||||
@ -22,10 +22,10 @@
|
||||
maxWidth: '640px'
|
||||
}"
|
||||
>
|
||||
<n-form-item-row label="Input" path="inputValue">
|
||||
<n-form-item label="Input" path="inputValue">
|
||||
<n-input placeholder="Input" v-model:value="model.inputValue" />
|
||||
</n-form-item-row>
|
||||
<n-form-item-row label="Textarea" path="textareaValue">
|
||||
</n-form-item>
|
||||
<n-form-item label="Textarea" path="textareaValue">
|
||||
<n-input
|
||||
placeholder="Textarea"
|
||||
v-model:value="model.textareaValue"
|
||||
@ -35,29 +35,29 @@
|
||||
maxRows: 5
|
||||
}"
|
||||
/>
|
||||
</n-form-item-row>
|
||||
<n-form-item-row label="Select" path="selectValue">
|
||||
</n-form-item>
|
||||
<n-form-item label="Select" path="selectValue">
|
||||
<n-select
|
||||
placeholder="Select"
|
||||
:options="generalOptions"
|
||||
v-model:value="model.selectValue"
|
||||
/>
|
||||
</n-form-item-row>
|
||||
<n-form-item-row label="Multiple Select" path="multipleSelectValue">
|
||||
</n-form-item>
|
||||
<n-form-item label="Multiple Select" path="multipleSelectValue">
|
||||
<n-select
|
||||
placeholder="Select"
|
||||
:options="generalOptions"
|
||||
v-model:value="model.multipleSelectValue"
|
||||
multiple
|
||||
/>
|
||||
</n-form-item-row>
|
||||
<n-form-item-row label="Datetime" path="datetimeValue">
|
||||
</n-form-item>
|
||||
<n-form-item label="Datetime" path="datetimeValue">
|
||||
<n-date-picker type="datetime" v-model:value="model.datetimeValue" />
|
||||
</n-form-item-row>
|
||||
<n-form-item-row label="Switch" path="switchValue">
|
||||
</n-form-item>
|
||||
<n-form-item label="Switch" path="switchValue">
|
||||
<n-switch v-model:value="model.switchValue" />
|
||||
</n-form-item-row>
|
||||
<n-form-item-row label="Checkbox Group" path="checkboxGroupValue">
|
||||
</n-form-item>
|
||||
<n-form-item label="Checkbox Group" path="checkboxGroupValue">
|
||||
<n-checkbox-group v-model:value="model.checkboxGroupValue">
|
||||
<n-space>
|
||||
<n-checkbox value="Option 1">Option 1</n-checkbox>
|
||||
@ -65,8 +65,8 @@
|
||||
<n-checkbox value="Option 3">Option 3</n-checkbox>
|
||||
</n-space>
|
||||
</n-checkbox-group>
|
||||
</n-form-item-row>
|
||||
<n-form-item-row label="Radio Group" path="radioGroupValue">
|
||||
</n-form-item>
|
||||
<n-form-item label="Radio Group" path="radioGroupValue">
|
||||
<n-radio-group v-model:value="model.radioGroupValue" name="radiogroup1">
|
||||
<n-space>
|
||||
<n-radio value="Radio 1">Radio 1</n-radio>
|
||||
@ -74,52 +74,48 @@
|
||||
<n-radio value="Radio 3">Radio 3</n-radio>
|
||||
</n-space>
|
||||
</n-radio-group>
|
||||
</n-form-item-row>
|
||||
<n-form-item-row label="Radio Button Group" path="radioGroupValue">
|
||||
</n-form-item>
|
||||
<n-form-item label="Radio Button Group" path="radioGroupValue">
|
||||
<n-radio-group v-model:value="model.radioGroupValue" name="radiogroup2">
|
||||
<n-radio-button value="Radio 1">Radio 1</n-radio-button>
|
||||
<n-radio-button value="Radio 2">Radio 2</n-radio-button>
|
||||
<n-radio-button value="Radio 3">Radio 3</n-radio-button>
|
||||
</n-radio-group>
|
||||
</n-form-item-row>
|
||||
<n-form-item-row label="Input Number" path="inputNumberValue">
|
||||
</n-form-item>
|
||||
<n-form-item label="Input Number" path="inputNumberValue">
|
||||
<n-input-number v-model:value="model.inputNumberValue" />
|
||||
</n-form-item-row>
|
||||
<n-form-item-row label="Time Picker" path="timePickerValue">
|
||||
</n-form-item>
|
||||
<n-form-item label="Time Picker" path="timePickerValue">
|
||||
<n-time-picker v-model:value="model.timePickerValue" />
|
||||
</n-form-item-row>
|
||||
<n-form-item-row label="Slider" path="sliderValue">
|
||||
</n-form-item>
|
||||
<n-form-item label="Slider" path="sliderValue">
|
||||
<n-slider v-model:value="model.sliderValue" :step="5" />
|
||||
</n-form-item-row>
|
||||
<n-form-item-row label="Transfer" path="transferValue">
|
||||
</n-form-item>
|
||||
<n-form-item label="Transfer" path="transferValue">
|
||||
<n-transfer v-model:value="model.transferValue" :options="generalOptions" />
|
||||
</n-form-item-row>
|
||||
<n-form-item-row :gutter="[28, 0]" label="Nested Path">
|
||||
<n-row :gutter="[28, 0]">
|
||||
<n-form-item-col :span="12" path="nestedValue.path1">
|
||||
</n-form-item>
|
||||
<n-form-item label="Nested Path" :show-feedback="false">
|
||||
<n-grid :cols="2" :x-gap="24">
|
||||
<n-form-item-gi path="nestedValue.path1">
|
||||
<n-input
|
||||
placeholder="Nested Path 1"
|
||||
v-model:value="model.nestedValue.path1"
|
||||
/>
|
||||
</n-form-item-col>
|
||||
<n-form-item-col :span="12" path="nestedValue.path2">
|
||||
</n-form-item-gi>
|
||||
<n-form-item-gi path="nestedValue.path2">
|
||||
<n-select
|
||||
placeholder="Nested Path 2"
|
||||
:options="generalOptions"
|
||||
v-model:value="model.nestedValue.path2"
|
||||
/>
|
||||
</n-form-item-col>
|
||||
</n-row>
|
||||
</n-form-item-row>
|
||||
<n-row>
|
||||
<n-col :span="24">
|
||||
<div style="display: flex; justify-content: flex-end;">
|
||||
<n-button @click="handleValidateButtonClick" round type="primary"
|
||||
>验证</n-button
|
||||
>
|
||||
</div>
|
||||
</n-col>
|
||||
</n-row>
|
||||
</n-form-item-gi>
|
||||
</n-grid>
|
||||
</n-form-item>
|
||||
<div style="display: flex; justify-content: flex-end;">
|
||||
<n-button @click="handleValidateButtonClick" round type="primary"
|
||||
>验证</n-button
|
||||
>
|
||||
</div>
|
||||
</n-form>
|
||||
|
||||
<pre>
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
# 标签上置
|
||||
|
||||
使用 `n-grid` 和 `n-form-item-gi`（grid item）轻松写表单。
|
||||
|
||||
```html
|
||||
<n-radio-group
|
||||
v-model:value="size"
|
||||
@ -17,11 +19,11 @@
|
||||
ref="formRef"
|
||||
label-placement="top"
|
||||
>
|
||||
<n-row :gutter="24">
|
||||
<n-form-item-col :span="12" label="Input" path="inputValue">
|
||||
<n-grid :cols="24" :x-gap="24">
|
||||
<n-form-item-gi :span="12" label="Input" path="inputValue">
|
||||
<n-input placeholder="Input" v-model:value="model.inputValue" />
|
||||
</n-form-item-col>
|
||||
<n-form-item-col :span="12" label="Textarea" path="textareaValue">
|
||||
</n-form-item-gi>
|
||||
<n-form-item-gi :span="12" label="Textarea" path="textareaValue">
|
||||
<n-input
|
||||
placeholder="Textarea"
|
||||
v-model:value="model.textareaValue"
|
||||
@ -31,17 +33,15 @@
|
||||
maxRows: 5
|
||||
}"
|
||||
/>
|
||||
</n-form-item-col>
|
||||
</n-row>
|
||||
<n-row :gutter="24">
|
||||
<n-form-item-col :span="12" label="Select" path="selectValue">
|
||||
</n-form-item-gi>
|
||||
<n-form-item-gi :span="12" label="Select" path="selectValue">
|
||||
<n-select
|
||||
placeholder="Select"
|
||||
:options="generalOptions"
|
||||
v-model:value="model.selectValue"
|
||||
/>
|
||||
</n-form-item-col>
|
||||
<n-form-item-col
|
||||
</n-form-item-gi>
|
||||
<n-form-item-gi
|
||||
:span="12"
|
||||
label="Multiple Select"
|
||||
path="multipleSelectValue"
|
||||
@ -52,22 +52,14 @@
|
||||
v-model:value="model.multipleSelectValue"
|
||||
multiple
|
||||
/>
|
||||
</n-form-item-col>
|
||||
</n-row>
|
||||
<n-row :gutter="24">
|
||||
<n-form-item-col :span="12" label="Datetime" path="datetimeValue">
|
||||
</n-form-item-gi>
|
||||
<n-form-item-gi :span="12" label="Datetime" path="datetimeValue">
|
||||
<n-date-picker type="datetime" v-model:value="model.datetimeValue" />
|
||||
</n-form-item-col>
|
||||
<n-form-item-col :span="12" label="Switch" path="switchValue">
|
||||
</n-form-item-gi>
|
||||
<n-form-item-gi :span="12" label="Switch" path="switchValue">
|
||||
<n-switch v-model:value="model.switchValue" />
|
||||
</n-form-item-col>
|
||||
</n-row>
|
||||
<n-row :gutter="24">
|
||||
<n-form-item-col
|
||||
:span="12"
|
||||
label="Checkbox Group"
|
||||
path="checkboxGroupValue"
|
||||
>
|
||||
</n-form-item-gi>
|
||||
<n-form-item-gi :span="12" label="Checkbox Group" path="checkboxGroupValue">
|
||||
<n-checkbox-group v-model:value="model.checkboxGroupValue">
|
||||
<n-space>
|
||||
<n-checkbox value="Option 1">Option 1</n-checkbox>
|
||||
@ -75,8 +67,8 @@
|
||||
<n-checkbox value="Option 3">Option 3</n-checkbox>
|
||||
</n-space>
|
||||
</n-checkbox-group>
|
||||
</n-form-item-col>
|
||||
<n-form-item-col :span="12" label="Radio Group" path="radioGroupValue">
|
||||
</n-form-item-gi>
|
||||
<n-form-item-gi :span="12" label="Radio Group" path="radioGroupValue">
|
||||
<n-radio-group v-model:value="model.radioGroupValue" name="radiogroup1">
|
||||
<n-space>
|
||||
<n-radio value="Radio 1">Radio 1</n-radio>
|
||||
@ -84,10 +76,8 @@
|
||||
<n-radio value="Radio 3">Radio 3</n-radio>
|
||||
</n-space>
|
||||
</n-radio-group>
|
||||
</n-form-item-col>
|
||||
</n-row>
|
||||
<n-row :gutter="24">
|
||||
<n-form-item-col
|
||||
</n-form-item-gi>
|
||||
<n-form-item-gi
|
||||
:span="12"
|
||||
label="Radio Button Group"
|
||||
path="radioGroupValue"
|
||||
@ -97,51 +87,45 @@
|
||||
<n-radio-button value="Radio 2">Radio 2</n-radio-button>
|
||||
<n-radio-button value="Radio 3">Radio 3</n-radio-button>
|
||||
</n-radio-group>
|
||||
</n-form-item-col>
|
||||
<n-form-item-col :span="12" label="Input Number" path="inputNumberValue">
|
||||
</n-form-item-gi>
|
||||
<n-form-item-gi :span="12" label="Input Number" path="inputNumberValue">
|
||||
<n-input-number v-model:value="model.inputNumberValue" />
|
||||
</n-form-item-col>
|
||||
</n-row>
|
||||
<n-row :gutter="24">
|
||||
<n-form-item-col :span="12" label="Time Picker" path="timePickerValue">
|
||||
</n-form-item-gi>
|
||||
<n-form-item-gi :span="12" label="Time Picker" path="timePickerValue">
|
||||
<n-time-picker v-model:value="model.timePickerValue" />
|
||||
</n-form-item-col>
|
||||
<n-form-item-col :span="12" label="Slider" path="sliderValue">
|
||||
</n-form-item-gi>
|
||||
<n-form-item-gi :span="12" label="Slider" path="sliderValue">
|
||||
<n-slider v-model:value="model.sliderValue" :step="5" />
|
||||
</n-form-item-col>
|
||||
</n-row>
|
||||
<n-row :gutter="24">
|
||||
<n-form-item-col :span="14" label="Transfer" path="transferValue">
|
||||
</n-form-item-gi>
|
||||
<n-form-item-gi :span="14" label="Transfer" path="transferValue">
|
||||
<n-transfer
|
||||
style="width: 100%;"
|
||||
v-model:value="model.transferValue"
|
||||
:options="generalOptions"
|
||||
/>
|
||||
</n-form-item-col>
|
||||
<n-form-item-col :span="5" label="Nested Path" path="nestedValue.path1">
|
||||
</n-form-item-gi>
|
||||
<n-form-item-gi :span="5" label="Nested Path" path="nestedValue.path1">
|
||||
<n-cascader
|
||||
placeholder="Nested Path 1"
|
||||
v-model:value="model.nestedValue.path1"
|
||||
:options="cascaderOptions"
|
||||
/>
|
||||
</n-form-item-col>
|
||||
<n-form-item-col :span="5" path="nestedValue.path2">
|
||||
</n-form-item-gi>
|
||||
<n-form-item-gi :span="5" path="nestedValue.path2">
|
||||
<n-select
|
||||
placeholder="Nested Path 2"
|
||||
:options="generalOptions"
|
||||
v-model:value="model.nestedValue.path2"
|
||||
/>
|
||||
</n-form-item-col>
|
||||
</n-row>
|
||||
<n-row>
|
||||
<n-col :span="24">
|
||||
</n-form-item-gi>
|
||||
<n-gi :span="24">
|
||||
<div style="display: flex; justify-content: flex-end;">
|
||||
<n-button @click="handleValidateButtonClick" round type="primary"
|
||||
>验证</n-button
|
||||
>
|
||||
</div>
|
||||
</n-col>
|
||||
</n-row>
|
||||
</n-gi>
|
||||
</n-grid>
|
||||
</n-form>
|
||||
|
||||
<pre>
|
||||
|
||||
@ -1,6 +1,10 @@
|
||||
/* istanbul ignore file */
|
||||
export { default as NForm } from './src/Form'
|
||||
export { default as NFormItem } from './src/FormItem'
|
||||
export { default as NFormItemGridItem } from './src/FormItemGridItem'
|
||||
export { default as NFormItemGi } from './src/FormItemGridItem'
|
||||
export type { FormInst, FormItemInst } from './src/interface'
|
||||
|
||||
// deprecated
|
||||
export { default as NFormItemCol } from './src/FormItemCol'
|
||||
export { default as NFormItemRow } from './src/FormItemRow'
|
||||
export type { FormInst, FormItemInst } from './src/interface'
|
||||
|
||||
56
src/form/src/FormItemGridItem.ts
Normal file
56
src/form/src/FormItemGridItem.ts
Normal file
@ -0,0 +1,56 @@
|
||||
import { h, ref, defineComponent } from 'vue'
|
||||
import NGridItem, {
|
||||
gridItemProps,
|
||||
gridItemPropKeys
|
||||
} from '../../grid/src/GridItem'
|
||||
import { keep, keysOf } from '../../_utils'
|
||||
import NFormItem, { formItemProps, formItemPropKeys } from './FormItem'
|
||||
import { FormItemInst } from './interface'
|
||||
|
||||
export const formItemGiProps = {
|
||||
...gridItemProps,
|
||||
...formItemProps
|
||||
} as const
|
||||
|
||||
export const formItemGiPropKeys = keysOf(formItemGiProps)
|
||||
|
||||
export default defineComponent({
|
||||
__GRID_ITEM__: true,
|
||||
name: 'FormItemGridItem',
|
||||
alias: ['FormItemGi'],
|
||||
props: formItemGiProps,
|
||||
setup (props) {
|
||||
const formItemInstRef = ref<FormItemInst | null>(null)
|
||||
const validate: FormItemInst['validate'] = ((...args: any[]) => {
|
||||
const { value } = formItemInstRef
|
||||
if (value) {
|
||||
return (value.validate as any)(...args)
|
||||
}
|
||||
}) as any
|
||||
const restoreValidation: FormItemInst['restoreValidation'] = () => {
|
||||
const { value } = formItemInstRef
|
||||
if (value) {
|
||||
return value.restoreValidation()
|
||||
}
|
||||
}
|
||||
return {
|
||||
validate,
|
||||
restoreValidation
|
||||
}
|
||||
},
|
||||
render () {
|
||||
return h(NGridItem, keep(this.$props, gridItemPropKeys), {
|
||||
default: () => {
|
||||
const itemProps = keep(this.$props, formItemPropKeys)
|
||||
return h(
|
||||
NFormItem,
|
||||
{
|
||||
ref: 'formItemInstRef',
|
||||
...itemProps
|
||||
},
|
||||
this.$slots
|
||||
)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
@ -1,19 +1,21 @@
|
||||
# Basic
|
||||
|
||||
`n-grid-item` has an alias called `n-gi`.
|
||||
|
||||
```html
|
||||
<n-grid x-gap="12" :cols="4">
|
||||
<n-grid-item>
|
||||
<n-gi>
|
||||
<div class="light-green"></div>
|
||||
</n-grid-item>
|
||||
<n-grid-item>
|
||||
</n-gi>
|
||||
<n-gi>
|
||||
<div class="green"></div>
|
||||
</n-grid-item>
|
||||
<n-grid-item>
|
||||
</n-gi>
|
||||
<n-gi>
|
||||
<div class="light-green"></div>
|
||||
</n-grid-item>
|
||||
<n-grid-item>
|
||||
</n-gi>
|
||||
<n-gi>
|
||||
<div class="green"></div>
|
||||
</n-grid-item>
|
||||
</n-gi>
|
||||
</n-grid>
|
||||
```
|
||||
|
||||
|
||||
@ -5,20 +5,20 @@ You can controlled whether to collapse the items that overflows. At the same tim
|
||||
Collapsing works in responsive layout.
|
||||
|
||||
```html
|
||||
<n-row>
|
||||
<n-form-item-col label="Item Count" span="12">
|
||||
<n-grid :cols="2">
|
||||
<n-form-item-gi label="Item Count">
|
||||
<n-input-number v-model:value="gridItemCount" :min="1" />
|
||||
</n-form-item-col>
|
||||
<n-form-item-col label="Max Rows After Collapsed" span="12">
|
||||
</n-form-item-gi>
|
||||
<n-form-item-gi label="Max Rows After Collapsed">
|
||||
<n-input-number v-model:value="gridCollapsedRows" :min="1" />
|
||||
</n-form-item-col>
|
||||
<n-form-item-col label="Show Suffix Node" span="12">
|
||||
</n-form-item-gi>
|
||||
<n-form-item-gi label="Show Suffix Node">
|
||||
<n-switch v-model:value="showSuffix" />
|
||||
</n-form-item-col>
|
||||
<n-form-item-col label="Grid Collapsed" span="12">
|
||||
</n-form-item-gi>
|
||||
<n-form-item-gi label="Grid Collapsed">
|
||||
<n-switch v-model:value="gridCollapsed" />
|
||||
</n-form-item-col>
|
||||
</n-row>
|
||||
</n-form-item-gi>
|
||||
</n-grid>
|
||||
<n-grid
|
||||
:cols="5"
|
||||
:collapsed="gridCollapsed"
|
||||
|
||||
@ -1,19 +1,21 @@
|
||||
# 基础用法
|
||||
|
||||
`n-grid-item` 可以被简写为 `n-gi`。
|
||||
|
||||
```html
|
||||
<n-grid x-gap="12" :cols="4">
|
||||
<n-grid-item>
|
||||
<n-gi>
|
||||
<div class="light-green"></div>
|
||||
</n-grid-item>
|
||||
<n-grid-item>
|
||||
</n-gi>
|
||||
<n-gi>
|
||||
<div class="green"></div>
|
||||
</n-grid-item>
|
||||
<n-grid-item>
|
||||
</n-gi>
|
||||
<n-gi>
|
||||
<div class="light-green"></div>
|
||||
</n-grid-item>
|
||||
<n-grid-item>
|
||||
</n-gi>
|
||||
<n-gi>
|
||||
<div class="green"></div>
|
||||
</n-grid-item>
|
||||
</n-gi>
|
||||
</n-grid>
|
||||
```
|
||||
|
||||
|
||||
@ -5,20 +5,20 @@
|
||||
折叠在响应式布局下依然生效。
|
||||
|
||||
```html
|
||||
<n-row>
|
||||
<n-form-item-col label="数量" span="12">
|
||||
<n-grid :cols="2">
|
||||
<n-form-item-gi label="数量">
|
||||
<n-input-number v-model:value="gridItemCount" :min="1" />
|
||||
</n-form-item-col>
|
||||
<n-form-item-col label="折叠后行数" span="12">
|
||||
</n-form-item-gi>
|
||||
<n-form-item-gi label="折叠后行数">
|
||||
<n-input-number v-model:value="gridCollapsedRows" :min="1" />
|
||||
</n-form-item-col>
|
||||
<n-form-item-col label="打开后缀节点" span="12">
|
||||
</n-form-item-gi>
|
||||
<n-form-item-gi label="打开后缀节点">
|
||||
<n-switch v-model:value="showSuffix" />
|
||||
</n-form-item-col>
|
||||
<n-form-item-col label="折叠栅格" span="12">
|
||||
</n-form-item-gi>
|
||||
<n-form-item-gi label="折叠栅格">
|
||||
<n-switch v-model:value="gridCollapsed" />
|
||||
</n-form-item-col>
|
||||
</n-row>
|
||||
</n-form-item-gi>
|
||||
</n-grid>
|
||||
<n-grid
|
||||
:cols="5"
|
||||
:collapsed="gridCollapsed"
|
||||
|
||||
@ -1,2 +1,3 @@
|
||||
export { default as NGrid } from './src/Grid'
|
||||
export { default as NGridItem } from './src/GridItem'
|
||||
export { default as NGi } from './src/GridItem'
|
||||
|
||||
@ -116,6 +116,7 @@ export default defineComponent({
|
||||
return {
|
||||
style: computed<CSSProperties>(() => {
|
||||
return {
|
||||
width: '100%',
|
||||
display: 'grid',
|
||||
gridTemplateColumns: `repeat(${responsiveColsRef.value}, minmax(0, 1fr))`,
|
||||
columnGap: pxfy(responsiveXGapRef.value),
|
||||
|
||||
@ -4,11 +4,13 @@ import {
|
||||
CSSProperties,
|
||||
inject,
|
||||
renderSlot,
|
||||
getCurrentInstance
|
||||
getCurrentInstance,
|
||||
PropType
|
||||
} from 'vue'
|
||||
import { pxfy } from 'seemly'
|
||||
import { gridInjectionKey } from './Grid'
|
||||
import type { NGridInjection } from './Grid'
|
||||
import { keysOf } from '../../_utils'
|
||||
|
||||
export const defaultSpan = 1
|
||||
|
||||
@ -19,26 +21,33 @@ interface GridItemVNodeProps {
|
||||
privateShow?: boolean
|
||||
}
|
||||
|
||||
export const gridItemProps = {
|
||||
span: {
|
||||
type: [Number, String] as PropType<string | number>,
|
||||
default: defaultSpan
|
||||
},
|
||||
offset: {
|
||||
type: [Number, String] as PropType<string | number>,
|
||||
default: 0
|
||||
},
|
||||
suffix: Boolean,
|
||||
// private props
|
||||
privateOffset: Number,
|
||||
privateSpan: Number,
|
||||
privateColStart: Number,
|
||||
privateShow: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
} as const
|
||||
|
||||
export const gridItemPropKeys = keysOf(gridItemProps)
|
||||
|
||||
export default defineComponent({
|
||||
__GRID_ITEM__: true,
|
||||
name: 'GridItem',
|
||||
alias: ['Gi'],
|
||||
props: {
|
||||
span: {
|
||||
type: [Number, String],
|
||||
default: defaultSpan
|
||||
},
|
||||
offset: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
suffix: Boolean,
|
||||
// private props
|
||||
privateOffset: Number,
|
||||
privateSpan: Number,
|
||||
privateColStart: Number,
|
||||
privateShow: Boolean
|
||||
},
|
||||
props: gridItemProps,
|
||||
setup (props) {
|
||||
const NGrid = inject(gridInjectionKey, null) as NGridInjection
|
||||
const self = getCurrentInstance()
|
||||
|
||||
17
vue3.md
17
vue3.md
@ -433,10 +433,10 @@
|
||||
- [x] build site
|
||||
- [x] table fixed col
|
||||
- [ ] prefixCls，暂时不需要
|
||||
- [ ] 更新一波文档 props
|
||||
- [ ] 更新样式的文档
|
||||
- [x] 更新一波文档 props
|
||||
- [x] 更新样式的文档
|
||||
- [ ] on update value api
|
||||
- [ ] anchor in modal page, maybe a bug of vue...
|
||||
- [x] anchor in modal page, maybe a bug of vue...
|
||||
- [ ] menu + dropdown collapsed 时候 menu item 不更新（selected 从使用 useMemo 切换成 computed（性能下降）, Vue 在这种时候一定存在 bug，但是暂时没空找了...）
|
||||
- [ ] select menu multiple, when show=true, checkmark transiton not working（推测是 vue 的 bug）
|
||||
- [ ] demo hmr （或许是 vite-plugin-vue 或 vite 的 bug，修改内容不更新）
|
||||
@ -455,8 +455,8 @@
|
||||
- [x] card 设定高度
|
||||
- [x] dropdown 手动定位有 bug，mousemoveoutside
|
||||
- [x] select menu loading
|
||||
- [ ] refactor layout to make position work on first shot
|
||||
- [ ] mention mention pending option not correct, sometimes it is not the first option
|
||||
- [x] refactor layout to make position work on first shot
|
||||
- [x] <del>mention mention pending option not correct, sometimes it is not the first option</del> In fact it's caused by mouse hover on item...
|
||||
- [x] code Deprecated as of 10.7.0. highlight(lang, code, ...args) has been deprecated.
|
||||
- [x] vdirs zindexable https://github.com/vuejs/vue-next/issues/3497
|
||||
- [x] collapse-item overflow
|
||||
@ -464,9 +464,12 @@
|
||||
- [x] popover click 移动端不生效
|
||||
- [ ] menu path 对应的问题
|
||||
- [x] debug anchor 删除无用 link
|
||||
- [ ] popover inst methods
|
||||
- [x] popover inst methods
|
||||
- [x] ios 浏览器 demo code font size 不对
|
||||
- [ ] <del>table overflow bordered</del>
|
||||
- [x] <del>table overflow bordered</del>
|
||||
- [x] table ellipisis vertical align
|
||||
- [x] form item grid item
|
||||
- [ ] select filter composite...
|
||||
|
||||
## Build
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user