mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-12 12:25:16 +08:00
chore: rename Element folder to element
This commit is contained in:
07akioni
parent
9670587faa
commit
cf9c7151c4
11
src/Avatar/src/styles/index.js
Normal file
11
src/Avatar/src/styles/index.js
Normal file
@ -0,0 +1,11 @@
|
||||
import themedBaseStyle from './themed-base.cssr.js'
|
||||
|
||||
export default [
|
||||
{
|
||||
key: 'syntheticTheme',
|
||||
watch: [
|
||||
'syntheticTheme'
|
||||
],
|
||||
CNode: themedBaseStyle
|
||||
}
|
||||
]
|
||||
6
src/Avatar/src/styles/themed-base.cssr.js
Normal file
6
src/Avatar/src/styles/themed-base.cssr.js
Normal file
@ -0,0 +1,6 @@
|
||||
import { c, cTB, cB, cE, cM, cNotM } from '../../../_utils/cssr'
|
||||
|
||||
export default c([
|
||||
({ props }) => {
|
||||
}
|
||||
])
|
||||
9
src/Avatar/styles/dark.js
Normal file
9
src/Avatar/styles/dark.js
Normal file
@ -0,0 +1,9 @@
|
||||
import create from '../../styles/_utils/create-component-base'
|
||||
|
||||
export default create({
|
||||
theme: 'dark',
|
||||
name: '',
|
||||
getDerivedVariables ({ base, derived }) {
|
||||
return {}
|
||||
}
|
||||
})
|
||||
9
src/Avatar/styles/light.js
Normal file
9
src/Avatar/styles/light.js
Normal file
@ -0,0 +1,9 @@
|
||||
import create from '../../styles/_utils/create-component-base'
|
||||
|
||||
export default create({
|
||||
theme: 'light',
|
||||
name: '',
|
||||
getDerivedVariables ({ base, derived }) {
|
||||
return {}
|
||||
}
|
||||
})
|
||||
@ -1,9 +0,0 @@
|
||||
/* istanbul ignore file */
|
||||
import Element from './src/main.vue'
|
||||
|
||||
Element.install = function (Vue) {
|
||||
Vue.component(Element.name, Element)
|
||||
Vue.component('NEl', Element)
|
||||
}
|
||||
|
||||
export default Element
|
||||
@ -1,265 +0,0 @@
|
||||
@import './mixins/mixins.scss';
|
||||
|
||||
@mixin input-number-size-mixin ($size) {
|
||||
@include m($size + '-size') {
|
||||
$height: map-get($--n-height, $size);
|
||||
height: $height;
|
||||
line-height: $height;
|
||||
@include e(minus-button, add-button, input) {
|
||||
height: $height;
|
||||
line-height: $height
|
||||
}
|
||||
@include e(minus-button, add-button) {
|
||||
width: map-get($--n-input-number-button-width, $size);
|
||||
}
|
||||
@include e(input) {
|
||||
font-size: map-get($--n-font-size, $size);
|
||||
padding: 0 map-get($--n-input-number-button-width, $size);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include themes-mixin {
|
||||
@include b(input-number) {
|
||||
@include once {
|
||||
position: relative;
|
||||
border-radius: $--n-input-number-border-radius;
|
||||
box-sizing: border-box;
|
||||
width: 152px;
|
||||
display: inline-block;
|
||||
outline: none;
|
||||
z-index: auto;
|
||||
@include input-number-size-mixin('small');
|
||||
@include input-number-size-mixin('medium');
|
||||
@include input-number-size-mixin('large');
|
||||
@include e(border-mask) {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
box-shadow: inset 0 0 0px 1px transparent;
|
||||
border-radius: $--n-input-number-border-radius;
|
||||
transition: box-shadow .3s $--n-ease-in-out-cubic-bezier;
|
||||
pointer-events: none;
|
||||
}
|
||||
@include e(minus-button) {
|
||||
left: 0;
|
||||
border-top-left-radius: $--n-input-number-border-radius;
|
||||
border-bottom-left-radius: $--n-input-number-border-radius;
|
||||
@include b(input-number-button-border-mask) {
|
||||
border-top-left-radius: $--n-input-number-border-radius;
|
||||
border-bottom-left-radius: $--n-input-number-border-radius;
|
||||
}
|
||||
@include b(input-number-button-body) {
|
||||
left: 1px;
|
||||
right: 0;
|
||||
@include b(icon) {
|
||||
transform: translateX(-1px);
|
||||
}
|
||||
}
|
||||
@include b(input-number-button-boundary) {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
@include e(add-button) {
|
||||
right: 0;
|
||||
border-top-right-radius: $--n-input-number-border-radius;
|
||||
border-bottom-right-radius: $--n-input-number-border-radius;
|
||||
@include b(input-number-button-border-mask) {
|
||||
border-top-right-radius: $--n-input-number-border-radius;
|
||||
border-bottom-right-radius: $--n-input-number-border-radius;
|
||||
}
|
||||
@include b(input-number-button-body) {
|
||||
right: 1px;
|
||||
left: 0;
|
||||
@include b(icon) {
|
||||
transform: translateX(1px);
|
||||
}
|
||||
}
|
||||
@include b(input-number-button-boundary) {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include m(disabled) {
|
||||
@include e(minus-button, add-button) {
|
||||
@include b(input-number-button-body) {
|
||||
background-color: map-get($--input-number-button-background-color, 'disabled');
|
||||
}
|
||||
@include b(input-number-button-boundary) {
|
||||
background-color: map-get($--input-number-button-background-color, 'disabled');
|
||||
}
|
||||
@include b(icon) {
|
||||
fill: map-get($--input-number-button-text-color, 'disabled');
|
||||
stroke: map-get($--input-number-button-text-color, 'disabled');
|
||||
}
|
||||
@include once {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
@include e(input) {
|
||||
&::placeholder {
|
||||
color: map-get( $--input-placeholder-color, 'disabled');
|
||||
}
|
||||
background: map-get($--input-number-background-color, 'disabled');
|
||||
color: map-get($--input-number-text-color, 'disabled');
|
||||
@include once {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
@include once {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
@include m(invalid) {
|
||||
@include e(input) {
|
||||
@include once {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
text-decoration-color: $--input-number-text-decoration-color;
|
||||
}
|
||||
}
|
||||
@include e(minus-button, add-button) {
|
||||
@include once {
|
||||
background-color: transparent;
|
||||
overflow: hidden;
|
||||
outline: none;
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
z-index: auto;
|
||||
top: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
font-size: 14px;
|
||||
}
|
||||
@include b(input-number-button-border-mask) {
|
||||
@include once {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
transition:
|
||||
box-shadow .3s $--n-ease-in-out-cubic-bezier;
|
||||
}
|
||||
box-shadow: inset 0 0 0px 1px map-get($--input-number-border-color, 'default');
|
||||
}
|
||||
@include b(input-number-button-body) {
|
||||
@include once {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background-color .3s $--n-ease-in-out-cubic-bezier;
|
||||
}
|
||||
background-color: map-get($--input-number-button-background-color, 'default');
|
||||
}
|
||||
@include b(input-number-button-boundary) {
|
||||
@include once {
|
||||
width: 1px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
transition: background-color .3s $--n-ease-in-out-cubic-bezier;
|
||||
}
|
||||
background-color: map-get($--input-number-button-background-color, 'default');
|
||||
}
|
||||
@include b(icon) {
|
||||
fill: map-get($--input-number-button-text-color, 'default');
|
||||
stroke: map-get($--input-number-button-text-color, 'default');
|
||||
}
|
||||
&:hover ~ {
|
||||
@include e(border-mask) {
|
||||
box-shadow: inset 0 0 0px 1px map-get($--input-number-border-color, 'hover');
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
@include b(input-number-button-body) {
|
||||
background-color: map-get($--input-number-button-background-color, 'hover');
|
||||
}
|
||||
@include b(input-number-button-boundary) {
|
||||
background-color: map-get($--input-number-button-background-color, 'hover');
|
||||
}
|
||||
@include b(icon) {
|
||||
fill:map-get($--input-number-button-text-color, 'hover');
|
||||
stroke: map-get($--input-number-button-text-color, 'hover');
|
||||
}
|
||||
}
|
||||
&:active {
|
||||
@include once {
|
||||
transition:
|
||||
color .3s $--n-ease-in-out-cubic-bezier,
|
||||
background-color .15s $--n-ease-in-out-cubic-bezier;
|
||||
}
|
||||
@include b(input-number-button-body) {
|
||||
background-color: map-get($--input-number-button-background-color, 'active');
|
||||
}
|
||||
@include b(input-number-button-boundary) {
|
||||
background-color: map-get($--input-number-button-background-color, 'active');
|
||||
}
|
||||
@include b(icon) {
|
||||
fill:map-get($--input-number-button-text-color, 'active');
|
||||
stroke: map-get($--input-number-button-text-color, 'active');
|
||||
}
|
||||
}
|
||||
@include m(disabled) {
|
||||
@include once {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
@include b(input-number-button-body) {
|
||||
background-color: map-get($--input-number-button-background-color, 'disabled');
|
||||
}
|
||||
@include b(input-number-button-boundary) {
|
||||
background-color: map-get($--input-number-button-background-color, 'disabled');
|
||||
}
|
||||
@include b(icon) {
|
||||
fill: map-get($--input-number-button-text-color, 'disabled');
|
||||
stroke: map-get($--input-number-button-text-color, 'disabled');
|
||||
}
|
||||
}
|
||||
}
|
||||
@include e(input) {
|
||||
@include once {
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
border-radius: $--n-input-number-border-radius;
|
||||
transition:
|
||||
color .3s $--n-ease-in-out-cubic-bezier,
|
||||
caret-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,
|
||||
text-decoration-color .3s $--n-ease-in-out-cubic-bezier;
|
||||
border: none;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
background-color: map-get($--input-number-background-color, 'default');
|
||||
box-shadow: inset 0 0 0px 1px map-get($--input-number-border-color, 'default');
|
||||
color: map-get($--input-number-text-color, 'default');
|
||||
caret-color: $--input-number-caret-color;
|
||||
&::placeholder {
|
||||
@include once {
|
||||
transition: color .3s $--n-ease-in-out-cubic-bezier;
|
||||
}
|
||||
color: map-get( $--input-placeholder-color, 'default');
|
||||
}
|
||||
&:hover ~ {
|
||||
@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-mask) {
|
||||
box-shadow: map-get($--input-number-box-shadow, 'focus');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
9
src/element/index.js
Normal file
9
src/element/index.js
Normal file
@ -0,0 +1,9 @@
|
||||
/* istanbul ignore file */
|
||||
import Element from './src/Element.vue'
|
||||
|
||||
Element.install = function (Vue, naive) {
|
||||
Vue.component(naive.componentPrefix + Element.name, Element)
|
||||
Vue.component(naive.componentPrefix + 'El', Element)
|
||||
}
|
||||
|
||||
export default Element
|
||||
@ -4,8 +4,11 @@ import themeable from '../../_mixins/themeable'
|
||||
import styleScheme from '../../_utils/naive/styleScheme'
|
||||
|
||||
export default {
|
||||
name: 'NElement',
|
||||
mixins: [withapp, themeable],
|
||||
name: 'Element',
|
||||
mixins: [
|
||||
withapp,
|
||||
themeable
|
||||
],
|
||||
props: {
|
||||
as: {
|
||||
type: String,
|
||||
Loading…
Reference in New Issue
Block a user