xdesign-vue-next

Version:

XDesign Component for vue-next

1 lines • 15 kB

Source Map (JSON)

{"version":3,"file":"input.mjs","sources":["../../src/input/input.tsx"],"sourcesContent":["import { defineComponent, computed } from 'vue';\nimport props from './props';\nimport { useFormDisabled } from '../form/hooks';\nimport { useConfig, usePrefixClass, useCommonClassName } from '../hooks/useConfig';\nimport { useTNodeJSX } from '../hooks/tnode';\nimport useInput from './useInput';\nimport useInputEventHandler from './useInputEventHandler';\nimport useInputWidth from './useInputWidth';\nimport isUndefined from 'lodash/isUndefined';\n\nfunction getValidAttrs(obj: Record<string, unknown>): Record<string, unknown> {\n const newObj = {};\n Object.keys(obj).forEach((key) => {\n if (!isUndefined(obj[key])) {\n newObj[key] = obj[key];\n }\n });\n return newObj;\n}\n\nexport default defineComponent({\n name: 'XInput',\n props: {\n ...props,\n showInput: {\n // 没有这个 API，请勿使用，即将删除。控制透传readonly同时是否展示input 默认保留因为正常Input需要撑开宽度\n type: Boolean,\n default: true,\n },\n keepWrapperWidth: {\n // 没有这个 API，请勿使用，即将删除。控制透传autoWidth之后是否容器宽度也自适应多选等组件需要用到自适应但也需要保留宽度\n type: Boolean,\n default: false,\n },\n allowTriggerBlur: {\n type: Boolean,\n default: true,\n },\n },\n\n setup(props, { expose }) {\n const { globalConfig } = useConfig('input');\n const disabled = useFormDisabled();\n const COMPONENT_NAME = usePrefixClass('input');\n const INPUT_WRAP_CLASS = usePrefixClass('input__wrap');\n const INPUT_TIPS_CLASS = usePrefixClass('input__tips');\n const { STATUS, SIZE } = useCommonClassName();\n const classPrefix = usePrefixClass();\n const renderTNodeJSX = useTNodeJSX();\n const {\n isHover,\n tStatus,\n inputRef,\n renderType,\n showClear,\n focused,\n inputValue,\n isComposition,\n compositionValue,\n innerValue,\n limitNumber,\n ...inputHandle\n } = useInput(props, expose);\n\n const { inputPreRef } = useInputWidth(props, inputRef, innerValue);\n\n const inputEventHandler = useInputEventHandler(props, isHover);\n\n const tPlaceholder = computed(() => props.placeholder ?? globalConfig.value.placeholder);\n const inputAttrs = computed(() =>\n getValidAttrs({\n autofocus: props.autofocus,\n disabled: disabled.value,\n readonly: props.readonly,\n placeholder: tPlaceholder.value,\n maxlength: (!props.allowInputOverMax && props.maxlength) || undefined,\n name: props.name || undefined,\n type: renderType.value,\n autocomplete: props.autocomplete ?? (globalConfig.value.autocomplete || undefined),\n unselectable: props.readonly ? 'on' : undefined,\n }),\n );\n\n const wrapClasses = computed(() => [\n INPUT_WRAP_CLASS.value,\n {\n [`${COMPONENT_NAME.value}--auto-width`]: props.autoWidth && !props.keepWrapperWidth,\n },\n ]);\n\n const inputEvents = getValidAttrs({\n onFocus: (e: FocusEvent) => inputHandle.emitFocus(e),\n onBlur: inputHandle.formatAndEmitBlur,\n onKeydown: inputEventHandler.handleKeydown,\n onKeyup: inputEventHandler.handleKeyUp,\n onKeypress: inputEventHandler.handleKeypress,\n onPaste: inputEventHandler.onHandlePaste,\n onCompositionend: inputHandle.onHandleCompositionend,\n onCompositionstart: inputHandle.onHandleCompositionstart,\n });\n\n return () => {\n const prefixIcon = renderTNodeJSX('prefixIcon');\n let suffixIcon = renderTNodeJSX('suffixIcon');\n let passwordIcon = renderTNodeJSX('passwordIcon');\n const label = renderTNodeJSX('label', { silent: true });\n const suffix = renderTNodeJSX('suffix');\n const limitNode =\n limitNumber.value && props.showLimitNumber ? (\n <div\n class={[\n `${classPrefix.value}-input__limit-number`,\n {\n [`${classPrefix.value}-is-disabled`]: disabled.value,\n },\n ]}\n >\n {limitNumber.value}\n </div>\n ) : null;\n\n const labelContent = label ? <div class={`${COMPONENT_NAME.value}__prefix`}>{label}</div> : null;\n const suffixContent =\n suffix || limitNode ? (\n <div class={`${COMPONENT_NAME.value}__suffix`}>\n {suffix}\n {limitNode}\n </div>\n ) : null;\n\n if (props.type === 'password') {\n if (renderType.value === 'password') {\n suffixIcon = (\n <icon-ri-eye-off-line class={`${COMPONENT_NAME.value}__suffix-clear`} onClick={inputHandle.emitPassword} />\n );\n } else if (renderType.value === 'text') {\n suffixIcon = (\n <icon-ri-eye-line class={`${COMPONENT_NAME.value}__suffix-clear`} onClick={inputHandle.emitPassword} />\n );\n }\n }\n\n if (showClear.value) {\n // 如果类型为 password 则使用 passwordIcon 显示 clear\n if (props.type === 'password') {\n passwordIcon = (\n <icon-ri-close-circle-fill\n ref={inputHandle.clearIconRef}\n class={`${COMPONENT_NAME.value}__suffix-clear`}\n onClick={inputHandle.emitClear}\n onMousedown={inputHandle.onClearIconMousedown}\n />\n );\n } else {\n suffixIcon = (\n <icon-ri-close-circle-fill\n ref={inputHandle.clearIconRef}\n class={`${COMPONENT_NAME.value}__suffix-clear`}\n onClick={inputHandle.emitClear}\n onMousedown={inputHandle.onClearIconMousedown}\n />\n );\n }\n }\n\n const classes = [\n COMPONENT_NAME.value,\n props.inputClass,\n {\n [SIZE.value[props.size]]: props.size !== 'medium',\n [STATUS.value.disabled]: disabled.value,\n [STATUS.value.focused]: focused.value,\n [`${classPrefix.value}-is-${tStatus.value}`]: tStatus.value && tStatus.value !== 'default',\n [`${classPrefix.value}-align-${props.align}`]: props.align !== 'left',\n [`${classPrefix.value}-is-readonly`]: props.readonly,\n [`${COMPONENT_NAME.value}--prefix`]: prefixIcon || labelContent,\n [`${COMPONENT_NAME.value}--suffix`]: suffixIcon || suffixContent,\n [`${COMPONENT_NAME.value}--focused`]: focused.value,\n },\n ];\n\n const tips = renderTNodeJSX('tips');\n\n const tipsClasses = [\n INPUT_TIPS_CLASS.value,\n `${classPrefix.value}-tips`,\n `${classPrefix.value}-is-${tStatus.value || 'default'}`,\n ];\n\n return (\n <div class={wrapClasses.value} v-show={props.type !== 'hidden'}>\n <div\n class={classes}\n onClick={inputHandle.onRootClick}\n onMouseenter={inputEventHandler.onInputMouseenter}\n onMouseleave={inputEventHandler.onInputMouseleave}\n onWheel={inputEventHandler.onHandleMousewheel}\n >\n {prefixIcon ? (\n <span class={[`${COMPONENT_NAME.value}__prefix`, `${COMPONENT_NAME.value}__prefix-icon`]}>\n {prefixIcon}\n </span>\n ) : null}\n {labelContent}\n {props.showInput && (\n <input\n class={`${COMPONENT_NAME.value}__inner`}\n {...inputAttrs.value}\n {...inputEvents}\n ref={inputRef}\n value={isComposition.value ? compositionValue.value ?? '' : inputValue.value ?? ''}\n onInput={(e: Event) => inputHandle.handleInput(e as InputEvent)}\n />\n )}\n {props.autoWidth && (\n <span ref={inputPreRef} class={`${classPrefix.value}-input__input-pre`}>\n {innerValue.value || tPlaceholder.value}\n </span>\n )}\n {suffixContent}\n {passwordIcon ? (\n <span\n class={[\n `${COMPONENT_NAME.value}__suffix`,\n `${COMPONENT_NAME.value}__suffix-icon`,\n `${COMPONENT_NAME.value}__clear`,\n ]}\n >\n {passwordIcon}\n </span>\n ) : null}\n {suffixIcon ? (\n <span\n class={[\n `${COMPONENT_NAME.value}__suffix`,\n `${COMPONENT_NAME.value}__suffix-icon`,\n { [`${COMPONENT_NAME.value}__clear`]: showClear.value },\n ]}\n >\n {suffixIcon}\n </span>\n ) : null}\n </div>\n {tips && <div class={tipsClasses}>{tips}</div>}\n </div>\n );\n };\n },\n});\n"],"names":["newObj","name","props","showInput","type","keepWrapperWidth","allowTriggerBlur","setup","inputHandle","autocomplete","unselectable","silent","_createVNode","_resolveComponent","_mergeProps"],"mappings":"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"}