456 lines
14 KiB
JavaScript
456 lines
14 KiB
JavaScript
import {
|
|
VLabel,
|
|
makeFocusProps,
|
|
useFocus,
|
|
useInputIcon
|
|
} from "./chunk-IK67YVHF.js";
|
|
import {
|
|
VExpandXTransition,
|
|
VSlideYTransition
|
|
} from "./chunk-B4JFJDWM.js";
|
|
import {
|
|
MaybeTransition,
|
|
makeTransitionProps
|
|
} from "./chunk-CAGZXMOS.js";
|
|
import {
|
|
LoaderSlot,
|
|
makeLoaderProps,
|
|
useLoader
|
|
} from "./chunk-UXZ55AO7.js";
|
|
import {
|
|
makeRoundedProps,
|
|
useRounded
|
|
} from "./chunk-AQK3CYVW.js";
|
|
import {
|
|
VDefaultsProvider
|
|
} from "./chunk-PAT7NP2Z.js";
|
|
import {
|
|
IconValue
|
|
} from "./chunk-OJDZBU5D.js";
|
|
import {
|
|
useBackgroundColor,
|
|
useTextColor
|
|
} from "./chunk-BHV5Z34M.js";
|
|
import {
|
|
useRtl
|
|
} from "./chunk-ENTLCOCZ.js";
|
|
import {
|
|
makeThemeProps,
|
|
provideTheme
|
|
} from "./chunk-3DSR7NCB.js";
|
|
import {
|
|
EventProp,
|
|
PREFERS_REDUCED_MOTION,
|
|
animate,
|
|
convertToUnit,
|
|
genericComponent,
|
|
makeComponentProps,
|
|
nullifyTransforms,
|
|
propsFactory,
|
|
standardEasing,
|
|
useRender
|
|
} from "./chunk-LZ5T2ERG.js";
|
|
import {
|
|
Fragment,
|
|
computed,
|
|
createBaseVNode,
|
|
createVNode,
|
|
mergeProps,
|
|
normalizeClass,
|
|
normalizeStyle,
|
|
ref,
|
|
toRef,
|
|
useId,
|
|
vShow,
|
|
watch,
|
|
withDirectives
|
|
} from "./chunk-2MKFL3BX.js";
|
|
|
|
// node_modules/vuetify/lib/components/VCounter/VCounter.js
|
|
import "/home/david/gitea_repo/personal_development/ServerManagerWebApp/frontend/node_modules/vuetify/lib/components/VCounter/VCounter.css";
|
|
var makeVCounterProps = propsFactory({
|
|
active: Boolean,
|
|
disabled: Boolean,
|
|
max: [Number, String],
|
|
value: {
|
|
type: [Number, String],
|
|
default: 0
|
|
},
|
|
...makeComponentProps(),
|
|
...makeTransitionProps({
|
|
transition: {
|
|
component: VSlideYTransition
|
|
}
|
|
})
|
|
}, "VCounter");
|
|
var VCounter = genericComponent()({
|
|
name: "VCounter",
|
|
functional: true,
|
|
props: makeVCounterProps(),
|
|
setup(props, _ref) {
|
|
let {
|
|
slots
|
|
} = _ref;
|
|
const counter = toRef(() => {
|
|
return props.max ? `${props.value} / ${props.max}` : String(props.value);
|
|
});
|
|
useRender(() => createVNode(MaybeTransition, {
|
|
"transition": props.transition
|
|
}, {
|
|
default: () => [withDirectives(createBaseVNode("div", {
|
|
"class": normalizeClass(["v-counter", {
|
|
"text-error": props.max && !props.disabled && parseFloat(props.value) > parseFloat(props.max)
|
|
}, props.class]),
|
|
"style": normalizeStyle(props.style)
|
|
}, [slots.default ? slots.default({
|
|
counter: counter.value,
|
|
max: props.max,
|
|
value: props.value
|
|
}) : counter.value]), [[vShow, props.active]])]
|
|
}));
|
|
return {};
|
|
}
|
|
});
|
|
|
|
// node_modules/vuetify/lib/components/VField/VFieldLabel.js
|
|
var makeVFieldLabelProps = propsFactory({
|
|
floating: Boolean,
|
|
...makeComponentProps()
|
|
}, "VFieldLabel");
|
|
var VFieldLabel = genericComponent()({
|
|
name: "VFieldLabel",
|
|
props: makeVFieldLabelProps(),
|
|
setup(props, _ref) {
|
|
let {
|
|
slots
|
|
} = _ref;
|
|
useRender(() => createVNode(VLabel, {
|
|
"class": normalizeClass(["v-field-label", {
|
|
"v-field-label--floating": props.floating
|
|
}, props.class]),
|
|
"style": normalizeStyle(props.style)
|
|
}, slots));
|
|
return {};
|
|
}
|
|
});
|
|
|
|
// node_modules/vuetify/lib/components/VField/VField.js
|
|
import "/home/david/gitea_repo/personal_development/ServerManagerWebApp/frontend/node_modules/vuetify/lib/components/VField/VField.css";
|
|
var allowedVariants = ["underlined", "outlined", "filled", "solo", "solo-inverted", "solo-filled", "plain"];
|
|
var makeVFieldProps = propsFactory({
|
|
appendInnerIcon: IconValue,
|
|
bgColor: String,
|
|
clearable: Boolean,
|
|
clearIcon: {
|
|
type: IconValue,
|
|
default: "$clear"
|
|
},
|
|
active: Boolean,
|
|
centerAffix: {
|
|
type: Boolean,
|
|
default: void 0
|
|
},
|
|
color: String,
|
|
baseColor: String,
|
|
dirty: Boolean,
|
|
disabled: {
|
|
type: Boolean,
|
|
default: null
|
|
},
|
|
glow: Boolean,
|
|
error: Boolean,
|
|
flat: Boolean,
|
|
iconColor: [Boolean, String],
|
|
label: String,
|
|
persistentClear: Boolean,
|
|
prependInnerIcon: IconValue,
|
|
reverse: Boolean,
|
|
singleLine: Boolean,
|
|
variant: {
|
|
type: String,
|
|
default: "filled",
|
|
validator: (v) => allowedVariants.includes(v)
|
|
},
|
|
"onClick:clear": EventProp(),
|
|
"onClick:appendInner": EventProp(),
|
|
"onClick:prependInner": EventProp(),
|
|
...makeComponentProps(),
|
|
...makeLoaderProps(),
|
|
...makeRoundedProps(),
|
|
...makeThemeProps()
|
|
}, "VField");
|
|
var VField = genericComponent()({
|
|
name: "VField",
|
|
inheritAttrs: false,
|
|
props: {
|
|
id: String,
|
|
details: Boolean,
|
|
labelId: String,
|
|
...makeFocusProps(),
|
|
...makeVFieldProps()
|
|
},
|
|
emits: {
|
|
"update:focused": (focused) => true,
|
|
"update:modelValue": (value) => true
|
|
},
|
|
setup(props, _ref) {
|
|
let {
|
|
attrs,
|
|
emit,
|
|
slots
|
|
} = _ref;
|
|
const {
|
|
themeClasses
|
|
} = provideTheme(props);
|
|
const {
|
|
loaderClasses
|
|
} = useLoader(props);
|
|
const {
|
|
focusClasses,
|
|
isFocused,
|
|
focus,
|
|
blur
|
|
} = useFocus(props);
|
|
const {
|
|
InputIcon
|
|
} = useInputIcon(props);
|
|
const {
|
|
roundedClasses
|
|
} = useRounded(props);
|
|
const {
|
|
rtlClasses
|
|
} = useRtl();
|
|
const isActive = toRef(() => props.dirty || props.active);
|
|
const hasLabel = toRef(() => !!(props.label || slots.label));
|
|
const hasFloatingLabel = toRef(() => !props.singleLine && hasLabel.value);
|
|
const uid = useId();
|
|
const id = computed(() => props.id || `input-${uid}`);
|
|
const messagesId = toRef(() => !props.details ? void 0 : `${id.value}-messages`);
|
|
const labelRef = ref();
|
|
const floatingLabelRef = ref();
|
|
const controlRef = ref();
|
|
const isPlainOrUnderlined = computed(() => ["plain", "underlined"].includes(props.variant));
|
|
const color = computed(() => {
|
|
return props.error || props.disabled ? void 0 : isActive.value && isFocused.value ? props.color : props.baseColor;
|
|
});
|
|
const iconColor = computed(() => {
|
|
if (!props.iconColor || props.glow && !isFocused.value) return void 0;
|
|
return props.iconColor === true ? color.value : props.iconColor;
|
|
});
|
|
const {
|
|
backgroundColorClasses,
|
|
backgroundColorStyles
|
|
} = useBackgroundColor(() => props.bgColor);
|
|
const {
|
|
textColorClasses,
|
|
textColorStyles
|
|
} = useTextColor(color);
|
|
watch(isActive, (val) => {
|
|
if (hasFloatingLabel.value && !PREFERS_REDUCED_MOTION()) {
|
|
const el = labelRef.value.$el;
|
|
const targetEl = floatingLabelRef.value.$el;
|
|
requestAnimationFrame(() => {
|
|
const rect = nullifyTransforms(el);
|
|
const targetRect = targetEl.getBoundingClientRect();
|
|
const x = targetRect.x - rect.x;
|
|
const y = targetRect.y - rect.y - (rect.height / 2 - targetRect.height / 2);
|
|
const targetWidth = targetRect.width / 0.75;
|
|
const width = Math.abs(targetWidth - rect.width) > 1 ? {
|
|
maxWidth: convertToUnit(targetWidth)
|
|
} : void 0;
|
|
const style = getComputedStyle(el);
|
|
const targetStyle = getComputedStyle(targetEl);
|
|
const duration = parseFloat(style.transitionDuration) * 1e3 || 150;
|
|
const scale = parseFloat(targetStyle.getPropertyValue("--v-field-label-scale"));
|
|
const color2 = targetStyle.getPropertyValue("color");
|
|
el.style.visibility = "visible";
|
|
targetEl.style.visibility = "hidden";
|
|
animate(el, {
|
|
transform: `translate(${x}px, ${y}px) scale(${scale})`,
|
|
color: color2,
|
|
...width
|
|
}, {
|
|
duration,
|
|
easing: standardEasing,
|
|
direction: val ? "normal" : "reverse"
|
|
}).finished.then(() => {
|
|
el.style.removeProperty("visibility");
|
|
targetEl.style.removeProperty("visibility");
|
|
});
|
|
});
|
|
}
|
|
}, {
|
|
flush: "post"
|
|
});
|
|
const slotProps = computed(() => ({
|
|
isActive,
|
|
isFocused,
|
|
controlRef,
|
|
iconColor,
|
|
blur,
|
|
focus
|
|
}));
|
|
function onClick(e) {
|
|
if (e.target !== document.activeElement) {
|
|
e.preventDefault();
|
|
}
|
|
}
|
|
useRender(() => {
|
|
const isOutlined = props.variant === "outlined";
|
|
const hasPrepend = !!(slots["prepend-inner"] || props.prependInnerIcon);
|
|
const hasClear = !!(props.clearable || slots.clear) && !props.disabled;
|
|
const hasAppend = !!(slots["append-inner"] || props.appendInnerIcon || hasClear);
|
|
const label = () => slots.label ? slots.label({
|
|
...slotProps.value,
|
|
label: props.label,
|
|
props: {
|
|
for: id.value
|
|
}
|
|
}) : props.label;
|
|
return createBaseVNode("div", mergeProps({
|
|
"class": ["v-field", {
|
|
"v-field--active": isActive.value,
|
|
"v-field--appended": hasAppend,
|
|
"v-field--center-affix": props.centerAffix ?? !isPlainOrUnderlined.value,
|
|
"v-field--disabled": props.disabled,
|
|
"v-field--dirty": props.dirty,
|
|
"v-field--error": props.error,
|
|
"v-field--glow": props.glow,
|
|
"v-field--flat": props.flat,
|
|
"v-field--has-background": !!props.bgColor,
|
|
"v-field--persistent-clear": props.persistentClear,
|
|
"v-field--prepended": hasPrepend,
|
|
"v-field--reverse": props.reverse,
|
|
"v-field--single-line": props.singleLine,
|
|
"v-field--no-label": !label(),
|
|
[`v-field--variant-${props.variant}`]: true
|
|
}, themeClasses.value, backgroundColorClasses.value, focusClasses.value, loaderClasses.value, roundedClasses.value, rtlClasses.value, props.class],
|
|
"style": [backgroundColorStyles.value, props.style],
|
|
"onClick": onClick
|
|
}, attrs), [createBaseVNode("div", {
|
|
"class": "v-field__overlay"
|
|
}, null), createVNode(LoaderSlot, {
|
|
"name": "v-field",
|
|
"active": !!props.loading,
|
|
"color": props.error ? "error" : typeof props.loading === "string" ? props.loading : props.color
|
|
}, {
|
|
default: slots.loader
|
|
}), hasPrepend && createBaseVNode("div", {
|
|
"key": "prepend",
|
|
"class": "v-field__prepend-inner"
|
|
}, [slots["prepend-inner"] ? slots["prepend-inner"](slotProps.value) : props.prependInnerIcon && createVNode(InputIcon, {
|
|
"key": "prepend-icon",
|
|
"name": "prependInner",
|
|
"color": iconColor.value
|
|
}, null)]), createBaseVNode("div", {
|
|
"class": "v-field__field",
|
|
"data-no-activator": ""
|
|
}, [["filled", "solo", "solo-inverted", "solo-filled"].includes(props.variant) && hasFloatingLabel.value && createVNode(VFieldLabel, {
|
|
"key": "floating-label",
|
|
"ref": floatingLabelRef,
|
|
"class": normalizeClass([textColorClasses.value]),
|
|
"floating": true,
|
|
"for": id.value,
|
|
"aria-hidden": !isActive.value,
|
|
"style": normalizeStyle(textColorStyles.value)
|
|
}, {
|
|
default: () => [label()]
|
|
}), hasLabel.value && createVNode(VFieldLabel, {
|
|
"key": "label",
|
|
"ref": labelRef,
|
|
"id": props.labelId,
|
|
"for": id.value,
|
|
"aria-hidden": hasFloatingLabel.value && isActive.value
|
|
}, {
|
|
default: () => [label()]
|
|
}), slots.default?.({
|
|
...slotProps.value,
|
|
props: {
|
|
id: id.value,
|
|
class: "v-field__input",
|
|
"aria-describedby": messagesId.value
|
|
},
|
|
focus,
|
|
blur
|
|
}) ?? createBaseVNode("div", {
|
|
"id": id.value,
|
|
"class": "v-field__input",
|
|
"aria-describedby": messagesId.value
|
|
}, null)]), hasClear && createVNode(VExpandXTransition, {
|
|
"key": "clear"
|
|
}, {
|
|
default: () => [withDirectives(createBaseVNode("div", {
|
|
"class": "v-field__clearable",
|
|
"onMousedown": (e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
}
|
|
}, [createVNode(VDefaultsProvider, {
|
|
"defaults": {
|
|
VIcon: {
|
|
icon: props.clearIcon
|
|
}
|
|
}
|
|
}, {
|
|
default: () => [slots.clear ? slots.clear({
|
|
...slotProps.value,
|
|
props: {
|
|
onFocus: focus,
|
|
onBlur: blur,
|
|
onClick: props["onClick:clear"],
|
|
tabindex: -1
|
|
}
|
|
}) : createVNode(InputIcon, {
|
|
"name": "clear",
|
|
"onFocus": focus,
|
|
"onBlur": blur,
|
|
"tabindex": -1
|
|
}, null)]
|
|
})]), [[vShow, props.dirty]])]
|
|
}), hasAppend && createBaseVNode("div", {
|
|
"key": "append",
|
|
"class": "v-field__append-inner"
|
|
}, [slots["append-inner"] ? slots["append-inner"](slotProps.value) : props.appendInnerIcon && createVNode(InputIcon, {
|
|
"key": "append-icon",
|
|
"name": "appendInner",
|
|
"color": iconColor.value
|
|
}, null)]), createBaseVNode("div", {
|
|
"class": normalizeClass(["v-field__outline", textColorClasses.value]),
|
|
"style": normalizeStyle(textColorStyles.value)
|
|
}, [isOutlined && createBaseVNode(Fragment, null, [createBaseVNode("div", {
|
|
"class": "v-field__outline__start"
|
|
}, null), hasFloatingLabel.value && createBaseVNode("div", {
|
|
"class": "v-field__outline__notch"
|
|
}, [createVNode(VFieldLabel, {
|
|
"ref": floatingLabelRef,
|
|
"floating": true,
|
|
"for": id.value,
|
|
"aria-hidden": !isActive.value
|
|
}, {
|
|
default: () => [label()]
|
|
})]), createBaseVNode("div", {
|
|
"class": "v-field__outline__end"
|
|
}, null)]), isPlainOrUnderlined.value && hasFloatingLabel.value && createVNode(VFieldLabel, {
|
|
"ref": floatingLabelRef,
|
|
"floating": true,
|
|
"for": id.value,
|
|
"aria-hidden": !isActive.value
|
|
}, {
|
|
default: () => [label()]
|
|
})])]);
|
|
});
|
|
return {
|
|
controlRef,
|
|
fieldIconColor: iconColor
|
|
};
|
|
}
|
|
});
|
|
|
|
export {
|
|
VCounter,
|
|
VFieldLabel,
|
|
makeVFieldProps,
|
|
VField
|
|
};
|
|
//# sourceMappingURL=chunk-ITO3JWXJ.js.map
|