routie dev init since i didn't adhere to any proper guidance up until now
This commit is contained in:
+720
@@ -0,0 +1,720 @@
|
||||
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
|
||||
Reference in New Issue
Block a user