mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-04-06 14:30:46 +08:00
wip(input): new theme
This commit is contained in:
07akioni
parent
74ca239059
commit
06688e5099
@ -5,7 +5,6 @@ Input can be disabled.
|
||||
```html
|
||||
<n-space vertical>
|
||||
<n-input
|
||||
v-model:value="value"
|
||||
type="input"
|
||||
size="small"
|
||||
placeholder="Oops! It is disabled."
|
||||
@ -13,20 +12,13 @@ Input can be disabled.
|
||||
round
|
||||
/>
|
||||
<n-input
|
||||
v-model:value="value"
|
||||
type="textarea"
|
||||
size="small"
|
||||
placeholder="Oops! It is disabled."
|
||||
:disabled="!active"
|
||||
round
|
||||
/>
|
||||
<n-input
|
||||
pair
|
||||
separator="to"
|
||||
v-model:value="value"
|
||||
clearable
|
||||
:disabled="!active"
|
||||
>
|
||||
<n-input pair separator="to" clearable :disabled="!active">
|
||||
<template #affix>
|
||||
<n-icon><cash-icon /></n-icon>
|
||||
</template>
|
||||
@ -44,8 +36,7 @@ export default {
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
active: false,
|
||||
value: null
|
||||
active: false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,7 +5,6 @@
|
||||
```html
|
||||
<n-space vertical>
|
||||
<n-input
|
||||
v-model:value="value"
|
||||
type="input"
|
||||
size="small"
|
||||
placeholder="噢！它被禁用了。"
|
||||
@ -13,20 +12,13 @@
|
||||
round
|
||||
/>
|
||||
<n-input
|
||||
v-model:value="value"
|
||||
type="textarea"
|
||||
size="small"
|
||||
placeholder="噢！它被禁用了。"
|
||||
:disabled="!active"
|
||||
round
|
||||
/>
|
||||
<n-input
|
||||
pair
|
||||
separator="to"
|
||||
v-model:value="value"
|
||||
clearable
|
||||
:disabled="!active"
|
||||
>
|
||||
<n-input pair separator="to" clearable :disabled="!active">
|
||||
<template #affix>
|
||||
<n-icon><cash-icon /></n-icon>
|
||||
</template>
|
||||
@ -44,8 +36,7 @@ export default {
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
active: false,
|
||||
value: null
|
||||
active: false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,17 +1,9 @@
|
||||
<template>
|
||||
<div
|
||||
:class="[
|
||||
'n-base-clear-button',
|
||||
{
|
||||
[`n-${theme}-theme`]: theme
|
||||
}
|
||||
]"
|
||||
>
|
||||
<div class="n-base-clear-button" :style="cssVars">
|
||||
<n-icon-switch-transition>
|
||||
<n-icon
|
||||
v-if="show"
|
||||
key="dismiss"
|
||||
:theme="null"
|
||||
:depth="null"
|
||||
class="n-base-clear-button__clear"
|
||||
@click="onClear"
|
||||
@ -27,25 +19,23 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { computed, defineComponent } from 'vue'
|
||||
import { DismissCircleIcon } from '../../icons'
|
||||
import { NIcon } from '../../../icon'
|
||||
import { NIconSwitchTransition } from '../../../_base'
|
||||
import { withCssr } from '../../../_mixins'
|
||||
import styles from './styles'
|
||||
import { useTheme } from '../../../_mixins'
|
||||
import { baseClearButtonLight } from '../styles'
|
||||
import style from './styles/index.cssr.js'
|
||||
|
||||
export default {
|
||||
export default defineComponent({
|
||||
name: 'BaseClearButton',
|
||||
components: {
|
||||
NIcon,
|
||||
DismissCircleIcon,
|
||||
NIconSwitchTransition
|
||||
},
|
||||
mixins: [withCssr(styles)],
|
||||
props: {
|
||||
theme: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
...useTheme.props,
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
@ -54,6 +44,30 @@ export default {
|
||||
type: Function,
|
||||
default: undefined
|
||||
}
|
||||
},
|
||||
setup (props) {
|
||||
const themeRef = useTheme(
|
||||
'BaseClearButton',
|
||||
'BaseClearButton',
|
||||
style,
|
||||
baseClearButtonLight,
|
||||
props
|
||||
)
|
||||
return {
|
||||
cssVars: computed(() => {
|
||||
const {
|
||||
common: { cubicBezierEaseInOut },
|
||||
self: { size, color, colorHover, colorPressed }
|
||||
} = themeRef.value
|
||||
return {
|
||||
'--bezier': cubicBezierEaseInOut,
|
||||
'--color': color,
|
||||
'--size': size,
|
||||
'--color-hover': colorHover,
|
||||
'--color-pressed': colorPressed
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
46
src/_base/clear-button/src/styles/index.cssr.js
Normal file
46
src/_base/clear-button/src/styles/index.cssr.js
Normal file
@ -0,0 +1,46 @@
|
||||
import { cB, c, cE } from '../../../../_utils/cssr'
|
||||
import createIconSwitchTransition from '../../../../_styles/transitions/icon-switch'
|
||||
|
||||
// vars:
|
||||
// --cb-bezier
|
||||
// --cb-color
|
||||
// --cb-size
|
||||
// --cb-color-hover
|
||||
// --cb-color-pressed
|
||||
export default cB('base-clear-button', {
|
||||
flexShrink: 0,
|
||||
height: '1em',
|
||||
width: '1em',
|
||||
position: 'relative'
|
||||
}, [
|
||||
c('>', [
|
||||
cE('clear', {
|
||||
fontSize: 'var(--cb-size)!important',
|
||||
cursor: 'pointer',
|
||||
color: 'var(--cb-color)!important',
|
||||
transition: 'color .3s var(--cb-bezier)!important'
|
||||
}, [
|
||||
c('&:hover', {
|
||||
color: 'var(--cb-color-hover)!important'
|
||||
}),
|
||||
c('&:active', {
|
||||
color: 'var(--cb-color-pressed)!important'
|
||||
})
|
||||
]),
|
||||
cE('placeholder', {
|
||||
display: 'flex'
|
||||
}),
|
||||
cE('clear, placeholder', {
|
||||
position: 'absolute',
|
||||
left: '50%',
|
||||
top: '50%',
|
||||
transform: 'translateX(-50%) translateY(-50%)'
|
||||
}, [
|
||||
createIconSwitchTransition({
|
||||
originalTransform: 'translateX(-50%) translateY(-50%)',
|
||||
left: '50%',
|
||||
top: '50%'
|
||||
})
|
||||
])
|
||||
])
|
||||
])
|
||||
@ -1,9 +0,0 @@
|
||||
import baseStyle from './themed-base.cssr'
|
||||
|
||||
export default [
|
||||
{
|
||||
key: 'theme',
|
||||
watch: ['theme'],
|
||||
CNode: baseStyle
|
||||
}
|
||||
]
|
||||
@ -1,55 +0,0 @@
|
||||
import { cTB, c, cE } from '../../../../_utils/cssr'
|
||||
import createIconSwitchTransition from '../../../../_styles/transitions/icon-switch'
|
||||
|
||||
export default c([
|
||||
({ props }) => {
|
||||
const {
|
||||
$global: {
|
||||
cubicBezierEaseInOut
|
||||
},
|
||||
$local: {
|
||||
size,
|
||||
color,
|
||||
colorHover,
|
||||
colorPressed
|
||||
}
|
||||
} = props
|
||||
return cTB('base-clear-button', {
|
||||
flexShrink: 0,
|
||||
height: '1em',
|
||||
width: '1em',
|
||||
position: 'relative'
|
||||
}, [
|
||||
c('>', [
|
||||
cE('clear', {
|
||||
fontSize: `${size} !important`,
|
||||
cursor: 'pointer',
|
||||
color,
|
||||
transition: `color .3s ${cubicBezierEaseInOut}`
|
||||
}, [
|
||||
c('&:hover', {
|
||||
color: colorHover
|
||||
}),
|
||||
c('&:active', {
|
||||
color: colorPressed
|
||||
})
|
||||
]),
|
||||
cE('placeholder', {
|
||||
display: 'flex'
|
||||
}),
|
||||
cE('clear, placeholder', {
|
||||
position: 'absolute',
|
||||
left: '50%',
|
||||
top: '50%',
|
||||
transform: 'translateX(-50%) translateY(-50%)'
|
||||
}, [
|
||||
createIconSwitchTransition({
|
||||
originalTransform: 'translateX(-50%) translateY(-50%)',
|
||||
left: '50%',
|
||||
top: '50%'
|
||||
})
|
||||
])
|
||||
])
|
||||
])
|
||||
}
|
||||
])
|
||||
@ -1,11 +1,15 @@
|
||||
import create from '../../../_styles/utils/create-component-base'
|
||||
import commonVariables from './_common'
|
||||
import { scaleColor } from 'seemly'
|
||||
import { commonDark } from '../../../_styles/new-common'
|
||||
import { iconDark } from '../../../icon/styles'
|
||||
|
||||
export default create({
|
||||
export default {
|
||||
name: 'BaseClearButton',
|
||||
theme: 'dark',
|
||||
getLocalVars (vars) {
|
||||
common: commonDark,
|
||||
peers: {
|
||||
Icon: iconDark
|
||||
},
|
||||
self (vars) {
|
||||
const { textColor4Overlay } = vars
|
||||
return {
|
||||
...commonVariables,
|
||||
@ -14,4 +18,4 @@ export default create({
|
||||
colorPressed: scaleColor(textColor4Overlay, { alpha: 0.75 })
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
@ -1,11 +1,15 @@
|
||||
import create from '../../../_styles/utils/create-component-base'
|
||||
import commonVariables from './_common'
|
||||
import { scaleColor } from 'seemly'
|
||||
import { commonLight } from '../../../_styles/new-common'
|
||||
import { iconLight } from '../../../icon/styles'
|
||||
|
||||
export default create({
|
||||
export default {
|
||||
name: 'BaseClearButton',
|
||||
theme: 'light',
|
||||
getLocalVars (vars) {
|
||||
common: commonLight,
|
||||
peers: {
|
||||
Icon: iconLight
|
||||
},
|
||||
self (vars) {
|
||||
const { textColor4Overlay } = vars
|
||||
return {
|
||||
...commonVariables,
|
||||
@ -14,4 +18,4 @@ export default create({
|
||||
colorPressed: scaleColor(textColor4Overlay, { alpha: 1.25 })
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
@ -1,8 +1,10 @@
|
||||
export { default as useFormItem } from './use-as-form-item'
|
||||
export { default as locale } from './locale'
|
||||
export { default as themeable } from './themeable'
|
||||
export { default as configurable } from './configurable'
|
||||
export { default as withCssr } from './with-cssr'
|
||||
export { default as registerable } from './registerable'
|
||||
|
||||
export { default as useFormItem } from './use-as-form-item'
|
||||
export { default as useTheme } from './use-theme'
|
||||
export { default as useConfig } from './use-config'
|
||||
export { default as useLocale } from './use-locale'
|
||||
|
||||
19
src/_mixins/use-locale.js
Normal file
19
src/_mixins/use-locale.js
Normal file
@ -0,0 +1,19 @@
|
||||
import { inject, computed, getCurrentInstance } from 'vue'
|
||||
|
||||
export default function createLocaleMixin (componentLocaleNamespace) {
|
||||
const vm = getCurrentInstance().proxy
|
||||
const NConfigProvider = inject('NConfigProvider', {})
|
||||
const globalLocaleRef = computed(() => {
|
||||
const { locale } = NConfigProvider
|
||||
if (locale) return locale
|
||||
const { mergedLanguage } = NConfigProvider
|
||||
const {
|
||||
$naive: { locales, fallbackLocale }
|
||||
} = vm
|
||||
return locales[mergedLanguage ?? fallbackLocale]
|
||||
})
|
||||
return {
|
||||
dateLocale: computed(() => globalLocaleRef.value._dateFns),
|
||||
locale: computed(() => globalLocaleRef.value[componentLocaleNamespace])
|
||||
}
|
||||
}
|
||||
@ -53,7 +53,7 @@ export default defineComponent({
|
||||
common: { cubicBezierEaseInOut },
|
||||
self
|
||||
} = themeRef.value
|
||||
if (depth !== undefined) {
|
||||
if (depth !== undefined && depth !== null) {
|
||||
const { color, [`opacity${depth}Depth`]: opacity } = self
|
||||
return {
|
||||
'--bezier': cubicBezierEaseInOut,
|
||||
|
||||
@ -1,21 +1,20 @@
|
||||
<template>
|
||||
<div
|
||||
ref="wrapper"
|
||||
ref="wrapperRef"
|
||||
class="n-input"
|
||||
:class="{
|
||||
'n-input--disabled': disabled,
|
||||
[`n-input--${mergedSize}-size`]: true,
|
||||
'n-input--textarea': isTextarea,
|
||||
'n-input--round': round && !isTextarea,
|
||||
'n-input--textarea': type === 'textarea',
|
||||
'n-input--round': round && !(type === 'textarea'),
|
||||
'n-input--clearable': clearable,
|
||||
'n-input--split': pair,
|
||||
'n-input--focus': mergedFocus,
|
||||
'n-input--suffix': $slots.suffix,
|
||||
'n-input--prefix': $slots.prefix || $slots.affix,
|
||||
'n-input--stateful': stateful,
|
||||
'n-input--bordered': mergedBordered,
|
||||
[`n-${mergedTheme}-theme`]: mergedTheme
|
||||
'n-input--stateful': stateful
|
||||
}"
|
||||
:style="cssVars"
|
||||
:tabindex="!disabled && passivelyActivated && !inputFocused ? 0 : false"
|
||||
@focus="handleWrapperFocus"
|
||||
@blur="handleWrapperBlur"
|
||||
@ -28,13 +27,13 @@
|
||||
@compositionend="handleCompositionEnd"
|
||||
>
|
||||
<pre
|
||||
v-if="isTextarea && autosize"
|
||||
ref="textareaMirrow"
|
||||
v-if="type === 'textarea' && autosize"
|
||||
ref="textareaMirrorRef"
|
||||
class="n-input__textarea-mirror"
|
||||
>{{ mergedValue }}<br></pre>
|
||||
<textarea
|
||||
v-if="type === 'textarea'"
|
||||
ref="textarea"
|
||||
ref="textareaRef"
|
||||
class="n-input__textarea"
|
||||
:class="{
|
||||
'n-input__textarea--autosize': autosize
|
||||
@ -71,17 +70,10 @@
|
||||
@blur="handleInputBlur"
|
||||
@focus="handleInputFocus"
|
||||
@input="handleInput($event, 0)"
|
||||
@change="handleChange"
|
||||
@change="handleChange($event, 0)"
|
||||
@keyup="handleKeyUp"
|
||||
>
|
||||
<div
|
||||
v-if="
|
||||
!isComposing &&
|
||||
(!mergedValue || (Array.isArray(mergedValue) && !mergedValue[0])) &&
|
||||
mergedPlaceholder[0]
|
||||
"
|
||||
class="n-input__placeholder"
|
||||
>
|
||||
<div v-if="showPlaceholder1" class="n-input__placeholder">
|
||||
{{ mergedPlaceholder[0] }}
|
||||
</div>
|
||||
</div>
|
||||
@ -90,7 +82,7 @@
|
||||
</span>
|
||||
<div v-if="pair" class="n-input-second-input">
|
||||
<input
|
||||
ref="secondInput"
|
||||
ref="input2"
|
||||
:type="type"
|
||||
class="n-input__input n-input__input--second"
|
||||
:tabindex="passivelyActivated && !inputFocused ? -1 : false"
|
||||
@ -103,17 +95,10 @@
|
||||
@blur="handleInputBlur"
|
||||
@focus="handleInputFocus"
|
||||
@input="handleInput($event, 1)"
|
||||
@change="handleChange"
|
||||
@change="handleChange($event, 1)"
|
||||
@keyup="handleKeyUp"
|
||||
>
|
||||
<div
|
||||
v-if="
|
||||
!isComposing &&
|
||||
(!mergedValue || (Array.isArray(mergedValue) && !mergedValue[1])) &&
|
||||
mergedPlaceholder[1]
|
||||
"
|
||||
class="n-input__placeholder"
|
||||
>
|
||||
<div v-if="showPlaceholder2" class="n-input__placeholder">
|
||||
{{ mergedPlaceholder[1] }}
|
||||
</div>
|
||||
</div>
|
||||
@ -129,47 +114,285 @@
|
||||
<n-icon-config-provider class="n-input__suffix" :depth="disabled ? 5 : 4">
|
||||
<slot name="suffix" />
|
||||
<n-base-clear-button
|
||||
:theme="mergedTheme"
|
||||
:theme="'light'"
|
||||
:show="showClearButton"
|
||||
@clear="handleClear"
|
||||
>
|
||||
<slot name="clear" />
|
||||
</n-base-clear-button>
|
||||
</n-icon-config-provider>
|
||||
<div
|
||||
v-if="isTextarea && !isComposing && placeholder && !pair && !mergedValue"
|
||||
class="n-input__placeholder"
|
||||
>
|
||||
<div v-if="showTextareaPlaceholder" class="n-input__placeholder">
|
||||
{{ placeholder }}
|
||||
</div>
|
||||
<div class="n-input__border" />
|
||||
<div class="n-input__state-border" />
|
||||
<div class="n-input__box-shadow" />
|
||||
<div v-if="mergedBordered" class="n-input__border" />
|
||||
<div v-if="mergedBordered" class="n-input__state-border" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, toRef } from 'vue'
|
||||
import {
|
||||
computed,
|
||||
defineComponent,
|
||||
nextTick,
|
||||
ref,
|
||||
toRef,
|
||||
watch,
|
||||
onMounted
|
||||
} from 'vue'
|
||||
import { useMergedState } from 'vooks'
|
||||
import { NBaseClearButton } from '../../_base'
|
||||
import {
|
||||
configurable,
|
||||
themeable,
|
||||
locale,
|
||||
withCssr,
|
||||
useFormItem
|
||||
} from '../../_mixins'
|
||||
import { call } from '../../_utils'
|
||||
import styles from './styles/input'
|
||||
import { useTheme, useLocale, useFormItem, useConfig } from '../../_mixins'
|
||||
import { call, createKey } from '../../_utils'
|
||||
import NIconConfigProvider from '../../icon/src/IconConfigProvider.vue'
|
||||
import style from './styles/input.cssr.js'
|
||||
import { inputLight } from '../styles'
|
||||
|
||||
export default {
|
||||
function createMethods (
|
||||
props,
|
||||
formItem,
|
||||
{
|
||||
mergedValueRef,
|
||||
uncontrolledValueRef,
|
||||
isComposingRef,
|
||||
focusedRef,
|
||||
hoverRef,
|
||||
inputFocusedRef,
|
||||
wrapperRef,
|
||||
inputRef,
|
||||
input2Ref,
|
||||
textareaRef,
|
||||
textareaMirrorRef
|
||||
}
|
||||
) {
|
||||
const doInput = (value) => {
|
||||
const { 'onUpdate:value': onUpdateValue, onInput } = props
|
||||
const { nTriggerFormInput } = formItem
|
||||
if (onUpdateValue) call(onUpdateValue, value)
|
||||
if (onInput) call(onInput, value)
|
||||
uncontrolledValueRef.value = value
|
||||
nTriggerFormInput()
|
||||
}
|
||||
const doChange = (value) => {
|
||||
const { onChange } = props
|
||||
const { nTriggerFormChange } = formItem
|
||||
if (onChange) call(onChange, value)
|
||||
uncontrolledValueRef.value = value
|
||||
nTriggerFormChange()
|
||||
}
|
||||
const doBlur = (e) => {
|
||||
const { onBlur } = props
|
||||
const { nTriggerFormBlur } = formItem
|
||||
if (onBlur) call(onBlur, e)
|
||||
nTriggerFormBlur()
|
||||
}
|
||||
const doFocus = (e) => {
|
||||
const { onFocus } = props
|
||||
const { nTriggerFormFocus } = formItem
|
||||
if (onFocus) call(onFocus, e)
|
||||
nTriggerFormFocus()
|
||||
}
|
||||
const doClear = (...args) => {
|
||||
const { onClear } = props
|
||||
if (onClear) call(onClear, ...args)
|
||||
}
|
||||
const doInputBlur = (e) => {
|
||||
const { onInputBlur } = props
|
||||
if (onInputBlur) call(onInputBlur, e)
|
||||
}
|
||||
const doInputFocus = (e) => {
|
||||
const { onInputFocus } = props
|
||||
if (onInputFocus) call(onInputFocus, e)
|
||||
}
|
||||
const doDeactivate = () => {
|
||||
const { onDeactivate } = props
|
||||
if (onDeactivate) call(onDeactivate)
|
||||
}
|
||||
const doActivate = () => {
|
||||
const { onActivate } = props
|
||||
if (onActivate) call(onActivate)
|
||||
}
|
||||
const doKeyUp = (e) => {
|
||||
const { onKeyUp } = props
|
||||
if (onKeyUp) call(onKeyUp, e)
|
||||
}
|
||||
const doClick = (e) => {
|
||||
const { onClick } = props
|
||||
if (onClick) call(onClick, e)
|
||||
}
|
||||
const doWrapperFocus = (e) => {
|
||||
const { onWrapperFocus } = props
|
||||
if (onWrapperFocus) call(onWrapperFocus, e)
|
||||
}
|
||||
const doWrapperBlur = (e) => {
|
||||
const { onWrapperBlur } = props
|
||||
if (onWrapperBlur) call(onWrapperBlur, e)
|
||||
}
|
||||
// methods
|
||||
const handleCompositionStart = () => {
|
||||
isComposingRef.value = true
|
||||
}
|
||||
const handleCompositionEnd = (e) => {
|
||||
isComposingRef.value = false
|
||||
if (e.target === input2Ref.value) {
|
||||
handleInput(e, 1)
|
||||
} else {
|
||||
handleInput(e, 0)
|
||||
}
|
||||
}
|
||||
const handleInput = (e, index, event = 'input') => {
|
||||
if (isComposingRef.value) return
|
||||
const changedValue = e.target.value
|
||||
if (!props.pair) {
|
||||
event === 'input' ? doInput(changedValue) : doChange(changedValue)
|
||||
} else {
|
||||
let { value } = mergedValueRef
|
||||
if (!Array.isArray(value)) {
|
||||
value = [null, null]
|
||||
} else {
|
||||
value = [...value]
|
||||
}
|
||||
value[index] = changedValue
|
||||
event === 'input' ? doInput(value) : doChange(value)
|
||||
}
|
||||
/** force update to sync input's view with value */
|
||||
// ? this.$forceUpdate()
|
||||
}
|
||||
const handleInputBlur = (e) => {
|
||||
doInputBlur(e)
|
||||
if (e.relatedTarget === wrapperRef.value) {
|
||||
doDeactivate()
|
||||
}
|
||||
if (
|
||||
!(
|
||||
e.relatedTarget === inputRef.value ||
|
||||
e.relatedTarget === input2Ref.value ||
|
||||
e.relatedTarget === textareaRef.value
|
||||
)
|
||||
) {
|
||||
inputFocusedRef.value = false
|
||||
}
|
||||
dealWithEvent(e, 'blur')
|
||||
}
|
||||
const handleInputFocus = (e) => {
|
||||
doInputFocus(e)
|
||||
focusedRef.value = true
|
||||
inputFocusedRef.value = true
|
||||
doActivate()
|
||||
dealWithEvent(e, 'focus')
|
||||
}
|
||||
const handleWrapperBlur = (e) => {
|
||||
if (props.passivelyActivated) {
|
||||
doWrapperBlur(e)
|
||||
dealWithEvent(e, 'blur')
|
||||
}
|
||||
}
|
||||
const handleWrapperFocus = (e) => {
|
||||
if (props.passivelyActivated) {
|
||||
focusedRef.value = true
|
||||
doWrapperFocus(e)
|
||||
dealWithEvent(e, 'focus')
|
||||
}
|
||||
}
|
||||
const dealWithEvent = (e, type) => {
|
||||
if (
|
||||
e.relatedTarget === inputRef.value ||
|
||||
e.relatedTarget === input2Ref.value ||
|
||||
e.relatedTarget === textareaRef.value ||
|
||||
e.relatedTarget === wrapperRef.value
|
||||
) {
|
||||
/**
|
||||
* activeElement transfer inside the input, do nothing
|
||||
*/
|
||||
} else {
|
||||
if (type === 'focus') {
|
||||
doFocus(e)
|
||||
focusedRef.value = true
|
||||
} else if (type === 'blur') {
|
||||
doBlur(e)
|
||||
focusedRef.value = false
|
||||
}
|
||||
}
|
||||
}
|
||||
const handleKeyUp = (e) => {
|
||||
doKeyUp(e)
|
||||
}
|
||||
const handleChange = (e, index) => handleInput(e, index, 'change')
|
||||
const handleClick = (e) => {
|
||||
doClick(e)
|
||||
}
|
||||
const handleClear = (e) => {
|
||||
doClear(e)
|
||||
if (props.pair) {
|
||||
doInput([])
|
||||
} else {
|
||||
doInput('')
|
||||
}
|
||||
}
|
||||
const handleMouseEnter = () => {
|
||||
hoverRef.value = true
|
||||
}
|
||||
const handleMouseLeave = () => {
|
||||
hoverRef.value = false
|
||||
}
|
||||
const handleWrapperKeyDownEnter = (e) => {
|
||||
if (props.passivelyActivated) {
|
||||
if (inputFocusedRef.value && props.deactivateOnEnter) {
|
||||
handleWrapperKeyDownEsc()
|
||||
return
|
||||
}
|
||||
e.preventDefault()
|
||||
if (props.type === 'textarea') {
|
||||
textareaRef.value.focus()
|
||||
} else {
|
||||
inputRef.value.focus()
|
||||
}
|
||||
}
|
||||
}
|
||||
const handleWrapperKeyDownEsc = () => {
|
||||
if (props.passivelyActivated) {
|
||||
inputFocusedRef.value = false
|
||||
nextTick(() => {
|
||||
wrapperRef.value.focus()
|
||||
})
|
||||
}
|
||||
}
|
||||
return {
|
||||
doInput,
|
||||
doChange,
|
||||
doFocus,
|
||||
doBlur,
|
||||
doClear,
|
||||
doWrapperFocus,
|
||||
doWrapperBlur,
|
||||
doInputFocus,
|
||||
doInputBlur,
|
||||
doActivate,
|
||||
doDeactivate,
|
||||
doClick,
|
||||
doKeyUp,
|
||||
handleCompositionStart,
|
||||
handleCompositionEnd,
|
||||
handleInput,
|
||||
handleInputBlur,
|
||||
handleInputFocus,
|
||||
handleWrapperBlur,
|
||||
handleWrapperFocus,
|
||||
handleMouseEnter,
|
||||
handleMouseLeave,
|
||||
handleKeyUp,
|
||||
handleChange,
|
||||
handleClick,
|
||||
handleClear,
|
||||
handleWrapperKeyDownEnter
|
||||
}
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Input',
|
||||
components: {
|
||||
NIconConfigProvider,
|
||||
NBaseClearButton
|
||||
},
|
||||
mixins: [configurable, themeable, locale('Input'), withCssr(styles)],
|
||||
props: {
|
||||
bordered: {
|
||||
type: Boolean,
|
||||
@ -325,317 +548,231 @@ export default {
|
||||
}
|
||||
},
|
||||
setup (props) {
|
||||
const themeRef = useTheme('Input', 'Input', style, inputLight, props)
|
||||
// dom refs
|
||||
const wrapperRef = ref(null)
|
||||
const textareaRef = ref(null)
|
||||
const textareaMirrorRef = ref(null)
|
||||
const inputRef = ref(null)
|
||||
const input2Ref = ref(null)
|
||||
// local
|
||||
const { locale } = useLocale('Input')
|
||||
// value
|
||||
const uncontrolledValueRef = ref(props.defaultValue)
|
||||
const controlledValueRef = toRef(props, 'value')
|
||||
const mergedValueRef = useMergedState(
|
||||
controlledValueRef,
|
||||
uncontrolledValueRef
|
||||
)
|
||||
return {
|
||||
uncontrolledValue: uncontrolledValueRef,
|
||||
mergedValue: mergedValueRef,
|
||||
focused: ref(false),
|
||||
hover: ref(false),
|
||||
isComposing: ref(false),
|
||||
inputFocused: ref(false),
|
||||
...useFormItem(props)
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
mergedPlaceholder () {
|
||||
const { placeholder } = this
|
||||
if (this.pair) {
|
||||
// form-item
|
||||
const formItem = useFormItem(props)
|
||||
const { mergedSize: mergedSizeRef } = formItem
|
||||
// states
|
||||
const focusedRef = ref(false)
|
||||
const hoverRef = ref(false)
|
||||
const isComposingRef = ref(false)
|
||||
const inputFocusedRef = ref(false)
|
||||
// placeholder
|
||||
const mergedPlaceholderRef = computed(() => {
|
||||
const { placeholder, pair } = props
|
||||
if (pair) {
|
||||
if (Array.isArray(placeholder)) {
|
||||
return placeholder
|
||||
} else {
|
||||
return [placeholder, placeholder]
|
||||
}
|
||||
} else if (placeholder === undefined) {
|
||||
return [this.locale.placeholder]
|
||||
return [locale.value.placeholder]
|
||||
} else {
|
||||
return [placeholder]
|
||||
}
|
||||
},
|
||||
mergedFocus () {
|
||||
return this.forceFocus || this.focused
|
||||
},
|
||||
showClearButton () {
|
||||
})
|
||||
const showPlaceholder1Ref = computed(() => {
|
||||
const { value: isComposing } = isComposingRef
|
||||
const { value: mergedValue } = mergedValueRef
|
||||
const { value: mergedPlaceholder } = mergedPlaceholderRef
|
||||
return (
|
||||
!isComposing &&
|
||||
(!mergedValue || (Array.isArray(mergedValue) && !mergedValue[0])) &&
|
||||
mergedPlaceholder[0]
|
||||
)
|
||||
})
|
||||
const showPlaceholder2Ref = computed(() => {
|
||||
const { value: isComposing } = isComposingRef
|
||||
const { value: mergedValue } = mergedValueRef
|
||||
const { value: mergedPlaceholder } = mergedPlaceholderRef
|
||||
return (
|
||||
!isComposing &&
|
||||
mergedPlaceholder[1] &&
|
||||
(!mergedValue || (Array.isArray(mergedValue) && !mergedValue[1]))
|
||||
)
|
||||
})
|
||||
const showTextareaPlaceholderRef = computed(() => {
|
||||
return (
|
||||
props.type === 'textarea' &&
|
||||
!isComposingRef.value &&
|
||||
!mergedValueRef.value &&
|
||||
mergedPlaceholderRef.value
|
||||
)
|
||||
})
|
||||
// clear
|
||||
const showClearButton = computed(() => {
|
||||
if (
|
||||
this.disabled ||
|
||||
!this.clearable ||
|
||||
(!this.mergedFocus && !this.hover)
|
||||
props.disabled ||
|
||||
!props.clearable ||
|
||||
(!mergedFocusRef.value && !hoverRef.value)
|
||||
) {
|
||||
return false
|
||||
}
|
||||
const { mergedValue } = this
|
||||
if (this.pair) {
|
||||
const { value: mergedValue } = mergedValueRef
|
||||
const { value: mergedFocus } = mergedFocusRef
|
||||
if (props.pair) {
|
||||
return (
|
||||
!!(
|
||||
Array.isArray(mergedValue) &&
|
||||
(mergedValue[0] || mergedValue[1])
|
||||
) &&
|
||||
(this.hover || this.mergedFocus)
|
||||
(hoverRef.value || mergedFocus)
|
||||
)
|
||||
} else {
|
||||
return !!mergedValue && (this.hover || this.mergedFocus)
|
||||
return !!mergedValue && (hoverRef.value || mergedFocus)
|
||||
}
|
||||
},
|
||||
isTextarea () {
|
||||
return this.type === 'textarea'
|
||||
},
|
||||
isInput () {
|
||||
return !this.isTextarea
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
mergedValue () {
|
||||
if (this.isTextarea && this.autosize) {
|
||||
this.$nextTick(this.updateTextAreaStyle)
|
||||
}
|
||||
},
|
||||
mergedSize () {
|
||||
if (this.isTextarea && this.autosize) {
|
||||
this.$nextTick(this.updateTextAreaStyle)
|
||||
})
|
||||
// focus
|
||||
const mergedFocusRef = computed(() => {
|
||||
return props.forceFocus || focusedRef.value
|
||||
})
|
||||
// textarea autosize
|
||||
const updateTextAreaStyle = () => {
|
||||
if (props.type === 'textarea') {
|
||||
const { autosize } = props
|
||||
if (!autosize) return
|
||||
const {
|
||||
paddingTop: stylePaddingTop,
|
||||
paddingBottom: stylePaddingBottom,
|
||||
lineHeight: styleLineHeight
|
||||
} = window.getComputedStyle(textareaRef.value)
|
||||
const paddingTop = Number(stylePaddingTop.slice(0, -2))
|
||||
const paddingBottom = Number(stylePaddingBottom.slice(0, -2))
|
||||
const lineHeight = Number(styleLineHeight.slice(0, -2))
|
||||
if (autosize.minRows) {
|
||||
const minRows = Math.max(autosize.minRows, 1)
|
||||
const styleMinHeight =
|
||||
paddingTop + paddingBottom + lineHeight * minRows + 'px'
|
||||
textareaMirrorRef.value.style.minHeight = styleMinHeight
|
||||
}
|
||||
if (autosize.maxRows) {
|
||||
const maxRows = Math.max(autosize.maxRows, autosize.minRows, 1)
|
||||
const styleMaxHeight =
|
||||
paddingTop + paddingBottom + lineHeight * maxRows + 'px'
|
||||
textareaMirrorRef.value.style.maxHeight = styleMaxHeight
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
if (this.isTextarea && this.autosize) {
|
||||
this.$nextTick(this.updateTextAreaStyle)
|
||||
watch([mergedValueRef, mergedSizeRef], () => {
|
||||
nextTick(updateTextAreaStyle)
|
||||
})
|
||||
onMounted(updateTextAreaStyle)
|
||||
// other methods
|
||||
const methods = createMethods(props, formItem, {
|
||||
mergedValueRef,
|
||||
uncontrolledValueRef,
|
||||
isComposingRef,
|
||||
focusedRef,
|
||||
hoverRef,
|
||||
inputFocusedRef,
|
||||
wrapperRef,
|
||||
inputRef,
|
||||
input2Ref,
|
||||
textareaRef,
|
||||
textareaMirrorRef
|
||||
})
|
||||
const focus = () => {
|
||||
if (props.disabled) return
|
||||
if (props.passivelyActivated) {
|
||||
wrapperRef.value.focus()
|
||||
} else {
|
||||
if (textareaRef.value) textareaRef.value.focus()
|
||||
else if (inputRef.value) inputRef.value.focus()
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
doInput (value) {
|
||||
const {
|
||||
'onUpdate:value': onUpdateValue,
|
||||
onInput,
|
||||
nTriggerFormInput
|
||||
} = this
|
||||
if (onUpdateValue) call(onUpdateValue, value)
|
||||
if (onInput) call(onInput, value)
|
||||
this.uncontrolledValue = value
|
||||
nTriggerFormInput()
|
||||
},
|
||||
doChange (value) {
|
||||
const { onChange, nTriggerFormChange } = this
|
||||
if (onChange) call(onChange, value)
|
||||
this.uncontrolledValue = value
|
||||
nTriggerFormChange()
|
||||
},
|
||||
doBlur (e) {
|
||||
const { onBlur, nTriggerFormBlur } = this
|
||||
if (onBlur) call(onBlur, e)
|
||||
nTriggerFormBlur()
|
||||
},
|
||||
doFocus (e) {
|
||||
const { onFocus, nTriggerFormFocus } = this
|
||||
if (onFocus) call(onFocus, e)
|
||||
nTriggerFormFocus()
|
||||
},
|
||||
doClear (...args) {
|
||||
const { onClear } = this
|
||||
if (onClear) call(onClear, ...args)
|
||||
},
|
||||
doInputBlur (e) {
|
||||
const { onInputBlur } = this
|
||||
if (onInputBlur) call(onInputBlur, e)
|
||||
},
|
||||
doInputFocus (e) {
|
||||
const { onInputFocus } = this
|
||||
if (onInputFocus) call(onInputFocus, e)
|
||||
},
|
||||
doDeactivate () {
|
||||
const { onDeactivate } = this
|
||||
if (onDeactivate) call(onDeactivate)
|
||||
},
|
||||
doActivate () {
|
||||
const { onActivate } = this
|
||||
if (onActivate) call(onActivate)
|
||||
},
|
||||
doKeyUp (e) {
|
||||
const { onKeyUp } = this
|
||||
if (onKeyUp) call(onKeyUp, e)
|
||||
},
|
||||
doClick (e) {
|
||||
const { onClick } = this
|
||||
if (onClick) call(onClick, e)
|
||||
},
|
||||
doWrapperFocus (e) {
|
||||
const { onWrapperFocus } = this
|
||||
if (onWrapperFocus) call(onWrapperFocus, e)
|
||||
},
|
||||
doWrapperBlur (e) {
|
||||
const { onWrapperBlur } = this
|
||||
if (onWrapperBlur) call(onWrapperBlur, e)
|
||||
},
|
||||
updateTextAreaStyle () {
|
||||
const textarea = this.$refs.textarea
|
||||
const {
|
||||
paddingTop: stylePaddingTop,
|
||||
paddingBottom: stylePaddingBottom,
|
||||
lineHeight: styleLineHeight
|
||||
} = window.getComputedStyle(textarea)
|
||||
const paddingTop = Number(stylePaddingTop.slice(0, -2))
|
||||
const paddingBottom = Number(stylePaddingBottom.slice(0, -2))
|
||||
const lineHeight = Number(styleLineHeight.slice(0, -2))
|
||||
if (this.autosize.minRows) {
|
||||
const minRows = Math.max(this.autosize.minRows, 1)
|
||||
const styleMinHeight =
|
||||
paddingTop + paddingBottom + lineHeight * minRows + 'px'
|
||||
this.$refs.textareaMirrow.style.minHeight = styleMinHeight
|
||||
}
|
||||
if (this.autosize.maxRows) {
|
||||
const maxRows = Math.max(
|
||||
this.autosize.maxRows,
|
||||
this.autosize.minRows,
|
||||
1
|
||||
)
|
||||
const styleMaxHeight =
|
||||
paddingTop + paddingBottom + lineHeight * maxRows + 'px'
|
||||
this.$refs.textareaMirrow.style.maxHeight = styleMaxHeight
|
||||
}
|
||||
},
|
||||
handleCompositionStart () {
|
||||
this.isComposing = true
|
||||
},
|
||||
handleCompositionEnd (e) {
|
||||
this.isComposing = false
|
||||
if (e.target === this.$refs.secondInput) {
|
||||
this.handleInput(e, 1)
|
||||
} else {
|
||||
this.handleInput(e, 0)
|
||||
}
|
||||
},
|
||||
handleInput (e, index) {
|
||||
if (this.isComposing) return
|
||||
const changedValue = e.target.value
|
||||
if (!this.pair) {
|
||||
this.doInput(changedValue)
|
||||
} else {
|
||||
let { mergedValue: value } = this
|
||||
if (!Array.isArray(value)) {
|
||||
value = [null, null]
|
||||
} else {
|
||||
value = [...value]
|
||||
return {
|
||||
// DOM ref
|
||||
wrapperRef,
|
||||
inputRef,
|
||||
input2Ref,
|
||||
textareaRef,
|
||||
textareaMirrorRef,
|
||||
// value
|
||||
uncontrolledValue: uncontrolledValueRef,
|
||||
mergedValue: mergedValueRef,
|
||||
mergedPlaceholder: mergedPlaceholderRef,
|
||||
showPlaceholder1: showPlaceholder1Ref,
|
||||
showPlaceholder2: showPlaceholder2Ref,
|
||||
showTextareaPlaceholder: showTextareaPlaceholderRef,
|
||||
mergedFocus: mergedFocusRef,
|
||||
isComposing: isComposingRef,
|
||||
inputFocused: inputFocusedRef,
|
||||
showClearButton,
|
||||
mergedSize: mergedSizeRef,
|
||||
// methods
|
||||
focus,
|
||||
...methods,
|
||||
...useConfig(props),
|
||||
cssVars: computed(() => {
|
||||
const { value: size } = mergedSizeRef
|
||||
const {
|
||||
common: { cubicBezierEaseInOut },
|
||||
self: {
|
||||
color,
|
||||
borderRadius,
|
||||
paddingLeft,
|
||||
paddingRight,
|
||||
textColor,
|
||||
caretColor,
|
||||
textDecorationColor,
|
||||
border,
|
||||
borderDisabled,
|
||||
borderHover,
|
||||
borderFocus,
|
||||
placeholderColor,
|
||||
placeholderColorDisabled,
|
||||
lineHeightTextarea,
|
||||
colorDisabled,
|
||||
colorFocus,
|
||||
textColorDisabled,
|
||||
boxShadowFocus,
|
||||
iconSize,
|
||||
[createKey('fontSize', size)]: fontSize,
|
||||
[createKey('height', size)]: height
|
||||
}
|
||||
} = themeRef.value
|
||||
return {
|
||||
'--ip-bezier': cubicBezierEaseInOut,
|
||||
'--ip-color': color,
|
||||
'--ip-font-size': fontSize,
|
||||
'--ip-border-radius': borderRadius,
|
||||
'--ip-height': height,
|
||||
'--ip-padding-left': paddingLeft,
|
||||
'--ip-padding-right': paddingRight,
|
||||
'--ip-text-color': textColor,
|
||||
'--ip-caret-color': caretColor,
|
||||
'--ip-text-decoration-color': textDecorationColor,
|
||||
'--ip-border': border,
|
||||
'--ip-border-disabled': borderDisabled,
|
||||
'--ip-border-hover': borderHover,
|
||||
'--ip-border-focus': borderFocus,
|
||||
'--ip-placeholder-color': placeholderColor,
|
||||
'--ip-placeholder-color-disabled': placeholderColorDisabled,
|
||||
'--ip-icon-size': iconSize,
|
||||
'--ip-line-height-textarea': lineHeightTextarea,
|
||||
'--ip-color-disabled': colorDisabled,
|
||||
'--ip-color-focus': colorFocus,
|
||||
'--ip-text-color-disabled': textColorDisabled,
|
||||
'--ip-box-shadow-focus': boxShadowFocus
|
||||
}
|
||||
value[index] = changedValue
|
||||
this.doInput(value)
|
||||
}
|
||||
/** force update to sync input's view with value */
|
||||
this.$forceUpdate()
|
||||
},
|
||||
handleInputBlur (e) {
|
||||
this.doInputBlur(e)
|
||||
const { input, secondInput, textarea, wrapper } = this.$refs
|
||||
if (e.relatedTarget === wrapper) {
|
||||
this.doDeactivate()
|
||||
}
|
||||
if (
|
||||
!(
|
||||
e.relatedTarget === input ||
|
||||
e.relatedTarget === secondInput ||
|
||||
e.relatedTarget === textarea
|
||||
)
|
||||
) {
|
||||
this.inputFocused = false
|
||||
}
|
||||
this.dealWithEvent(e, 'blur')
|
||||
},
|
||||
handleInputFocus (e) {
|
||||
this.doInputFocus(e)
|
||||
this.focused = true
|
||||
this.inputFocused = true
|
||||
this.doActivate()
|
||||
this.dealWithEvent(e, 'focus')
|
||||
},
|
||||
handleWrapperBlur (e) {
|
||||
if (this.passivelyActivated) {
|
||||
this.doWrapperBlur(e)
|
||||
this.dealWithEvent(e, 'blur')
|
||||
}
|
||||
},
|
||||
handleWrapperFocus (e) {
|
||||
if (this.passivelyActivated) {
|
||||
this.focused = true
|
||||
this.doWrapperFocus(e)
|
||||
this.dealWithEvent(e, 'focus')
|
||||
}
|
||||
},
|
||||
dealWithEvent (e, type) {
|
||||
const { input, secondInput, textarea, wrapper } = this.$refs
|
||||
if (
|
||||
e.relatedTarget === input ||
|
||||
e.relatedTarget === secondInput ||
|
||||
e.relatedTarget === textarea ||
|
||||
e.relatedTarget === wrapper
|
||||
) {
|
||||
/**
|
||||
* activeElement transfer inside the input, do nothing
|
||||
*/
|
||||
} else {
|
||||
if (type === 'focus') {
|
||||
this.doFocus(e)
|
||||
this.focused = true
|
||||
} else if (type === 'blur') {
|
||||
this.doBlur(e)
|
||||
this.focused = false
|
||||
}
|
||||
}
|
||||
},
|
||||
handleKeyUp (e) {
|
||||
this.doKeyUp(e)
|
||||
},
|
||||
handleChange (e) {
|
||||
this.doChange(e.target.value)
|
||||
},
|
||||
handleClick (e) {
|
||||
this.doClick(e)
|
||||
},
|
||||
handleClear (e) {
|
||||
this.doClear(e)
|
||||
if (this.pair) {
|
||||
this.doInput([])
|
||||
} else {
|
||||
this.doInput('')
|
||||
}
|
||||
},
|
||||
handleMouseEnter () {
|
||||
this.hover = true
|
||||
},
|
||||
handleMouseLeave () {
|
||||
this.hover = false
|
||||
},
|
||||
handleWrapperKeyDownEnter (e) {
|
||||
if (this.passivelyActivated) {
|
||||
if (this.inputFocused && this.deactivateOnEnter) {
|
||||
this.handleWrapperKeyDownEsc()
|
||||
return
|
||||
}
|
||||
e.preventDefault()
|
||||
if (this.type === 'textarea') {
|
||||
this.$refs.textarea.focus()
|
||||
} else {
|
||||
this.$refs.input.focus()
|
||||
}
|
||||
}
|
||||
},
|
||||
handleWrapperKeyDownEsc () {
|
||||
if (this.passivelyActivated) {
|
||||
this.inputFocused = false
|
||||
this.$nextTick(() => {
|
||||
this.$refs.wrapper.focus()
|
||||
})
|
||||
}
|
||||
},
|
||||
focus () {
|
||||
const refs = this.$refs
|
||||
if (this.passivelyActivated) {
|
||||
refs.wrapper.focus()
|
||||
} else {
|
||||
if (refs.textarea) refs.textarea.focus()
|
||||
else if (refs.input) refs.input.focus()
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -5,12 +5,16 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { configurable, themeable, withCssr } from '../../_mixins'
|
||||
import styles from './styles/input-group'
|
||||
import { defineComponent } from 'vue'
|
||||
import { useTheme } from '../../_mixins'
|
||||
import { inputLight } from '../styles'
|
||||
import style from './styles/input-group.cssr.js'
|
||||
|
||||
export default {
|
||||
export default defineComponent({
|
||||
name: 'InputGroup',
|
||||
cssrName: 'Input',
|
||||
mixins: [configurable, themeable, withCssr(styles)]
|
||||
}
|
||||
props: useTheme.props,
|
||||
setup (props) {
|
||||
useTheme('Input', 'InputGroup', style, inputLight, props)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -1,10 +1,8 @@
|
||||
<template>
|
||||
<div
|
||||
class="n-input-group-label"
|
||||
:class="{
|
||||
[`n-${mergedTheme}-theme`]: mergedTheme,
|
||||
[`n-input-group-label--${size}-size`]: true
|
||||
}"
|
||||
:class="`n-input-group-label--${size}-size`"
|
||||
:style="cssVars"
|
||||
>
|
||||
<slot />
|
||||
<div class="n-input-group-label__border" />
|
||||
@ -12,18 +10,53 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { configurable, themeable, withCssr } from '../../_mixins'
|
||||
import styles from './styles/input-group-label'
|
||||
import { computed, defineComponent } from 'vue'
|
||||
import { useTheme } from '../../_mixins'
|
||||
import { createKey } from '../../_utils'
|
||||
import { inputLight } from '../styles'
|
||||
import style from './styles/input-group-label.cssr.js'
|
||||
|
||||
export default {
|
||||
export default defineComponent({
|
||||
name: 'InputGroupLabel',
|
||||
cssrName: 'Input',
|
||||
mixins: [configurable, themeable, withCssr(styles)],
|
||||
props: {
|
||||
size: {
|
||||
type: String,
|
||||
default: 'medium'
|
||||
}
|
||||
},
|
||||
setup (props) {
|
||||
const themeRef = useTheme(
|
||||
'Input',
|
||||
'InputGroupLabel',
|
||||
style,
|
||||
inputLight,
|
||||
props
|
||||
)
|
||||
return {
|
||||
cssVars: computed(() => {
|
||||
const { size } = props
|
||||
const {
|
||||
common: { cubicBezierEaseInOut },
|
||||
self: {
|
||||
groupLabelColor,
|
||||
borderRadius,
|
||||
textColor,
|
||||
lineHeight,
|
||||
fontSize,
|
||||
[createKey('height', size)]: height
|
||||
}
|
||||
} = themeRef.value
|
||||
return {
|
||||
'--ip-bezier': cubicBezierEaseInOut,
|
||||
'--ip-group-label-color': groupLabelColor,
|
||||
'--ip-border-radius': borderRadius,
|
||||
'--ip-text-color': textColor,
|
||||
'--ip-font-size': fontSize,
|
||||
'--ip-line-height': lineHeight,
|
||||
'--ip-height': height
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
37
src/input/src/styles/input-group-label.cssr.js
Normal file
37
src/input/src/styles/input-group-label.cssr.js
Normal file
@ -0,0 +1,37 @@
|
||||
import { cB, cE } from '../../../_utils/cssr'
|
||||
|
||||
// vars:
|
||||
// --ip-bezier
|
||||
// --ip-group-label-color
|
||||
// --ip-border-radius
|
||||
// --ip-text-color
|
||||
// --ip-font-size
|
||||
// --ip-height
|
||||
export default cB('input-group-label', `
|
||||
position: relative;
|
||||
user-select: none;
|
||||
box-sizing: border-box;
|
||||
padding: 0 12px;
|
||||
display: inline-block;
|
||||
border-radius: var(--ip-border-radius);
|
||||
background-color: var(--ip-group-label-color);
|
||||
color: var(--ip-text-color);
|
||||
font-size: var(--ip-font-size);
|
||||
line-height: var(--ip-height);
|
||||
height: var(--ip-height);
|
||||
transition:
|
||||
color .3s var(--ip-bezier),
|
||||
background-color .3s var(--ip-bezier),
|
||||
box-shadow .3s var(--ip-bezier);
|
||||
`, [
|
||||
cE('border', `
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
border-radius: inherit;
|
||||
border: var(--ip-border);
|
||||
transition: 'border-color .3s var(--ip-bezier);
|
||||
`)
|
||||
])
|
||||
@ -1,9 +0,0 @@
|
||||
import baseStyle from './themed-base.cssr.js'
|
||||
|
||||
export default [
|
||||
{
|
||||
key: 'mergedTheme',
|
||||
watch: ['mergedTheme'],
|
||||
CNode: baseStyle
|
||||
}
|
||||
]
|
||||
@ -1,58 +0,0 @@
|
||||
import { cTB, c, cM, cE, createKey } from '../../../../_utils/cssr'
|
||||
|
||||
export default c([
|
||||
({ props }) => {
|
||||
const {
|
||||
$global: {
|
||||
cubicBezierEaseInOut
|
||||
},
|
||||
$local: {
|
||||
borderRadius,
|
||||
groupLabelColor,
|
||||
textColor,
|
||||
boxShadow,
|
||||
border
|
||||
}
|
||||
} = props
|
||||
return cTB('input-group-label', {
|
||||
position: 'relative',
|
||||
userSelect: 'none',
|
||||
boxSizing: 'border-box',
|
||||
padding: '0 12px',
|
||||
display: 'inline-block',
|
||||
borderRadius,
|
||||
backgroundColor: groupLabelColor,
|
||||
color: textColor,
|
||||
boxShadow,
|
||||
transition: `
|
||||
color .3s ${cubicBezierEaseInOut},
|
||||
background-color .3s ${cubicBezierEaseInOut},
|
||||
box-shadow .3s ${cubicBezierEaseInOut}
|
||||
`
|
||||
}, [
|
||||
['small', 'medium', 'large'].map(size => {
|
||||
const {
|
||||
$local: {
|
||||
[createKey('fontSize', size)]: fontSize,
|
||||
[createKey('height', size)]: height
|
||||
}
|
||||
} = props
|
||||
return cM(size + '-size', {
|
||||
fontSize,
|
||||
lineHeight: height,
|
||||
height
|
||||
})
|
||||
}),
|
||||
cE('border', {
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
borderRadius: 'inherit',
|
||||
border,
|
||||
transition: `border-color .3s ${cubicBezierEaseInOut}`
|
||||
})
|
||||
])
|
||||
}
|
||||
])
|
||||
155
src/input/src/styles/input-group.cssr.js
Normal file
155
src/input/src/styles/input-group.cssr.js
Normal file
@ -0,0 +1,155 @@
|
||||
import { c, cB, cE } from '../../../_utils/cssr'
|
||||
|
||||
export default cB('input-group', `
|
||||
display: inline-flex;
|
||||
width: 100%;
|
||||
flex-wrap: nowrap;
|
||||
vertical-align: bottom;
|
||||
`, [
|
||||
c('>', [
|
||||
cB('input', [
|
||||
c('&:not(:last-child)', `
|
||||
border-top-right-radius: 0!important;
|
||||
border-bottom-right-radius: 0!important;
|
||||
`, [
|
||||
cE('box-shadow, state-border, border', `
|
||||
border-top-right-radius: 0!important;
|
||||
border-bottom-right-radius: 0!important;
|
||||
`)
|
||||
]),
|
||||
c('&:not(:first-child)', `
|
||||
border-top-left-radius: 0!important;
|
||||
border-bottom-left-radius: 0!important;
|
||||
margin-left: -1px!important;
|
||||
`, [
|
||||
cE('box-shadow, state-border, border', `
|
||||
border-top-left-radius: 0!important;
|
||||
border-bottom-left-radius: 0!important;
|
||||
`)
|
||||
])
|
||||
]),
|
||||
cB('input-number', [
|
||||
c('&:not(:last-child)', `
|
||||
border-top-right-radius: 0!important;
|
||||
border-bottom-right-radius: 0!important;
|
||||
`, [
|
||||
cE('input, add-button, border-mask, border', `
|
||||
border-top-right-radius: 0!important;
|
||||
border-bottom-right-radius: 0!important;
|
||||
`, [
|
||||
cB('input-number-button-border-mask', `
|
||||
border-top-right-radius: 0!important;
|
||||
border-bottom-right-radius: 0!important;
|
||||
`),
|
||||
cB('input-number-button-border', `
|
||||
border-top-right-radius: 0!important;
|
||||
border-bottom-right-radius: 0!important;
|
||||
`),
|
||||
cB('input-number-button-boundary', `
|
||||
background-color: transparent !important;
|
||||
`)
|
||||
])
|
||||
]),
|
||||
c('&:not(:first-child)', `
|
||||
border-top-left-radius: 0!important;
|
||||
border-bottom-left-radius: 0!important;
|
||||
`, [
|
||||
cE('input, minus-button, border-mask, border', `
|
||||
border-top-left-radius: 0!important;
|
||||
border-bottom-left-radius: 0!important;
|
||||
`, [
|
||||
cB('input-number-button-border-mask', `
|
||||
border-top-left-radius: 0!important;
|
||||
border-bottom-left-radius: 0!important;
|
||||
`),
|
||||
cB('input-number-button-boundary', `
|
||||
background-color: transparent !important;
|
||||
`)
|
||||
])
|
||||
])
|
||||
]),
|
||||
cB('button', [
|
||||
c('&:not(:last-child)', `
|
||||
border-top-right-radius: 0!important;
|
||||
border-bottom-right-radius: 0!important;
|
||||
`, [
|
||||
cE('border-mask, border', `
|
||||
border-top-right-radius: 0!important;
|
||||
border-bottom-right-radius: 0!important;
|
||||
`)
|
||||
]),
|
||||
c('&:not(:first-child)', `
|
||||
border-top-left-radius: 0!important;
|
||||
border-bottom-left-radius: 0!important;
|
||||
`, [
|
||||
cE('border-mask, border', `
|
||||
border-top-left-radius: 0!important;
|
||||
border-bottom-left-radius: 0!important;
|
||||
`)
|
||||
])
|
||||
]),
|
||||
c('*', [
|
||||
c('&:not(:last-child)', `
|
||||
border-top-right-radius: 0!important;
|
||||
border-bottom-right-radius: 0!important;
|
||||
`, [
|
||||
c('>', [
|
||||
cB('input', `
|
||||
border-top-right-radius: 0!important;
|
||||
border-bottom-right-radius: 0!important;
|
||||
`, [
|
||||
cE('box-shadow, state-border, border', `
|
||||
border-top-right-radius: 0!important;
|
||||
border-bottom-right-radius: 0!important;
|
||||
`)
|
||||
]),
|
||||
cB('base-selection', [
|
||||
cB('base-selection-label', `
|
||||
border-top-right-radius: 0!important;
|
||||
border-bottom-right-radius: 0!important;
|
||||
`),
|
||||
cB('base-selection-tags', `
|
||||
border-top-right-radius: 0!important;
|
||||
border-bottom-right-radius: 0!important;
|
||||
`),
|
||||
cE('box-shadow, border, state-border', `
|
||||
border-top-right-radius: 0!important;
|
||||
border-bottom-right-radius: 0!important;
|
||||
`)
|
||||
])
|
||||
])
|
||||
]),
|
||||
c('&:not(:first-child)', `
|
||||
margin-left: -1px!important;
|
||||
border-top-left-radius: 0!important;
|
||||
border-bottom-left-radius: 0!important;
|
||||
`, [
|
||||
c('>', [
|
||||
cB('input', `
|
||||
border-top-left-radius: 0!important;
|
||||
border-bottom-left-radius: 0!important;
|
||||
`, [
|
||||
cE('box-shadow, border, state-border', `
|
||||
border-top-left-radius: 0!important;
|
||||
border-bottom-left-radius: 0!important;
|
||||
`)
|
||||
]),
|
||||
cB('base-selection', [
|
||||
cB('base-selection-label', `
|
||||
border-top-left-radius: 0!important;
|
||||
border-bottom-left-radius: 0!important;
|
||||
`),
|
||||
cB('base-selection-tags', `
|
||||
border-top-left-radius: 0!important;
|
||||
border-bottom-left-radius: 0!important;
|
||||
`),
|
||||
cE('box-shadow, border, state-border', `
|
||||
border-top-left-radius: 0!important;
|
||||
border-bottom-left-radius: 0!important;
|
||||
`)
|
||||
])
|
||||
])
|
||||
])
|
||||
])
|
||||
])
|
||||
])
|
||||
@ -1,219 +0,0 @@
|
||||
import { c, cB, cE } from '../../../../_utils/cssr'
|
||||
|
||||
export default c([
|
||||
() => {
|
||||
return cB('input-group', {
|
||||
raw: `
|
||||
display: inline-flex;
|
||||
width: 100%;
|
||||
flex-wrap: nowrap;
|
||||
vertical-align: bottom;
|
||||
`
|
||||
}, [
|
||||
c('>', [
|
||||
cB('input', [
|
||||
c('&:not(:last-child)', {
|
||||
raw: `
|
||||
border-top-right-radius: 0!important;
|
||||
border-bottom-right-radius: 0!important;
|
||||
`
|
||||
}, [
|
||||
cE('box-shadow, state-border, border', {
|
||||
raw: `
|
||||
border-top-right-radius: 0!important;
|
||||
border-bottom-right-radius: 0!important;
|
||||
`
|
||||
})
|
||||
]),
|
||||
c('&:not(:first-child)', {
|
||||
raw: `
|
||||
border-top-left-radius: 0!important;
|
||||
border-bottom-left-radius: 0!important;
|
||||
margin-left: -1px!important;
|
||||
`
|
||||
}, [
|
||||
cE('box-shadow, state-border, border', {
|
||||
raw: `
|
||||
border-top-left-radius: 0!important;
|
||||
border-bottom-left-radius: 0!important;
|
||||
`
|
||||
})
|
||||
])
|
||||
]),
|
||||
cB('input-number', [
|
||||
c('&:not(:last-child)', {
|
||||
raw: `
|
||||
border-top-right-radius: 0!important;
|
||||
border-bottom-right-radius: 0!important;
|
||||
`
|
||||
}, [
|
||||
cE('input, add-button, border-mask, border', {
|
||||
raw: `
|
||||
border-top-right-radius: 0!important;
|
||||
border-bottom-right-radius: 0!important;
|
||||
`
|
||||
}, [
|
||||
cB('input-number-button-border-mask', {
|
||||
raw: `
|
||||
border-top-right-radius: 0!important;
|
||||
border-bottom-right-radius: 0!important;
|
||||
`
|
||||
}),
|
||||
cB('input-number-button-border', {
|
||||
raw: `
|
||||
border-top-right-radius: 0!important;
|
||||
border-bottom-right-radius: 0!important;
|
||||
`
|
||||
}),
|
||||
cB('input-number-button-boundary', {
|
||||
raw: `
|
||||
background-color: transparent !important;
|
||||
`
|
||||
})
|
||||
])
|
||||
]),
|
||||
c('&:not(:first-child)', {
|
||||
raw: `
|
||||
border-top-left-radius: 0!important;
|
||||
border-bottom-left-radius: 0!important;
|
||||
`
|
||||
}, [
|
||||
cE('input, minus-button, border-mask, border', {
|
||||
raw: `
|
||||
border-top-left-radius: 0!important;
|
||||
border-bottom-left-radius: 0!important;
|
||||
`
|
||||
}, [
|
||||
cB('input-number-button-border-mask', {
|
||||
raw: `
|
||||
border-top-left-radius: 0!important;
|
||||
border-bottom-left-radius: 0!important;
|
||||
`
|
||||
}),
|
||||
cB('input-number-button-boundary', {
|
||||
raw: `
|
||||
background-color: transparent !important;
|
||||
`
|
||||
})
|
||||
])
|
||||
])
|
||||
]),
|
||||
cB('button', [
|
||||
c('&:not(:last-child)', {
|
||||
raw: `
|
||||
border-top-right-radius: 0!important;
|
||||
border-bottom-right-radius: 0!important;
|
||||
`
|
||||
}, [
|
||||
cE('border-mask, border', {
|
||||
raw: `
|
||||
border-top-right-radius: 0!important;
|
||||
border-bottom-right-radius: 0!important;
|
||||
`
|
||||
})
|
||||
]),
|
||||
c('&:not(:first-child)', {
|
||||
raw: `
|
||||
border-top-left-radius: 0!important;
|
||||
border-bottom-left-radius: 0!important;
|
||||
`
|
||||
}, [
|
||||
cE('border-mask, border', {
|
||||
raw: `
|
||||
border-top-left-radius: 0!important;
|
||||
border-bottom-left-radius: 0!important;
|
||||
`
|
||||
})
|
||||
])
|
||||
]),
|
||||
c('*', [
|
||||
c('&:not(:last-child)', {
|
||||
raw: `
|
||||
border-top-right-radius: 0!important;
|
||||
border-bottom-right-radius: 0!important;
|
||||
`
|
||||
}, [
|
||||
c('>', [
|
||||
cB('input', {
|
||||
raw: `
|
||||
border-top-right-radius: 0!important;
|
||||
border-bottom-right-radius: 0!important;
|
||||
`
|
||||
}, [
|
||||
cE('box-shadow, state-border, border', {
|
||||
raw: `
|
||||
border-top-right-radius: 0!important;
|
||||
border-bottom-right-radius: 0!important;
|
||||
`
|
||||
})
|
||||
]),
|
||||
cB('base-selection', [
|
||||
cB('base-selection-label', {
|
||||
raw: `
|
||||
border-top-right-radius: 0!important;
|
||||
border-bottom-right-radius: 0!important;
|
||||
`
|
||||
}),
|
||||
cB('base-selection-tags', {
|
||||
raw: `
|
||||
border-top-right-radius: 0!important;
|
||||
border-bottom-right-radius: 0!important;
|
||||
`
|
||||
}),
|
||||
cE('box-shadow, border, state-border', {
|
||||
raw: `
|
||||
border-top-right-radius: 0!important;
|
||||
border-bottom-right-radius: 0!important;
|
||||
`
|
||||
})
|
||||
])
|
||||
])
|
||||
]),
|
||||
c('&:not(:first-child)', {
|
||||
raw: `
|
||||
margin-left: -1px!important;
|
||||
border-top-left-radius: 0!important;
|
||||
border-bottom-left-radius: 0!important;
|
||||
`
|
||||
}, [
|
||||
c('>', [
|
||||
cB('input', {
|
||||
raw: `
|
||||
border-top-left-radius: 0!important;
|
||||
border-bottom-left-radius: 0!important;
|
||||
`
|
||||
}, [
|
||||
cE('box-shadow, border, state-border', {
|
||||
raw: `
|
||||
border-top-left-radius: 0!important;
|
||||
border-bottom-left-radius: 0!important;
|
||||
`
|
||||
})
|
||||
]),
|
||||
cB('base-selection', [
|
||||
cB('base-selection-label', {
|
||||
raw: `
|
||||
border-top-left-radius: 0!important;
|
||||
border-bottom-left-radius: 0!important;
|
||||
`
|
||||
}),
|
||||
cB('base-selection-tags', {
|
||||
raw: `
|
||||
border-top-left-radius: 0!important;
|
||||
border-bottom-left-radius: 0!important;
|
||||
`
|
||||
}),
|
||||
cE('box-shadow, border, state-border', {
|
||||
raw: `
|
||||
border-top-left-radius: 0!important;
|
||||
border-bottom-left-radius: 0!important;
|
||||
`
|
||||
})
|
||||
])
|
||||
])
|
||||
])
|
||||
])
|
||||
])
|
||||
])
|
||||
}
|
||||
])
|
||||
@ -1,9 +0,0 @@
|
||||
import baseStyle from './base.cssr.js'
|
||||
|
||||
export default [
|
||||
{
|
||||
key: 'mergedTheme',
|
||||
watch: ['mergedTheme'],
|
||||
CNode: baseStyle
|
||||
}
|
||||
]
|
||||
284
src/input/src/styles/input.cssr.js
Normal file
284
src/input/src/styles/input.cssr.js
Normal file
@ -0,0 +1,284 @@
|
||||
import { cB, c, cE, cM, cNotM } from '../../../_utils/cssr'
|
||||
import fadeInScaleUpTransition from '../../../_styles/transitions/fade-in-scale-up'
|
||||
|
||||
// vars:
|
||||
// --ip-bezier
|
||||
// --ip-color
|
||||
// --ip-font-size
|
||||
// --ip-border-radius
|
||||
// --ip-height
|
||||
// --ip-padding-left
|
||||
// --ip-padding-right
|
||||
// --ip-text-color
|
||||
// --ip-text-color-disabled
|
||||
// --ip-caret-color
|
||||
// --ip-text-decoration-color
|
||||
// --ip-border
|
||||
// --ip-border-disabled
|
||||
// --ip-border-hover
|
||||
// --ip-border-focus
|
||||
// --ip-placeholder-color
|
||||
// --ip-placeholder-color-disabled
|
||||
// --ip-line-height-textarea
|
||||
// --ip-color-disabled
|
||||
// --ip-color-focus
|
||||
// --ip-box-shadow-focus
|
||||
// --ip-icon-size
|
||||
export default c([
|
||||
cB('input', `
|
||||
line-height: 1.5;
|
||||
z-index: auto;
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
border-radius: var(--ip-border-radius);
|
||||
background-color: var(--ip-color);
|
||||
transition: background-color .3s var(--ip-bezier);
|
||||
--ip-padding-vertical: calc((var(--ip-height) - 1.5 * var(--ip-font-size)) / 2);
|
||||
`, [
|
||||
cE('input', {
|
||||
height: 'var(--ip-height)'
|
||||
}),
|
||||
cE('input, textarea, textarea-mirror, splitor, placeholder', `
|
||||
padding-left: var(--ip-padding-left);
|
||||
padding-right: var(--ip-padding-right);
|
||||
padding-top: var(--ip-padding-vertical);
|
||||
padding-bottom: var(--ip-padding-vertical);
|
||||
font-size: var(--ip-font-size);
|
||||
line-height: 1.5;
|
||||
`),
|
||||
// cM('suffix, clearable', [
|
||||
// cM('split', [
|
||||
// cE('input', [
|
||||
// cM('second', {
|
||||
// // paddingRight: `${paddingIcon} !important`
|
||||
// }, [
|
||||
// c('& +', [
|
||||
// cE('placeholder', {
|
||||
// // right: `${paddingIcon} !important`
|
||||
// })
|
||||
// ])
|
||||
// ])
|
||||
// ])
|
||||
// ]),
|
||||
// cNotM('split', [
|
||||
// cE('input', [
|
||||
// cM('first', {
|
||||
// // paddingRight: `${paddingIcon} !important`
|
||||
// })
|
||||
// ]),
|
||||
// cE('placeholder', {
|
||||
// //right: `${paddingIcon} !important`
|
||||
// })
|
||||
// ])
|
||||
// ]),
|
||||
// cM('prefix', [
|
||||
// cNotM('split', [
|
||||
// cE('placeholder', {
|
||||
// left: `${paddingIcon} !important`
|
||||
// })
|
||||
// ]),
|
||||
// cM('split', [
|
||||
// cE('input', [
|
||||
// cM('first', [
|
||||
// c('& +', [
|
||||
// cE('placeholder', {
|
||||
// left: `${paddingIcon} !important`
|
||||
// })
|
||||
// ])
|
||||
// ])
|
||||
// ])
|
||||
// ]),
|
||||
// cE('input', [
|
||||
// cM('first', {
|
||||
// paddingLeft: `${paddingIcon} !important`
|
||||
// })
|
||||
// ])
|
||||
// ]),
|
||||
cM('round', [
|
||||
cNotM('textarea', {
|
||||
borderRadius: 'calc(var(--ip-height) / 2)'
|
||||
})
|
||||
]),
|
||||
cM('split', {
|
||||
display: 'inline-flex'
|
||||
}, [
|
||||
cE('input, placeholder', {
|
||||
textAlign: 'center'
|
||||
})
|
||||
]),
|
||||
cNotM('textarea', [
|
||||
cE('placeholder', {
|
||||
whiteSpace: 'nowrap'
|
||||
})
|
||||
]),
|
||||
cM('textarea', [
|
||||
cE('placeholder', {
|
||||
whiteSpace: 'unset'
|
||||
})
|
||||
]),
|
||||
cM('disabled', {
|
||||
cursor: 'not-allowed',
|
||||
backgroundColor: 'var(--ip-color-disabled)'
|
||||
}, [
|
||||
cE('border', {
|
||||
border: 'var(--ip-border-disabled)'
|
||||
}),
|
||||
cE('input, textarea', {
|
||||
cursor: 'not-allowed',
|
||||
color: 'var(--ip-text-color-disabled)'
|
||||
}),
|
||||
cE('placeholder', {
|
||||
color: 'var(--ip-placeholder-color-disabled)'
|
||||
}),
|
||||
cE('splitor', {
|
||||
color: 'var(--ip-text-color-disabled)'
|
||||
})
|
||||
]),
|
||||
cNotM('disabled', [
|
||||
cM('focus', {
|
||||
backgroundColor: 'var(--ip-color-focus)'
|
||||
}, [
|
||||
cE('state-border', {
|
||||
border: 'var(--ip-border-focus)',
|
||||
boxShadow: 'var(--ip-box-shadow-focus)'
|
||||
})
|
||||
]),
|
||||
c('&:hover', [
|
||||
cE('state-border', {
|
||||
border: 'var(--ip-border-focus)'
|
||||
})
|
||||
])
|
||||
]),
|
||||
cE('border, state-border', `
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
pointer-events: none;
|
||||
border-radius: inherit;
|
||||
border: var(--ip-border);
|
||||
transition:
|
||||
box-shadow .3s var(--ip-bezier),
|
||||
border-color .3s var(--ip-bezier);
|
||||
`),
|
||||
cE('state-border', {
|
||||
borderColor: 'transparent',
|
||||
zIndex: 1
|
||||
}),
|
||||
cE('placeholder', `
|
||||
box-sizing: border-box;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
overflow: hidden;
|
||||
transition: color .3s var(--ip-bezier);
|
||||
color: var(--ip-placeholder-color);
|
||||
`),
|
||||
cE('suffix, prefix', `
|
||||
position: absolute;
|
||||
line-height: 1;
|
||||
height: 0;
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
top: 50%;
|
||||
width: var(--ip-icon-size);
|
||||
`, [
|
||||
cB('base-clear-button', {
|
||||
fontSize: 'var(--ip-icon-size)'
|
||||
}),
|
||||
cB('icon', {
|
||||
justifySelf: 'center',
|
||||
fontSize: 'var(--ip-icon-color)',
|
||||
color: 'var(--ip-icon-color)',
|
||||
transition: 'color .3s var(--ip-bezier)'
|
||||
})
|
||||
]),
|
||||
cE('suffix', {
|
||||
justifyContent: 'flex-end',
|
||||
right: '12px'
|
||||
}, [
|
||||
fadeInScaleUpTransition() // button suffix
|
||||
]),
|
||||
cE('prefix', {
|
||||
justifyContent: 'flex-start',
|
||||
left: '12px'
|
||||
}),
|
||||
cE('textarea, textarea-mirror', `
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
box-sizing: border-box;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: var(--ip-line-height-textarea);
|
||||
margin: 0;
|
||||
resize: vertical;
|
||||
padding-left: 14px;
|
||||
padding-right: 14px;
|
||||
`),
|
||||
cE('textarea', [
|
||||
cM('autosize', `
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
resize: none;
|
||||
`)
|
||||
]),
|
||||
cE('textarea-mirror', `
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
position: static;
|
||||
white-space: pre-wrap;
|
||||
overflow-wrap: break-word;
|
||||
`),
|
||||
cE('input, textarea', `
|
||||
-webkit-appearance: none;
|
||||
box-sizing: border-box;
|
||||
border: none;
|
||||
font-size: inherit;
|
||||
outline: none;
|
||||
font-family: inherit;
|
||||
width: 100%;
|
||||
background-color: transparent;
|
||||
min-width: 0;
|
||||
text-decoration-color: var(--ip-text-decoration-color);
|
||||
color: var(--ip-text-color);
|
||||
caret-color: var(--ip-caret-color);
|
||||
transition:
|
||||
caret-color .3s var(--ip-bezier),
|
||||
color .3s var(--ip-bezier),
|
||||
text-decoration-color .3s var(--ip-bezier);
|
||||
`, [
|
||||
c('&::placeholder', {
|
||||
color: 'transparent'
|
||||
})
|
||||
]),
|
||||
cE('splitor', {
|
||||
transition: 'color .3s var(--ip-bezier)',
|
||||
color: 'var(--ip-text-color)',
|
||||
paddingLeft: '0 !important',
|
||||
paddingRight: '0 !important'
|
||||
}),
|
||||
cB('input-clear', {
|
||||
display: 'flex',
|
||||
marginRight: '4px'
|
||||
}),
|
||||
cB('input-first-input', {
|
||||
flexGrow: 1,
|
||||
position: 'relative'
|
||||
}),
|
||||
cB('input-second-input', {
|
||||
flexGrow: 1,
|
||||
position: 'relative'
|
||||
})
|
||||
])
|
||||
])
|
||||
@ -1,15 +0,0 @@
|
||||
import baseStyle from './themed-base.cssr.js'
|
||||
import sizeStyle from './themed-size.cssr.js'
|
||||
|
||||
export default [
|
||||
{
|
||||
key: 'mergedTheme',
|
||||
watch: ['mergedTheme'],
|
||||
CNode: baseStyle
|
||||
},
|
||||
{
|
||||
key: 'mergedSize',
|
||||
watch: ['mergedSize', 'mergedTheme'],
|
||||
CNode: sizeStyle
|
||||
}
|
||||
]
|
||||
@ -1,309 +0,0 @@
|
||||
import { cTB, c, cB, cE, cM, cNotM, insideFormItem, createKey } from '../../../../_utils/cssr'
|
||||
import fadeInScaleUpTransition from '../../../../_styles/transitions/fade-in-scale-up'
|
||||
|
||||
export default c([
|
||||
({ props }) => {
|
||||
const {
|
||||
$local: {
|
||||
placeholderColor,
|
||||
color,
|
||||
border,
|
||||
borderHover,
|
||||
colorFocus,
|
||||
borderFocus,
|
||||
boxShadowFocus,
|
||||
iconColor,
|
||||
iconOpacity,
|
||||
textColor,
|
||||
caretColor,
|
||||
borderDisabled,
|
||||
colorDisabled,
|
||||
textColorDisabled,
|
||||
placeholderColorDisabled,
|
||||
textDecorationColor,
|
||||
lineHeightTextarea,
|
||||
borderRadius,
|
||||
iconSize
|
||||
},
|
||||
$global: {
|
||||
cubicBezierEaseInOut
|
||||
}
|
||||
} = props
|
||||
return cTB('input', {
|
||||
raw: `
|
||||
z-index: auto;
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
`,
|
||||
borderRadius,
|
||||
backgroundColor: color,
|
||||
transition: `
|
||||
box-shadow .3s ${cubicBezierEaseInOut},
|
||||
background-color .3s ${cubicBezierEaseInOut}
|
||||
`
|
||||
}, [
|
||||
cM('split', {
|
||||
display: 'inline-flex'
|
||||
}, [
|
||||
cE('input, placeholder', {
|
||||
textAlign: 'center'
|
||||
})
|
||||
]),
|
||||
cM('textarea', {
|
||||
raw: `
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
`
|
||||
}, [
|
||||
cE('placeholder', {
|
||||
whiteSpace: 'unset'
|
||||
})
|
||||
]),
|
||||
cM('disabled', {
|
||||
cursor: 'not-allowed',
|
||||
backgroundColor: colorDisabled
|
||||
}, [
|
||||
cE('border', {
|
||||
border: borderDisabled
|
||||
}),
|
||||
cE('input, textarea', {
|
||||
cursor: 'not-allowed',
|
||||
color: textColorDisabled
|
||||
}),
|
||||
cE('placeholder', {
|
||||
color: placeholderColorDisabled
|
||||
}),
|
||||
cE('splitor', {
|
||||
color: textColorDisabled
|
||||
})
|
||||
]),
|
||||
cM('bordered', [
|
||||
cE('border', {
|
||||
border
|
||||
})
|
||||
]),
|
||||
cNotM('disabled', [
|
||||
cM('focus', {
|
||||
backgroundColor: colorFocus
|
||||
}, [
|
||||
cE('state-border', {
|
||||
border: borderFocus
|
||||
}),
|
||||
cE('box-shadow', {
|
||||
boxShadow: boxShadowFocus
|
||||
})
|
||||
]),
|
||||
c('&:hover', [
|
||||
cE('state-border', {
|
||||
border: borderHover
|
||||
})
|
||||
])
|
||||
]),
|
||||
cE('border, state-border', {
|
||||
raw: `
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
pointer-events: none;
|
||||
transition: border-color .3s ${cubicBezierEaseInOut};
|
||||
`,
|
||||
border,
|
||||
borderColor: 'transparent',
|
||||
borderRadius
|
||||
}),
|
||||
cE('state-border', {
|
||||
zIndex: 1
|
||||
}),
|
||||
cE('box-shadow', {
|
||||
raw: `
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
pointer-events: none;
|
||||
`,
|
||||
border,
|
||||
borderColor: 'transparent',
|
||||
borderRadius,
|
||||
transition: `
|
||||
border-color .3s ${cubicBezierEaseInOut},
|
||||
box-shadow .3s ${cubicBezierEaseInOut}
|
||||
`
|
||||
}),
|
||||
cE('placeholder', {
|
||||
raw: `
|
||||
white-space: nowrap;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
overflow: hidden;
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
`,
|
||||
color: placeholderColor,
|
||||
transition: `color .3s ${cubicBezierEaseInOut}`
|
||||
}),
|
||||
cE('suffix, prefix', {
|
||||
raw: `
|
||||
position: absolute;
|
||||
line-height: 1;
|
||||
height: 0;
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
top: 50%;
|
||||
`,
|
||||
width: iconSize
|
||||
}, [
|
||||
cB('base-clear-button', {
|
||||
fontSize: iconSize
|
||||
}),
|
||||
cB('icon', {
|
||||
justifySelf: 'center',
|
||||
fontSize: iconSize,
|
||||
color: iconColor,
|
||||
transition: `color .3s ${cubicBezierEaseInOut}`
|
||||
}, [
|
||||
c('svg', {
|
||||
opacity: iconOpacity
|
||||
})
|
||||
])
|
||||
]),
|
||||
cE('suffix', {
|
||||
justifyContent: 'flex-end',
|
||||
right: '12px'
|
||||
}, [
|
||||
fadeInScaleUpTransition() // button suffix
|
||||
]),
|
||||
cE('prefix', {
|
||||
justifyContent: 'flex-start',
|
||||
left: '12px'
|
||||
}),
|
||||
cE('textarea, textarea-mirror', {
|
||||
raw: `
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
box-sizing: border-box;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: ${lineHeightTextarea};
|
||||
margin: 0;
|
||||
resize: vertical;
|
||||
padding-left: 14px;
|
||||
padding-right: 14px;
|
||||
`
|
||||
}),
|
||||
cE('textarea', [
|
||||
cM('autosize', {
|
||||
raw: `
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
resize: none;
|
||||
`
|
||||
})
|
||||
]),
|
||||
cE('textarea-mirror', {
|
||||
raw: `
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
position: static;
|
||||
white-space: pre-wrap;
|
||||
overflow-wrap: break-word;
|
||||
`
|
||||
}),
|
||||
cE('input, textarea', {
|
||||
raw: `
|
||||
-webkit-appearance: none;
|
||||
box-sizing: border-box;
|
||||
border: none;
|
||||
font-size: inherit;
|
||||
outline: none;
|
||||
font-family: inherit;
|
||||
width: 100%;
|
||||
background-color: transparent;
|
||||
min-width: 0;
|
||||
text-decoration-color: ${textDecorationColor};
|
||||
color: ${textColor};
|
||||
caret-color: ${caretColor};
|
||||
transition:
|
||||
caret-color .3s ${cubicBezierEaseInOut},
|
||||
color .3s ${cubicBezierEaseInOut},
|
||||
text-decoration-color .3s ${cubicBezierEaseInOut};
|
||||
`
|
||||
}, [
|
||||
c('&::placeholder', {
|
||||
color: 'transparent'
|
||||
})
|
||||
]),
|
||||
cE('splitor', {
|
||||
transition: `color .3s ${cubicBezierEaseInOut}`,
|
||||
color: textColor,
|
||||
paddingLeft: '0 !important',
|
||||
paddingRight: '0 !important'
|
||||
}),
|
||||
cB('input-clear', {
|
||||
display: 'flex',
|
||||
marginRight: '4px'
|
||||
}),
|
||||
cB('input-first-input', {
|
||||
flexGrow: 1,
|
||||
position: 'relative'
|
||||
}),
|
||||
cB('input-second-input', {
|
||||
flexGrow: 1,
|
||||
position: 'relative'
|
||||
})
|
||||
])
|
||||
},
|
||||
({ props }) => {
|
||||
return [
|
||||
'warning',
|
||||
'error'
|
||||
].map(status => {
|
||||
const palette = props.$local
|
||||
return insideFormItem(
|
||||
status,
|
||||
cTB('input', [
|
||||
cM('stateful', [
|
||||
cE('state-border', {
|
||||
border: palette[createKey('border', status)]
|
||||
}),
|
||||
cNotM('disabled', [
|
||||
c('&:hover', [
|
||||
cE('state-border', {
|
||||
border: palette[createKey('borderHover', status)]
|
||||
})
|
||||
]),
|
||||
cM('focus', {
|
||||
backgroundColor: palette[createKey('colorFocus', status)]
|
||||
}, [
|
||||
cE('state-border', {
|
||||
border: palette[createKey('borderFocus', status)]
|
||||
}),
|
||||
cE('box-shadow', {
|
||||
boxShadow: palette[createKey('boxShadowFocus', status)]
|
||||
})
|
||||
])
|
||||
]),
|
||||
cE('input, textarea', {
|
||||
caretColor: palette[createKey('caretColor', status)]
|
||||
})
|
||||
])
|
||||
])
|
||||
)
|
||||
})
|
||||
}
|
||||
])
|
||||
@ -1,108 +0,0 @@
|
||||
import { cTB, c, cE, cM, cNotM, createKey } from '../../../../_utils/cssr'
|
||||
import { depx, pxfy } from 'seemly'
|
||||
|
||||
export default c([
|
||||
({ props }) => {
|
||||
const size = props.$vm.mergedSize
|
||||
const height = props.$local[createKey('height', size)]
|
||||
const fontSize = props.$local[createKey('fontSize', size)]
|
||||
const lineHeight = pxfy(Math.round(depx(fontSize) * 1.5))
|
||||
const paddingTop = pxfy((depx(height) - depx(lineHeight)) / 2)
|
||||
const borderRadiusRound = pxfy(depx(height) / 2)
|
||||
const {
|
||||
paddingLeft,
|
||||
paddingRight,
|
||||
paddingIcon
|
||||
} = props.$local
|
||||
return cTB('input', [
|
||||
cM(size + '-size', {
|
||||
lineHeight,
|
||||
fontSize
|
||||
}, [
|
||||
cE('input', {
|
||||
height
|
||||
}),
|
||||
cE('input, textarea, textarea-mirror, splitor, placeholder', {
|
||||
paddingLeft,
|
||||
paddingRight,
|
||||
lineHeight,
|
||||
fontSize,
|
||||
paddingTop: paddingTop,
|
||||
paddingBottom: paddingTop
|
||||
}),
|
||||
cE('placeholder', {
|
||||
left: paddingLeft,
|
||||
right: paddingRight
|
||||
}),
|
||||
cM('suffix, clearable', [
|
||||
cM('split', [
|
||||
cE('input', [
|
||||
cM('second', {
|
||||
paddingRight: `${paddingIcon} !important`
|
||||
}, [
|
||||
c('& +', [
|
||||
cE('placeholder', {
|
||||
right: `${paddingIcon} !important`
|
||||
})
|
||||
])
|
||||
])
|
||||
])
|
||||
]),
|
||||
cNotM('split', [
|
||||
cE('input', [
|
||||
cM('first', {
|
||||
paddingRight: `${paddingIcon} !important`
|
||||
})
|
||||
]),
|
||||
cE('placeholder', {
|
||||
right: `${paddingIcon} !important`
|
||||
})
|
||||
])
|
||||
]),
|
||||
cM('prefix', [
|
||||
cNotM('split', [
|
||||
cE('placeholder', {
|
||||
left: `${paddingIcon} !important`
|
||||
})
|
||||
]),
|
||||
cM('split', [
|
||||
cE('input', [
|
||||
cM('first', [
|
||||
c('& +', [
|
||||
cE('placeholder', {
|
||||
left: `${paddingIcon} !important`
|
||||
})
|
||||
])
|
||||
])
|
||||
])
|
||||
]),
|
||||
cE('input', [
|
||||
cM('first', {
|
||||
paddingLeft: `${paddingIcon} !important`
|
||||
})
|
||||
])
|
||||
]),
|
||||
cNotM('textarea', {
|
||||
height
|
||||
}),
|
||||
cM('round', [
|
||||
cNotM('textarea', {
|
||||
borderRadius: borderRadiusRound
|
||||
}, [
|
||||
cE('input', {
|
||||
paddingLeft: paddingLeft,
|
||||
paddingRight: paddingRight
|
||||
}),
|
||||
cE('placeholder', {
|
||||
left: paddingLeft,
|
||||
right: paddingRight
|
||||
}),
|
||||
cE('box-shadow, border, state-border', {
|
||||
borderRadius: borderRadiusRound
|
||||
})
|
||||
])
|
||||
])
|
||||
])
|
||||
])
|
||||
}
|
||||
])
|
||||
@ -1,14 +1,15 @@
|
||||
import create from '../../_styles/utils/create-component-base'
|
||||
import commonVariables from './_common'
|
||||
import { changeColor } from 'seemly'
|
||||
import { baseDark } from '../../_styles/base'
|
||||
import { baseClearButtonDark } from '../../_base/clear-button/styles'
|
||||
import { commonDark } from '../../_styles/new-common'
|
||||
|
||||
export default create({
|
||||
export default {
|
||||
name: 'Input',
|
||||
theme: 'dark',
|
||||
peer: [baseDark, baseClearButtonDark],
|
||||
getLocalVars (vars) {
|
||||
common: commonDark,
|
||||
peers: {
|
||||
BaseClearButton: baseClearButtonDark
|
||||
},
|
||||
self (vars) {
|
||||
const {
|
||||
textColor2Overlay,
|
||||
textColor4Overlay,
|
||||
@ -80,4 +81,4 @@ export default create({
|
||||
caretColorError: errorColor
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
@ -1,14 +1,15 @@
|
||||
import create from '../../_styles/utils/create-component-base'
|
||||
import commonVariables from './_common'
|
||||
import { changeColor } from 'seemly'
|
||||
import { baseLight } from '../../_styles/base'
|
||||
import { baseClearButtonLight } from '../../_base/clear-button/styles'
|
||||
import { commonLight } from '../../_styles/new-common'
|
||||
|
||||
export default create({
|
||||
export default {
|
||||
name: 'Input',
|
||||
theme: 'light',
|
||||
peer: [baseLight, baseClearButtonLight],
|
||||
getLocalVars (vars) {
|
||||
common: commonLight,
|
||||
peers: {
|
||||
BaseClearButton: baseClearButtonLight
|
||||
},
|
||||
self (vars) {
|
||||
const {
|
||||
textColor2,
|
||||
textColor4,
|
||||
@ -82,4 +83,4 @@ export default create({
|
||||
caretColorError: errorColor
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user