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

feat(input-group): support label & input number

Browse Source
This commit is contained in:
07akioni 2020-02-09 19:21:31 +08:00
parent dc2e0c1439
commit 23b98c63b7
10 changed files with 197 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/common/Input/index.js
View File

@ -1,10 +1,12 @@
/* istanbul ignore file */
import Input from './src/Input.vue'
import InputGroup from './src/InputGroup.vue'
import InpugGroupLabel from './src/InputGroupLabel.vue'
Input.install = function (Vue) {
Vue.component(Input.name, Input)
Vue.component(InputGroup.name, InputGroup)
Vue.component(InpugGroupLabel.name, InpugGroupLabel)
}
export default Input

30
packages/common/Input/src/InputGroupLabel.vue Normal file
View File

@ -0,0 +1,30 @@
<template>
<div
class="n-input-group-label"
:class="{
[`n-${synthesizedTheme}-theme`]: synthesizedTheme,
[`n-input-group-label--${size}-size`]: true
}"
>
<slot />
</div>
</template>
<script>
import withapp from '../../../mixins/withapp'
import themeable from '../../../mixins/themeable'
export default {
name: 'NInputGroupLabel',
mixins: [
withapp,
themeable
],
props: {
size: {
type: String,
default: 'medium'
}
}
}
</script>

2
packages/common/InputNumber/src/main.vue
View File

@ -45,7 +45,7 @@
<md-add />
</n-icon>
</button>
<div class="n-input-number__border-layer" />
<div class="n-input-number__border-mask" />
</div>
</template>

217
styles/Input.scss
View File

@ -1,6 +1,16 @@
@import './mixins/mixins.scss';
@import './themes/vars.scss';
@mixin input-group-label-size-mixin ($size) {
$font-size: map-get($map: $--n-font-size, $key: $size);
$height: map-get($map: $--n-height, $key: $size);
@include m($size + '-size') {
font-size: $font-size;
line-height: $height;
height: $height;
}
}
@mixin input-size-mixin ($size) {
$font-size: map-get($map: $--n-font-size, $key: $size);
$height: map-get($map: $--n-height, $key: $size);
@ -247,6 +257,25 @@
}
}
}
@include b(input-group-label) {
@include once {
user-select: none;
box-sizing: border-box;
padding: 0 12px;
display: inline-block;
border-radius: $--input-border-radius;
transition:
color .3s $--n-ease-in-out-cubic-bezier,
background-color .3s $--n-ease-in-out-cubic-bezier,
box-shadow .3s $--n-ease-in-out-cubic-bezier;
@include input-group-label-size-mixin("small");
@include input-group-label-size-mixin("medium");
@include input-group-label-size-mixin("large");
}
background-color: $--input-group-label-background-color;
color: map-get($--input-color, 'default');
box-shadow: map-get($--input-box-shadow, 'default');
}
@include as-form-item {
@include with-status(error) {
@include b(input) {
@ -271,92 +300,140 @@
}
}
}
@include b(input-group) {
display: inline-flex;
width: 100%;
flex-wrap: nowrap;
vertical-align: bottom;
& > {
@include b(input) {
&:first-child {
border-top-right-radius: 0!important;
border-bottom-right-radius: 0!important;
@include e(border-mask) {
@include once {
@include b(input-group) {
display: inline-flex;
width: 100%;
flex-wrap: nowrap;
vertical-align: bottom;
& > {
@include b(input) {
&:not(:last-child) {
border-top-right-radius: 0!important;
border-bottom-right-radius: 0!important;
@include e(border-mask) {
border-top-right-radius: 0!important;
border-bottom-right-radius: 0!important;
}
}
}
&:last-child {
border-top-left-radius: 0!important;
border-bottom-left-radius: 0!important;
@include e(border-mask) {
&:not(:first-child) {
border-top-left-radius: 0!important;
border-bottom-left-radius: 0!important;
@include e(border-mask) {
border-top-left-radius: 0!important;
border-bottom-left-radius: 0!important;
}
}
&:not(:first-child) {
margin-left: -1px!important;
}
}
&:not(:last-child) {
margin-right: -1px!important;
}
&:not(:first-child):not(:last-child) {
border-radius: 0!important;
@include e(border-mask) {
border-radius: 0!important;
@include b(input-number) {
&:not(:last-child) {
border-top-right-radius: 0!important;
border-bottom-right-radius: 0!important;
@include e(input, add-button, border-mask) {
border-top-right-radius: 0!important;
border-bottom-right-radius: 0!important;
}
}
}
}
* {
&:first-child {
& > {
@include b(base-picker) {
@include b(base-picker-label) {
border-top-right-radius: 0!important;
border-bottom-right-radius: 0!important;
}
@include b(base-picker-tags) {
border-top-right-radius: 0!important;
border-bottom-right-radius: 0!important;
}
@include b(base-picker-border-mask) {
border-top-right-radius: 0!important;
border-bottom-right-radius: 0!important;
}
&:not(:first-child) {
border-top-left-radius: 0!important;
border-bottom-left-radius: 0!important;
@include e(input, minus-button, border-mask) {
border-top-left-radius: 0!important;
border-bottom-left-radius: 0!important;
}
}
}
&:last-child {
& > {
@include b(base-picker) {
@include b(base-picker-label) {
border-top-left-radius: 0!important;
border-bottom-left-radius: 0!important;
}
@include b(base-picker-tags) {
border-top-left-radius: 0!important;
border-bottom-left-radius: 0!important;
}
@include b(base-picker-border-mask) {
border-top-left-radius: 0!important;
border-bottom-left-radius: 0!important;
}
@include b(button) {
&:not(:last-child) {
border-top-right-radius: 0!important;
border-bottom-right-radius: 0!important;
@include e(border-mask) {
border-top-right-radius: 0!important;
border-bottom-right-radius: 0!important;
}
}
&:not(:first-child) {
border-top-left-radius: 0!important;
border-bottom-left-radius: 0!important;
@include e(border-mask) {
border-top-left-radius: 0!important;
border-bottom-left-radius: 0!important;
}
}
&:not(:first-child) {
@include not-m(default-type) {
margin-left: 0!important;
}
}
}
&:not(:last-child) {
margin-right: -1px!important;
}
&:not(:first-child):not(:last-child) {
& > {
@include b(base-picker) {
@include b(base-picker-label) {
border-radius: 0!important;
}
@include b(base-picker-tags) {
border-radius: 0!important;
}
@include b(base-picker-border-mask) {
border-radius: 0!important;
* {
&:not(:last-child) {
border-top-right-radius: 0!important;
border-bottom-right-radius: 0!important;
& > {
@include b(input) {
border-top-right-radius: 0!important;
border-bottom-right-radius: 0!important;
@include e(border-mask) {
border-top-right-radius: 0!important;
border-bottom-right-radius: 0!important;
}
}
}
& > {
border-top-right-radius: 0!important;
border-bottom-right-radius: 0!important;
@include b(base-picker) {
@include b(base-picker-label) {
border-top-right-radius: 0!important;
border-bottom-right-radius: 0!important;
}
@include b(base-picker-tags) {
border-top-right-radius: 0!important;
border-bottom-right-radius: 0!important;
}
@include b(base-picker-border-mask) {
border-top-right-radius: 0!important;
border-bottom-right-radius: 0!important;
}
}
}
}
&:not(:first-child) {
border-top-left-radius: 0!important;
border-bottom-left-radius: 0!important;
& > {
@include b(input) {
border-top-left-radius: 0!important;
border-bottom-left-radius: 0!important;
@include e(border-mask) {
border-top-left-radius: 0!important;
border-bottom-left-radius: 0!important;
}
}
}
& > {
@include b(base-picker) {
@include b(base-picker-label) {
border-top-left-radius: 0!important;
border-bottom-left-radius: 0!important;
}
@include b(base-picker-tags) {
border-top-left-radius: 0!important;
border-bottom-left-radius: 0!important;
}
@include b(base-picker-border-mask) {
border-top-left-radius: 0!important;
border-bottom-left-radius: 0!important;
}
}
}
}
&:not(:first-child) {
margin-left: -1px!important;
}
}
}

19
styles/InputNumber.scss
View File

@ -21,6 +21,7 @@
width: 152px;
display: inline-block;
outline: none;
z-index: auto;
@include m(disabled) {
@include e(minus-button, add-button) {
background: map-get($--input-number-button-background-color, 'disabled');
@ -49,13 +50,14 @@
@include input-number-size-mixin('small');
@include input-number-size-mixin('medium');
@include input-number-size-mixin('large');
@include e(border-layer) {
@include e(border-mask) {
position: absolute;
z-index: 1;
top: 0;
right: 0;
bottom: 0;
left: 0;
box-shadow: inset 0 0 0px 1px map-get($--input-number-border-color, 'default');
box-shadow: inset 0 0 0px 1px transparent;
border-radius: $--input-number-border-radius;
transition: box-shadow .3s $--n-ease-in-out-cubic-bezier;
pointer-events: none;
@ -64,6 +66,7 @@
outline: none;
position: absolute;
cursor: pointer;
z-index: auto;
top: 0;
padding: 0;
width: 28px;
@ -80,7 +83,7 @@
transition: background-color .3s $--n-ease-in-out-cubic-bezier, box-shadow .3s $--n-ease-in-out-cubic-bezier;
box-shadow: inset 0 0 0px 1px map-get($--input-number-border-color, 'default');
&:hover ~ {
@include e(border-layer) {
@include e(border-mask) {
box-shadow: inset 0 0 0px 1px map-get($--input-number-border-color, 'hover');
}
}
@ -122,14 +125,14 @@
transition: color .3s $--n-ease-in-out-cubic-bezier;
}
&:hover ~ {
@include e(border-layer) {
@include e(border-mask) {
box-shadow: inset 0 0 0px 1px map-get($--input-number-border-color, 'hover');
}
}
&:focus {
background-color: map-get($--input-number-background-color, 'focus');
& ~ {
@include e(border-layer) {
@include e(border-mask) {
box-shadow: map-get($--input-number-box-shadow, 'focus');
}
}
@ -146,19 +149,19 @@
@include as-form-item {
@include with-status(error) {
@include b(input-number) {
@include e(border-layer) {
@include e(border-mask) {
box-shadow: map-get($--input-number-box-shadow, 'error-default');
}
@include e(input) {
&:hover ~ {
@include e(border-layer) {
@include e(border-mask) {
box-shadow: map-get($--input-number-box-shadow, 'error-hover');
}
}
&:focus {
background-color: map-get($--input-number-background-color, 'error-focus');
& ~ {
@include e(border-layer) {
@include e(border-mask) {
box-shadow: map-get($--input-number-box-shadow, 'error-focus');
}
}

6
styles/base.scss
View File

@ -14,12 +14,6 @@ html {
// font-weight: 400;
}
@-moz-document url-prefix() {
body {
font-weight: lighter !important;
}
}
body {
margin: 0;
font-family: $--n-font-family;

1
styles/themes/dark/components/Input.scss
View File

@ -36,4 +36,5 @@
'disabled': inset 0 0 0 1px transparent,
'error-default': inset 0 0 0 1px $--error-6
) !global;
$--input-group-label-background-color: $--n-alpha-action-panel-color !global;
}

2
styles/themes/dark/index.scss
View File

@ -83,6 +83,8 @@
$--n-dialog-color: $--neutral-3 !global;
$--n-background-color: $--neutral-10 !global;
$--n-alpha-input-color: rgba(255, 255, 255, .12) !global;
$--n-action-panel-color: $--neutral-8 !global;
$--n-alpha-action-panel-color: $--overlay-8 !global;
@if ($in-js-env != true) {
@include setup-dark-divider;
@include setup-dark-scrollbar;

1
styles/themes/light/components/Input.scss
View File

@ -36,4 +36,5 @@
'disabled': inset 0 0 0 1px $--n-border-color,
'error-default': inset 0 0 0 1px $--error-5,
) !global;
$--input-group-label-background-color: $--n-action-panel-color !global;
}

2
styles/themes/light/index.scss
View File

@ -80,6 +80,8 @@
$--n-dialog-color: $--neutral-10 !global;
$--n-background-color: $--neutral-9 !global;
$--n-alpha-input-color: rgba(0, 0, 0, .04) !global;
$--n-action-panel-color: $--neutral-8 !global;
$--n-alpha-action-panel-color: $--overlay-8 !global;
@if ($in-js-env != true) {
@include setup-light-divider;
@include setup-light-scrollbar;