mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2024-12-09 04:31:35 +08:00
chore: merge confilct,update version
This commit is contained in:
JiwenBai
commit
20e8d3e356
46
demo/components/collapseDemo/accordion.demo.vue
Normal file
46
demo/components/collapseDemo/accordion.demo.vue
Normal file
@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<div class="n-doc-section">
|
||||
<div class="n-doc-section__header">
|
||||
Accordion
|
||||
</div>
|
||||
<div
|
||||
class="n-doc-section__view"
|
||||
style="flex-wrap: nowrap;"
|
||||
>
|
||||
<!--EXAMPLE_START-->
|
||||
<n-collapse
|
||||
v-model="activeName"
|
||||
accordion
|
||||
>
|
||||
<n-collapse-item
|
||||
title="right"
|
||||
name="1"
|
||||
>
|
||||
<div>good</div>
|
||||
</n-collapse-item>
|
||||
<div />
|
||||
<NCollapseItem
|
||||
title="right"
|
||||
name="2"
|
||||
>
|
||||
<div>good</div>
|
||||
</NCollapseItem>
|
||||
</n-collapse>
|
||||
<!--EXAMPLE_END-->
|
||||
</div>
|
||||
<pre class="n-doc-section__inspect">{{ JSON.stringify(activeName) }}</pre>
|
||||
<n-doc-source-block>
|
||||
<!--SOURCE-->
|
||||
</n-doc-source-block>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
activeName: '1'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
43
demo/components/collapseDemo/basicUsage.demo.vue
Normal file
43
demo/components/collapseDemo/basicUsage.demo.vue
Normal file
@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<div class="n-doc-section">
|
||||
<div class="n-doc-section__header">
|
||||
Basic Usage
|
||||
</div>
|
||||
<div
|
||||
class="n-doc-section__view"
|
||||
style="flex-wrap: nowrap;"
|
||||
>
|
||||
<!--EXAMPLE_START-->
|
||||
<n-collapse v-model="activeNames">
|
||||
<n-collapse-item
|
||||
title="right"
|
||||
name="1"
|
||||
>
|
||||
<div>good</div>
|
||||
</n-collapse-item>
|
||||
<div />
|
||||
<NCollapseItem
|
||||
title="right"
|
||||
name="2"
|
||||
>
|
||||
<div>good</div>
|
||||
</NCollapseItem>
|
||||
</n-collapse>
|
||||
<!--EXAMPLE_END-->
|
||||
</div>
|
||||
<pre class="n-doc-section__inspect">{{ JSON.stringify(activeNames) }}</pre>
|
||||
<n-doc-source-block>
|
||||
<!--SOURCE-->
|
||||
</n-doc-source-block>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
activeNames: ['1', '1', null]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -5,21 +5,24 @@
|
||||
>
|
||||
<div class="n-doc-header">
|
||||
<n-gradient-text :font-size="20">
|
||||
scaffold
|
||||
Collapse / n-collapse
|
||||
</n-gradient-text>
|
||||
</div>
|
||||
<div class="n-doc-body">
|
||||
<scaffold />
|
||||
<basic-usage />
|
||||
<accordion />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import scaffold from './scaffold.demo.vue'
|
||||
import basicUsage from './basicUsage.demo.vue'
|
||||
import accordion from './accordion.demo.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
scaffold
|
||||
basicUsage,
|
||||
accordion
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
||||
@ -1,28 +0,0 @@
|
||||
<template>
|
||||
<div class="n-doc-section">
|
||||
<div class="n-doc-section__header">
|
||||
Scaffold
|
||||
</div>
|
||||
<div
|
||||
class="n-doc-section__view"
|
||||
style="flex-wrap: nowrap;"
|
||||
>
|
||||
<!--EXAMPLE_START-->
|
||||
Write some demo here
|
||||
<!--EXAMPLE_END-->
|
||||
</div>
|
||||
<pre class="n-doc-section__inspect">Inspect some value here</pre>
|
||||
<n-doc-source-block>
|
||||
<!--SOURCE-->
|
||||
</n-doc-source-block>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -17,6 +17,7 @@
|
||||
<change-event />
|
||||
<change-event-emit-item />
|
||||
<search />
|
||||
<remote-search />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -28,6 +29,7 @@ import multipleSelect from './multipleSelect.demo.vue'
|
||||
import changeEvent from './changeEvent.demo'
|
||||
import changeEventEmitItem from './changeEventEmitItem.demo'
|
||||
import search from './search.demo.vue'
|
||||
import remoteSearch from './remoteSearch.demo.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
@ -36,7 +38,8 @@ export default {
|
||||
changeEvent,
|
||||
changeEventEmitItem,
|
||||
search,
|
||||
disabled
|
||||
disabled,
|
||||
remoteSearch
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
||||
107
demo/components/selectDemo/remoteSearch.demo.vue
Normal file
107
demo/components/selectDemo/remoteSearch.demo.vue
Normal file
@ -0,0 +1,107 @@
|
||||
<template>
|
||||
<div class="n-doc-section">
|
||||
<div class="n-doc-section__header">
|
||||
Remote Search
|
||||
</div>
|
||||
<div
|
||||
class="n-doc-section__view"
|
||||
style="flex-wrap: nowrap;"
|
||||
>
|
||||
<!--EXAMPLE_START-->
|
||||
<n-select
|
||||
v-model="selectedValues"
|
||||
multiple
|
||||
filterable
|
||||
placeholder="Search Songs"
|
||||
:items="items"
|
||||
:on-search="handleSearch"
|
||||
remote
|
||||
:no-data-content="noDataContent"
|
||||
:loading="loading"
|
||||
style="flex-grow: 1; margin-right: 12px; width: 300px;"
|
||||
/>
|
||||
<!--EXAMPLE_END-->
|
||||
</div>
|
||||
<pre class="n-doc-section__inspect">v-model(multiple): {{ JSON.stringify(selectedValues) }}</pre>
|
||||
<n-doc-source-block>
|
||||
<!--SOURCE-->
|
||||
</n-doc-source-block>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const items = [
|
||||
{
|
||||
label: 'Drive My Car',
|
||||
value: 'song1'
|
||||
},
|
||||
{
|
||||
label: 'Norwegian Wood',
|
||||
value: 'song2'
|
||||
},
|
||||
{
|
||||
label: 'You Won\'t See',
|
||||
value: 'song3'
|
||||
},
|
||||
{
|
||||
label: 'Nowhere Man',
|
||||
value: 'song4'
|
||||
},
|
||||
{
|
||||
label: 'Think For Yourself',
|
||||
value: 'song5'
|
||||
},
|
||||
{
|
||||
label: 'The Word',
|
||||
value: 'song6'
|
||||
},
|
||||
{
|
||||
label: 'Michelle',
|
||||
value: 'song7'
|
||||
},
|
||||
{
|
||||
label: 'What goes on',
|
||||
value: 'song8'
|
||||
},
|
||||
{
|
||||
label: 'Girl',
|
||||
value: 'song9'
|
||||
},
|
||||
{
|
||||
label: 'I\'m looking through you',
|
||||
value: 'song10'
|
||||
},
|
||||
{
|
||||
label: 'In My Life',
|
||||
value: 'song11'
|
||||
},
|
||||
{
|
||||
label: 'Wait',
|
||||
value: 'song12'
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
selectedValues: null,
|
||||
loading: false,
|
||||
items: [],
|
||||
noDataContent: 'please search',
|
||||
handleSearch: (query) => {
|
||||
if (!query.length) {
|
||||
this.items = []
|
||||
this.noDataContent = 'please search'
|
||||
return
|
||||
}
|
||||
this.loading = true
|
||||
window.setTimeout(() => {
|
||||
this.items = items.filter(item => ~item.label.search(query))
|
||||
if (!this.items.length) this.noDataContent = 'no result found'
|
||||
this.loading = false
|
||||
}, 1000)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,45 +1,44 @@
|
||||
<template>
|
||||
<div class="n-doc-section">
|
||||
<div class="n-doc-section__header">
|
||||
Scaffold
|
||||
Basic Usage
|
||||
</div>
|
||||
<div
|
||||
class="n-doc-section__view"
|
||||
style="flex-wrap: nowrap;"
|
||||
>
|
||||
<!--EXAMPLE_START-->
|
||||
<n-tag>Label 1</n-tag>
|
||||
<n-tag>Real Love</n-tag>
|
||||
<n-tag
|
||||
type="success"
|
||||
closable
|
||||
@close="handleClose"
|
||||
>
|
||||
Label 1
|
||||
Yes It Is
|
||||
</n-tag>
|
||||
<n-tag
|
||||
type="warning"
|
||||
closable
|
||||
@close="handleClose"
|
||||
>
|
||||
Label 1
|
||||
I'm Down
|
||||
</n-tag>
|
||||
<n-tag
|
||||
type="error"
|
||||
closable
|
||||
@close="handleClose"
|
||||
>
|
||||
Label 1
|
||||
Yesterday
|
||||
</n-tag>
|
||||
<n-tag
|
||||
type="info"
|
||||
closable
|
||||
@close="handleClose"
|
||||
>
|
||||
Label 1
|
||||
I'm Looking Through You
|
||||
</n-tag>
|
||||
<!--EXAMPLE_END-->
|
||||
</div>
|
||||
<pre class="n-doc-section__inspect">Inspect some value here</pre>
|
||||
<n-doc-source-block>
|
||||
<!--SOURCE-->
|
||||
</n-doc-source-block>
|
||||
@ -59,3 +58,13 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!--STYLE_EXAMPLE_START-->
|
||||
<style
|
||||
scoped
|
||||
>
|
||||
.n-tag {
|
||||
margin-right: 12px;
|
||||
}
|
||||
</style>
|
||||
<!--STYLE_EXAMPLE_END-->
|
||||
@ -5,21 +5,21 @@
|
||||
>
|
||||
<div class="n-doc-header">
|
||||
<n-gradient-text :font-size="20">
|
||||
scaffold
|
||||
Tag / n-tag
|
||||
</n-gradient-text>
|
||||
</div>
|
||||
<div class="n-doc-body">
|
||||
<scaffold />
|
||||
<basic-usage />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import scaffold from './scaffold.demo.vue'
|
||||
import basicUsage from './basicUsage.demo.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
scaffold
|
||||
basicUsage
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
>
|
||||
<div class="n-doc-header">
|
||||
<n-gradient-text :font-size="20">
|
||||
scaffold
|
||||
Timeline
|
||||
</n-gradient-text>
|
||||
</div>
|
||||
<div class="n-doc-body">
|
||||
|
||||
@ -1,14 +1,40 @@
|
||||
<template>
|
||||
<div class="n-doc-section">
|
||||
<div class="n-doc-section__header">
|
||||
Scaffold
|
||||
Bacis Usage
|
||||
</div>
|
||||
<div
|
||||
class="n-doc-section__view"
|
||||
style="flex-wrap: nowrap;"
|
||||
>
|
||||
<!--EXAMPLE_START-->
|
||||
Write some demo here
|
||||
<n-timeline>
|
||||
<n-timeline-item>123</n-timeline-item>
|
||||
<n-timeline-item
|
||||
type="success"
|
||||
timestamp="2018-04-03 20:46"
|
||||
>
|
||||
123
|
||||
</n-timeline-item>
|
||||
<n-timeline-item
|
||||
type="error"
|
||||
timestamp="2018-04-03 20:46"
|
||||
>
|
||||
123
|
||||
</n-timeline-item>
|
||||
<n-timeline-item
|
||||
type="warning"
|
||||
timestamp="2018-04-03 20:46"
|
||||
>
|
||||
123
|
||||
</n-timeline-item>
|
||||
<n-timeline-item
|
||||
type="info"
|
||||
timestamp="2018-04-03 20:46"
|
||||
>
|
||||
123
|
||||
</n-timeline-item>
|
||||
</n-timeline>
|
||||
<!--EXAMPLE_END-->
|
||||
</div>
|
||||
<pre class="n-doc-section__inspect">Inspect some value here</pre>
|
||||
|
||||
4
index.js
4
index.js
@ -43,6 +43,8 @@ import Badge from './packages/common/Badge'
|
||||
import Tag from './packages/common/Tag'
|
||||
import BackTop from './packages/common/BackTop'
|
||||
import Divider from './packages/common/Divider'
|
||||
import Collapse from './packages/common/Collapse'
|
||||
import Timeline from './packages/common/Timeline'
|
||||
|
||||
function install (Vue) {
|
||||
Card.install(Vue)
|
||||
@ -90,6 +92,8 @@ function install (Vue) {
|
||||
Tag.install(Vue)
|
||||
BackTop.install(Vue)
|
||||
Divider.install(Vue)
|
||||
Collapse.install(Vue)
|
||||
Timeline.install(Vue)
|
||||
}
|
||||
|
||||
export default {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "naive-ui",
|
||||
"version": "0.2.89",
|
||||
"version": "0.2.92",
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
|
||||
10
packages/common/Collapse/index.js
Normal file
10
packages/common/Collapse/index.js
Normal file
@ -0,0 +1,10 @@
|
||||
/* istanbul ignore file */
|
||||
import Collapse from './src/main.vue'
|
||||
import CollapseItem from './src/CollapseItem.vue'
|
||||
|
||||
Collapse.install = function (Vue) {
|
||||
Vue.component(Collapse.name, Collapse)
|
||||
Vue.component(CollapseItem.name, CollapseItem)
|
||||
}
|
||||
|
||||
export default Collapse
|
||||
73
packages/common/Collapse/src/CollapseItem.vue
Normal file
73
packages/common/Collapse/src/CollapseItem.vue
Normal file
@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<div
|
||||
class="n-collapse-item"
|
||||
:class="{
|
||||
'n-collapse-item--active': value
|
||||
}"
|
||||
>
|
||||
<div
|
||||
class="n-collapse-item__title"
|
||||
@click="handleTitleClick"
|
||||
>
|
||||
<n-icon type="ios-arrow-forward" />{{ title }}
|
||||
</div>
|
||||
<div
|
||||
ref="contentWrapper"
|
||||
class="n-collapse-item__content-wrapper"
|
||||
>
|
||||
<div
|
||||
ref="content"
|
||||
class="n-collapse-item__content-inner"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import NIcon from '../../Icon'
|
||||
|
||||
export default {
|
||||
name: 'NCollapseItem',
|
||||
components: {
|
||||
NIcon
|
||||
},
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
value: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value (newValue) {
|
||||
if (newValue && this.$refs.contentWrapper && this.$refs.content) {
|
||||
this.$refs.contentWrapper.style.maxHeight = this.$refs.content.getBoundingClientRect().height + 'px'
|
||||
} else {
|
||||
this.$refs.contentWrapper.style.maxHeight = 0
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
if (this.value && this.$refs.contentWrapper && this.$refs.content) {
|
||||
this.$refs.contentWrapper.style.maxHeight = this.$refs.content.getBoundingClientRect().height + 'px'
|
||||
} else {
|
||||
this.$refs.contentWrapper.style.maxHeight = 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleTitleClick () {
|
||||
const newValue = !this.value
|
||||
this.$emit('input', newValue, this.name)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
76
packages/common/Collapse/src/main.vue
Normal file
76
packages/common/Collapse/src/main.vue
Normal file
@ -0,0 +1,76 @@
|
||||
<script>
|
||||
function mapSlot (slot, activeNames, isAccordion, handleInput, self) {
|
||||
const names = []
|
||||
for (const vNode of slot) {
|
||||
if (vNode.componentOptions && (vNode.componentOptions.tag === 'NCollapseItem' || vNode.componentOptions.tag === 'n-collapse-item')) {
|
||||
const name = vNode.componentOptions.propsData.name
|
||||
names.push(name)
|
||||
vNode.componentOptions.listeners = {
|
||||
...vNode.componentOptions.listeners,
|
||||
input: handleInput
|
||||
}
|
||||
if (isAccordion) {
|
||||
console.log(name, activeNames)
|
||||
if (name === activeNames) {
|
||||
vNode.componentOptions.propsData.value = true
|
||||
}
|
||||
} else {
|
||||
if (Array.isArray(activeNames) && activeNames.includes(name)) {
|
||||
vNode.componentOptions.propsData.value = true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
self.memorizedNames = names
|
||||
return slot
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'NCollapse',
|
||||
props: {
|
||||
value: {
|
||||
type: [Array, String],
|
||||
default: null
|
||||
},
|
||||
accordion: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
memorizedNames: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleInput (value, name) {
|
||||
if (this.accordion) {
|
||||
if (value) {
|
||||
this.$emit('input', name)
|
||||
} else {
|
||||
this.$emit('input', null)
|
||||
}
|
||||
} else {
|
||||
if (!Array.isArray(this.value)) {
|
||||
this.$emit('input', [name])
|
||||
} else {
|
||||
const activeNames = Array.from(new Set(this.value.filter(v => this.memorizedNames.includes(v))))
|
||||
const index = activeNames.findIndex(activeName => name === activeName)
|
||||
if (~index) {
|
||||
activeNames.splice(index, 1)
|
||||
this.$emit('input', activeNames)
|
||||
} else {
|
||||
activeNames.push(name)
|
||||
this.$emit('input', activeNames)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
render (h) {
|
||||
return h('div', {
|
||||
staticClass: 'n-collapse'
|
||||
}, mapSlot(this.$slots.default, this.value, this.accordion, this.handleInput, this))
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -8,6 +8,7 @@
|
||||
class="n-popover__activator"
|
||||
@click="handleActivatorClick"
|
||||
@mouseenter="handleMouseEnter"
|
||||
@mouseleave="handleMouseLeavePopover"
|
||||
>
|
||||
<slot name="activator" />
|
||||
</div>
|
||||
@ -39,6 +40,7 @@
|
||||
}"
|
||||
:style="style"
|
||||
@mouseenter="handleMouseEnter"
|
||||
@mouseleave="handleMouseLeavePopover"
|
||||
>
|
||||
<div
|
||||
v-if="arrow"
|
||||
@ -160,7 +162,6 @@ export default {
|
||||
},
|
||||
handleMouseEnter () {
|
||||
if (this.trigger === 'hover') {
|
||||
console.log(this.delay)
|
||||
if (this.vanishTimerId) {
|
||||
window.clearTimeout(this.vanishTimerId)
|
||||
this.vanishTimerId = null
|
||||
@ -181,8 +182,7 @@ export default {
|
||||
this.deactivate()
|
||||
clickoutsideDelegate.unregisterHandler(this.handleClickOutsidePopover)
|
||||
},
|
||||
handleMoveOutsidePopover (e) {
|
||||
console.log('move out side')
|
||||
hidePopover () {
|
||||
if (this.vanishTimerId !== null) {
|
||||
window.clearTimeout(this.vanishTimerId)
|
||||
this.vanishTimerId = null
|
||||
@ -196,6 +196,16 @@ export default {
|
||||
this.deactivate()
|
||||
}, this.duration)
|
||||
},
|
||||
handleMouseLeavePopover (e) {
|
||||
if (this.trigger === 'hover') {
|
||||
this.hidePopover()
|
||||
}
|
||||
},
|
||||
handleMoveOutsidePopover (e) {
|
||||
if (this.trigger === 'hover') {
|
||||
this.hidePopover()
|
||||
}
|
||||
},
|
||||
handleActivatorClick () {
|
||||
if (this.trigger === 'click') {
|
||||
if (!this.active) {
|
||||
|
||||
@ -4,9 +4,9 @@
|
||||
class="n-select"
|
||||
:class="{
|
||||
[`n-select--${size}-size`]: true,
|
||||
[`n-select--remote`]: remote,
|
||||
'n-select--disabled': disabled
|
||||
}"
|
||||
:style="{'cursor':cursor}"
|
||||
@click="handleActivatorClick"
|
||||
@keyup.up.prevent="handleActivatorKeyUpUp"
|
||||
@keyup.down.prevent="handleActivatorKeyUpDown"
|
||||
@ -63,9 +63,6 @@
|
||||
</div>
|
||||
<div
|
||||
class="n-select-link__placeholder"
|
||||
:class="{
|
||||
'n-select-link__placeholder--verbose-transition': verboseTransition
|
||||
}"
|
||||
>
|
||||
{{ placeholder }}
|
||||
</div>
|
||||
@ -103,24 +100,26 @@
|
||||
:style="{ top: `${lightBarTop}px` }"
|
||||
/>
|
||||
</transition>
|
||||
<template v-if="!loading">
|
||||
<div
|
||||
v-for="(item, index) in filteredItems"
|
||||
ref="menuItems"
|
||||
:key="item.value"
|
||||
:data-index="index"
|
||||
class="n-select-menu__item"
|
||||
:class="{
|
||||
'n-select-menu__item--selected':
|
||||
isSelected(item)
|
||||
}"
|
||||
@click="toggleItem(item)"
|
||||
@mousemove="showLightBarTop($event, item, index)"
|
||||
>
|
||||
{{ item.label }}
|
||||
</div>
|
||||
</template>
|
||||
<div
|
||||
v-for="(item, index) in filteredItems"
|
||||
ref="menuItems"
|
||||
:key="item.value"
|
||||
:data-index="index"
|
||||
class="n-select-menu__item"
|
||||
:class="{
|
||||
'n-select-menu__item--selected':
|
||||
isSelected(item)
|
||||
}"
|
||||
@click="toggleItem(item)"
|
||||
@mousemove="showLightBarTop($event, item, index)"
|
||||
>
|
||||
{{ item.label }}
|
||||
</div>
|
||||
<div
|
||||
v-if="pattern.length && !filteredItems.length"
|
||||
class="n-select-menu__item n-select-menu__item--not-found"
|
||||
v-if="loading"
|
||||
class="n-select-menu__item n-select-menu__item--loading"
|
||||
>
|
||||
{{
|
||||
/**
|
||||
@ -129,7 +128,25 @@
|
||||
*/
|
||||
hideLightBar()
|
||||
}}
|
||||
none result matched
|
||||
loading
|
||||
</div>
|
||||
<div
|
||||
v-else-if="items && items.length === 0"
|
||||
class="n-select-menu__item n-select-menu__item--no-data"
|
||||
>
|
||||
{{
|
||||
hideLightBar()
|
||||
}}
|
||||
{{ noDataContent }}
|
||||
</div>
|
||||
<div
|
||||
v-else-if="pattern.length && !filteredItems.length"
|
||||
class="n-select-menu__item n-select-menu__item--not-found"
|
||||
>
|
||||
{{
|
||||
hideLightBar()
|
||||
}}
|
||||
{{ notFoundContent }}
|
||||
</div>
|
||||
</div>
|
||||
</scrollbar>
|
||||
@ -203,9 +220,25 @@ export default {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
cursor: {
|
||||
type: String,
|
||||
default: 'inherit'
|
||||
remote: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
onSearch: {
|
||||
type: Function,
|
||||
default: null
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
noDataContent: {
|
||||
type: [String, Function],
|
||||
default: 'no data'
|
||||
},
|
||||
notFoundContent: {
|
||||
type: [String, Function],
|
||||
default: 'none result matched'
|
||||
}
|
||||
},
|
||||
data () {
|
||||
@ -215,21 +248,19 @@ export default {
|
||||
scrolling: false,
|
||||
pattern: '',
|
||||
pendingItem: null,
|
||||
pendingItemIndex: null
|
||||
pendingItemIndex: null,
|
||||
memorizedValueItemMap: new Map()
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
filteredItems () {
|
||||
if (!this.filterable || !this.pattern.trim().length) return this.items
|
||||
if (this.remote) {
|
||||
return this.items
|
||||
} else if (!this.filterable || !this.pattern.trim().length) return this.items
|
||||
return this.items.filter(item => this.patternMatched(item.label))
|
||||
},
|
||||
selected () {
|
||||
if (Array.isArray(this.value)) {
|
||||
const itemValues = new Set(this.items.map(item => item.value))
|
||||
return this.value.filter(value => itemValues.has(value)).length
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
return this.selectedItems.length
|
||||
},
|
||||
valueItemMap () {
|
||||
const valueToItem = new Map()
|
||||
@ -238,7 +269,13 @@ export default {
|
||||
},
|
||||
selectedItems () {
|
||||
if (!Array.isArray(this.value)) return []
|
||||
return this.value.filter(value => this.valueItemMap.has(value)).map(value => this.valueItemMap.get(value))
|
||||
if (this.remote) {
|
||||
return this.value
|
||||
.filter(value => this.valueItemMap.has(value) || this.memorizedValueItemMap.has(value))
|
||||
.map(value => this.valueItemMap.has(value) ? this.valueItemMap.get(value) : this.memorizedValueItemMap.get(value))
|
||||
} else {
|
||||
return this.value.filter(value => this.valueItemMap.has(value)).map(value => this.valueItemMap.get(value))
|
||||
}
|
||||
},
|
||||
clearedPattern () {
|
||||
return this.pattern.toLowerCase().trim()
|
||||
@ -332,10 +369,13 @@ export default {
|
||||
},
|
||||
toggleItem (item) {
|
||||
if (this.disabled) return
|
||||
if (this.remote) {
|
||||
this.memorizedValueItemMap.set(item.value, item)
|
||||
}
|
||||
let newValue = []
|
||||
if (Array.isArray(this.value)) {
|
||||
const itemValues = new Set(this.items.map(item => item.value))
|
||||
newValue = this.value.filter(value => itemValues.has(value))
|
||||
newValue = this.value.filter(value => itemValues.has(value) || this.memorizedValueItemMap.has(value))
|
||||
}
|
||||
const index = newValue.findIndex(value => value === item.value)
|
||||
if (~index) {
|
||||
@ -365,6 +405,9 @@ export default {
|
||||
this.$nextTick().then(() => {
|
||||
const textWidth = this.$refs.inputTagMirror.getBoundingClientRect().width
|
||||
this.$refs.inputTagInput.style.width = textWidth + 'px'
|
||||
if (this.onSearch) {
|
||||
this.onSearch(this.pattern)
|
||||
}
|
||||
})
|
||||
},
|
||||
handlePatternInputDelete (e) {
|
||||
|
||||
@ -6,7 +6,6 @@
|
||||
[`n-select--${size}-size`]: true,
|
||||
'n-select--disabled': disabled
|
||||
}"
|
||||
:style="{'cursor':cursor}"
|
||||
@click="toggleMenu"
|
||||
>
|
||||
<div
|
||||
@ -154,11 +153,18 @@ export default {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
cursor: {
|
||||
type: String,
|
||||
default: 'inherit'
|
||||
remote: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
onSearch: {
|
||||
type: Function,
|
||||
default: null
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
||||
@ -16,8 +16,11 @@ export default {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
// eslint-disable-next-line vue/require-prop-types
|
||||
value: {
|
||||
validator () {
|
||||
return true
|
||||
},
|
||||
required: false,
|
||||
default: null
|
||||
},
|
||||
placeholder: {
|
||||
@ -48,9 +51,21 @@ export default {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
cursor: {
|
||||
type: String,
|
||||
default: 'inherit'
|
||||
remote: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
onSearch: {
|
||||
type: Function,
|
||||
default: null
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
noDataContent: {
|
||||
type: [String, Function],
|
||||
default: 'no data'
|
||||
}
|
||||
},
|
||||
data () {
|
||||
|
||||
10
packages/common/Timeline/index.js
Normal file
10
packages/common/Timeline/index.js
Normal file
@ -0,0 +1,10 @@
|
||||
/* istanbul ignore file */
|
||||
import Timeline from './src/main.vue'
|
||||
import TimelineItem from './src/TimelineItem.vue'
|
||||
|
||||
Timeline.install = function (Vue) {
|
||||
Vue.component(Timeline.name, Timeline)
|
||||
Vue.component(TimelineItem.name, TimelineItem)
|
||||
}
|
||||
|
||||
export default Timeline
|
||||
39
packages/common/Timeline/src/TimelineItem.vue
Normal file
39
packages/common/Timeline/src/TimelineItem.vue
Normal file
@ -0,0 +1,39 @@
|
||||
<template>
|
||||
<div
|
||||
class="n-timeline-item"
|
||||
:class="{
|
||||
[`n-timeline-item--${type}-type`]: type
|
||||
}"
|
||||
>
|
||||
<div class="n-timeline-item-timeline">
|
||||
<div class="n-timeline-item-timeline__line" />
|
||||
<div class="n-timeline-item-timeline__circle" />
|
||||
</div>
|
||||
<div class="n-timeline-item-content">
|
||||
<div class="n-timeline-item-content__body">
|
||||
<slot />
|
||||
</div>
|
||||
<div class="n-timeline-item-content__meta">
|
||||
{{ timestamp }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'NTimelineItem',
|
||||
props: {
|
||||
timestamp: {
|
||||
type: [String, Number],
|
||||
default: null
|
||||
},
|
||||
type: {
|
||||
validator (type) {
|
||||
return ['success', 'error', 'warning', 'info'].includes(type)
|
||||
},
|
||||
default: null
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
11
packages/common/Timeline/src/main.vue
Normal file
11
packages/common/Timeline/src/main.vue
Normal file
@ -0,0 +1,11 @@
|
||||
<template>
|
||||
<div class="n-timeline">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'NTimeline'
|
||||
}
|
||||
</script>
|
||||
@ -3,7 +3,7 @@
|
||||
|
||||
@include b(checkbox-group) {
|
||||
.n-checkbox {
|
||||
margin-right: 28px;
|
||||
margin-right: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
color: #fff;
|
||||
margin-left: 6px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
.n-checkbox__checkbox {
|
||||
cursor: pointer;
|
||||
|
||||
44
styles/Collapse.scss
Normal file
44
styles/Collapse.scss
Normal file
@ -0,0 +1,44 @@
|
||||
@import './mixins/mixins.scss';
|
||||
@import './theme/default.scss';
|
||||
|
||||
@include b(collapse) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@include b(collapse-item) {
|
||||
font-size: 14px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
||||
padding-top: 16px;
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
&.n-collapse-item--active {
|
||||
.n-collapse-item__title {
|
||||
.n-icon {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
.n-collapse-item__title {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
.n-icon {
|
||||
transition: transform .3s $default-cubic-bezier;
|
||||
font-size: 16px;
|
||||
position: absolute;
|
||||
left: -18px;
|
||||
bottom: 0;
|
||||
}
|
||||
color: rgba(233, 233, 236, 1);
|
||||
margin-left: 18px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.n-collapse-item__content-wrapper {
|
||||
overflow: hidden;
|
||||
transition: max-height .3s $default-cubic-bezier;
|
||||
}
|
||||
.n-collapse-item__content-inner {
|
||||
color: rgba(233, 233, 236, .7);
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
}
|
||||
@ -6,6 +6,7 @@
|
||||
margin: auto;
|
||||
border-radius: 9px;
|
||||
padding: 28px;
|
||||
padding-bottom: 20px;
|
||||
padding-top: 16px;
|
||||
background: rgba(92, 101, 126, 1);
|
||||
box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.16);
|
||||
@ -27,7 +28,7 @@
|
||||
.n-confirm__content {
|
||||
font-size: 16px;
|
||||
padding-right: 9px;
|
||||
margin-top: 20px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 19px;
|
||||
position: relative;
|
||||
/* padding-left: 29px; */
|
||||
|
||||
@ -15,8 +15,8 @@
|
||||
.n-divider__content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 4px;
|
||||
margin-right: 4px;
|
||||
margin-left: 12px;
|
||||
margin-right: 12px;
|
||||
white-space: nowrap;
|
||||
color: rgba(233, 233, 236, 1);
|
||||
font-weight: bold;
|
||||
@ -24,14 +24,14 @@
|
||||
&.n-divider--content-position-left {
|
||||
.n-divider__line {
|
||||
&.n-divider__line--left {
|
||||
width: 14px;
|
||||
width: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.n-divider--content-position-right {
|
||||
.n-divider__line {
|
||||
&.n-divider__line--right {
|
||||
width: 14px;
|
||||
width: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -16,6 +16,7 @@
|
||||
width: 46px;
|
||||
padding-left: 14px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
font-size: 24px;
|
||||
}
|
||||
.n-progress-text {
|
||||
|
||||
@ -10,6 +10,13 @@
|
||||
font-family: $default-font-family;
|
||||
text-align: start;
|
||||
cursor: pointer;
|
||||
&.n-select--remote {
|
||||
.n-select-link {
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.n-select--disabled {
|
||||
cursor: not-allowed;
|
||||
.n-select-link {
|
||||
@ -295,10 +302,18 @@
|
||||
&.n-select-menu__item--selected {
|
||||
color: #63E2B7FF;
|
||||
}
|
||||
&.n-select-menu__item--no-data {
|
||||
color: rgba(255, 255, 255, .5);
|
||||
text-align: center;
|
||||
}
|
||||
&.n-select-menu__item--not-found {
|
||||
color: rgba(255, 255, 255, .5);
|
||||
text-align: center;
|
||||
}
|
||||
&.n-select-menu__item--loading {
|
||||
color: rgba(255, 255, 255, .5);
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.n-select-menu__light-bar {
|
||||
position: absolute;
|
||||
|
||||
@ -8,13 +8,13 @@
|
||||
font-size: 14px;
|
||||
padding: 0 7px;
|
||||
border-radius: 4px;
|
||||
box-shadow: inset 0 0 0 1px rgba(99,226,183,1);
|
||||
color: rgba(99, 226, 183, 1);
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
transition: background-color .3s $default-cubic-bezier;
|
||||
&.n-tag--closable {
|
||||
padding-right: 18px;
|
||||
.n-tag__close-mark {
|
||||
transition: color .3s $default-cubic-bezier;
|
||||
right: 3px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
@ -24,20 +24,84 @@
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
& {
|
||||
box-shadow: inset 0 0 0 1px rgba(99,226,183,1);
|
||||
color: rgba(99, 226, 183, 1);
|
||||
.n-tag__close-mark {
|
||||
color: rgba(99, 226, 183, 0.5);
|
||||
&:hover {
|
||||
color: rgba(99, 226, 183, 1);
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background-color: rgba(99, 226, 183, 0.3);
|
||||
}
|
||||
&:active {
|
||||
background-color: rgba(99, 226, 183, 0.2);
|
||||
}
|
||||
}
|
||||
&.n-tag--success-type {
|
||||
box-shadow: inset 0 0 0 1px rgba(99, 226, 183, 1);
|
||||
color: rgba(99, 226, 183, 1);
|
||||
.n-tag__close-mark {
|
||||
color: rgba(99, 226, 183, 0.5);
|
||||
&:hover {
|
||||
color: rgba(99, 226, 183, 1);
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background-color: rgba(99, 226, 183, 0.3);
|
||||
}
|
||||
&:active {
|
||||
background-color: rgba(99, 226, 183, 0.2);
|
||||
}
|
||||
}
|
||||
&.n-tag--info-type {
|
||||
box-shadow: inset 0 0 0 1px rgba(98, 187, 252, 1);
|
||||
color: rgba(98, 187, 252, 1);
|
||||
.n-tag__close-mark {
|
||||
color: rgba(98, 187, 252, 0.5);
|
||||
&:hover {
|
||||
color: rgba(98, 187, 252, 1);
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background-color: rgba(98, 187, 252, 0.3);
|
||||
}
|
||||
&:active {
|
||||
background-color: rgba(98, 187, 252, 0.2);
|
||||
}
|
||||
}
|
||||
&.n-tag--warning-type {
|
||||
box-shadow: inset 0 0 0 1px rgba(245, 166, 35, 1);
|
||||
color: rgba(245, 166, 35, 1);
|
||||
.n-tag__close-mark {
|
||||
color: rgba(245, 166, 35, 0.5);
|
||||
&:hover {
|
||||
color: rgba(245, 166, 35, 1);
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background-color: rgba(245, 166, 35, 0.3);
|
||||
}
|
||||
&:active {
|
||||
background-color: rgba(245, 166, 35, 0.2);
|
||||
}
|
||||
}
|
||||
&.n-tag--error-type {
|
||||
box-shadow: inset 0 0 0 1px rgba(255, 146, 164, 1);
|
||||
color: rgba(255, 146, 164, 1)
|
||||
color: rgba(255, 146, 164, 1);
|
||||
.n-tag__close-mark {
|
||||
color: rgba(255, 146, 164, 0.5);
|
||||
&:hover {
|
||||
color: rgba(255, 146, 164, 1);
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background-color: rgba(255, 146, 164, 0.3);
|
||||
}
|
||||
&:active {
|
||||
background-color: rgba(255, 146, 164, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
85
styles/Timeline.scss
Normal file
85
styles/Timeline.scss
Normal file
@ -0,0 +1,85 @@
|
||||
@import './mixins/mixins.scss';
|
||||
@import './theme/default.scss';
|
||||
|
||||
@include b(timeline) {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
@include b(timeline-item) {
|
||||
position: relative;
|
||||
&.n-timeline-item--success-type {
|
||||
.n-timeline-item-timeline {
|
||||
.n-timeline-item-timeline__circle {
|
||||
border-color: rgba(99, 226, 183, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.n-timeline-item--error-type {
|
||||
.n-timeline-item-timeline {
|
||||
.n-timeline-item-timeline__circle {
|
||||
border-color: rgba(255, 146, 164, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.n-timeline-item--warning-type {
|
||||
.n-timeline-item-timeline {
|
||||
.n-timeline-item-timeline__circle {
|
||||
border-color: rgba(255, 138, 0, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.n-timeline-item--info-type {
|
||||
.n-timeline-item-timeline {
|
||||
.n-timeline-item-timeline__circle {
|
||||
border-color: rgba(98, 187, 252, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
.n-timeline-item-timeline {
|
||||
.n-timeline-item-timeline__line {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.n-timeline-item-content {
|
||||
.n-timeline-item-content__body {
|
||||
font-size: 14px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
margin-left: 26px;
|
||||
}
|
||||
.n-timeline-item-content__meta {
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, .5);
|
||||
margin-top: 6px;
|
||||
margin-left: 26px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
.n-timeline-item-timeline {
|
||||
width: 26px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 2px;
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
.n-timeline-item-timeline__circle {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 7px;
|
||||
box-sizing: border-box;
|
||||
border: 2px solid rgba(99, 226, 183, 1);
|
||||
}
|
||||
.n-timeline-item-timeline__line {
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
left: 6px;
|
||||
bottom: 0px;
|
||||
width: 2px;
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -33,6 +33,8 @@
|
||||
@import './Tag.scss';
|
||||
@import './BackTop.scss';
|
||||
@import './Divider.scss';
|
||||
@import './Collapse.scss';
|
||||
@import './Timeline.scss';
|
||||
|
||||
@import "./NimbusServiceLayout.scss";
|
||||
@import "./Popover.scss";
|
||||
|
||||
Loading…
Reference in New Issue
Block a user