Major overhaul to the theme and now functioning.
This commit is contained in:
+562
@@ -0,0 +1,562 @@
|
||||
import {
|
||||
useForm
|
||||
} from "./chunk-GAYXO4FM.js";
|
||||
import {
|
||||
VSlideYTransition
|
||||
} from "./chunk-B4JFJDWM.js";
|
||||
import {
|
||||
makeDensityProps,
|
||||
useDensity
|
||||
} from "./chunk-TM3MIDYC.js";
|
||||
import {
|
||||
VIcon
|
||||
} from "./chunk-CMZ4UYUX.js";
|
||||
import {
|
||||
MaybeTransition,
|
||||
makeTransitionProps
|
||||
} from "./chunk-CAGZXMOS.js";
|
||||
import {
|
||||
makeDimensionProps,
|
||||
useDimension
|
||||
} from "./chunk-6EZKHCRW.js";
|
||||
import {
|
||||
IconValue
|
||||
} from "./chunk-OJDZBU5D.js";
|
||||
import {
|
||||
useLocale,
|
||||
useRtl
|
||||
} from "./chunk-ENTLCOCZ.js";
|
||||
import {
|
||||
useProxiedModel,
|
||||
useToggleScope
|
||||
} from "./chunk-KA77II4V.js";
|
||||
import {
|
||||
useTextColor
|
||||
} from "./chunk-BHV5Z34M.js";
|
||||
import {
|
||||
makeThemeProps,
|
||||
provideTheme
|
||||
} from "./chunk-3DSR7NCB.js";
|
||||
import {
|
||||
EventProp,
|
||||
callEvent,
|
||||
genericComponent,
|
||||
getCurrentInstance,
|
||||
getCurrentInstanceName,
|
||||
makeComponentProps,
|
||||
pick,
|
||||
propsFactory,
|
||||
useRender,
|
||||
wrapInArray
|
||||
} from "./chunk-LZ5T2ERG.js";
|
||||
import {
|
||||
computed,
|
||||
createBaseVNode,
|
||||
createVNode,
|
||||
inject,
|
||||
mergeProps,
|
||||
nextTick,
|
||||
normalizeClass,
|
||||
normalizeStyle,
|
||||
onBeforeMount,
|
||||
onBeforeUnmount,
|
||||
onMounted,
|
||||
ref,
|
||||
shallowRef,
|
||||
toRef,
|
||||
unref,
|
||||
useId,
|
||||
watch
|
||||
} from "./chunk-2MKFL3BX.js";
|
||||
|
||||
// node_modules/vuetify/lib/components/VLabel/VLabel.js
|
||||
import "/home/david/Documents/vscode/personal_development/ServerManagerWebApp/frontend/node_modules/vuetify/lib/components/VLabel/VLabel.css";
|
||||
var makeVLabelProps = propsFactory({
|
||||
text: String,
|
||||
onClick: EventProp(),
|
||||
...makeComponentProps(),
|
||||
...makeThemeProps()
|
||||
}, "VLabel");
|
||||
var VLabel = genericComponent()({
|
||||
name: "VLabel",
|
||||
props: makeVLabelProps(),
|
||||
setup(props, _ref) {
|
||||
let {
|
||||
slots
|
||||
} = _ref;
|
||||
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 {};
|
||||
}
|
||||
});
|
||||
|
||||
// node_modules/vuetify/lib/components/VMessages/VMessages.js
|
||||
import "/home/david/Documents/vscode/personal_development/ServerManagerWebApp/frontend/node_modules/vuetify/lib/components/VMessages/VMessages.css";
|
||||
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, _ref) {
|
||||
let {
|
||||
slots
|
||||
} = _ref;
|
||||
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 {};
|
||||
}
|
||||
});
|
||||
|
||||
// node_modules/vuetify/lib/components/VInput/VInput.js
|
||||
import "/home/david/Documents/vscode/personal_development/ServerManagerWebApp/frontend/node_modules/vuetify/lib/components/VInput/VInput.css";
|
||||
|
||||
// node_modules/vuetify/lib/components/VInput/InputIcon.js
|
||||
function useInputIcon(props) {
|
||||
const {
|
||||
t
|
||||
} = useLocale();
|
||||
function InputIcon(_ref) {
|
||||
let {
|
||||
name,
|
||||
color,
|
||||
...attrs
|
||||
} = _ref;
|
||||
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
|
||||
};
|
||||
}
|
||||
|
||||
// node_modules/vuetify/lib/composables/focus.js
|
||||
var makeFocusProps = propsFactory({
|
||||
focused: Boolean,
|
||||
"onUpdate:focused": EventProp()
|
||||
}, "focus");
|
||||
function useFocus(props) {
|
||||
let name = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 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
|
||||
};
|
||||
}
|
||||
|
||||
// node_modules/vuetify/lib/labs/rules/rules.js
|
||||
var RulesSymbol = /* @__PURE__ */ 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);
|
||||
}
|
||||
|
||||
// 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) {
|
||||
let name = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : getCurrentInstanceName();
|
||||
let id = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : 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() {
|
||||
let silent = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : false;
|
||||
const results = [];
|
||||
isValidating.value = true;
|
||||
for (const rule of rules.value) {
|
||||
if (results.length >= Number(props.maxErrors ?? 1)) {
|
||||
break;
|
||||
}
|
||||
const handler = typeof rule === "function" ? rule : () => rule;
|
||||
const result = await handler(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
|
||||
};
|
||||
}
|
||||
|
||||
// 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,
|
||||
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, _ref) {
|
||||
let {
|
||||
attrs,
|
||||
slots,
|
||||
emit
|
||||
} = _ref;
|
||||
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
|
||||
}, 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
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
export {
|
||||
VLabel,
|
||||
useInputIcon,
|
||||
makeFocusProps,
|
||||
useFocus,
|
||||
VMessages,
|
||||
makeValidationProps,
|
||||
useValidation,
|
||||
makeVInputProps,
|
||||
VInput
|
||||
};
|
||||
//# sourceMappingURL=chunk-4VABFUPG.js.map
|
||||
Reference in New Issue
Block a user