mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2024-12-15 04:42:23 +08:00
Merge branch 'develop' of ***REMOVED*** into develop
This commit is contained in:
haibo tang
commit
1cc6dcfa0c
@ -73,13 +73,13 @@ Vue.use(naiveUi)
|
||||
|Breadcrumb|🚧|||
|
||||
|Badge|😍|||
|
||||
|Steps|😍|||
|
||||
|Tag|🚧|||
|
||||
|Tag|😍|||
|
||||
|Divider|🚧|||
|
||||
|Statistic|🚧|||
|
||||
|PopConfirm|🚧|||
|
||||
|Anchor|🚧|||
|
||||
|BackTop|🚧|||
|
||||
|Progress|🚧|||
|
||||
|BackTop|😍|||
|
||||
|Progress|😍|||
|
||||
|Timeline|🚧|||
|
||||
|Card|🚧|||
|
||||
|Collapse|🚧|||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div style="overflow: hidden;">
|
||||
<div
|
||||
style="width: 100%; border-radius: 8px; border: 2px solid #5c657eff; height: 39px; background-color: black; margin-bottom: 12px; display: flex; align-items: center; justify-content: center; cursor: pointer;"
|
||||
style="width: 100%; box-sizing: border-box; border-radius: 8px; border: 2px solid #5c657eff; height: 39px; background-color: black; margin-bottom: 12px; display: flex; align-items: center; justify-content: center; cursor: pointer;"
|
||||
@click="collapse = !collapse"
|
||||
>
|
||||
<span v-if="collapse">Click to Expand</span>
|
||||
|
||||
18
demo/components/backTopDemo/basicUsage.demo.vue
Normal file
18
demo/components/backTopDemo/basicUsage.demo.vue
Normal file
@ -0,0 +1,18 @@
|
||||
<template>
|
||||
<div class="n-doc-section">
|
||||
<div class="n-doc-section__header">
|
||||
Basic Usage
|
||||
</div>
|
||||
<!--EXAMPLE_START-->
|
||||
<n-back-top content-selector=".n-doc" />
|
||||
<!--EXAMPLE_END-->
|
||||
<n-doc-source-block>
|
||||
<!--SOURCE-->
|
||||
</n-doc-source-block>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
}
|
||||
</script>
|
||||
27
demo/components/backTopDemo/changePosition.demo.vue
Normal file
27
demo/components/backTopDemo/changePosition.demo.vue
Normal file
@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<div class="n-doc-section">
|
||||
<div class="n-doc-section__header">
|
||||
3. Change Position
|
||||
</div>
|
||||
<!--EXAMPLE_START-->
|
||||
<n-back-top
|
||||
content-selector=".n-doc"
|
||||
:right="40"
|
||||
:bottom="100"
|
||||
:visibility-height="200"
|
||||
>
|
||||
<div style="width: 40px; height: 40px; line-height: 40px; text-align: center;">
|
||||
3
|
||||
</div>
|
||||
</n-back-top>
|
||||
<!--EXAMPLE_END-->
|
||||
<n-doc-source-block>
|
||||
<!--SOURCE-->
|
||||
</n-doc-source-block>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
}
|
||||
</script>
|
||||
42
demo/components/backTopDemo/index.vue
Normal file
42
demo/components/backTopDemo/index.vue
Normal file
@ -0,0 +1,42 @@
|
||||
<template>
|
||||
<div
|
||||
ref="doc"
|
||||
class="n-doc"
|
||||
>
|
||||
<div class="n-doc-header">
|
||||
<n-gradient-text :font-size="20">
|
||||
BackTop / n-back-top
|
||||
</n-gradient-text>
|
||||
</div>
|
||||
<div class="n-doc-body">
|
||||
<basic-usage />
|
||||
<target-container-selector />
|
||||
<change-position />
|
||||
<visibility-height />
|
||||
<div style="height: 1200px; width: 100%;" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import basicUsage from './basicUsage.demo.vue'
|
||||
import changePosition from './changePosition.demo.vue'
|
||||
import visibilityHeight from './visibilityHeight.demo.vue'
|
||||
import targetContainerSelector from './targetContainerSelector.demo'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
basicUsage,
|
||||
changePosition,
|
||||
visibilityHeight,
|
||||
targetContainerSelector
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
60
demo/components/backTopDemo/targetContainerSelector.demo.vue
Normal file
60
demo/components/backTopDemo/targetContainerSelector.demo.vue
Normal file
@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<div class="n-doc-section">
|
||||
<div class="n-doc-section__header">
|
||||
2. About `content-selector` and `container-selector`
|
||||
</div>
|
||||
<!--EXAMPLE_START-->
|
||||
<n-back-top
|
||||
content-selector=".n-doc"
|
||||
:right="100"
|
||||
>
|
||||
<div style="width: 40px; height: 40px; line-height: 40px; text-align: center;">
|
||||
2.1
|
||||
</div>
|
||||
</n-back-top>
|
||||
<n-back-top
|
||||
container-selector=".n-scrollbar-container"
|
||||
:right="160"
|
||||
>
|
||||
<div style="width: 40px; height: 40px; line-height: 40px; text-align: center;">
|
||||
2.2
|
||||
</div>
|
||||
</n-back-top>
|
||||
<!--EXAMPLE_END-->
|
||||
<pre
|
||||
class="n-doc-section__inspect"
|
||||
>{{ explain }}</pre>
|
||||
<n-doc-source-block>
|
||||
<!--SOURCE-->
|
||||
</n-doc-source-block>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const explain = `确定 <n-back-top /> 会让哪一个元素的 scrollTop 为 0，有两种方式。
|
||||
第一种是使用 content-selector，在你无法控制外部容器的时候尽量使用它。
|
||||
例如
|
||||
<others-layout>
|
||||
<your-content class="content" />
|
||||
<n-back-top content-selector=".content" />
|
||||
</others-layout>
|
||||
当你不方便控制 <others-layout> 的时候，使用 content-selector 来选择你希望滚动的内容，
|
||||
naive-ui 会自动帮你找到它首个可滚动的祖先节点。
|
||||
|
||||
<your-container class="container">
|
||||
<your-content>
|
||||
</your-content>
|
||||
<n-back-top container-selector=".container" />
|
||||
</your-container>
|
||||
当你可以控制滚动容器的时候，可以使用 container-selector 来选择你合适的滚动容器。
|
||||
当然，如果滚动的是 document，你什么都不用写。
|
||||
`
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
explain
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
27
demo/components/backTopDemo/visibilityHeight.demo.vue
Normal file
27
demo/components/backTopDemo/visibilityHeight.demo.vue
Normal file
@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<div class="n-doc-section">
|
||||
<div class="n-doc-section__header">
|
||||
4. Visibility Height
|
||||
</div>
|
||||
<!--EXAMPLE_START-->
|
||||
<n-back-top
|
||||
:right="100"
|
||||
:bottom="100"
|
||||
content-selector=".n-doc"
|
||||
:visibility-height="600"
|
||||
>
|
||||
<div style="width: 40px; height: 40px; line-height: 40px; text-align: center;">
|
||||
4
|
||||
</div>
|
||||
</n-back-top>
|
||||
<!--EXAMPLE_END-->
|
||||
<n-doc-source-block>
|
||||
<!--SOURCE-->
|
||||
</n-doc-source-block>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
}
|
||||
</script>
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="n-doc-section">
|
||||
<div class="n-doc-section__header">
|
||||
Scaffold
|
||||
Basic Usage
|
||||
</div>
|
||||
<div
|
||||
class="n-doc-section__view"
|
||||
@ -5,21 +5,21 @@
|
||||
>
|
||||
<div class="n-doc-header">
|
||||
<n-gradient-text :font-size="20">
|
||||
scaffold
|
||||
basicUsage
|
||||
</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 {
|
||||
|
||||
39
demo/components/dividerDemo/basicUsage.demo.vue
Normal file
39
demo/components/dividerDemo/basicUsage.demo.vue
Normal file
@ -0,0 +1,39 @@
|
||||
<template>
|
||||
<div class="n-doc-section">
|
||||
<div class="n-doc-section__header">
|
||||
Basic Usage
|
||||
</div>
|
||||
<div
|
||||
class="n-doc-section__view"
|
||||
>
|
||||
<!--EXAMPLE_START-->
|
||||
<n-divider />
|
||||
<n-divider>A Happy Ending</n-divider>
|
||||
<n-divider content-position="left">
|
||||
A Happy Ending
|
||||
</n-divider>
|
||||
<n-divider content-position="right">
|
||||
A Happy Ending
|
||||
</n-divider>
|
||||
<n-divider dashed>
|
||||
A Happy Ending
|
||||
</n-divider>
|
||||
<div style="width: 100%;">
|
||||
A<n-divider vertical />Happy<n-divider vertical />Ending
|
||||
</div>
|
||||
<!--EXAMPLE_END-->
|
||||
</div>
|
||||
<n-doc-source-block>
|
||||
<!--SOURCE-->
|
||||
</n-doc-source-block>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
32
demo/components/dividerDemo/index.vue
Normal file
32
demo/components/dividerDemo/index.vue
Normal file
@ -0,0 +1,32 @@
|
||||
<template>
|
||||
<div
|
||||
ref="doc"
|
||||
class="n-doc"
|
||||
>
|
||||
<div class="n-doc-header">
|
||||
<n-gradient-text :font-size="20">
|
||||
Divider / n-divider
|
||||
</n-gradient-text>
|
||||
</div>
|
||||
<div class="n-doc-body">
|
||||
<basic-usage />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import basicUsage from './basicUsage.demo.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
basicUsage
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="n-doc-section">
|
||||
<div class="n-doc-section__header">
|
||||
Custom Multiple Labels
|
||||
Custom Usage
|
||||
</div>
|
||||
<div
|
||||
class="n-doc-section__view"
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
>
|
||||
<div class="n-doc-header">
|
||||
<n-gradient-text :font-size="20">
|
||||
Select / n-select
|
||||
InputKeyValuePairs / n-input-key-value-pairs
|
||||
</n-gradient-text>
|
||||
</div>
|
||||
<div
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="n-doc-section">
|
||||
<div class="n-doc-section__header">
|
||||
Multiple Labels
|
||||
Default Usage
|
||||
</div>
|
||||
<div
|
||||
class="n-doc-section__view"
|
||||
|
||||
32
demo/debugComponents/backTopDebug/index.vue
Normal file
32
demo/debugComponents/backTopDebug/index.vue
Normal file
@ -0,0 +1,32 @@
|
||||
<template>
|
||||
<div
|
||||
ref="doc"
|
||||
class="n-doc"
|
||||
>
|
||||
<div class="n-doc-header">
|
||||
<n-gradient-text :font-size="20">
|
||||
BackTopDebug
|
||||
</n-gradient-text>
|
||||
</div>
|
||||
<div
|
||||
class="n-doc-body"
|
||||
style="height: 2400px;"
|
||||
/>
|
||||
<n-back-top />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
components: {
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
32
demo/debugComponents/datePickerDebug/index.vue
Normal file
32
demo/debugComponents/datePickerDebug/index.vue
Normal file
@ -0,0 +1,32 @@
|
||||
<template>
|
||||
<div
|
||||
ref="doc"
|
||||
class="n-doc"
|
||||
>
|
||||
<div class="n-doc-header">
|
||||
<n-gradient-text :font-size="20">
|
||||
DatePickerDebug
|
||||
</n-gradient-text>
|
||||
</div>
|
||||
<div class="n-doc-body">
|
||||
<range />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import range from './range.demo.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
range
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
46
demo/debugComponents/datePickerDebug/range.demo.vue
Normal file
46
demo/debugComponents/datePickerDebug/range.demo.vue
Normal file
@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<div class="n-doc-section">
|
||||
<div class="n-doc-section__header">
|
||||
DateTime Range
|
||||
</div>
|
||||
<div
|
||||
class="n-doc-section__view"
|
||||
style="flex-wrap: wrap;"
|
||||
>
|
||||
<!--EXAMPLE_START-->
|
||||
<n-date-picker
|
||||
v-model="range1"
|
||||
type="datetimerange"
|
||||
style="margin-bottom: 12px;"
|
||||
/>
|
||||
<!--EXAMPLE_END-->
|
||||
</div>
|
||||
<pre class="n-doc-section__inspect">range1 v-model: {{ JSON.stringify(range1) }}
|
||||
range2 v-model: {{ JSON.stringify(range2) }}
|
||||
range3 v-model: {{ JSON.stringify(range3) }}</pre>
|
||||
<n-doc-source-block>
|
||||
<!--SOURCE-->
|
||||
</n-doc-source-block>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/*
|
||||
* padding
|
||||
* padding
|
||||
* padding
|
||||
* padding
|
||||
* padding
|
||||
*/
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
range1: null,
|
||||
range2: [1562774466000, 1567180866000],
|
||||
range3: [1562774400000, 1567180800000]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -59,6 +59,10 @@ export default {
|
||||
name: 'Alert',
|
||||
path: '/n-alert'
|
||||
},
|
||||
{
|
||||
name: 'BackTop',
|
||||
path: '/n-back-top'
|
||||
},
|
||||
{
|
||||
name: 'Badge',
|
||||
path: '/n-badge'
|
||||
@ -87,6 +91,10 @@ export default {
|
||||
name: 'DatePicker',
|
||||
path: '/n-date-picker'
|
||||
},
|
||||
{
|
||||
name: 'Divider',
|
||||
path: '/n-divider'
|
||||
},
|
||||
{
|
||||
name: 'Gradient Text',
|
||||
path: '/n-gradient-text'
|
||||
@ -199,6 +207,14 @@ export default {
|
||||
{
|
||||
name: 'ScrollbarDebug2',
|
||||
path: '/n-scrollbar-debug2'
|
||||
},
|
||||
{
|
||||
name: 'DatePickerDebug',
|
||||
path: '/n-date-picker-debug'
|
||||
},
|
||||
{
|
||||
name: 'BackTopDebug',
|
||||
path: '/n-back-top-debug'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -32,6 +32,7 @@ import formDemo from './components/formDemo'
|
||||
import tabDemo from './components/tabDemo'
|
||||
import timePickerDemo from './components/timePickerDemo'
|
||||
import confirmDemo from './components/confirmDemo'
|
||||
import backTopDemo from './components/backTopDemo'
|
||||
|
||||
import scrollbarDebug from './debugComponents/scrollbarDebug'
|
||||
import scrollbarDebug2 from './debugComponents/scrollbarDebug2'
|
||||
@ -45,11 +46,14 @@ import collapseDemo from './components/collapseDemo'
|
||||
import tagDemo from './components/tagDemo'
|
||||
import timelineDemo from './components/timelineDemo'
|
||||
import progressDemo from './components/progressDemo'
|
||||
import dividerDemo from './components/dividerDemo'
|
||||
import demo from './demo'
|
||||
|
||||
import popoverDebug from './debugComponents/popoverDebug'
|
||||
import routerDebug from './debugComponents/routerDebug'
|
||||
import modalDebug from './debugComponents/modalDebug'
|
||||
import datePickerDebug from './debugComponents/datePickerDebug'
|
||||
import backTopDebug from './debugComponents/backTopDebug'
|
||||
|
||||
Vue.use(NaiveUI)
|
||||
Vue.use(VueRouter)
|
||||
@ -65,6 +69,10 @@ const routes = [
|
||||
path: '/n-popover-debug',
|
||||
component: popoverDebug
|
||||
},
|
||||
{
|
||||
path: '/n-back-top-debug',
|
||||
component: backTopDebug
|
||||
},
|
||||
{
|
||||
path: '/start',
|
||||
component: demo,
|
||||
@ -109,8 +117,10 @@ const routes = [
|
||||
{ path: '/n-progress', component: progressDemo },
|
||||
{ path: '/n-tag', component: tagDemo },
|
||||
{ path: '/n-timeline', component: timelineDemo },
|
||||
{ path: '/n-scrollbar-debug2', component: scrollbarDebug2 }
|
||||
|
||||
{ path: '/n-scrollbar-debug2', component: scrollbarDebug2 },
|
||||
{ path: '/n-back-top', component: backTopDemo },
|
||||
{ path: '/n-date-picker-debug', component: datePickerDebug },
|
||||
{ path: '/n-divider', component: dividerDemo }
|
||||
]
|
||||
},
|
||||
{
|
||||
|
||||
@ -202,7 +202,7 @@ Vue.use(naiveUi)
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tag</td>
|
||||
<td style="text-align:center;">🚧</td>
|
||||
<td style="text-align:center;">😍</td>
|
||||
<td style="text-align:center;"></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
@ -232,13 +232,13 @@ Vue.use(naiveUi)
|
||||
</tr>
|
||||
<tr>
|
||||
<td>BackTop</td>
|
||||
<td style="text-align:center;">🚧</td>
|
||||
<td style="text-align:center;">😍</td>
|
||||
<td style="text-align:center;"></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Progress</td>
|
||||
<td style="text-align:center;">🚧</td>
|
||||
<td style="text-align:center;">😍</td>
|
||||
<td style="text-align:center;"></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
4
index.js
4
index.js
@ -41,6 +41,8 @@ import Steps from './packages/common/Steps'
|
||||
import Confirm from './packages/common/Confirm'
|
||||
import Badge from './packages/common/Badge'
|
||||
import Tag from './packages/common/Tag'
|
||||
import BackTop from './packages/common/BackTop'
|
||||
import Divider from './packages/common/Divider'
|
||||
|
||||
function install (Vue) {
|
||||
Card.install(Vue)
|
||||
@ -86,6 +88,8 @@ function install (Vue) {
|
||||
Progress.install(Vue)
|
||||
Badge.install(Vue)
|
||||
Tag.install(Vue)
|
||||
BackTop.install(Vue)
|
||||
Divider.install(Vue)
|
||||
}
|
||||
|
||||
export default {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "naive-ui",
|
||||
"version": "0.2.83",
|
||||
"version": "0.2.87",
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
|
||||
8
packages/common/BackTop/index.js
Normal file
8
packages/common/BackTop/index.js
Normal file
@ -0,0 +1,8 @@
|
||||
/* istanbul ignore file */
|
||||
import BackTop from './src/main.vue'
|
||||
|
||||
BackTop.install = function (Vue) {
|
||||
Vue.component(BackTop.name, BackTop)
|
||||
}
|
||||
|
||||
export default BackTop
|
||||
137
packages/common/BackTop/src/main.vue
Normal file
137
packages/common/BackTop/src/main.vue
Normal file
@ -0,0 +1,137 @@
|
||||
<template>
|
||||
<transition name="n-back-top--transition">
|
||||
<div
|
||||
v-if="show"
|
||||
class="n-back-top"
|
||||
:style="{
|
||||
right: styleRight,
|
||||
bottom: styleBottom
|
||||
}"
|
||||
@click="handleClick"
|
||||
>
|
||||
<svg
|
||||
v-if="!$slots.default"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
viewBox="0 0 40 40"
|
||||
>
|
||||
<title>BackTop</title>
|
||||
<g>
|
||||
<path
|
||||
class="n-back-top__button"
|
||||
d="M30,8A20,20,0,1,0,50,28,20,20,0,0,0,30,8Zm8,23.8a1.65,1.65,0,0,1-2.36,0l-4-3.94V36.4a1.67,1.67,0,0,1-3.34,0V28l-4,3.76a1.65,1.65,0,0,1-2.36,0,1.48,1.48,0,0,1,0-2.25l7-6.67a1.65,1.65,0,0,1,2.36,0L38,29.45A1.59,1.59,0,0,1,38,31.8Zm2.36-10.61H19.67a1.6,1.6,0,1,1,0-3.19H40.33a1.6,1.6,0,1,1,0,3.19Z"
|
||||
transform="translate(-10 -8)"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
<slot v-else />
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import getScrollParent from '../../../utils/dom/getScrollParent'
|
||||
|
||||
export default {
|
||||
name: 'NBackTop',
|
||||
props: {
|
||||
right: {
|
||||
type: Number,
|
||||
default: 40
|
||||
},
|
||||
bottom: {
|
||||
type: Number,
|
||||
default: 40
|
||||
},
|
||||
contentSelector: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
/**
|
||||
* container is the place where we place event listener
|
||||
* if content is documentElement, the listener should be placed at #document,
|
||||
* which doesn't has scrollTop...
|
||||
*/
|
||||
containerSelector: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
visibilityHeight: {
|
||||
type: Number,
|
||||
default: 180
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
container: null,
|
||||
content: null,
|
||||
show: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
styleRight () {
|
||||
return this.right + 'px'
|
||||
},
|
||||
styleBottom () {
|
||||
return this.bottom + 'px'
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.init()
|
||||
},
|
||||
beforeDestroy () {
|
||||
if (this.container) {
|
||||
this.container.removeEventListener('scroll', this.handleScroll)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init () {
|
||||
if (this.containerSelector) {
|
||||
this.container = document.querySelector(this.containerSelector)
|
||||
}
|
||||
if (this.contentSelector) {
|
||||
this.content = document.querySelector(this.contentSelector)
|
||||
if (!this.content) {
|
||||
throw new Error('[n-back-top]: content not found')
|
||||
} else {
|
||||
this.container = getScrollParent(this.content)
|
||||
}
|
||||
if (!this.content) {
|
||||
this.container = document
|
||||
}
|
||||
}
|
||||
if (this.container) {
|
||||
this.container.addEventListener('scroll', this.handleScroll)
|
||||
}
|
||||
},
|
||||
handleClick () {
|
||||
if (this.container.nodeName === '#document') {
|
||||
this.container.documentElement.scrollTo({
|
||||
top: 0,
|
||||
behavior: 'smooth'
|
||||
})
|
||||
} else {
|
||||
this.container.scrollTo({
|
||||
top: 0,
|
||||
behavior: 'smooth'
|
||||
})
|
||||
}
|
||||
|
||||
this.$emit('click')
|
||||
},
|
||||
handleScroll () {
|
||||
let scrollTop = this.container.scrollTop
|
||||
if (this.container.nodeName === '#document') {
|
||||
scrollTop = this.container.documentElement.scrollTop
|
||||
}
|
||||
if (scrollTop === 0) {
|
||||
this.show = false
|
||||
} else if (scrollTop >= this.visibilityHeight) {
|
||||
this.show = true
|
||||
} else {
|
||||
this.show = false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -6,7 +6,10 @@
|
||||
class="n-date-picker-calendar n-date-picker-calendar--daterange"
|
||||
@click.capture="resetSelectingStatus"
|
||||
>
|
||||
<div class="n-date-picker-calendar__range-wrapper">
|
||||
<div
|
||||
ref="startDates"
|
||||
class="n-date-picker-calendar__range-wrapper"
|
||||
>
|
||||
<div class="n-date-picker-calendar__month-modifier">
|
||||
<div
|
||||
class="n-date-picker-calendar__fast-prev"
|
||||
@ -67,7 +70,6 @@
|
||||
</div>
|
||||
<div class="n-date-picker-calendar__divider" />
|
||||
<div
|
||||
ref="startDates"
|
||||
class="n-date-picker-calendar__dates"
|
||||
>
|
||||
<div
|
||||
@ -88,7 +90,10 @@
|
||||
</div>
|
||||
</div>
|
||||
<div><div class="n-date-picker-calendar__vertical-divider" /></div>
|
||||
<div class="n-date-picker-calendar__range-wrapper">
|
||||
<div
|
||||
ref="endDates"
|
||||
class="n-date-picker-calendar__range-wrapper"
|
||||
>
|
||||
<div class="n-date-picker-calendar__month-modifier">
|
||||
<div
|
||||
class="n-date-picker-calendar__fast-prev"
|
||||
@ -149,7 +154,6 @@
|
||||
</div>
|
||||
<div class="n-date-picker-calendar__divider" />
|
||||
<div
|
||||
ref="endDates"
|
||||
class="n-date-picker-calendar__dates"
|
||||
>
|
||||
<div
|
||||
|
||||
@ -39,7 +39,10 @@
|
||||
@input="handleEndTimePickerInput"
|
||||
/>
|
||||
</div>
|
||||
<div class="n-date-picker-calendar__range-wrapper">
|
||||
<div
|
||||
ref="startDates"
|
||||
class="n-date-picker-calendar__range-wrapper"
|
||||
>
|
||||
<div class="n-date-picker-calendar__month-modifier">
|
||||
<div
|
||||
class="n-date-picker-calendar__fast-prev"
|
||||
@ -100,7 +103,6 @@
|
||||
</div>
|
||||
<div class="n-date-picker-calendar__divider" />
|
||||
<div
|
||||
ref="startDates"
|
||||
class="n-date-picker-calendar__dates"
|
||||
>
|
||||
<div
|
||||
@ -121,7 +123,10 @@
|
||||
</div>
|
||||
</div>
|
||||
<div><div class="n-date-picker-calendar__vertical-divider" /></div>
|
||||
<div class="n-date-picker-calendar__range-wrapper">
|
||||
<div
|
||||
ref="endDates"
|
||||
class="n-date-picker-calendar__range-wrapper"
|
||||
>
|
||||
<div class="n-date-picker-calendar__month-modifier">
|
||||
<div
|
||||
class="n-date-picker-calendar__fast-prev"
|
||||
@ -182,7 +187,6 @@
|
||||
</div>
|
||||
<div class="n-date-picker-calendar__divider" />
|
||||
<div
|
||||
ref="endDates"
|
||||
class="n-date-picker-calendar__dates"
|
||||
>
|
||||
<div
|
||||
@ -355,7 +359,7 @@ export default {
|
||||
const [startMoment, endMoment] = newValue
|
||||
this.startDateDisplayString = startMoment.format(DATE_FORMAT)
|
||||
this.endDateDisplayString = endMoment.format(DATE_FORMAT)
|
||||
if (this.isSelecting) {
|
||||
if (!this.isSelecting) {
|
||||
this.syncCalendarTimeWithValue(newValue)
|
||||
}
|
||||
} else {
|
||||
|
||||
8
packages/common/Divider/index.js
Normal file
8
packages/common/Divider/index.js
Normal file
@ -0,0 +1,8 @@
|
||||
/* istanbul ignore file */
|
||||
import Divider from './src/main.vue'
|
||||
|
||||
Divider.install = function (Vue) {
|
||||
Vue.component(Divider.name, Divider)
|
||||
}
|
||||
|
||||
export default Divider
|
||||
46
packages/common/Divider/src/main.vue
Normal file
46
packages/common/Divider/src/main.vue
Normal file
@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<div
|
||||
class="n-divider"
|
||||
:class="{
|
||||
'n-divider--vertical': vertical,
|
||||
'n-divider--no-content': !$slots.default,
|
||||
'n-divider--dashed': dashed,
|
||||
[`n-divider--content-position-${contentPosition}`]: $slots.default && contentPosition
|
||||
}"
|
||||
>
|
||||
<div
|
||||
v-if="!vertical"
|
||||
class="n-divider__line n-divider__line--left"
|
||||
/>
|
||||
<div
|
||||
v-if="!vertical && $slots.default"
|
||||
class="n-divider__content"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
<div
|
||||
v-if="!vertical && $slots.default"
|
||||
class="n-divider__line n-divider__line--right"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'NDivider',
|
||||
props: {
|
||||
contentPosition: {
|
||||
type: String,
|
||||
default: 'center'
|
||||
},
|
||||
dashed: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
vertical: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -5,7 +5,10 @@
|
||||
:key="index"
|
||||
class="n-input-key-value__item"
|
||||
>
|
||||
<p class="n-input-key-value__item--title">
|
||||
<p
|
||||
v-if="title"
|
||||
class="n-input-key-value__item--title"
|
||||
>
|
||||
{{ title }}
|
||||
</p>
|
||||
<div class="n-input-key-value__item--container">
|
||||
@ -33,7 +36,7 @@
|
||||
<div class="n-input-key-value__item--action">
|
||||
<!-- <span> -->
|
||||
<n-icon
|
||||
class="n-input-key-value__item--action--add"
|
||||
class="n-input-key-value__item--action--icon"
|
||||
type="md-remove-circle"
|
||||
size="30"
|
||||
color="#C0818B"
|
||||
@ -41,7 +44,7 @@
|
||||
/>
|
||||
<n-icon
|
||||
v-if="index==value.length-1"
|
||||
class="n-input-key-value__item--action--remove"
|
||||
class="n-input-key-value__item--action--icon"
|
||||
type="md-add-circle"
|
||||
size="30"
|
||||
color="#4DB199"
|
||||
@ -76,7 +79,7 @@ export default {
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: 'Label'
|
||||
default: ''
|
||||
},
|
||||
placeholderKey: {
|
||||
type: String,
|
||||
|
||||
@ -162,7 +162,7 @@ export default {
|
||||
this.updateParameters()
|
||||
},
|
||||
methods: {
|
||||
scrollToElement (el, elPosition = 'bottom') {
|
||||
scrollToElement (el) {
|
||||
if (el.offsetTop < this.$refs.scrollContainer.scrollTop) {
|
||||
this.$refs.scrollContainer.scrollTo({
|
||||
top: el.offsetTop,
|
||||
|
||||
35
styles/BackTop.scss
Normal file
35
styles/BackTop.scss
Normal file
@ -0,0 +1,35 @@
|
||||
@import './mixins/mixins.scss';
|
||||
@import './theme/default.scss';
|
||||
|
||||
@include b(back-top) {
|
||||
@include fade-in-transition(back-top);
|
||||
position: fixed;
|
||||
right: 40px;
|
||||
bottom: 40px;
|
||||
border-radius: 20px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
overflow: hidden;
|
||||
transition: box-shadow .3s $default-cubic-bezier;
|
||||
box-shadow: 0 2px 10px 0px rgba(238, 238, 238, .45);
|
||||
cursor: pointer;
|
||||
svg {
|
||||
pointer-events: none;
|
||||
}
|
||||
.n-back-top__button {
|
||||
transition: fill .3s $default-cubic-bezier;
|
||||
fill: rgba(255, 255, 255, 0.45);
|
||||
}
|
||||
&:hover {
|
||||
box-shadow: 0 2px 10px 0px rgb(77, 177, 153);
|
||||
.n-back-top__button {
|
||||
fill: rgba(99, 226, 183, 1);
|
||||
}
|
||||
}
|
||||
&:active {
|
||||
box-shadow: 0 2px 10px 0px rgb(77, 177, 153);
|
||||
.n-back-top__button {
|
||||
fill: rgba(77, 177, 153, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -27,12 +27,12 @@
|
||||
}
|
||||
&.n-badge--warning-type {
|
||||
.n-badge-sup {
|
||||
background-color: rgba(216, 94, 0, 1);
|
||||
background-color: rgba(205, 135, 20, 1);
|
||||
}
|
||||
}
|
||||
&.n-badge--error-type {
|
||||
.n-badge-sup {
|
||||
background-color: rgba(210, 82, 129, 1);
|
||||
background-color: rgba(255, 109, 147, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -285,6 +285,7 @@
|
||||
justify-content: flex-end;
|
||||
.n-button {
|
||||
margin-bottom: 0;
|
||||
margin-right: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
56
styles/Divider.scss
Normal file
56
styles/Divider.scss
Normal file
@ -0,0 +1,56 @@
|
||||
@import './mixins/mixins.scss';
|
||||
@import './theme/default.scss';
|
||||
|
||||
@include b(divider) {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
.n-divider__line {
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
margin-top: 24px;
|
||||
margin-bottom: 24px;
|
||||
background-color: rgba(255, 255, 255, 0.3)
|
||||
}
|
||||
.n-divider__content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 4px;
|
||||
margin-right: 4px;
|
||||
white-space: nowrap;
|
||||
color: rgba(233, 233, 236, 1);
|
||||
font-weight: bold;
|
||||
}
|
||||
&.n-divider--content-position-left {
|
||||
.n-divider__line {
|
||||
&.n-divider__line--left {
|
||||
width: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.n-divider--content-position-right {
|
||||
.n-divider__line {
|
||||
&.n-divider__line--right {
|
||||
width: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.n-divider--dashed {
|
||||
.n-divider__line {
|
||||
height: 0px;
|
||||
width: 100%;
|
||||
background: none;
|
||||
border-color: rgba(255, 255, 255, 0.3);
|
||||
border-style: dashed;
|
||||
border-width: 1px 0 0;
|
||||
}
|
||||
}
|
||||
&.n-divider--vertical {
|
||||
display: inline-block;
|
||||
height: 1em;
|
||||
margin: 0 8px;
|
||||
vertical-align: middle;
|
||||
width: 1px;
|
||||
background-color: rgba(255, 255, 255, 0.3)
|
||||
}
|
||||
}
|
||||
@ -31,6 +31,9 @@
|
||||
align-items: center;
|
||||
display: flex;
|
||||
margin-left: 13px;
|
||||
.n-input-key-value__item--action--icon {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -56,7 +56,7 @@
|
||||
width: fit-content;
|
||||
overflow: visible;
|
||||
min-width: 100%;
|
||||
/* stylelint-disable */
|
||||
/** stylelint-disable */
|
||||
width: -moz-fit-content; /* Firefox/Gecko */
|
||||
width: -webkit-fit-content; /* Chrome */
|
||||
/* stylelint-enable */
|
||||
|
||||
@ -31,9 +31,11 @@
|
||||
@import './Progress.scss';
|
||||
@import './Badge.scss';
|
||||
@import './Tag.scss';
|
||||
@import './BackTop.scss';
|
||||
@import './Divider.scss';
|
||||
|
||||
@import "./NimbusServiceLayout.scss";
|
||||
@import "./Popover.scss";
|
||||
@import "./AdvancedTable.scss";
|
||||
@import "./NimbusIcon.scss";
|
||||
@import "./Confirm.scss"
|
||||
@import "./Confirm.scss";
|
||||
Loading…
Reference in New Issue
Block a user