mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-03-01 13:36:55 +08:00
07akioni
GitHub Enterprise
commit
3b094162e7
@ -10,6 +10,7 @@ Rows can be selectable by making first column's type as `selection`.
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
:pagination="pagination"
|
||||
:row-key="row => row.address"
|
||||
@checked-row-keys-change="handleCheck"
|
||||
/>
|
||||
```
|
||||
@ -37,7 +38,6 @@ const columns = [
|
||||
]
|
||||
|
||||
const data = Array.apply(null, { length: 46 }).map((_, index) => ({
|
||||
key: index,
|
||||
name: `Edward King ${index}`,
|
||||
age: 32,
|
||||
address: `London, Park Lane no. ${index}`
|
||||
|
||||
@ -9,6 +9,7 @@
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
:pagination="pagination"
|
||||
:row-key="row => row.address"
|
||||
@checked-row-keys-change="handleCheck"
|
||||
/>
|
||||
```
|
||||
@ -36,7 +37,6 @@ const columns = [
|
||||
]
|
||||
|
||||
const data = Array.apply(null, { length: 46 }).map((_, index) => ({
|
||||
key: index,
|
||||
name: `Edward King ${index}`,
|
||||
age: 32,
|
||||
address: `London, Park Lane no. ${index}`
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# Basic
|
||||
```html
|
||||
<n-custom-add
|
||||
<n-dynamic-input
|
||||
v-model="test"
|
||||
placeholder-key="placeholder1"
|
||||
placeholder-value="placeholder2"
|
||||
@ -1,6 +1,6 @@
|
||||
# Custom
|
||||
```html
|
||||
<n-custom-add
|
||||
<n-dynamic-input
|
||||
v-model="test"
|
||||
title="Add CheckBox"
|
||||
preset="custom"
|
||||
@ -22,7 +22,7 @@
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</n-custom-add>
|
||||
</n-dynamic-input>
|
||||
<pre>
|
||||
{{ JSON.stringify(test,0,2) }}
|
||||
</pre>
|
||||
@ -1,4 +1,4 @@
|
||||
# Custom Add
|
||||
# Dynamic Input
|
||||
|
||||
## Demos
|
||||
```demo
|
||||
@ -1,6 +1,6 @@
|
||||
# Pair
|
||||
```html
|
||||
<n-custom-add
|
||||
<n-dynamic-input
|
||||
preset="pair"
|
||||
v-model="test"
|
||||
placeholder-key="placeholder1"
|
||||
@ -1,6 +1,6 @@
|
||||
# 基础用法
|
||||
```html
|
||||
<n-custom-add
|
||||
<n-dynamic-input
|
||||
v-model="test"
|
||||
placeholder-key="placeholder1"
|
||||
placeholder-value="placeholder2"
|
||||
@ -1,6 +1,6 @@
|
||||
# 自定义
|
||||
```html
|
||||
<n-custom-add
|
||||
<n-dynamic-input
|
||||
v-model="test"
|
||||
title="Add CheckBox"
|
||||
preset="custom"
|
||||
@ -22,7 +22,7 @@
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</n-custom-add>
|
||||
</n-dynamic-input>
|
||||
<pre>
|
||||
{{ JSON.stringify(test,0,2) }}
|
||||
</pre>
|
||||
@ -1,6 +1,6 @@
|
||||
# 键值对
|
||||
```html
|
||||
<n-custom-add
|
||||
<n-dynamic-input
|
||||
preset="pair"
|
||||
v-model="test"
|
||||
placeholder-key="placeholder1"
|
||||
@ -17,13 +17,13 @@ You can custom you valiation by setting custom trigger in rules.
|
||||
<n-input :disabled="!model.password" v-model="model.reenteredPassword" type="password"/>
|
||||
</n-form-item-row>
|
||||
<n-form-item-row label="Env" path="env" rule-path="null">
|
||||
<n-custom-add
|
||||
<n-dynamic-input
|
||||
v-model="model.env"
|
||||
preset="pair"
|
||||
/>
|
||||
</n-form-item-row>
|
||||
<n-form-item-row label="group" path="group" rule-path="null">
|
||||
<n-custom-add
|
||||
<n-dynamic-input
|
||||
v-model="model.group"
|
||||
preset='custom'
|
||||
>
|
||||
@ -43,7 +43,7 @@ You can custom you valiation by setting custom trigger in rules.
|
||||
</n-form-item>
|
||||
</div>
|
||||
</template>
|
||||
</n-custom-add>
|
||||
</n-dynamic-input>
|
||||
</n-form-item-row>
|
||||
<n-row :gutter="[0, 24]">
|
||||
<n-col :span="24">
|
||||
|
||||
@ -17,12 +17,12 @@
|
||||
<n-input :disabled="!model.password" v-model="model.reenteredPassword" type="password"/>
|
||||
</n-form-item-row>
|
||||
<n-form-item-row label="Env" path="env" rule-path="null">
|
||||
<n-custom-add
|
||||
<n-dynamic-input
|
||||
v-model="model.env"
|
||||
/>
|
||||
</n-form-item-row>
|
||||
<n-form-item-row label="group" path="group" rule-path="null">
|
||||
<n-custom-add
|
||||
<n-dynamic-input
|
||||
v-model="model.group"
|
||||
>
|
||||
<template v-slot="slotProps">
|
||||
@ -41,7 +41,7 @@
|
||||
</n-form-item>
|
||||
</div>
|
||||
</template>
|
||||
</n-custom-add>
|
||||
</n-dynamic-input>
|
||||
</n-form-item-row>
|
||||
<n-row :gutter="[0, 24]">
|
||||
<n-col :span="24">
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
<!--no-demo-->
|
||||
# Naive UI
|
||||
Naive UI is a Vue-Based Frontend Component Library of TuSimple.
|
||||
Naive UI is a Vue Component Library.
|
||||
@ -1,3 +1,3 @@
|
||||
<!--no-demo-->
|
||||
# Naive UI
|
||||
Naive UI 是图森未来前端的 Vue 组件库。
|
||||
Naive UI 是一个 Vue 组件库。
|
||||
@ -2,11 +2,7 @@
|
||||
<div class="footer">
|
||||
<n-divider v-if="showDivider" style="margin: 0 0 16px 0;" />
|
||||
<n-text depth="tertiary">
|
||||
A <a ref="noopener noreferer" href="https://www.tusimple.com" target="_blank" class="link">
|
||||
<n-text>
|
||||
Tusimple
|
||||
</n-text>
|
||||
</a> Project ·
|
||||
For Preview Only ·
|
||||
</n-text>
|
||||
<n-text depth="tertiary">
|
||||
Designed by <n-a ref="noopener noreferer" class="link" href="https://www.ritalei.com" target="_blank">
|
||||
|
||||
@ -17,7 +17,7 @@ import nswitch from './documentation/components/switch'
|
||||
import input from './documentation/components/input'
|
||||
import select from './documentation/components/select'
|
||||
import cascader from './documentation/components/cascader'
|
||||
import customAdd from './documentation/components/customAdd'
|
||||
import dynamicInput from './documentation/components/dynamicInput'
|
||||
import modal from './documentation/components/modal'
|
||||
import message from './documentation/components/message'
|
||||
import tooltip from './documentation/components/tooltip'
|
||||
@ -165,7 +165,7 @@ const children = [
|
||||
{ path: '/n-input', component: input },
|
||||
{ path: '/n-select', component: select },
|
||||
{ path: '/n-cascader', component: cascader },
|
||||
{ path: '/n-custom-add', component: customAdd },
|
||||
{ path: '/n-dynamic-input', component: dynamicInput },
|
||||
{ path: '/n-modal', component: modal },
|
||||
{ path: '/n-message', component: message },
|
||||
{ path: '/n-tooltip', component: tooltip },
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
const convertMd2Doc = require('./convertMd2Doc')
|
||||
const path = require('path')
|
||||
|
||||
module.exports = function (content) {
|
||||
const env = process.env.NODE_ENV
|
||||
const url = this.resourcePath
|
||||
return convertMd2Doc(content, env, url)
|
||||
const projectPath = path.resolve(__dirname, '..', '..')
|
||||
const relativeURL = this.resourcePath.replace(projectPath + '/', '')
|
||||
return convertMd2Doc(content, env, relativeURL)
|
||||
}
|
||||
|
||||
@ -196,10 +196,10 @@ export default function (locale, instance) {
|
||||
path: `/${instance.lang}/${instance.theme}/doc` + '/n-checkbox'
|
||||
},
|
||||
{
|
||||
name: 'Custom Add',
|
||||
title: '自定义增加',
|
||||
titleExtra: 'Custom Add',
|
||||
path: `/${instance.lang}/${instance.theme}/doc` + '/n-custom-add'
|
||||
name: 'Dynamic Input',
|
||||
title: '动态输入',
|
||||
titleExtra: 'Dynamic Input',
|
||||
path: `/${instance.lang}/${instance.theme}/doc` + '/n-dynamic-input'
|
||||
},
|
||||
{
|
||||
name: 'Date Picker',
|
||||
@ -674,8 +674,8 @@ export default function (locale, instance) {
|
||||
path: `/${instance.lang}/${instance.theme}/doc` + '/n-checkbox'
|
||||
},
|
||||
{
|
||||
name: 'Custom Add',
|
||||
path: `/${instance.lang}/${instance.theme}/doc` + '/n-custom-add'
|
||||
name: 'Dynamic Input',
|
||||
path: `/${instance.lang}/${instance.theme}/doc` + '/n-dynamic-input'
|
||||
},
|
||||
{
|
||||
name: 'Date Picker',
|
||||
|
||||
@ -2,11 +2,13 @@
|
||||
{
|
||||
"zh-CN": {
|
||||
"show": "显示代码",
|
||||
"hide": "收起代码"
|
||||
"hide": "收起代码",
|
||||
"editOnGithub": "在 Github 上编辑"
|
||||
},
|
||||
"en-US": {
|
||||
"show": "Show Code",
|
||||
"hide": "Hide Code"
|
||||
"hide": "Hide Code",
|
||||
"editOnGithub": "Edit on Github"
|
||||
}
|
||||
}
|
||||
</i18n>
|
||||
@ -25,46 +27,47 @@
|
||||
</template>
|
||||
|
||||
<template v-slot:header-extra>
|
||||
<n-tooltip
|
||||
:delay="300"
|
||||
:placement="'top'"
|
||||
:show-arrow="true"
|
||||
:controller="controller"
|
||||
>
|
||||
<template v-slot:activator>
|
||||
<a target="_blank" :href="gheUrl" style="margin-right:10px;">
|
||||
<n-button-group size="tiny">
|
||||
<n-tooltip
|
||||
:delay="300"
|
||||
:placement="'top'"
|
||||
:show-arrow="true"
|
||||
>
|
||||
<template v-slot:activator>
|
||||
<n-button
|
||||
size="tiny"
|
||||
style="padding: 0 2px 0 8px"
|
||||
ghost
|
||||
round
|
||||
@click="handleEditOnGithubClick"
|
||||
>
|
||||
<template v-slot:icon>
|
||||
<open-outline />
|
||||
<create-outline />
|
||||
</template>
|
||||
</n-button>
|
||||
</a>
|
||||
</template>
|
||||
{{ $t('ghe url') }}
|
||||
</n-tooltip>
|
||||
<n-tooltip
|
||||
:delay="300"
|
||||
:placement="'top'"
|
||||
:show-arrow="true"
|
||||
:controller="controller"
|
||||
>
|
||||
<template v-slot:activator>
|
||||
<n-button
|
||||
size="tiny"
|
||||
ghost
|
||||
circle
|
||||
@click="toggleCodeDisplay"
|
||||
>
|
||||
<template v-slot:icon>
|
||||
<md-code />
|
||||
</template>
|
||||
</n-button>
|
||||
</template>
|
||||
{{ !showCode ? $t('show') : $t('hide') }}
|
||||
</n-tooltip>
|
||||
</template>
|
||||
{{ $t('editOnGithub') }}
|
||||
</n-tooltip>
|
||||
<n-tooltip
|
||||
:delay="300"
|
||||
:placement="'top'"
|
||||
:show-arrow="true"
|
||||
:controller="controller"
|
||||
>
|
||||
<template v-slot:activator>
|
||||
<n-button
|
||||
style="padding: 0 6px 0 4px"
|
||||
ghost
|
||||
round
|
||||
@click="toggleCodeDisplay"
|
||||
>
|
||||
<template v-slot:icon>
|
||||
<code-outline />
|
||||
</template>
|
||||
</n-button>
|
||||
</template>
|
||||
{{ !showCode ? $t('show') : $t('hide') }}
|
||||
</n-tooltip>
|
||||
</n-button-group>
|
||||
</template>
|
||||
<slot name="content" />
|
||||
<slot name="demo" />
|
||||
@ -77,14 +80,14 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mdCode from '../../src/_icons/md-code'
|
||||
import openOutline from '../../src/_icons/open-outline'
|
||||
import codeOutline from '../../src/_icons/code-outline'
|
||||
import createOutline from '../../src/_icons/create-outline'
|
||||
import { state } from '../store'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
mdCode,
|
||||
openOutline
|
||||
codeOutline,
|
||||
createOutline
|
||||
},
|
||||
inject: {
|
||||
NDocumentation: {
|
||||
@ -106,11 +109,9 @@ export default {
|
||||
mode () {
|
||||
return this.state.mode
|
||||
},
|
||||
gheUrl () {
|
||||
const resourcePath = this.NDocumentation.url
|
||||
const reg = /demo.*/
|
||||
const path = resourcePath.match(reg)
|
||||
return 'https://***REMOVED***/tree/develop/' + path
|
||||
url () {
|
||||
const relativePath = this.NDocumentation.url
|
||||
return 'https://***REMOVED***/tree/develop/' + relativePath
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
@ -132,6 +133,9 @@ export default {
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
handleEditOnGithubClick () {
|
||||
window.open(this.url, '_blank')
|
||||
},
|
||||
toggleCodeDisplay () {
|
||||
this.showCode = !this.showCode
|
||||
},
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "naive-ui",
|
||||
"version": "0.7.19",
|
||||
"version": "0.7.24",
|
||||
"description": "",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
||||
7
playground/footer.txt
Normal file
7
playground/footer.txt
Normal file
@ -0,0 +1,7 @@
|
||||
<!-- <n-text depth="tertiary">
|
||||
A <a ref="noopener noreferer" href="https://www.tusimple.com" target="_blank" class="link">
|
||||
<n-text>
|
||||
Tusimple
|
||||
</n-text>
|
||||
</a> Project ·
|
||||
</n-text> -->
|
||||
@ -1,9 +0,0 @@
|
||||
/* istanbul ignore file */
|
||||
import CustomAdd from './src/main.vue'
|
||||
|
||||
CustomAdd.install = function (Vue) {
|
||||
Vue.component(CustomAdd.name, CustomAdd)
|
||||
Vue.component('NCustomAdd', CustomAdd)
|
||||
}
|
||||
|
||||
export default CustomAdd
|
||||
@ -57,7 +57,7 @@
|
||||
import withapp from '../../_mixins/withapp'
|
||||
import themeable from '../../_mixins/themeable'
|
||||
import locale from '../../_mixins/locale'
|
||||
import { setCheckStatusOfRow } from './utils'
|
||||
import { setCheckStatusOfRow, createRowKey } from './utils'
|
||||
import BaseTable from './BaseTable.vue'
|
||||
import NEmpty from '../../Empty'
|
||||
import NPagination from '../../Pagination'
|
||||
@ -435,8 +435,10 @@ export default {
|
||||
},
|
||||
countOfCurrentPageCheckedRows () {
|
||||
const checkedRowKeys = this.syntheticCheckedRowKeys
|
||||
const rowKey = this.rowKey
|
||||
return this.paginatedData.reduce((total, row) => {
|
||||
return total + (checkedRowKeys.includes(row.key) ? 1 : 0)
|
||||
const key = createRowKey(row, rowKey)
|
||||
return total + (checkedRowKeys.includes(key) ? 1 : 0)
|
||||
}, 0)
|
||||
},
|
||||
someRowsChecked () {
|
||||
@ -597,21 +599,23 @@ export default {
|
||||
},
|
||||
checkAll (column) {
|
||||
const checkedRowKeys = this.syntheticCheckedRowKeys.map(v => v)
|
||||
const rowKey = this.rowKey
|
||||
this.paginatedData.forEach(row => {
|
||||
if (column.disabled && column.disabled(row)) {
|
||||
return
|
||||
}
|
||||
setCheckStatusOfRow(checkedRowKeys, row, true)
|
||||
setCheckStatusOfRow(checkedRowKeys, row, true, rowKey)
|
||||
})
|
||||
this.changeCheckedRowKeys(checkedRowKeys)
|
||||
},
|
||||
clearCheckAll (column) {
|
||||
const checkedRowKeys = this.syntheticCheckedRowKeys.map(v => v)
|
||||
const rowKey = this.rowKey
|
||||
this.paginatedData.forEach(row => {
|
||||
if (column.disabled && column.disabled(row)) {
|
||||
return
|
||||
}
|
||||
setCheckStatusOfRow(checkedRowKeys, row, false)
|
||||
setCheckStatusOfRow(checkedRowKeys, row, false, rowKey)
|
||||
})
|
||||
this.changeCheckedRowKeys(checkedRowKeys)
|
||||
}
|
||||
|
||||
@ -52,7 +52,7 @@
|
||||
v-if="column.type === 'selection'"
|
||||
:key="currentPage"
|
||||
:disabled="column.disabled && column.disabled(rowData)"
|
||||
:checked="checkedRowKeys.includes(rowData.key)"
|
||||
:checked="checkedRowKeys.includes(createRowKey(rowData, rowKey))"
|
||||
@change="checked => handleCheckboxInput(rowData, checked)"
|
||||
/>
|
||||
<cell
|
||||
@ -71,7 +71,7 @@
|
||||
|
||||
<script>
|
||||
import cell from './Cell.vue'
|
||||
import { createCustomWidthStyle, setCheckStatusOfRow, createClassObject } from '../utils'
|
||||
import { createCustomWidthStyle, setCheckStatusOfRow, createClassObject, createRowKey } from '../utils'
|
||||
import NScrollbar from '../../../Scrollbar'
|
||||
|
||||
export default {
|
||||
@ -158,9 +158,10 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
createClassObject,
|
||||
createRowKey,
|
||||
handleCheckboxInput (row, checked) {
|
||||
const newCheckedRowKeys = this.checkedRowKeys.map(v => v)
|
||||
setCheckStatusOfRow(newCheckedRowKeys, row, checked)
|
||||
setCheckStatusOfRow(newCheckedRowKeys, row, checked, this.rowKey)
|
||||
this.NDataTable.changeCheckedRowKeys(newCheckedRowKeys)
|
||||
},
|
||||
getScrollContainer () {
|
||||
|
||||
@ -21,11 +21,17 @@ export function createCustomWidthStyle (column, index, placement) {
|
||||
return null
|
||||
}
|
||||
|
||||
export function setCheckStatusOfRow (checkedRowKeys, row, checked) {
|
||||
export function setCheckStatusOfRow (checkedRowKeys, row, checked, rowKey) {
|
||||
const key = createRowKey(row, rowKey)
|
||||
while (true) {
|
||||
const checkedRowIndex = checkedRowKeys.findIndex(checkedRowKey => checkedRowKey === row.key)
|
||||
const checkedRowIndex = checkedRowKeys.findIndex(checkedRowKey => checkedRowKey === key)
|
||||
if (~checkedRowIndex) checkedRowKeys.splice(checkedRowIndex, 1)
|
||||
else break
|
||||
}
|
||||
if (checked) checkedRowKeys.push(row.key)
|
||||
if (checked) checkedRowKeys.push(key)
|
||||
}
|
||||
|
||||
export function createRowKey (row, rowKey) {
|
||||
if (rowKey) return rowKey(row)
|
||||
return row.key
|
||||
}
|
||||
|
||||
9
src/DynamicInput/index.js
Normal file
9
src/DynamicInput/index.js
Normal file
@ -0,0 +1,9 @@
|
||||
/* istanbul ignore file */
|
||||
import DynamicInput from './src/main.vue'
|
||||
|
||||
DynamicInput.install = function (Vue) {
|
||||
Vue.component(DynamicInput.name, DynamicInput)
|
||||
Vue.component('NDynamicInput', DynamicInput)
|
||||
}
|
||||
|
||||
export default DynamicInput
|
||||
@ -1,19 +1,19 @@
|
||||
<template>
|
||||
<div
|
||||
class="n-custom-add-pair"
|
||||
class="n-dynamic-input-pair"
|
||||
>
|
||||
<n-form-item v-if="NCustomAdd.NFormItem" :path="path" :rule-path="parentPath">
|
||||
<n-form-item v-if="NDynamicInput.NFormItem" :path="path" :rule-path="parentPath">
|
||||
<n-input
|
||||
v-model="item"
|
||||
class="n-custom-add-pair-input"
|
||||
:placeholder="NCustomAdd.placeholder"
|
||||
class="n-dynamic-input-pair-input"
|
||||
:placeholder="NDynamicInput.placeholder"
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-input
|
||||
v-else
|
||||
v-model="item"
|
||||
class="n-custom-add-pair-input"
|
||||
:placeholder="NCustomAdd.placeholder"
|
||||
class="n-dynamic-input-pair-input"
|
||||
:placeholder="NDynamicInput.placeholder"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@ -21,9 +21,9 @@
|
||||
import asformitem from '../../_mixins/asformitem'
|
||||
|
||||
export default {
|
||||
name: 'NCustomAddInput',
|
||||
name: 'NDynamicInputInput',
|
||||
inject: {
|
||||
NCustomAdd: {
|
||||
NDynamicInput: {
|
||||
default: []
|
||||
}
|
||||
},
|
||||
@ -1,18 +1,18 @@
|
||||
<template>
|
||||
<div class="n-custom-add">
|
||||
<div class="n-dynamic-input">
|
||||
<div
|
||||
v-for="(item, index) in value"
|
||||
:key="index"
|
||||
class="n-custom-add-item"
|
||||
class="n-dynamic-input-item"
|
||||
>
|
||||
<n-custom-add-input
|
||||
<n-dynamic-input-input
|
||||
v-if="preset==='input'"
|
||||
:item="item"
|
||||
:index="index"
|
||||
:parent-path="NFormItem && NFormItem.path"
|
||||
:path="NFormItem && NFormItem.path + '[' + index + ']'"
|
||||
/>
|
||||
<n-custom-add-pair
|
||||
<n-dynamic-input-pair
|
||||
v-else-if="preset==='pair'"
|
||||
:item="item"
|
||||
:index="index"
|
||||
@ -20,7 +20,7 @@
|
||||
:path="NFormItem && NFormItem.path + '[' + index + ']'"
|
||||
/>
|
||||
<slot v-else :item="item" :index="index" />
|
||||
<div class="n-custom-add-item__action">
|
||||
<div class="n-dynamic-input-item__action">
|
||||
<n-button-group>
|
||||
<n-button
|
||||
circle
|
||||
@ -51,14 +51,14 @@ import NButtonGroup from '../../Button/src/ButtonGroup'
|
||||
import mdAdd from '../../_icons/md-add'
|
||||
import mdRemove from '../../_icons/md-remove'
|
||||
import asformitem from '../../_mixins/asformitem'
|
||||
import NCustomAddPair from './pair'
|
||||
import NCustomAddInput from './input'
|
||||
import NDynamicInputPair from './pair'
|
||||
import NDynamicInputInput from './input'
|
||||
|
||||
export default {
|
||||
name: 'NCustomAdd',
|
||||
name: 'NDynamicInput',
|
||||
components: {
|
||||
NCustomAddPair,
|
||||
NCustomAddInput,
|
||||
NDynamicInputPair,
|
||||
NDynamicInputInput,
|
||||
NButtonGroup,
|
||||
NButton,
|
||||
mdAdd,
|
||||
@ -66,7 +66,7 @@ export default {
|
||||
},
|
||||
provide () {
|
||||
return {
|
||||
NCustomAdd: this
|
||||
NDynamicInput: this
|
||||
}
|
||||
},
|
||||
mixins: [asformitem({
|
||||
@ -1,32 +1,32 @@
|
||||
<template>
|
||||
<div
|
||||
class="n-custom-add-pair"
|
||||
class="n-dynamic-input-pair"
|
||||
>
|
||||
<n-form-item v-if="NCustomAdd.NFormItem" :path="path + '.key'" :rule-path="parentPath + '.key'">
|
||||
<n-form-item v-if="NDynamicInput.NFormItem" :path="path + '.key'" :rule-path="parentPath + '.key'">
|
||||
<n-input
|
||||
v-model="item.key"
|
||||
class="n-custom-add-pair-input"
|
||||
:placeholder="NCustomAdd.placeholderKey"
|
||||
class="n-dynamic-input-pair-input"
|
||||
:placeholder="NDynamicInput.placeholderKey"
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-input
|
||||
v-else
|
||||
v-model="item.key"
|
||||
class="n-custom-add-pair-input"
|
||||
:placeholder="NCustomAdd.placeholderKey"
|
||||
class="n-dynamic-input-pair-input"
|
||||
:placeholder="NDynamicInput.placeholderKey"
|
||||
/>
|
||||
<n-form-item v-if="NCustomAdd.NFormItem" :path="path +'.value'" :rule-path="parentPath + '.key'">
|
||||
<n-form-item v-if="NDynamicInput.NFormItem" :path="path +'.value'" :rule-path="parentPath + '.key'">
|
||||
<n-input
|
||||
v-model="item.value"
|
||||
class="n-custom-add-pair-input"
|
||||
:placeholder="NCustomAdd.placeholderValue"
|
||||
class="n-dynamic-input-pair-input"
|
||||
:placeholder="NDynamicInput.placeholderValue"
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-input
|
||||
v-else
|
||||
v-model="item.value"
|
||||
class="n-custom-add-pair-input"
|
||||
:placeholder="NCustomAdd.placeholderValue"
|
||||
class="n-dynamic-input-pair-input"
|
||||
:placeholder="NDynamicInput.placeholderValue"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@ -34,9 +34,9 @@
|
||||
import asformitem from '../../_mixins/asformitem'
|
||||
|
||||
export default {
|
||||
name: 'NCustomAddPair',
|
||||
name: 'NDynamicInputPair',
|
||||
inject: {
|
||||
NCustomAdd: {
|
||||
NDynamicInput: {
|
||||
default: []
|
||||
}
|
||||
},
|
||||
@ -62,6 +62,9 @@ export default {
|
||||
containerClass: 'n-popselect',
|
||||
showArrow: context.props.showArrow,
|
||||
zIndex: context.props.zIndex,
|
||||
overlayStyle: {
|
||||
padding: 0
|
||||
},
|
||||
controller
|
||||
},
|
||||
on: {
|
||||
|
||||
@ -8,7 +8,7 @@ import RoundButton from './Button'
|
||||
import Switch from './Switch'
|
||||
import Select from './Select'
|
||||
import Cascader from './Cascader'
|
||||
import CustomAdd from './CustomAdd'
|
||||
import DynamicInput from './DynamicInput'
|
||||
import Modal from './Modal'
|
||||
import Input from './Input'
|
||||
import Message from './Message'
|
||||
@ -102,7 +102,7 @@ export default create({
|
||||
InputNumber,
|
||||
Radio,
|
||||
Cascader,
|
||||
CustomAdd,
|
||||
DynamicInput,
|
||||
Form,
|
||||
Tabs,
|
||||
TimePicker,
|
||||
|
||||
@ -165,16 +165,24 @@
|
||||
padding-right: 36px;
|
||||
}
|
||||
@include e(ellipsis) {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
background-color: map-get($--data-table-header-background-color, 'default');
|
||||
border-color: map-get($--data-table-border-color, 'default');
|
||||
color: $--data-table-header-text-color;
|
||||
@include m(sortable) {
|
||||
cursor: pointer;
|
||||
@include once {
|
||||
cursor: pointer;
|
||||
@include e(ellipsis) {
|
||||
max-width: calc(100% - 18px);
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background-color: map-get($--data-table-header-background-color, 'hover');
|
||||
}
|
||||
|
||||
@ -2,13 +2,13 @@
|
||||
|
||||
@include themes-mixin {
|
||||
@include once {
|
||||
@include b(custom-add) {
|
||||
@include b(dynamic-input) {
|
||||
width: 100%;
|
||||
@include m(title) {
|
||||
display: block;
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
@include b(custom-add-item) {
|
||||
@include b(dynamic-input-item) {
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
@include e(content) {
|
||||
@ -28,10 +28,10 @@
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
@include b(custom-add-pair) {
|
||||
@include b(dynamic-input-pair) {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
@include b(custom-add-item-input-container-input) {
|
||||
@include b(dynamic-input-item-input-container-input) {
|
||||
display: inline-block;
|
||||
flex: 1;
|
||||
}
|
||||
@ -39,7 +39,7 @@
|
||||
padding-top: 0!important;
|
||||
}
|
||||
}
|
||||
@include b(custom-add-pair-input){
|
||||
@include b(dynamic-input-pair-input){
|
||||
&:first-child {
|
||||
margin-right: 13px;
|
||||
}
|
||||
@ -3,10 +3,12 @@
|
||||
@include themes-mixin {
|
||||
.#{block(tooltip)} {
|
||||
@include b(tooltip-content) {
|
||||
@include once {
|
||||
white-space: nowrap;
|
||||
}
|
||||
&.#{block(popover-content)} {
|
||||
@include once {
|
||||
padding: 8px 14px;
|
||||
white-space: nowrap;
|
||||
border-radius: $--n-tooltip-border-radius;
|
||||
}
|
||||
box-shadow: $--tooltip-box-shadow;
|
||||
|
||||
@ -9,7 +9,6 @@
|
||||
@import './BaseSelectMenu.scss';
|
||||
@import './BaseMenuMask.scss';
|
||||
@import './BaseTrackingRect.scss';
|
||||
|
||||
@import "./Card.scss";
|
||||
@import "./Icon.scss";
|
||||
@import "./GradientText.scss";
|
||||
@ -20,7 +19,7 @@
|
||||
@import "./Input.scss";
|
||||
@import "./Select.scss";
|
||||
@import "./Cascader.scss";
|
||||
@import "./CustomAdd.scss";
|
||||
@import "./DynamicInput.scss";
|
||||
@import "./Message.scss";
|
||||
@import "./Tooltip.scss";
|
||||
@import "./Notification.scss";
|
||||
|
||||
@ -86,7 +86,7 @@ $default-theme: 'light';
|
||||
|
||||
@mixin themes-mixin() {
|
||||
$in-themes-mixin: true !global;
|
||||
$theme: 'dark' !global;
|
||||
$theme: 'light' !global;
|
||||
@include setup-light-theme();
|
||||
@content;
|
||||
$common-css-attrs-generated: true !global;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user