123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144 |
- <template>
- <div
- :class="['basic-time-range',{'is-focus': isFocus}]"
- :style="{width}"
- >
- <cip-time-select
- class="cip-time-range"
- v-bind="{...attrs,...startInputProps}"
- v-model="proxyValue"
- :disabled="disabled"
- :maxTime="maxTime"
- :no-icon="true"
- @focus="onValueFocus"
- @blur="onValueBlur"
- />
- <span class="basic-time-range__link"> — </span>
- <cip-time-select
- class="cip-time-range"
- v-bind="{...attrs,...endInputProps}"
- v-model="proxyOtherValue[0].value"
- :disabled="disabled"
- :minTime="minTime"
- @focus="onOtherValueFocus"
- @blur="onOtherValueBlur"
- />
- </div>
- </template>
- <script>
- import { computed } from 'vue'
- import CipTimeSelect from '@cip/components/cip-time-select'
- import {
- formInputProps,
- fromInputEmits,
- useFormInput,
- useInputProps
- } from '@cip/components/helper/form-input'
- import { useFocusInput } from '../date-range/use-focus-input'
- export default {
- components: { CipTimeSelect },
- props: formInputProps,
- emits: [...fromInputEmits],
- setup (props, context) {
- const formInput = useFormInput(props, context, { maxOtherKey: 1 })
- const { width, securityConfig, proxyValue, proxyOtherValue } = formInput
- const startInputProps = useInputProps(props, [
- ['startPlaceholder', 'placeholder'],
- ['start', { defaultValue: '00:00' }],
- ['end', { defaultValue: '23:30' }],
- ['step', { defaultValue: '00:30' }]
- ])
- const endInputProps = useInputProps(props, [
- ['endPlaceholder', 'placeholder'],
- ['start', { defaultValue: '00:00' }],
- ['end', { defaultValue: '23:30' }],
- ['step', { defaultValue: '00:30' }]
- ])
- const attrs = computed(() => {
- return props.config?.attrs ?? {}
- })
- const startTransValue = computed(() => {
- return proxyValue.value ?? securityConfig.value.startDefaultValue
- })
- const endTransValue = computed(() => {
- return proxyOtherValue[0].value ?? securityConfig.value.endDefaultValue
- })
- const minTime = computed(() => {
- return startTransValue.value ?? securityConfig.value.start
- })
- const maxTime = computed(() => {
- return endTransValue.value ?? securityConfig.value.end
- })
- const [isValueFocus, onValueFocus, onValueBlur] = useFocusInput()
- const [isOtherValueFocus, onOtherValueFocus, onOtherValueBlur] = useFocusInput()
- const isFocus = computed(() => {
- return isValueFocus.value || isOtherValueFocus.value
- })
- return {
- proxyValue,
- proxyOtherValue,
- startTransValue,
- endTransValue,
- attrs,
- width,
- minTime,
- maxTime,
- startInputProps,
- endInputProps,
- isFocus,
- onValueFocus,
- onValueBlur,
- onOtherValueFocus,
- onOtherValueBlur
- }
- }
- }
- </script>
- <style lang="less">
- .basic-time-range{
- box-sizing: border-box;
- display: flex;
- flex-grow: 1;
- align-items: center;
- padding: 0 1px;
- line-height: var(~'--@{elNamespace}-component-size');
- box-shadow: 0 0 0 1px var(~'--@{elNamespace}-input-border-color',var(~'--@{elNamespace}-border-color')) inset;
- border-radius: var(~'--@{elNamespace}-input-border-radius',var(~'--@{elNamespace}-border-radius-base'));
- &:hover{
- box-shadow: 0 0 0 1px var(~'--@{elNamespace}-border-color-hover',var(~'--@{elNamespace}-border-color')) inset;
- }
- &.is-focus{
- box-shadow: 0 0 0 1px @primary inset;
- }
- &__link{
- color: var(~'--@{elNamespace}-input-text-color');
- margin: 0 4px;
- font-size: 16px;
- zoom: 0.625;
- }
- .cip-time-range.cip-time-select{
- flex-grow: 2;
- flex-basis: 0;
- line-height: var(~'--@{elNamespace}-component-size');
- .@{elNamespace}-input__wrapper{
- box-shadow: none !important;
- padding-top: 0;
- padding-bottom: 0;
- .@{elNamespace}-input__inner{
- text-align: center;
- }
- }
- }
- }
- </style>
|