147 lines
4.4 KiB
JavaScript
147 lines
4.4 KiB
JavaScript
import { resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue";
|
|
// Styles
|
|
import "./VInput.css";
|
|
|
|
// Components
|
|
import { useInputIcon } from "./InputIcon.mjs";
|
|
import { VMessages } from "../VMessages/VMessages.mjs"; // Composables
|
|
import { makeComponentProps } from "../../composables/component.mjs";
|
|
import { makeDensityProps, useDensity } from "../../composables/density.mjs";
|
|
import { IconValue } from "../../composables/icons.mjs";
|
|
import { useRtl } from "../../composables/locale.mjs";
|
|
import { makeValidationProps, useValidation } from "../../composables/validation.mjs"; // Utilities
|
|
import { computed } from 'vue';
|
|
import { EventProp, genericComponent, getUid, propsFactory, useRender } from "../../util/index.mjs"; // Types
|
|
export const makeVInputProps = propsFactory({
|
|
id: String,
|
|
appendIcon: IconValue,
|
|
centerAffix: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
prependIcon: IconValue,
|
|
hideDetails: [Boolean, String],
|
|
hideSpinButtons: Boolean,
|
|
hint: String,
|
|
persistentHint: Boolean,
|
|
messages: {
|
|
type: [Array, String],
|
|
default: () => []
|
|
},
|
|
direction: {
|
|
type: String,
|
|
default: 'horizontal',
|
|
validator: v => ['horizontal', 'vertical'].includes(v)
|
|
},
|
|
'onClick:prepend': EventProp(),
|
|
'onClick:append': EventProp(),
|
|
...makeComponentProps(),
|
|
...makeDensityProps(),
|
|
...makeValidationProps()
|
|
}, 'VInput');
|
|
export const VInput = genericComponent()({
|
|
name: 'VInput',
|
|
props: {
|
|
...makeVInputProps()
|
|
},
|
|
emits: {
|
|
'update:modelValue': value => true
|
|
},
|
|
setup(props, _ref) {
|
|
let {
|
|
attrs,
|
|
slots,
|
|
emit
|
|
} = _ref;
|
|
const {
|
|
densityClasses
|
|
} = useDensity(props);
|
|
const {
|
|
rtlClasses
|
|
} = useRtl();
|
|
const {
|
|
InputIcon
|
|
} = useInputIcon(props);
|
|
const uid = getUid();
|
|
const id = computed(() => props.id || `input-${uid}`);
|
|
const messagesId = computed(() => `${id.value}-messages`);
|
|
const {
|
|
errorMessages,
|
|
isDirty,
|
|
isDisabled,
|
|
isReadonly,
|
|
isPristine,
|
|
isValid,
|
|
isValidating,
|
|
reset,
|
|
resetValidation,
|
|
validate,
|
|
validationClasses
|
|
} = useValidation(props, 'v-input', id);
|
|
const slotProps = computed(() => ({
|
|
id,
|
|
messagesId,
|
|
isDirty,
|
|
isDisabled,
|
|
isReadonly,
|
|
isPristine,
|
|
isValid,
|
|
isValidating,
|
|
reset,
|
|
resetValidation,
|
|
validate
|
|
}));
|
|
const messages = computed(() => {
|
|
if (props.errorMessages?.length || !isPristine.value && errorMessages.value.length) {
|
|
return errorMessages.value;
|
|
} else if (props.hint && (props.persistentHint || props.focused)) {
|
|
return props.hint;
|
|
} else {
|
|
return props.messages;
|
|
}
|
|
});
|
|
useRender(() => {
|
|
const hasPrepend = !!(slots.prepend || props.prependIcon);
|
|
const hasAppend = !!(slots.append || props.appendIcon);
|
|
const hasMessages = messages.value.length > 0;
|
|
const hasDetails = !props.hideDetails || props.hideDetails === 'auto' && (hasMessages || !!slots.details);
|
|
return _createVNode("div", {
|
|
"class": ['v-input', `v-input--${props.direction}`, {
|
|
'v-input--center-affix': props.centerAffix,
|
|
'v-input--hide-spin-buttons': props.hideSpinButtons
|
|
}, densityClasses.value, rtlClasses.value, validationClasses.value, props.class],
|
|
"style": props.style
|
|
}, [hasPrepend && _createVNode("div", {
|
|
"key": "prepend",
|
|
"class": "v-input__prepend"
|
|
}, [slots.prepend?.(slotProps.value), props.prependIcon && _createVNode(InputIcon, {
|
|
"key": "prepend-icon",
|
|
"name": "prepend"
|
|
}, null)]), slots.default && _createVNode("div", {
|
|
"class": "v-input__control"
|
|
}, [slots.default?.(slotProps.value)]), hasAppend && _createVNode("div", {
|
|
"key": "append",
|
|
"class": "v-input__append"
|
|
}, [props.appendIcon && _createVNode(InputIcon, {
|
|
"key": "append-icon",
|
|
"name": "append"
|
|
}, null), slots.append?.(slotProps.value)]), hasDetails && _createVNode("div", {
|
|
"class": "v-input__details"
|
|
}, [_createVNode(VMessages, {
|
|
"id": messagesId.value,
|
|
"active": hasMessages,
|
|
"messages": messages.value
|
|
}, {
|
|
message: slots.message
|
|
}), slots.details?.(slotProps.value)])]);
|
|
});
|
|
return {
|
|
reset,
|
|
resetValidation,
|
|
validate,
|
|
isValid,
|
|
errorMessages
|
|
};
|
|
}
|
|
});
|
|
//# sourceMappingURL=VInput.mjs.map
|