mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2024-12-15 04:42:23 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' of https://github.com/07akioni/naive-design into 07akioni

Browse Source
This commit is contained in:
07akioni 2019-09-06 13:21:27 +08:00
commit d4d735bd9b
13 changed files with 573 additions and 376 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

251
demo/components/buttonDemo.vue
View File

@ -1,251 +0,0 @@
<template>
<div
ref="doc"
class="n-doc"
>
<div class="n-doc-header">
<n-gradient-text :font-size="20">
Button / n-button
</n-gradient-text>
</div>
<div class="n-doc-body">
<div class="n-doc-section">
<div class="n-doc-section__header">
Basic Usage
</div>
<div class="n-doc-section__view">
<n-button size="small">
small size
</n-button>
<n-button>
regular size
</n-button>
<n-button size="large">
large size
</n-button>
</div>
<div class="n-doc-section__source">
<textarea><n-button size="small">
small size
</n-button>
<n-button>
regular size
</n-button>
<n-button size="large">
large size
</n-button></textarea>
</div>
</div>
<div class="n-doc-section">
<div class="n-doc-section__header">
Disabled
</div>
<div class="n-doc-section__view">
<n-button
size="small"
disabled
>
small size
</n-button>
<n-button disabled>
regular size
</n-button>
<n-button
size="large"
disabled
>
large size
</n-button>
</div>
<div class="n-doc-section__source">
<textarea><n-button size="small" disabled>
small size
</n-button>
<n-button disabled>
regular size
</n-button>
<n-button size="large" disabled>
large size
</n-button></textarea>
</div>
</div>
<div class="n-doc-section">
<div class="n-doc-section__header">
Button Type
</div>
<div class="n-doc-section__view">
<n-button
size="small"
type="primary"
auto-text-color
>
small size
</n-button>
<n-button
type="primary"
auto-text-color
>
regular size
</n-button>
<n-button
size="large"
type="primary"
auto-text-color
>
large size
</n-button>
</div>
<div class="n-doc-section__source">
<textarea>
/**
* Note: auto-text-color will set button of type="primary"'s color as its first
* background-colored parent's background-color
* If auto-text-color is not set, its color will be black
*/
<n-button
size="small"
type="primary"
auto-text-color
>
small size
</n-button>
<n-button
type="primary"
auto-text-color
>
regular size
</n-button>
<n-button
size="large"
type="primary"
auto-text-color
>
large size
</n-button></textarea>
</div>
</div>
<div class="n-doc-section">
<div class="n-doc-section__header">
Icon Button
</div>
<div class="n-doc-section__view">
<n-button
round
size="small"
icon="md-save"
>
Save as Template
</n-button>
<n-button
round
icon="md-save"
icon-on-right
>
Save as Template
</n-button>
<n-button
round
size="large"
icon="md-save"
>
Save as Template
</n-button>
</div>
<div class="n-doc-section__source">
<textarea><n-button
round
size="small"
icon="md-save"
>
Save as Template
</n-button>
<n-button
round
icon="md-save"
>
Save as Template
</n-button>
<n-button
round
size="large"
icon="md-save"
>
Save as Template
</n-button></textarea>
</div>
</div>
<div class="n-doc-section">
<div class="n-doc-section__header">
Simulate Transparent Text
</div>
<div class="n-doc-section__view">
<div style="padding: 14px; background: white; margin-right: 14px; border-radius: 8px;">
<div>
<n-button
type="primary"
auto-text-color
>
with-auto-text-color
</n-button>
</div>
</div>
<div style="padding: 14px; background: white; border-radius: 8px;">
<n-button type="primary">
without-auto-text-color
</n-button>
</div>
</div>
<div class="n-doc-section__source">
<textarea><div style="padding: 14px; background: white; margin-right: 14px; border-radius: 8px;">
<n-button
type="primary"
auto-text-color
>
with-auto-text-color
</n-button>
</div>
<div style="padding: 14px; background: white; border-radius: 8px;">
<n-button type="primary">
without-auto-text-color
</n-button>
</div></textarea>
</div>
</div>
<div class="n-doc-section">
<div class="n-doc-section__header">
Handle Click
</div>
<div class="n-doc-section__view">
<n-button @click="handleClick">
Click Me
</n-button>
</div>
<div class="n-doc-section__source">
<textarea>
<n-button @click="handleClick">Click Me</n-button><script>
export default {
methods: {
handleClick () {
alert('handleClick')
}
}
}
</script>
</textarea>
</div>
</div>
</div>
</div>
</template>
<script>
import docCodeEditorMixin from './docCodeEditorMixin'
export default {
mixins: [docCodeEditorMixin],
methods: {
handleClick () {
alert('handleClick')
}
}
}
</script>

51
demo/components/buttonDemo/basicUsage.demo.vue Normal file
View File

@ -0,0 +1,51 @@
<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-button size="small">
small size
</n-button>
<n-button>
regular size
</n-button>
<n-button size="large">
large size
</n-button>
<n-button
size="small"
round
>
small size
</n-button>
<n-button round>
regular size
</n-button>
<n-button
size="large"
round
>
large size
</n-button>
<!--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>

62
demo/components/buttonDemo/disabled.demo.vue Normal file
View File

@ -0,0 +1,62 @@
<template>
<div class="n-doc-section">
<div class="n-doc-section__header">
Disabled
</div>
<div
class="n-doc-section__view"
style="flex-wrap: nowrap;"
>
<!--EXAMPLE_START-->
<n-button
size="small"
disabled
>
small size
</n-button>
<n-button disabled>
regular size
</n-button>
<n-button
size="large"
disabled
>
large size
</n-button>
<n-button
size="small"
disabled
type="primary"
>
small size
</n-button>
<n-button
disabled
type="primary"
>
regular size
</n-button>
<n-button
size="large"
disabled
type="primary"
>
large size
</n-button>
<!--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>

35
demo/components/buttonDemo/events.demo.vue Normal file
View File

@ -0,0 +1,35 @@
<template>
<div class="n-doc-section">
<div class="n-doc-section__header">
Events
</div>
<div
class="n-doc-section__view"
style="flex-wrap: nowrap;"
>
<!--EXAMPLE_START-->
<n-button @click="handleClick">
Click Me
</n-button>
<!--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 {
}
},
methods: {
handleClick () {
this.$NMessage.info('Button Clicked')
}
}
}
</script>

65
demo/components/buttonDemo/icon.demo.vue Normal file
View File

@ -0,0 +1,65 @@
<template>
<div class="n-doc-section">
<div class="n-doc-section__header">
Icon
</div>
<div
class="n-doc-section__view"
>
<!--EXAMPLE_START-->
<n-button
round
size="small"
icon="md-save"
>
Save as Template
</n-button>
<n-button
round
icon="md-save"
icon-position="right"
>
Save as Template
</n-button>
<n-button
size="large"
icon="md-save"
round
>
Save as Template
</n-button>
<n-button
size="small"
icon="md-save"
>
Save as Template
</n-button>
<n-button
icon="md-save"
icon-position="right"
>
Save as Template
</n-button>
<n-button
size="large"
icon="md-save"
>
Save as Template
</n-button>
<!--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>

47
demo/components/buttonDemo/index.vue Normal file
View File

@ -0,0 +1,47 @@
<template>
<div
ref="doc"
class="n-doc"
>
<div class="n-doc-header">
<n-gradient-text :font-size="20">
Button / n-button
</n-gradient-text>
</div>
<div class="n-doc-body">
<basic-usage />
<disabled />
<type />
<icon />
<events />
<loading />
</div>
</div>
</template>
<script>
import loading from './loading.demo.vue'
import basicUsage from './basicUsage.demo.vue'
import disabled from './disabled.demo.vue'
import type from './type.demo.vue'
import icon from './icon.demo.vue'
import events from './events.demo.vue'
export default {
components: {
loading,
basicUsage,
disabled,
type,
icon,
events
},
data () {
return {
}
},
methods: {
}
}
</script>

53
demo/components/buttonDemo/loading.demo.vue Normal file
View File

@ -0,0 +1,53 @@
<template>
<div class="n-doc-section">
<div class="n-doc-section__header">
Loading
</div>
<div
class="n-doc-section__view"
>
<!--EXAMPLE_START-->
<n-button
:loading="loading"
@click="loading = !loading"
>
Loading
</n-button>
<n-button
:loading="loading"
icon-position="right"
@click="loading = !loading"
>
Loading
</n-button>
<n-button
:loading="loading"
size="small"
@click="loading = !loading"
>
Loading
</n-button>
<n-button
:loading="loading"
size="large"
@click="loading = !loading"
>
Loading
</n-button>
<!--EXAMPLE_END-->
</div>
<n-doc-source-block>
<!--SOURCE-->
</n-doc-source-block>
</div>
</template>
<script>
export default {
data () {
return {
loading: false
}
}
}
</script>

44
demo/components/buttonDemo/type.demo.vue Normal file
View File

@ -0,0 +1,44 @@
<template>
<div class="n-doc-section">
<div class="n-doc-section__header">
Type
</div>
<div
class="n-doc-section__view"
style="flex-wrap: nowrap;"
>
<!--EXAMPLE_START-->
<n-button
size="small"
type="primary"
>
small size
</n-button>
<n-button
type="primary"
>
regular size
</n-button>
<n-button
size="large"
type="primary"
>
large size
</n-button>
<!--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>

10
packages/base/Loading/src/main.vue
View File

@ -8,6 +8,9 @@
cy="50" cy="50"
r="20" r="20"
fill="none" fill="none"
:style="{
strokeWidth
}"
class="n-base-loading-circular-path" class="n-base-loading-circular-path"
/></svg> /></svg>
</div> </div>
@ -17,6 +20,13 @@
export default { export default {
name: 'NBaseLoading', name: 'NBaseLoading',
props: { props: {
strokeWidth: {
type: Number,
default: null
}
},
mounted () {
console.log(this.strokeWidth)
} }
} }
</script> </script>

102
packages/common/Button/src/main.vue
View File

@ -2,31 +2,42 @@
<div <div
class="n-button" class="n-button"
:class="{ :class="{
'is-round': round, 'n-button--round': round,
[`is-${type}`]: true, [`n-button--${type}-type`]: true,
[`n-button--${size}-size`]: true, [`n-button--${size}-size`]: true,
'n-button--disabled': disabled 'n-button--disabled': disabled,
'n-button--loading': loading
}" }"
@click="handleClick" @click="handleClick"
> >
<div <transition
v-if="hasIcon && !iconOnRight" name="n-fade-in-width-expand"
class="n-button__icon" appear
:class="{'n-button__icon--slot': $slots.icon }"
> >
<n-icon
v-if="icon"
:type="icon"
/>
<div <div
v-else v-if="(hasIcon || loading) && !iconOnRight"
class="n-icon-slot" class="n-button__icon"
:class="{'n-button__icon--slot': $slots.icon }"
> >
<slot <n-spin
name="icon" v-if="loading"
:size="null"
:stroke-width="4"
/> />
<n-icon
v-else-if="icon"
:type="icon"
/>
<div
v-else
class="n-icon-slot"
>
<slot
name="icon"
/>
</div>
</div> </div>
</div> </transition>
<div <div
class="n-button__content" class="n-button__content"
:class="{ :class="{
@ -36,47 +47,63 @@
> >
<slot /> <slot />
</div> </div>
<div <transition
v-if="hasIcon && iconOnRight" name="n-fade-in-width-expand"
class="n-button__icon n-button__icon--right" appear
:class="{'n-button__icon--slot': $slots.icon }"
> >
<n-icon
v-if="icon"
:type="icon"
/>
<div <div
v-else v-if="(loading || hasIcon) && iconOnRight"
class="n-icon-slot" class="n-button__icon n-button__icon--right"
:class="{'n-button__icon--slot': $slots.icon }"
> >
<slot <n-spin
name="icon" v-if="loading"
:size="null"
:stroke-width="4"
/> />
<n-icon
v-else-if="icon"
:type="icon"
/>
<div
v-else
class="n-icon-slot"
>
<slot
name="icon"
/>
</div>
</div> </div>
</div> </transition>
</div> </div>
</template> </template>
<script> <script>
import NIcon from '../../Icon/index' import NIcon from '../../Icon'
import NSpin from '../../Spin'
import texttransparentable from '../../../mixins/texttransparentable' import texttransparentable from '../../../mixins/texttransparentable'
export default { export default {
name: 'NButton', name: 'NButton',
components: { components: {
NIcon NIcon,
NSpin
}, },
mixins: [ mixins: [
texttransparentable texttransparentable
], ],
props: { props: {
loading: {
type: Boolean,
default: false
},
disabled: { disabled: {
type: Boolean, type: Boolean,
default: false default: false
}, },
size: { size: {
type: String, type: String,
default: 'default' default: 'medium'
}, },
round: { round: {
type: Boolean, type: Boolean,
@ -94,9 +121,11 @@ export default {
type: String, type: String,
default: null default: null
}, },
iconOnRight: { iconPosition: {
type: Boolean, default: null,
default: false validator (iconPosition) {
return ['left', 'right'].includes(iconPosition)
}
} }
}, },
data () { data () {
@ -107,6 +136,9 @@ export default {
computed: { computed: {
hasIcon () { hasIcon () {
return this.icon || this.$slots.icon return this.icon || this.$slots.icon
},
iconOnRight () {
return this.iconPosition === 'right'
} }
}, },
mounted () { mounted () {

8
packages/common/Spin/src/main.vue
View File

@ -7,6 +7,7 @@
<n-base-loading <n-base-loading
v-if="spinning" v-if="spinning"
class="n-spin" class="n-spin"
:stroke-width="strokeWidth"
:class="{ :class="{
[`n-spin--${size}-size`]: true [`n-spin--${size}-size`]: true
}" }"
@ -24,8 +25,9 @@
<n-base-loading <n-base-loading
v-else v-else
class="n-spin" class="n-spin"
:stroke-width="strokeWidth"
:class="{ :class="{
[`n-spin--${size}-size`]: true [`n-spin--${size}-size`]: size
}" }"
/> />
</template> </template>
@ -46,6 +48,10 @@ export default {
spinning: { spinning: {
type: Boolean, type: Boolean,
default: true default: true
},
strokeWidth: {
type: Number,
default: null
} }
}, },
methods: { methods: {

195
styles/Button.scss
View File

@ -6,160 +6,181 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
box-shadow: inset 0 0 0 1.2px $button-default-border-color; box-shadow: inset 0 0 0 1.2px $button-default-border-color;
cursor: pointer;
user-select: none; user-select: none;
font-weight: 700; font-weight: 700;
text-align: center; text-align: center;
.n-button__icon { vertical-align: baseline;
margin-right: 2px; border-radius: $button-border-radius;
&.n-button__icon--right { cursor: pointer;
transition: background-color .15s $default-cubic-bezier, opacity .3s $default-cubic-bezier;
@include e(icon) {
@include fade-in-width-expand-transition();
margin-right: 6px;
@include m(right) {
margin-right: 0px; margin-right: 0px;
margin-left: 4px; margin-left: 4px;
} }
} }
.n-button__content { @include b(content) {
white-space: nowrap; white-space: nowrap;
} }
border-radius: $button-border-radius; @include m(disabled) {
&.n-button--disabled {
cursor: not-allowed; cursor: not-allowed;
opacity: .43; opacity: .4;
} }
&.n-button--tiny-size { @include m(loading) {
cursor: default;
opacity: .6;
}
@include m(tiny-size) {
font-size: $button-tiny-font-size; font-size: $button-tiny-font-size;
height: $tiny-height; height: $tiny-height;
padding: 0 14px; padding: 0 6px;
&.is-round { @include m(round) {
padding: 0 14px;
border-radius: $tiny-height / 2; border-radius: $tiny-height / 2;
} }
.n-button__content { @include e(content) {
line-height: $tiny-height; line-height: $tiny-height;
} }
.n-button__icon { @include e(icon) {
height: 16px; height: 16px;
width: 16px; width: 16px;
max-width: 16px;
.n-icon { .n-icon {
font-size: 16px; font-size: 16px;
display: block; display: block;
} }
} @include m(slot) {
.n-button__icon--slot {
height: 14px;
width: 14px;
line-height: 14px;
.n-icon-slot {
height: 14px; height: 14px;
width: 14px; width: 14px;
font-size: 14px; line-height: 14px;
.n-icon-slot {
height: 14px;
width: 14px;
font-size: 14px;
}
} }
} }
} }
&.n-button--small-size { @include m(small-size) {
font-size: $button-small-font-size; font-size: $button-small-font-size;
height: $small-height; height: $small-height;
padding: 0 18px; padding: 0 10px;
&.is-round { @include m(round) {
border-radius: $small-height / 2; border-radius: $small-height / 2;
padding: 0 18px;
} }
.n-button__content { @include e(content) {
line-height: $small-height; line-height: $small-height;
} }
.n-button__icon { @include e(icon) {
height: 16px;
width: 16px;
max-width: 16px;
.n-icon {
font-size: 16px;
display: block;
}
@include m(slot) {
height: 16px;
width: 16px;
line-height: 16px;
.n-icon-slot {
height: 16px;
width: 16px;
font-size: 16px;
}
}
}
}
@include m(medium-size) {
font-size: $button-default-font-size;
height: $default-height;
padding: 0 14px;
@include m(round) {
padding: 0 22px;
border-radius: $default-height / 2;
}
@include e(content) {
line-height: $default-height;
}
@include e(icon) {
height: 18px; height: 18px;
width: 18px; width: 18px;
max-width: 18px;
.n-icon { .n-icon {
font-size: 18px; font-size: 18px;
display: block; display: block;
} }
} @include m(slot) {
.n-button__icon--slot {
height: 16px;
line-height: 16px;
width: 16px;
.n-icon-slot {
height: 16px;
width: 16px;
font-size: 16px;
}
}
}
&.n-button--default-size, &.n-button--medium-size {
font-size: $button-default-font-size;
height: $default-height;
padding: 0 24px;
&.is-round {
border-radius: $default-height / 2;
}
.n-button__content {
line-height: $default-height;
}
.n-button__icon {
height: 20px;
width: 20px;
.n-icon {
font-size: 20px;
}
}
.n-button__icon--slot {
height: 18px;
line-height: 18px;
width: 18px;
.n-icon-slot {
height: 18px; height: 18px;
width: 18px; width: 18px;
font-size: 18px; line-height: 18px;
.n-icon-slot {
height: 18px;
width: 18px;
font-size: 18px;
}
} }
} }
} }
&.n-button--large-size { @include m(large-size) {
font-size: $button-large-font-size; font-size: $button-large-font-size;
height: $large-height; height: $large-height;
padding: 0 24px; padding: 0 18px;
&.is-round { @include m(round) {
padding: 0 26px;
border-radius: $large-height / 2; border-radius: $large-height / 2;
} }
.n-button__content { @include e(content) {
line-height: $large-height; line-height: $large-height;
} }
.n-button__icon { @include e(icon) {
height: 20px; height: 20px;
width: 20px; width: 20px;
max-width: 20px;
.n-icon { .n-icon {
font-size: 20px; font-size: 20px;
display: block;
} }
} @include m(slot) {
.n-button__icon--slot { height: 20px;
line-height: 18px; width: 20px;
height: 18px; line-height: 20px;
width: 18px; .n-icon-slot {
.n-icon-slot { height: 20px;
height: 18px; width: 20px;
width: 18px; font-size: 20px;
font-size: 18px; }
} }
} }
} }
@include m(default-type) {
&.is-default {
color: $button-default-text-color; color: $button-default-text-color;
background-color: $button-default-background-color; background-color: $button-default-background-color;
&:hover { &:not(.n-button--disabled) {
background-color: $button-default-background-color--hover; &:hover {
} background-color: $button-default-background-color--hover;
&:active { }
background-color: $button-default-background-color--active; &:active {
background-color: $button-default-background-color--active;
}
} }
} }
&.is-primary {
@include m(primary-type) {
color: #1F263EFF; color: #1F263EFF;
background-color: $button-primary-background-color; background-color: $button-primary-background-color;
box-shadow: none; box-shadow: none;
&:hover { &:not(.n-button--disabled) {
background-color: $button-primary-background-color--hover; &:hover {
} background-color: $button-primary-background-color--hover;
&:active { }
background-color: $button-primary-background-color--active; &:active {
background-color: $button-primary-background-color--active;
}
} }
} }
} }

26
styles/theme/default.scss
View File

@ -35,11 +35,10 @@ $input-icon-color: rgba(255,255,255,0.2);
/** /**
* n-button * n-button
*/ */
$button-margin: 0 12px 8px 0;
$button-border-radius: 6px; $button-border-radius: 6px;
$button-tiny-font-size: 12px; $button-tiny-font-size: 12px;
$button-small-font-size: 14px; $button-small-font-size: 14px;
$button-default-font-size: 16px; $button-default-font-size: 14px;
$button-large-font-size: 16px; $button-large-font-size: 16px;
$button-default-text-color: $main-color; $button-default-text-color: $main-color;
$button-default-border-color: $main-color; $button-default-border-color: $main-color;
@ -285,4 +284,27 @@ $scrollbar-color--hover: rgba(255,255,255,0.3);
transform: translateX(-120%); transform: translateX(-120%);
max-height: 0; max-height: 0;
} }
}
@mixin fade-in-width-expand-transition($block: "fade-in-width-expand", $duration: .2s, $delay: .1s) {
&.#{$namespace}-#{$block}-leave-active {
transition: opacity $duration $default-cubic-bezier, max-width $duration $default-cubic-bezier $delay;
}
&.#{$namespace}-#{$block}-enter-active {
transition: opacity $duration $default-cubic-bezier $delay, max-width $duration $default-cubic-bezier;
}
&.#{$namespace}-#{$block}-enter-to {
opacity: 1;
}
&.#{$namespace}-#{$block}-enter {
max-width: 0!important;
opacity: 0;
}
&.#{$namespace}-#{$block}-leave {
opacity: 1;
}
&.#{$namespace}-#{$block}-leave-to {
max-width: 0!important;
opacity: 0!important;
}
} }