720 lines
23 KiB
JavaScript
720 lines
23 KiB
JavaScript
import { At as onBeforeMount, Cn as withDirectives, Dt as mergeProps, Ft as onMounted, Kn as ref, M as Fragment, Ot as nextTick, Qn as toRef, U as computed, Ut as provide, Vn as onScopeDispose, W as createBaseVNode, Yn as shallowRef, ar as normalizeClass, cn as useId, et as createVNode, gn as watch, jt as onBeforeUnmount, nr as unref, sr as normalizeStyle, xt as inject } from "./vue.runtime.esm-bundler-BvoXUmaf.js";
|
|
import { B as matchesSelector, K as pick, Z as wrapInArray, a as provideDefaults, c as getCurrentInstanceName, d as EventProp, f as callEvent, l as propsFactory, n as genericComponent, s as getCurrentInstance, w as filterInputAttrs } from "./defineComponent-DB6xIcDy.js";
|
|
import { a as VSlideYTransition } from "./transitions-DCQ3sjjZ.js";
|
|
import { t as makeComponentProps } from "./component-DdiwBe6i.js";
|
|
import { t as deepEqual } from "./deepEqual-DDqmGqyF.js";
|
|
import { t as useRender } from "./useRender-fVtVsZgv.js";
|
|
import { r as useTextColor, t as useBackgroundColor } from "./color-B6vuQruj.js";
|
|
import { i as provideTheme, r as makeThemeProps } from "./theme-Cx5kFg0-.js";
|
|
import { n as IconValue } from "./icons-k2ZLE_i8.js";
|
|
import { n as useToggleScope, t as useProxiedModel } from "./proxiedModel-DSlSIQ0y.js";
|
|
import { i as useRtl, r as useLocale } from "./locale-DDGMqzqb.js";
|
|
import { n as useDimension, t as makeDimensionProps } from "./dimensions-BDdmuRdK.js";
|
|
import { n as makeTransitionProps, t as MaybeTransition } from "./transition-DqoZ8fA1.js";
|
|
import { n as useDensity, t as makeDensityProps } from "./density-CpKZ5PhP.js";
|
|
import { t as VIcon } from "./VIcon-1CJH_3Uo.js";
|
|
import { t as Ripple } from "./ripple-Z40rPDte.js";
|
|
import "/Users/thackmaster/Development/routie2/frontend/node_modules/vuetify/lib/components/VSelectionControl/VSelectionControl.css";
|
|
import "/Users/thackmaster/Development/routie2/frontend/node_modules/vuetify/lib/components/VLabel/VLabel.css";
|
|
import "/Users/thackmaster/Development/routie2/frontend/node_modules/vuetify/lib/components/VSelectionControlGroup/VSelectionControlGroup.css";
|
|
import "/Users/thackmaster/Development/routie2/frontend/node_modules/vuetify/lib/components/VInput/VInput.css";
|
|
import "/Users/thackmaster/Development/routie2/frontend/node_modules/vuetify/lib/components/VMessages/VMessages.css";
|
|
//#region node_modules/vuetify/lib/components/VLabel/VLabel.js
|
|
var makeVLabelProps = propsFactory({
|
|
text: String,
|
|
onClick: EventProp(),
|
|
...makeComponentProps(),
|
|
...makeThemeProps()
|
|
}, "VLabel");
|
|
var VLabel = genericComponent()({
|
|
name: "VLabel",
|
|
props: makeVLabelProps(),
|
|
setup(props, { slots }) {
|
|
useRender(() => createBaseVNode("label", {
|
|
"class": normalizeClass([
|
|
"v-label",
|
|
{ "v-label--clickable": !!props.onClick },
|
|
props.class
|
|
]),
|
|
"style": normalizeStyle(props.style),
|
|
"onClick": props.onClick
|
|
}, [props.text, slots.default?.()]));
|
|
return {};
|
|
}
|
|
});
|
|
//#endregion
|
|
//#region node_modules/vuetify/lib/components/VSelectionControlGroup/VSelectionControlGroup.js
|
|
var VSelectionControlGroupSymbol = Symbol.for("vuetify:selection-control-group");
|
|
var makeSelectionControlGroupProps = propsFactory({
|
|
color: String,
|
|
disabled: {
|
|
type: Boolean,
|
|
default: null
|
|
},
|
|
defaultsTarget: String,
|
|
error: Boolean,
|
|
id: String,
|
|
inline: Boolean,
|
|
falseIcon: IconValue,
|
|
trueIcon: IconValue,
|
|
ripple: {
|
|
type: [Boolean, Object],
|
|
default: true
|
|
},
|
|
multiple: {
|
|
type: Boolean,
|
|
default: null
|
|
},
|
|
name: String,
|
|
readonly: {
|
|
type: Boolean,
|
|
default: null
|
|
},
|
|
modelValue: null,
|
|
type: String,
|
|
valueComparator: {
|
|
type: Function,
|
|
default: deepEqual
|
|
},
|
|
...makeComponentProps(),
|
|
...makeDensityProps(),
|
|
...makeThemeProps()
|
|
}, "SelectionControlGroup");
|
|
var makeVSelectionControlGroupProps = propsFactory({ ...makeSelectionControlGroupProps({ defaultsTarget: "VSelectionControl" }) }, "VSelectionControlGroup");
|
|
genericComponent()({
|
|
name: "VSelectionControlGroup",
|
|
props: makeVSelectionControlGroupProps(),
|
|
emits: { "update:modelValue": (value) => true },
|
|
setup(props, { slots }) {
|
|
const modelValue = useProxiedModel(props, "modelValue");
|
|
const uid = useId();
|
|
const id = toRef(() => props.id || `v-selection-control-group-${uid}`);
|
|
const name = toRef(() => props.name || id.value);
|
|
const updateHandlers = /* @__PURE__ */ new Set();
|
|
provide(VSelectionControlGroupSymbol, {
|
|
modelValue,
|
|
forceUpdate: () => {
|
|
updateHandlers.forEach((fn) => fn());
|
|
},
|
|
onForceUpdate: (cb) => {
|
|
updateHandlers.add(cb);
|
|
onScopeDispose(() => {
|
|
updateHandlers.delete(cb);
|
|
});
|
|
}
|
|
});
|
|
provideDefaults({ [props.defaultsTarget]: {
|
|
color: toRef(() => props.color),
|
|
disabled: toRef(() => props.disabled),
|
|
density: toRef(() => props.density),
|
|
error: toRef(() => props.error),
|
|
inline: toRef(() => props.inline),
|
|
modelValue,
|
|
multiple: toRef(() => !!props.multiple || props.multiple == null && Array.isArray(modelValue.value)),
|
|
name,
|
|
falseIcon: toRef(() => props.falseIcon),
|
|
trueIcon: toRef(() => props.trueIcon),
|
|
readonly: toRef(() => props.readonly),
|
|
ripple: toRef(() => props.ripple),
|
|
type: toRef(() => props.type),
|
|
valueComparator: toRef(() => props.valueComparator)
|
|
} });
|
|
useRender(() => createBaseVNode("div", {
|
|
"class": normalizeClass([
|
|
"v-selection-control-group",
|
|
{ "v-selection-control-group--inline": props.inline },
|
|
props.class
|
|
]),
|
|
"style": normalizeStyle(props.style),
|
|
"role": props.type === "radio" ? "radiogroup" : void 0
|
|
}, [slots.default?.()]));
|
|
return {};
|
|
}
|
|
});
|
|
//#endregion
|
|
//#region node_modules/vuetify/lib/components/VSelectionControl/VSelectionControl.js
|
|
var makeVSelectionControlProps = propsFactory({
|
|
label: String,
|
|
baseColor: String,
|
|
trueValue: null,
|
|
falseValue: null,
|
|
value: null,
|
|
...makeComponentProps(),
|
|
...makeSelectionControlGroupProps()
|
|
}, "VSelectionControl");
|
|
function useSelectionControl(props) {
|
|
const group = inject(VSelectionControlGroupSymbol, void 0);
|
|
const { densityClasses } = useDensity(props);
|
|
const modelValue = useProxiedModel(props, "modelValue");
|
|
const trueValue = computed(() => props.trueValue !== void 0 ? props.trueValue : props.value !== void 0 ? props.value : true);
|
|
const falseValue = computed(() => props.falseValue !== void 0 ? props.falseValue : false);
|
|
const isMultiple = computed(() => !!props.multiple || props.multiple == null && Array.isArray(modelValue.value));
|
|
const model = computed({
|
|
get() {
|
|
const val = group ? group.modelValue.value : modelValue.value;
|
|
return isMultiple.value ? wrapInArray(val).some((v) => props.valueComparator(v, trueValue.value)) : props.valueComparator(val, trueValue.value);
|
|
},
|
|
set(val) {
|
|
if (props.readonly) return;
|
|
const currentValue = val ? trueValue.value : falseValue.value;
|
|
let newVal = currentValue;
|
|
if (isMultiple.value) newVal = val ? [...wrapInArray(modelValue.value), currentValue] : wrapInArray(modelValue.value).filter((item) => !props.valueComparator(item, trueValue.value));
|
|
if (group) group.modelValue.value = newVal;
|
|
else modelValue.value = newVal;
|
|
}
|
|
});
|
|
const { textColorClasses, textColorStyles } = useTextColor(() => {
|
|
if (props.error || props.disabled) return void 0;
|
|
return model.value ? props.color : props.baseColor;
|
|
});
|
|
const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(() => {
|
|
return model.value && !props.error && !props.disabled ? props.color : props.baseColor;
|
|
});
|
|
return {
|
|
group,
|
|
densityClasses,
|
|
trueValue,
|
|
falseValue,
|
|
model,
|
|
textColorClasses,
|
|
textColorStyles,
|
|
backgroundColorClasses,
|
|
backgroundColorStyles,
|
|
icon: computed(() => model.value ? props.trueIcon : props.falseIcon)
|
|
};
|
|
}
|
|
var VSelectionControl = genericComponent()({
|
|
name: "VSelectionControl",
|
|
directives: { vRipple: Ripple },
|
|
inheritAttrs: false,
|
|
props: makeVSelectionControlProps(),
|
|
emits: { "update:modelValue": (value) => true },
|
|
setup(props, { attrs, slots }) {
|
|
const { group, densityClasses, icon, model, textColorClasses, textColorStyles, backgroundColorClasses, backgroundColorStyles, trueValue } = useSelectionControl(props);
|
|
const uid = useId();
|
|
const isFocused = shallowRef(false);
|
|
const isFocusVisible = shallowRef(false);
|
|
const input = ref();
|
|
const id = toRef(() => props.id || `input-${uid}`);
|
|
const isInteractive = toRef(() => !props.disabled && !props.readonly);
|
|
group?.onForceUpdate(() => {
|
|
if (input.value) input.value.checked = model.value;
|
|
});
|
|
function onFocus(e) {
|
|
if (props.disabled) return;
|
|
isFocused.value = true;
|
|
if (matchesSelector(e.target, ":focus-visible") !== false) isFocusVisible.value = true;
|
|
}
|
|
function onBlur() {
|
|
isFocused.value = false;
|
|
isFocusVisible.value = false;
|
|
}
|
|
function onClickLabel(e) {
|
|
e.stopPropagation();
|
|
}
|
|
function onInput(e) {
|
|
if (!isInteractive.value) {
|
|
if (input.value) input.value.checked = model.value;
|
|
return;
|
|
}
|
|
if (props.readonly && group) nextTick(() => group.forceUpdate());
|
|
model.value = e.target.checked;
|
|
}
|
|
useRender(() => {
|
|
const label = slots.label ? slots.label({
|
|
label: props.label,
|
|
props: { for: id.value }
|
|
}) : props.label;
|
|
const [rootAttrs, inputAttrs] = filterInputAttrs(attrs);
|
|
const inputNode = createBaseVNode("input", mergeProps({
|
|
"ref": input,
|
|
"checked": model.value,
|
|
"disabled": !!props.disabled,
|
|
"id": id.value,
|
|
"onBlur": onBlur,
|
|
"onFocus": onFocus,
|
|
"onInput": onInput,
|
|
"aria-disabled": !!props.disabled,
|
|
"aria-label": props.label,
|
|
"type": props.type,
|
|
"value": trueValue.value,
|
|
"name": props.name,
|
|
"aria-checked": props.type === "checkbox" ? model.value : void 0
|
|
}, inputAttrs), null);
|
|
return createBaseVNode("div", mergeProps({ "class": [
|
|
"v-selection-control",
|
|
{
|
|
"v-selection-control--dirty": model.value,
|
|
"v-selection-control--disabled": props.disabled,
|
|
"v-selection-control--error": props.error,
|
|
"v-selection-control--focused": isFocused.value,
|
|
"v-selection-control--focus-visible": isFocusVisible.value,
|
|
"v-selection-control--inline": props.inline
|
|
},
|
|
densityClasses.value,
|
|
props.class
|
|
] }, rootAttrs, { "style": props.style }), [createBaseVNode("div", {
|
|
"class": normalizeClass(["v-selection-control__wrapper", textColorClasses.value]),
|
|
"style": normalizeStyle(textColorStyles.value)
|
|
}, [slots.default?.({
|
|
backgroundColorClasses,
|
|
backgroundColorStyles
|
|
}), withDirectives(createBaseVNode("div", { "class": normalizeClass(["v-selection-control__input"]) }, [slots.input?.({
|
|
model,
|
|
textColorClasses,
|
|
textColorStyles,
|
|
backgroundColorClasses,
|
|
backgroundColorStyles,
|
|
inputNode,
|
|
icon: icon.value,
|
|
props: {
|
|
onFocus,
|
|
onBlur,
|
|
id: id.value
|
|
}
|
|
}) ?? createBaseVNode(Fragment, null, [icon.value && createVNode(VIcon, {
|
|
"key": "icon",
|
|
"icon": icon.value
|
|
}, null), inputNode])]), [[
|
|
Ripple,
|
|
!props.disabled && !props.readonly && props.ripple,
|
|
null,
|
|
{
|
|
center: true,
|
|
circle: true
|
|
}
|
|
]])]), label && createVNode(VLabel, {
|
|
"for": id.value,
|
|
"onClick": onClickLabel
|
|
}, { default: () => [label] })]);
|
|
});
|
|
return {
|
|
isFocused,
|
|
input
|
|
};
|
|
}
|
|
});
|
|
//#endregion
|
|
//#region node_modules/vuetify/lib/components/VInput/InputIcon.js
|
|
function useInputIcon(props) {
|
|
const { t } = useLocale();
|
|
function InputIcon({ name, color, ...attrs }) {
|
|
const localeKey = {
|
|
prepend: "prependAction",
|
|
prependInner: "prependAction",
|
|
append: "appendAction",
|
|
appendInner: "appendAction",
|
|
clear: "clear"
|
|
}[name];
|
|
const listener = props[`onClick:${name}`];
|
|
function onKeydown(e) {
|
|
if (e.key !== "Enter" && e.key !== " ") return;
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
callEvent(listener, new PointerEvent("click", e));
|
|
}
|
|
const label = listener && localeKey ? t(`$vuetify.input.${localeKey}`, props.label ?? "") : void 0;
|
|
return createVNode(VIcon, mergeProps({
|
|
"icon": props[`${name}Icon`],
|
|
"aria-label": label,
|
|
"onClick": listener,
|
|
"onKeydown": onKeydown,
|
|
"color": color
|
|
}, attrs), null);
|
|
}
|
|
return { InputIcon };
|
|
}
|
|
//#endregion
|
|
//#region node_modules/vuetify/lib/components/VMessages/VMessages.js
|
|
var makeVMessagesProps = propsFactory({
|
|
active: Boolean,
|
|
color: String,
|
|
messages: {
|
|
type: [Array, String],
|
|
default: () => []
|
|
},
|
|
...makeComponentProps(),
|
|
...makeTransitionProps({ transition: {
|
|
component: VSlideYTransition,
|
|
leaveAbsolute: true,
|
|
group: true
|
|
} })
|
|
}, "VMessages");
|
|
var VMessages = genericComponent()({
|
|
name: "VMessages",
|
|
props: makeVMessagesProps(),
|
|
setup(props, { slots }) {
|
|
const messages = computed(() => wrapInArray(props.messages));
|
|
const { textColorClasses, textColorStyles } = useTextColor(() => props.color);
|
|
useRender(() => createVNode(MaybeTransition, {
|
|
"transition": props.transition,
|
|
"tag": "div",
|
|
"class": normalizeClass([
|
|
"v-messages",
|
|
textColorClasses.value,
|
|
props.class
|
|
]),
|
|
"style": normalizeStyle([textColorStyles.value, props.style])
|
|
}, { default: () => [props.active && messages.value.map((message, i) => createBaseVNode("div", {
|
|
"class": "v-messages__message",
|
|
"key": `${i}-${messages.value}`
|
|
}, [slots.message ? slots.message({ message }) : message]))] }));
|
|
return {};
|
|
}
|
|
});
|
|
//#endregion
|
|
//#region node_modules/vuetify/lib/composables/focus.js
|
|
var makeFocusProps = propsFactory({
|
|
focused: Boolean,
|
|
"onUpdate:focused": EventProp()
|
|
}, "focus");
|
|
function useFocus(props, name = getCurrentInstanceName()) {
|
|
const isFocused = useProxiedModel(props, "focused");
|
|
const focusClasses = toRef(() => {
|
|
return { [`${name}--focused`]: isFocused.value };
|
|
});
|
|
function focus() {
|
|
isFocused.value = true;
|
|
}
|
|
function blur() {
|
|
isFocused.value = false;
|
|
}
|
|
return {
|
|
focusClasses,
|
|
isFocused,
|
|
focus,
|
|
blur
|
|
};
|
|
}
|
|
//#endregion
|
|
//#region node_modules/vuetify/lib/composables/form.js
|
|
var FormKey = Symbol.for("vuetify:form");
|
|
propsFactory({
|
|
disabled: Boolean,
|
|
fastFail: Boolean,
|
|
readonly: Boolean,
|
|
modelValue: {
|
|
type: Boolean,
|
|
default: null
|
|
},
|
|
validateOn: {
|
|
type: String,
|
|
default: "input"
|
|
}
|
|
}, "form");
|
|
function useForm(props) {
|
|
const form = inject(FormKey, null);
|
|
return {
|
|
...form,
|
|
isReadonly: computed(() => !!(props?.readonly ?? form?.isReadonly.value)),
|
|
isDisabled: computed(() => !!(props?.disabled ?? form?.isDisabled.value))
|
|
};
|
|
}
|
|
//#endregion
|
|
//#region node_modules/vuetify/lib/labs/rules/rules.js
|
|
var RulesSymbol = Symbol.for("vuetify:rules");
|
|
function useRules(fn) {
|
|
const rules = inject(RulesSymbol, null);
|
|
if (!fn) {
|
|
if (!rules) throw new Error("Could not find Vuetify rules injection");
|
|
return rules.aliases;
|
|
}
|
|
return rules?.resolve(fn) ?? toRef(fn);
|
|
}
|
|
//#endregion
|
|
//#region node_modules/vuetify/lib/composables/validation.js
|
|
var makeValidationProps = propsFactory({
|
|
disabled: {
|
|
type: Boolean,
|
|
default: null
|
|
},
|
|
error: Boolean,
|
|
errorMessages: {
|
|
type: [Array, String],
|
|
default: () => []
|
|
},
|
|
maxErrors: {
|
|
type: [Number, String],
|
|
default: 1
|
|
},
|
|
name: String,
|
|
label: String,
|
|
readonly: {
|
|
type: Boolean,
|
|
default: null
|
|
},
|
|
rules: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
modelValue: null,
|
|
validateOn: String,
|
|
validationValue: null,
|
|
...makeFocusProps()
|
|
}, "validation");
|
|
function useValidation(props, name = getCurrentInstanceName(), id = useId()) {
|
|
const model = useProxiedModel(props, "modelValue");
|
|
const validationModel = computed(() => props.validationValue === void 0 ? model.value : props.validationValue);
|
|
const form = useForm(props);
|
|
const rules = useRules(() => props.rules);
|
|
const internalErrorMessages = ref([]);
|
|
const isPristine = shallowRef(true);
|
|
const isDirty = computed(() => !!(wrapInArray(model.value === "" ? null : model.value).length || wrapInArray(validationModel.value === "" ? null : validationModel.value).length));
|
|
const errorMessages = computed(() => {
|
|
return props.errorMessages?.length ? wrapInArray(props.errorMessages).concat(internalErrorMessages.value).slice(0, Math.max(0, Number(props.maxErrors))) : internalErrorMessages.value;
|
|
});
|
|
const validateOn = computed(() => {
|
|
let value = (props.validateOn ?? form.validateOn?.value) || "input";
|
|
if (value === "lazy") value = "input lazy";
|
|
if (value === "eager") value = "input eager";
|
|
const set = new Set(value?.split(" ") ?? []);
|
|
return {
|
|
input: set.has("input"),
|
|
blur: set.has("blur") || set.has("input") || set.has("invalid-input"),
|
|
invalidInput: set.has("invalid-input"),
|
|
lazy: set.has("lazy"),
|
|
eager: set.has("eager")
|
|
};
|
|
});
|
|
const isValid = computed(() => {
|
|
if (props.error || props.errorMessages?.length) return false;
|
|
if (!props.rules.length) return true;
|
|
if (isPristine.value) return internalErrorMessages.value.length || validateOn.value.lazy ? null : true;
|
|
else return !internalErrorMessages.value.length;
|
|
});
|
|
const isValidating = shallowRef(false);
|
|
const validationClasses = computed(() => {
|
|
return {
|
|
[`${name}--error`]: isValid.value === false,
|
|
[`${name}--dirty`]: isDirty.value,
|
|
[`${name}--disabled`]: form.isDisabled.value,
|
|
[`${name}--readonly`]: form.isReadonly.value
|
|
};
|
|
});
|
|
const vm = getCurrentInstance("validation");
|
|
const uid = computed(() => props.name ?? unref(id));
|
|
onBeforeMount(() => {
|
|
form.register?.({
|
|
id: uid.value,
|
|
vm,
|
|
validate,
|
|
reset,
|
|
resetValidation
|
|
});
|
|
});
|
|
onBeforeUnmount(() => {
|
|
form.unregister?.(uid.value);
|
|
});
|
|
onMounted(async () => {
|
|
if (!validateOn.value.lazy) await validate(!validateOn.value.eager);
|
|
form.update?.(uid.value, isValid.value, errorMessages.value);
|
|
});
|
|
useToggleScope(() => validateOn.value.input || validateOn.value.invalidInput && isValid.value === false, () => {
|
|
watch(validationModel, () => {
|
|
if (validationModel.value != null) validate();
|
|
else if (props.focused) {
|
|
const unwatch = watch(() => props.focused, (val) => {
|
|
if (!val) validate();
|
|
unwatch();
|
|
});
|
|
}
|
|
});
|
|
});
|
|
useToggleScope(() => validateOn.value.blur, () => {
|
|
watch(() => props.focused, (val) => {
|
|
if (!val) validate();
|
|
});
|
|
});
|
|
watch([isValid, errorMessages], () => {
|
|
form.update?.(uid.value, isValid.value, errorMessages.value);
|
|
});
|
|
async function reset() {
|
|
model.value = null;
|
|
await nextTick();
|
|
await resetValidation();
|
|
}
|
|
async function resetValidation() {
|
|
isPristine.value = true;
|
|
if (!validateOn.value.lazy) await validate(!validateOn.value.eager);
|
|
else internalErrorMessages.value = [];
|
|
}
|
|
async function validate(silent = false) {
|
|
const results = [];
|
|
isValidating.value = true;
|
|
for (const rule of rules.value) {
|
|
if (results.length >= Number(props.maxErrors ?? 1)) break;
|
|
const result = await (typeof rule === "function" ? rule : () => rule)(validationModel.value);
|
|
if (result === true) continue;
|
|
if (result !== false && typeof result !== "string") {
|
|
console.warn(`${result} is not a valid value. Rule functions must return boolean true or a string.`);
|
|
continue;
|
|
}
|
|
results.push(result || "");
|
|
}
|
|
internalErrorMessages.value = results;
|
|
isValidating.value = false;
|
|
isPristine.value = silent;
|
|
return internalErrorMessages.value;
|
|
}
|
|
return {
|
|
errorMessages,
|
|
isDirty,
|
|
isDisabled: form.isDisabled,
|
|
isReadonly: form.isReadonly,
|
|
isPristine,
|
|
isValid,
|
|
isValidating,
|
|
reset,
|
|
resetValidation,
|
|
validate,
|
|
validationClasses
|
|
};
|
|
}
|
|
//#endregion
|
|
//#region node_modules/vuetify/lib/components/VInput/VInput.js
|
|
var makeVInputProps = propsFactory({
|
|
id: String,
|
|
appendIcon: IconValue,
|
|
baseColor: String,
|
|
centerAffix: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
color: String,
|
|
glow: Boolean,
|
|
iconColor: [Boolean, String],
|
|
prependIcon: IconValue,
|
|
hideDetails: [Boolean, String],
|
|
hideSpinButtons: Boolean,
|
|
hint: String,
|
|
indentDetails: {
|
|
type: Boolean,
|
|
default: null
|
|
},
|
|
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(),
|
|
...pick(makeDimensionProps(), [
|
|
"maxWidth",
|
|
"minWidth",
|
|
"width"
|
|
]),
|
|
...makeThemeProps(),
|
|
...makeValidationProps()
|
|
}, "VInput");
|
|
var VInput = genericComponent()({
|
|
name: "VInput",
|
|
props: { ...makeVInputProps() },
|
|
emits: { "update:modelValue": (value) => true },
|
|
setup(props, { attrs, slots, emit }) {
|
|
const { densityClasses } = useDensity(props);
|
|
const { dimensionStyles } = useDimension(props);
|
|
const { themeClasses } = provideTheme(props);
|
|
const { rtlClasses } = useRtl();
|
|
const { InputIcon } = useInputIcon(props);
|
|
const uid = useId();
|
|
const id = computed(() => props.id || `input-${uid}`);
|
|
const { errorMessages, isDirty, isDisabled, isReadonly, isPristine, isValid, isValidating, reset, resetValidation, validate, validationClasses } = useValidation(props, "v-input", id);
|
|
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;
|
|
});
|
|
const hasMessages = toRef(() => messages.value.length > 0);
|
|
const hasDetails = toRef(() => !props.hideDetails || props.hideDetails === "auto" && (hasMessages.value || !!slots.details));
|
|
const messagesId = computed(() => hasDetails.value ? `${id.value}-messages` : void 0);
|
|
const slotProps = computed(() => ({
|
|
id,
|
|
messagesId,
|
|
isDirty,
|
|
isDisabled,
|
|
isReadonly,
|
|
isPristine,
|
|
isValid,
|
|
isValidating,
|
|
hasDetails,
|
|
reset,
|
|
resetValidation,
|
|
validate
|
|
}));
|
|
const color = toRef(() => {
|
|
return props.error || props.disabled ? void 0 : props.focused ? props.color : props.baseColor;
|
|
});
|
|
const iconColor = toRef(() => {
|
|
if (!props.iconColor) return void 0;
|
|
return props.iconColor === true ? color.value : props.iconColor;
|
|
});
|
|
useRender(() => {
|
|
const hasPrepend = !!(slots.prepend || props.prependIcon);
|
|
const hasAppend = !!(slots.append || props.appendIcon);
|
|
return createBaseVNode("div", {
|
|
"class": normalizeClass([
|
|
"v-input",
|
|
`v-input--${props.direction}`,
|
|
{
|
|
"v-input--center-affix": props.centerAffix,
|
|
"v-input--focused": props.focused,
|
|
"v-input--glow": props.glow,
|
|
"v-input--hide-spin-buttons": props.hideSpinButtons,
|
|
"v-input--indent-details": props.indentDetails
|
|
},
|
|
densityClasses.value,
|
|
themeClasses.value,
|
|
rtlClasses.value,
|
|
validationClasses.value,
|
|
props.class
|
|
]),
|
|
"style": normalizeStyle([dimensionStyles.value, props.style])
|
|
}, [
|
|
hasPrepend && createBaseVNode("div", {
|
|
"key": "prepend",
|
|
"class": "v-input__prepend"
|
|
}, [slots.prepend ? slots.prepend(slotProps.value) : props.prependIcon && createVNode(InputIcon, {
|
|
"key": "prepend-icon",
|
|
"name": "prepend",
|
|
"color": iconColor.value
|
|
}, null)]),
|
|
slots.default && createBaseVNode("div", { "class": "v-input__control" }, [slots.default?.(slotProps.value)]),
|
|
hasAppend && createBaseVNode("div", {
|
|
"key": "append",
|
|
"class": "v-input__append"
|
|
}, [slots.append ? slots.append(slotProps.value) : props.appendIcon && createVNode(InputIcon, {
|
|
"key": "append-icon",
|
|
"name": "append",
|
|
"color": iconColor.value
|
|
}, null)]),
|
|
hasDetails.value && createBaseVNode("div", {
|
|
"id": messagesId.value,
|
|
"class": "v-input__details",
|
|
"role": "alert",
|
|
"aria-live": "polite"
|
|
}, [createVNode(VMessages, {
|
|
"active": hasMessages.value,
|
|
"messages": messages.value
|
|
}, { message: slots.message }), slots.details?.(slotProps.value)])
|
|
]);
|
|
});
|
|
return {
|
|
reset,
|
|
resetValidation,
|
|
validate,
|
|
isValid,
|
|
errorMessages
|
|
};
|
|
}
|
|
});
|
|
//#endregion
|
|
export { useFocus as a, makeVSelectionControlProps as c, makeFocusProps as i, VLabel as l, makeVInputProps as n, useInputIcon as o, useForm as r, VSelectionControl as s, VInput as t };
|
|
|
|
//# sourceMappingURL=VInput-BxI8SL-_.js.map
|