\n \n\n \n\n { hasPrepend && (\n \n { props.prependInnerIcon && (\n \n )}\n\n { slots['prepend-inner']?.(slotProps.value) }\n
\n )}\n\n \n {['filled', 'solo', 'solo-inverted', 'solo-filled'].includes(props.variant) && hasLabel.value && (\n \n { label }\n \n )}\n\n \n { label }\n \n\n { slots.default?.({\n ...slotProps.value,\n props: {\n id: id.value,\n class: 'v-field__input',\n 'aria-describedby': messagesId.value,\n },\n focus,\n blur,\n } as VFieldSlot)}\n
\n\n { hasClear && (\n \n {\n e.preventDefault()\n e.stopPropagation()\n }}\n >\n { slots.clear\n ? slots.clear()\n : \n }\n \n \n )}\n\n { hasAppend && (\n \n { slots['append-inner']?.(slotProps.value) }\n\n { props.appendInnerIcon && (\n \n )}\n
\n )}\n\n \n { isOutlined && (\n <>\n \n\n { hasLabel.value && (\n \n \n { label }\n \n
\n )}\n\n \n \n )}\n\n { isPlainOrUnderlined.value && hasLabel.value && (\n \n { label }\n \n )}\n \n \n )\n })\n\n return {\n controlRef,\n }\n },\n})\n\nexport type VField = InstanceType\n\n// TODO: this is kinda slow, might be better to implicitly inherit props instead\nexport function filterFieldProps (attrs: Record) {\n const keys = Object.keys(VField.props).filter(k => !isOn(k) && k !== 'class' && k !== 'style')\n return pick(attrs, keys)\n}\n","// Styles\nimport './VMessages.sass'\n\n// Components\nimport { VSlideYTransition } from '@/components/transitions'\n\n// Composables\nimport { useTextColor } from '@/composables/color'\nimport { makeComponentProps } from '@/composables/component'\nimport { makeTransitionProps, MaybeTransition } from '@/composables/transition'\n\n// Utilities\nimport { computed } from 'vue'\nimport { genericComponent, propsFactory, useRender, wrapInArray } from '@/util'\n\n// Types\nimport type { Component, PropType } from 'vue'\n\nexport type VMessageSlot = {\n message: string\n}\n\nexport type VMessagesSlots = {\n message: VMessageSlot\n}\n\nexport const makeVMessagesProps = propsFactory({\n active: Boolean,\n color: String,\n messages: {\n type: [Array, String] as PropType,\n default: () => ([]),\n },\n\n ...makeComponentProps(),\n ...makeTransitionProps({\n transition: {\n component: VSlideYTransition as Component,\n leaveAbsolute: true,\n group: true,\n },\n }),\n}, 'VMessages')\n\nexport const VMessages = genericComponent()({\n name: 'VMessages',\n\n props: makeVMessagesProps(),\n\n setup (props, { slots }) {\n const messages = computed(() => wrapInArray(props.messages))\n const { textColorClasses, textColorStyles } = useTextColor(computed(() => props.color))\n\n useRender(() => (\n \n { props.active && (\n messages.value.map((message, i) => (\n \n { slots.message ? slots.message({ message }) : message }\n \n ))\n )}\n \n ))\n\n return {}\n },\n})\n\nexport type VMessages = InstanceType\n","// Composables\nimport { makeFocusProps } from '@/composables/focus'\nimport { useForm } from '@/composables/form'\nimport { useProxiedModel } from '@/composables/proxiedModel'\nimport { useToggleScope } from '@/composables/toggleScope'\n\n// Utilities\nimport { computed, nextTick, onBeforeMount, onBeforeUnmount, onMounted, ref, shallowRef, unref, watch } from 'vue'\nimport { getCurrentInstanceName, getUid, propsFactory, wrapInArray } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { MaybeRef } from '@/util'\n\nexport type ValidationResult = string | boolean\nexport type ValidationRule =\n | ValidationResult\n | PromiseLike\n | ((value: any) => ValidationResult)\n | ((value: any) => PromiseLike)\n\ntype ValidateOnValue = 'blur' | 'input' | 'submit'\n\nexport interface ValidationProps {\n disabled: boolean | null\n error: boolean\n errorMessages: string | readonly string[]\n focused: boolean\n maxErrors: string | number\n name: string | undefined\n label: string | undefined\n readonly: boolean | null\n rules: readonly ValidationRule[]\n modelValue: any\n 'onUpdate:modelValue': ((val: any) => void) | undefined\n validateOn?: ValidateOnValue | `${ValidateOnValue} lazy` | `lazy ${ValidateOnValue}` | 'lazy'\n validationValue: any\n}\n\nexport const makeValidationProps = propsFactory({\n disabled: {\n type: Boolean as PropType,\n default: null,\n },\n error: Boolean,\n errorMessages: {\n type: [Array, String] as PropType,\n default: () => ([]),\n },\n maxErrors: {\n type: [Number, String],\n default: 1,\n },\n name: String,\n label: String,\n readonly: {\n type: Boolean as PropType,\n default: null,\n },\n rules: {\n type: Array as PropType,\n default: () => ([]),\n },\n modelValue: null,\n validateOn: String as PropType,\n validationValue: null,\n\n ...makeFocusProps(),\n}, 'validation')\n\nexport function useValidation (\n props: ValidationProps,\n name = getCurrentInstanceName(),\n id: MaybeRef = getUid(),\n) {\n const model = useProxiedModel(props, 'modelValue')\n const validationModel = computed(() => props.validationValue === undefined ? model.value : props.validationValue)\n const form = useForm()\n const internalErrorMessages = ref([])\n const isPristine = shallowRef(true)\n const isDirty = computed(() => !!(\n wrapInArray(model.value === '' ? null : model.value).length ||\n wrapInArray(validationModel.value === '' ? null : validationModel.value).length\n ))\n const isDisabled = computed(() => !!(props.disabled ?? form?.isDisabled.value))\n const isReadonly = computed(() => !!(props.readonly ?? form?.isReadonly.value))\n const errorMessages = computed(() => {\n return props.errorMessages.length\n ? wrapInArray(props.errorMessages).slice(0, Math.max(0, +props.maxErrors))\n : internalErrorMessages.value\n })\n const validateOn = computed(() => {\n let value = (props.validateOn ?? form?.validateOn.value) || 'input'\n if (value === 'lazy') value = 'input lazy'\n const set = new Set(value?.split(' ') ?? [])\n\n return {\n blur: set.has('blur') || set.has('input'),\n input: set.has('input'),\n submit: set.has('submit'),\n lazy: set.has('lazy'),\n }\n })\n const isValid = computed(() => {\n if (props.error || props.errorMessages.length) return false\n if (!props.rules.length) return true\n if (isPristine.value) {\n return internalErrorMessages.value.length || validateOn.value.lazy ? null : true\n } else {\n return !internalErrorMessages.value.length\n }\n })\n const isValidating = shallowRef(false)\n const validationClasses = computed(() => {\n return {\n [`${name}--error`]: isValid.value === false,\n [`${name}--dirty`]: isDirty.value,\n [`${name}--disabled`]: isDisabled.value,\n [`${name}--readonly`]: isReadonly.value,\n }\n })\n\n const uid = computed(() => props.name ?? unref(id))\n\n onBeforeMount(() => {\n form?.register({\n id: uid.value,\n validate,\n reset,\n resetValidation,\n })\n })\n\n onBeforeUnmount(() => {\n form?.unregister(uid.value)\n })\n\n onMounted(async () => {\n if (!validateOn.value.lazy) {\n await validate(true)\n }\n form?.update(uid.value, isValid.value, errorMessages.value)\n })\n\n useToggleScope(() => validateOn.value.input, () => {\n watch(validationModel, () => {\n if (validationModel.value != null) {\n validate()\n } else if (props.focused) {\n const unwatch = watch(() => props.focused, val => {\n if (!val) validate()\n\n unwatch()\n })\n }\n })\n })\n\n useToggleScope(() => validateOn.value.blur, () => {\n watch(() => props.focused, val => {\n if (!val) validate()\n })\n })\n\n watch(isValid, () => {\n form?.update(uid.value, isValid.value, errorMessages.value)\n })\n\n function reset () {\n model.value = null\n nextTick(resetValidation)\n }\n\n function resetValidation () {\n isPristine.value = true\n if (!validateOn.value.lazy) {\n validate(true)\n } else {\n internalErrorMessages.value = []\n }\n }\n\n async function validate (silent = false) {\n const results = []\n\n isValidating.value = true\n\n for (const rule of props.rules) {\n if (results.length >= +(props.maxErrors ?? 1)) {\n break\n }\n\n const handler = typeof rule === 'function' ? rule : () => rule\n const result = await handler(validationModel.value)\n\n if (result === true) continue\n\n if (result !== false && typeof result !== 'string') {\n // eslint-disable-next-line no-console\n console.warn(`${result} is not a valid value. Rule functions must return boolean true or a string.`)\n\n continue\n }\n\n results.push(result || '')\n }\n\n internalErrorMessages.value = results\n isValidating.value = false\n isPristine.value = silent\n\n return internalErrorMessages.value\n }\n\n return {\n errorMessages,\n isDirty,\n isDisabled,\n isReadonly,\n isPristine,\n isValid,\n isValidating,\n reset,\n resetValidation,\n validate,\n validationClasses,\n }\n}\n","// Styles\nimport './VInput.sass'\n\n// Components\nimport { useInputIcon } from '@/components/VInput/InputIcon'\nimport { VMessages } from '@/components/VMessages/VMessages'\n\n// Composables\nimport { makeComponentProps } from '@/composables/component'\nimport { makeDensityProps, useDensity } from '@/composables/density'\nimport { IconValue } from '@/composables/icons'\nimport { useRtl } from '@/composables/locale'\nimport { makeValidationProps, useValidation } from '@/composables/validation'\n\n// Utilities\nimport { computed } from 'vue'\nimport { EventProp, genericComponent, getUid, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { ComputedRef, PropType, Ref } from 'vue'\nimport type { VMessageSlot } from '@/components/VMessages/VMessages'\n\nexport interface VInputSlot {\n id: ComputedRef\n messagesId: ComputedRef\n isDirty: ComputedRef\n isDisabled: ComputedRef\n isReadonly: ComputedRef\n isPristine: Ref\n isValid: ComputedRef\n isValidating: Ref\n reset: () => void\n resetValidation: () => void\n validate: () => void\n}\n\nexport const makeVInputProps = propsFactory({\n id: String,\n appendIcon: IconValue,\n centerAffix: {\n type: Boolean,\n default: true,\n },\n prependIcon: IconValue,\n hideDetails: [Boolean, String] as PropType,\n hint: String,\n persistentHint: Boolean,\n messages: {\n type: [Array, String] as PropType,\n default: () => ([]),\n },\n direction: {\n type: String as PropType<'horizontal' | 'vertical'>,\n default: 'horizontal',\n validator: (v: any) => ['horizontal', 'vertical'].includes(v),\n },\n\n 'onClick:prepend': EventProp<[MouseEvent]>(),\n 'onClick:append': EventProp<[MouseEvent]>(),\n\n ...makeComponentProps(),\n ...makeDensityProps(),\n ...makeValidationProps(),\n}, 'VInput')\n\nexport type VInputSlots = {\n default: VInputSlot\n prepend: VInputSlot\n append: VInputSlot\n details: VInputSlot\n message: VMessageSlot\n}\n\nexport const VInput = genericComponent()({\n name: 'VInput',\n\n props: {\n ...makeVInputProps(),\n },\n\n emits: {\n 'update:modelValue': (val: any) => true,\n },\n\n setup (props, { attrs, slots, emit }) {\n const { densityClasses } = useDensity(props)\n const { rtlClasses } = useRtl()\n const { InputIcon } = useInputIcon(props)\n\n const uid = getUid()\n const id = computed(() => props.id || `input-${uid}`)\n const messagesId = computed(() => `${id.value}-messages`)\n\n const {\n errorMessages,\n isDirty,\n isDisabled,\n isReadonly,\n isPristine,\n isValid,\n isValidating,\n reset,\n resetValidation,\n validate,\n validationClasses,\n } = useValidation(props, 'v-input', id)\n\n const slotProps = computed(() => ({\n id,\n messagesId,\n isDirty,\n isDisabled,\n isReadonly,\n isPristine,\n isValid,\n isValidating,\n reset,\n resetValidation,\n validate,\n }))\n\n const messages = computed(() => {\n if (props.errorMessages?.length || (!isPristine.value && errorMessages.value.length)) {\n return errorMessages.value\n } else if (props.hint && (props.persistentHint || props.focused)) {\n return props.hint\n } else {\n return props.messages\n }\n })\n\n useRender(() => {\n const hasPrepend = !!(slots.prepend || props.prependIcon)\n const hasAppend = !!(slots.append || props.appendIcon)\n const hasMessages = messages.value.length > 0\n const hasDetails = !props.hideDetails || (\n props.hideDetails === 'auto' &&\n (hasMessages || !!slots.details)\n )\n\n return (\n \n { hasPrepend && (\n \n { slots.prepend?.(slotProps.value) }\n\n { props.prependIcon && (\n \n )}\n
\n )}\n\n { slots.default && (\n \n { slots.default?.(slotProps.value) }\n
\n )}\n\n { hasAppend && (\n \n { props.appendIcon && (\n \n )}\n\n { slots.append?.(slotProps.value) }\n
\n )}\n\n { hasDetails && (\n \n \n\n { slots.details?.(slotProps.value) }\n
\n )}\n \n )\n })\n\n return {\n reset,\n resetValidation,\n validate,\n }\n },\n})\n\nexport type VInput = InstanceType\n","// Styles\nimport './VTextField.sass'\n\n// Components\nimport { VCounter } from '@/components/VCounter/VCounter'\nimport { filterFieldProps, makeVFieldProps, VField } from '@/components/VField/VField'\nimport { makeVInputProps, VInput } from '@/components/VInput/VInput'\n\n// Composables\nimport { useFocus } from '@/composables/focus'\nimport { forwardRefs } from '@/composables/forwardRefs'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Directives\nimport Intersect from '@/directives/intersect'\n\n// Utilities\nimport { cloneVNode, computed, nextTick, ref } from 'vue'\nimport { callEvent, filterInputAttrs, genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { VCounterSlot } from '@/components/VCounter/VCounter'\nimport type { VFieldSlots } from '@/components/VField/VField'\nimport type { VInputSlots } from '@/components/VInput/VInput'\n\nconst activeTypes = ['color', 'file', 'time', 'date', 'datetime-local', 'week', 'month']\n\nexport const makeVTextFieldProps = propsFactory({\n autofocus: Boolean,\n counter: [Boolean, Number, String] as PropType,\n counterValue: Function as PropType<(value: any) => number>,\n prefix: String,\n placeholder: String,\n persistentPlaceholder: Boolean,\n persistentCounter: Boolean,\n suffix: String,\n role: String,\n type: {\n type: String,\n default: 'text',\n },\n modelModifiers: Object as PropType>,\n\n ...makeVInputProps(),\n ...makeVFieldProps(),\n}, 'VTextField')\n\nexport type VTextFieldSlots = Omit & {\n default: never\n counter: VCounterSlot\n}\n\nexport const VTextField = genericComponent()({\n name: 'VTextField',\n\n directives: { Intersect },\n\n inheritAttrs: false,\n\n props: makeVTextFieldProps(),\n\n emits: {\n 'click:control': (e: MouseEvent) => true,\n 'mousedown:control': (e: MouseEvent) => true,\n 'update:focused': (focused: boolean) => true,\n 'update:modelValue': (val: string) => true,\n },\n\n setup (props, { attrs, emit, slots }) {\n const model = useProxiedModel(props, 'modelValue')\n const { isFocused, focus, blur } = useFocus(props)\n const counterValue = computed(() => {\n return typeof props.counterValue === 'function'\n ? props.counterValue(model.value)\n : (model.value ?? '').toString().length\n })\n const max = computed(() => {\n if (attrs.maxlength) return attrs.maxlength as unknown as undefined\n\n if (\n !props.counter ||\n (typeof props.counter !== 'number' &&\n typeof props.counter !== 'string')\n ) return undefined\n\n return props.counter\n })\n\n const isPlainOrUnderlined = computed(() => ['plain', 'underlined'].includes(props.variant))\n\n function onIntersect (\n isIntersecting: boolean,\n entries: IntersectionObserverEntry[]\n ) {\n if (!props.autofocus || !isIntersecting) return\n\n (entries[0].target as HTMLInputElement)?.focus?.()\n }\n\n const vInputRef = ref()\n const vFieldRef = ref()\n const inputRef = ref()\n const isActive = computed(() => (\n activeTypes.includes(props.type) ||\n props.persistentPlaceholder ||\n isFocused.value ||\n props.active\n ))\n function onFocus () {\n if (inputRef.value !== document.activeElement) {\n inputRef.value?.focus()\n }\n\n if (!isFocused.value) focus()\n }\n function onControlMousedown (e: MouseEvent) {\n emit('mousedown:control', e)\n\n if (e.target === inputRef.value) return\n\n onFocus()\n e.preventDefault()\n }\n function onControlClick (e: MouseEvent) {\n onFocus()\n\n emit('click:control', e)\n }\n function onClear (e: MouseEvent) {\n e.stopPropagation()\n\n onFocus()\n\n nextTick(() => {\n model.value = null\n\n callEvent(props['onClick:clear'], e)\n })\n }\n function onInput (e: Event) {\n const el = e.target as HTMLInputElement\n model.value = el.value\n if (\n props.modelModifiers?.trim &&\n ['text', 'search', 'password', 'tel', 'url'].includes(props.type)\n ) {\n const caretPosition = [el.selectionStart, el.selectionEnd]\n nextTick(() => {\n el.selectionStart = caretPosition[0]\n el.selectionEnd = caretPosition[1]\n })\n }\n }\n\n useRender(() => {\n const hasCounter = !!(slots.counter || props.counter || props.counterValue)\n const hasDetails = !!(hasCounter || slots.details)\n const [rootAttrs, inputAttrs] = filterInputAttrs(attrs)\n const [{ modelValue: _, ...inputProps }] = VInput.filterProps(props)\n const [fieldProps] = filterFieldProps(props)\n\n return (\n \n {{\n ...slots,\n default: ({\n id,\n isDisabled,\n isDirty,\n isReadonly,\n isValid,\n }) => (\n \n {{\n ...slots,\n default: ({\n props: { class: fieldClass, ...slotProps },\n }) => {\n const inputNode = (\n \n )\n\n return (\n <>\n { props.prefix && (\n \n \n { props.prefix }\n \n \n )}\n\n { slots.default ? (\n \n { slots.default() }\n { inputNode }\n \n ) : cloneVNode(inputNode, { class: fieldClass })}\n\n { props.suffix && (\n \n \n { props.suffix }\n \n \n )}\n \n )\n },\n }}\n \n ),\n details: hasDetails ? slotProps => (\n <>\n { slots.details?.(slotProps) }\n\n { hasCounter && (\n <>\n \n\n \n \n )}\n \n ) : undefined,\n }}\n \n )\n })\n\n return forwardRefs({}, vInputRef, vFieldRef, inputRef)\n },\n})\n\nexport type VTextField = InstanceType\n","// Utilities\nimport { h, Transition, TransitionGroup } from 'vue'\nimport { genericComponent, propsFactory } from '@/util'\n\n// Types\nimport type { FunctionalComponent, PropType } from 'vue'\n\nexport const makeTransitionProps = propsFactory({\n disabled: Boolean,\n group: Boolean,\n hideOnLeave: Boolean,\n leaveAbsolute: Boolean,\n mode: String,\n origin: String,\n}, 'transition')\n\nexport function createCssTransition (\n name: string,\n origin?: string,\n mode?: string\n) {\n return genericComponent()({\n name,\n\n props: makeTransitionProps({\n mode,\n origin,\n }),\n\n setup (props, { slots }) {\n const functions = {\n onBeforeEnter (el: HTMLElement) {\n if (props.origin) {\n el.style.transformOrigin = props.origin\n }\n },\n onLeave (el: HTMLElement) {\n if (props.leaveAbsolute) {\n const { offsetTop, offsetLeft, offsetWidth, offsetHeight } = el\n el._transitionInitialStyles = {\n position: el.style.position,\n top: el.style.top,\n left: el.style.left,\n width: el.style.width,\n height: el.style.height,\n }\n el.style.position = 'absolute'\n el.style.top = `${offsetTop}px`\n el.style.left = `${offsetLeft}px`\n el.style.width = `${offsetWidth}px`\n el.style.height = `${offsetHeight}px`\n }\n\n if (props.hideOnLeave) {\n el.style.setProperty('display', 'none', 'important')\n }\n },\n onAfterLeave (el: HTMLElement) {\n if (props.leaveAbsolute && el?._transitionInitialStyles) {\n const { position, top, left, width, height } = el._transitionInitialStyles\n delete el._transitionInitialStyles\n el.style.position = position || ''\n el.style.top = top || ''\n el.style.left = left || ''\n el.style.width = width || ''\n el.style.height = height || ''\n }\n },\n }\n\n return () => {\n const tag = props.group ? TransitionGroup : Transition\n\n return h(tag as FunctionalComponent, {\n name: props.disabled ? '' : name,\n css: !props.disabled,\n ...(props.group ? undefined : { mode: props.mode }),\n ...(props.disabled ? {} : functions),\n }, slots.default)\n }\n },\n })\n}\n\nexport function createJavascriptTransition (\n name: string,\n functions: Record,\n mode = 'in-out'\n) {\n return genericComponent()({\n name,\n\n props: {\n mode: {\n type: String as PropType<'in-out' | 'out-in' | 'default'>,\n default: mode,\n },\n disabled: Boolean,\n },\n\n setup (props, { slots }) {\n return () => {\n return h(Transition, {\n name: props.disabled ? '' : name,\n css: !props.disabled,\n // mode: props.mode, // TODO: vuejs/vue-next#3104\n ...(props.disabled ? {} : functions),\n }, slots.default)\n }\n },\n })\n}\n","// Utilities\nimport { camelize } from 'vue'\n\ninterface HTMLExpandElement extends HTMLElement {\n _parent?: (Node & ParentNode & HTMLElement) | null\n _initialStyle?: {\n transition: string\n overflow: string\n height?: string | null\n width?: string | null\n }\n}\n\nexport default function (expandedParentClass = '', x = false) {\n const sizeProperty = x ? 'width' : 'height' as 'width' | 'height'\n const offsetProperty = camelize(`offset-${sizeProperty}`) as 'offsetHeight' | 'offsetWidth'\n\n return {\n onBeforeEnter (el: HTMLExpandElement) {\n el._parent = el.parentNode as (Node & ParentNode & HTMLElement) | null\n el._initialStyle = {\n transition: el.style.transition,\n overflow: el.style.overflow,\n [sizeProperty]: el.style[sizeProperty],\n }\n },\n\n onEnter (el: HTMLExpandElement) {\n const initialStyle = el._initialStyle!\n\n el.style.setProperty('transition', 'none', 'important')\n // Hide overflow to account for collapsed margins in the calculated height\n el.style.overflow = 'hidden'\n const offset = `${el[offsetProperty]}px`\n\n el.style[sizeProperty] = '0'\n\n void el.offsetHeight // force reflow\n\n el.style.transition = initialStyle.transition\n\n if (expandedParentClass && el._parent) {\n el._parent.classList.add(expandedParentClass)\n }\n\n requestAnimationFrame(() => {\n el.style[sizeProperty] = offset\n })\n },\n\n onAfterEnter: resetStyles,\n onEnterCancelled: resetStyles,\n\n onLeave (el: HTMLExpandElement) {\n el._initialStyle = {\n transition: '',\n overflow: el.style.overflow,\n [sizeProperty]: el.style[sizeProperty],\n }\n\n el.style.overflow = 'hidden'\n el.style[sizeProperty] = `${el[offsetProperty]}px`\n void el.offsetHeight // force reflow\n\n requestAnimationFrame(() => (el.style[sizeProperty] = '0'))\n },\n\n onAfterLeave,\n onLeaveCancelled: onAfterLeave,\n }\n\n function onAfterLeave (el: HTMLExpandElement) {\n if (expandedParentClass && el._parent) {\n el._parent.classList.remove(expandedParentClass)\n }\n resetStyles(el)\n }\n\n function resetStyles (el: HTMLExpandElement) {\n const size = el._initialStyle![sizeProperty]\n el.style.overflow = el._initialStyle!.overflow\n if (size != null) el.style[sizeProperty] = size\n delete el._initialStyle\n }\n}\n","import {\n createCssTransition,\n createJavascriptTransition,\n} from './createTransition'\n\nimport ExpandTransitionGenerator from './expand-transition'\n\n// Component specific transitions\nexport const VFabTransition = createCssTransition('fab-transition', 'center center', 'out-in')\n\n// Generic transitions\nexport const VDialogBottomTransition = createCssTransition('dialog-bottom-transition')\nexport const VDialogTopTransition = createCssTransition('dialog-top-transition')\nexport const VFadeTransition = createCssTransition('fade-transition')\nexport const VScaleTransition = createCssTransition('scale-transition')\nexport const VScrollXTransition = createCssTransition('scroll-x-transition')\nexport const VScrollXReverseTransition = createCssTransition('scroll-x-reverse-transition')\nexport const VScrollYTransition = createCssTransition('scroll-y-transition')\nexport const VScrollYReverseTransition = createCssTransition('scroll-y-reverse-transition')\nexport const VSlideXTransition = createCssTransition('slide-x-transition')\nexport const VSlideXReverseTransition = createCssTransition('slide-x-reverse-transition')\nexport const VSlideYTransition = createCssTransition('slide-y-transition')\nexport const VSlideYReverseTransition = createCssTransition('slide-y-reverse-transition')\n\n// Javascript transitions\nexport const VExpandTransition = createJavascriptTransition('expand-transition', ExpandTransitionGenerator())\nexport const VExpandXTransition = createJavascriptTransition('expand-x-transition', ExpandTransitionGenerator('', true))\n\nexport { VDialogTransition } from './dialog-transition'\n\nexport type VFabTransition = InstanceType\nexport type VDialogBottomTransition = InstanceType\nexport type VDialogTopTransition = InstanceType\nexport type VFadeTransition = InstanceType\nexport type VScaleTransition = InstanceType\nexport type VScrollXTransition = InstanceType\nexport type VScrollXReverseTransition = InstanceType\nexport type VScrollYTransition = InstanceType\nexport type VScrollYReverseTransition = InstanceType\nexport type VSlideXTransition = InstanceType\nexport type VSlideXReverseTransition = InstanceType\nexport type VSlideYTransition = InstanceType\nexport type VSlideYReverseTransition = InstanceType\nexport type VExpandTransition = InstanceType\nexport type VExpandXTransition = InstanceType\n","// Utilities\nimport { computed, isRef } from 'vue'\nimport { getCurrentInstanceName, propsFactory } from '@/util'\n\n// Types\nexport interface BorderProps {\n border?: boolean | number | string\n}\n\n// Composables\nexport const makeBorderProps = propsFactory({\n border: [Boolean, Number, String],\n}, 'border')\n\nexport function useBorder (\n props: BorderProps,\n name = getCurrentInstanceName(),\n) {\n const borderClasses = computed(() => {\n const border = isRef(props) ? props.value : props.border\n const classes: string[] = []\n\n if (border === true || border === '') {\n classes.push(`${name}--border`)\n } else if (\n typeof border === 'string' ||\n border === 0\n ) {\n for (const value of String(border).split(' ')) {\n classes.push(`border-${value}`)\n }\n }\n\n return classes\n })\n\n return { borderClasses }\n}\n","// Utilities\nimport { computed, isRef } from 'vue'\nimport { destructComputed, getForeground, isCssColor, parseColor } from '@/util'\n\n// Types\nimport type { CSSProperties, Ref } from 'vue'\n\ntype ColorValue = string | false | null | undefined\n\nexport interface TextColorData {\n textColorClasses: Ref\n textColorStyles: Ref\n}\n\nexport interface BackgroundColorData {\n backgroundColorClasses: Ref\n backgroundColorStyles: Ref\n}\n\n// Composables\nexport function useColor (colors: Ref<{ background?: ColorValue, text?: ColorValue }>) {\n return destructComputed(() => {\n const classes: string[] = []\n const styles: CSSProperties = {}\n\n if (colors.value.background) {\n if (isCssColor(colors.value.background)) {\n styles.backgroundColor = colors.value.background\n\n if (!colors.value.text) {\n const backgroundColor = parseColor(colors.value.background)\n if (backgroundColor.a == null || backgroundColor.a === 1) {\n const textColor = getForeground(backgroundColor)\n\n styles.color = textColor\n styles.caretColor = textColor\n }\n }\n } else {\n classes.push(`bg-${colors.value.background}`)\n }\n }\n\n if (colors.value.text) {\n if (isCssColor(colors.value.text)) {\n styles.color = colors.value.text\n styles.caretColor = colors.value.text\n } else {\n classes.push(`text-${colors.value.text}`)\n }\n }\n\n return { colorClasses: classes, colorStyles: styles }\n })\n}\n\nexport function useTextColor (color: Ref): TextColorData\nexport function useTextColor , K extends string> (props: T, name: K): TextColorData\nexport function useTextColor , K extends string> (\n props: T | Ref,\n name?: K\n): TextColorData {\n const colors = computed(() => ({\n text: isRef(props) ? props.value : (name ? props[name] : null),\n }))\n\n const {\n colorClasses: textColorClasses,\n colorStyles: textColorStyles,\n } = useColor(colors)\n\n return { textColorClasses, textColorStyles }\n}\n\nexport function useBackgroundColor (color: Ref): BackgroundColorData\nexport function useBackgroundColor , K extends string> (props: T, name: K): BackgroundColorData\nexport function useBackgroundColor , K extends string> (\n props: T | Ref,\n name?: K\n): BackgroundColorData {\n const colors = computed(() => ({\n background: isRef(props) ? props.value : (name ? props[name] : null),\n }))\n\n const {\n colorClasses: backgroundColorClasses,\n colorStyles: backgroundColorStyles,\n } = useColor(colors)\n\n return { backgroundColorClasses, backgroundColorStyles }\n}\n","// Utilities\nimport { propsFactory } from '@/util/propsFactory'\n\n// Types\nimport type { PropType, StyleValue } from 'vue'\n\nexport type ClassValue = any\n\nexport interface ComponentProps {\n class?: ClassValue\n style: StyleValue | undefined\n}\n\n// Composables\nexport const makeComponentProps = propsFactory({\n class: [String, Array] as PropType,\n style: {\n type: [String, Array, Object] as PropType,\n default: null,\n },\n}, 'component')\n","// Utilities\nimport { getCurrentInstance } from '@/util/getCurrentInstance'\n\n// Types\nimport type { ComponentInternalInstance, InjectionKey } from 'vue'\n\nexport function injectSelf(key: InjectionKey | string, vm?: ComponentInternalInstance): T | undefined\nexport function injectSelf (key: InjectionKey | string, vm = getCurrentInstance('injectSelf')) {\n const { provides } = vm\n\n if (provides && (key as string | symbol) in provides) {\n // TS doesn't allow symbol as index type\n return provides[key as string]\n }\n return undefined\n}\n","// Utilities\nimport { computed, inject, provide, ref, shallowRef, unref, watchEffect } from 'vue'\nimport { getCurrentInstance, injectSelf, mergeDeep, toKebabCase } from '@/util'\n\n// Types\nimport type { ComputedRef, InjectionKey, Ref, VNode } from 'vue'\nimport type { MaybeRef } from '@/util'\n\nexport type DefaultsInstance = undefined | {\n [key: string]: undefined | Record\n global?: Record\n}\n\nexport type DefaultsOptions = Partial\n\nexport const DefaultsSymbol: InjectionKey> = Symbol.for('vuetify:defaults')\n\nexport function createDefaults (options?: DefaultsInstance): Ref {\n return ref(options)\n}\n\nexport function injectDefaults () {\n const defaults = inject(DefaultsSymbol)\n\n if (!defaults) throw new Error('[Vuetify] Could not find defaults instance')\n\n return defaults\n}\n\nexport function provideDefaults (\n defaults?: MaybeRef,\n options?: {\n disabled?: MaybeRef\n reset?: MaybeRef\n root?: MaybeRef\n scoped?: MaybeRef\n }\n) {\n const injectedDefaults = injectDefaults()\n const providedDefaults = ref(defaults)\n\n const newDefaults = computed(() => {\n const disabled = unref(options?.disabled)\n\n if (disabled) return injectedDefaults.value\n\n const scoped = unref(options?.scoped)\n const reset = unref(options?.reset)\n const root = unref(options?.root)\n\n if (providedDefaults.value == null && !(scoped || reset || root)) return injectedDefaults.value\n\n let properties = mergeDeep(providedDefaults.value, { prev: injectedDefaults.value })\n\n if (scoped) return properties\n\n if (reset || root) {\n const len = Number(reset || Infinity)\n\n for (let i = 0; i <= len; i++) {\n if (!properties || !('prev' in properties)) {\n break\n }\n\n properties = properties.prev\n }\n\n if (properties && typeof root === 'string' && root in properties) {\n properties = mergeDeep(mergeDeep(properties, { prev: properties }), properties[root])\n }\n\n return properties\n }\n\n return properties.prev\n ? mergeDeep(properties.prev, properties)\n : properties\n }) as ComputedRef\n\n provide(DefaultsSymbol, newDefaults)\n\n return newDefaults\n}\n\nfunction propIsDefined (vnode: VNode, prop: string) {\n return typeof vnode.props?.[prop] !== 'undefined' ||\n typeof vnode.props?.[toKebabCase(prop)] !== 'undefined'\n}\n\nexport function internalUseDefaults (\n props: Record = {},\n name?: string,\n defaults = injectDefaults()\n) {\n const vm = getCurrentInstance('useDefaults')\n\n name = name ?? vm.type.name ?? vm.type.__name\n if (!name) {\n throw new Error('[Vuetify] Could not determine component name')\n }\n\n const componentDefaults = computed(() => defaults.value?.[props._as ?? name])\n const _props = new Proxy(props, {\n get (target, prop) {\n const propValue = Reflect.get(target, prop)\n if (prop === 'class' || prop === 'style') {\n return [componentDefaults.value?.[prop], propValue].filter(v => v != null)\n } else if (typeof prop === 'string' && !propIsDefined(vm.vnode, prop)) {\n return componentDefaults.value?.[prop] ?? defaults.value?.global?.[prop] ?? propValue\n }\n return propValue\n },\n })\n\n const _subcomponentDefaults = shallowRef()\n watchEffect(() => {\n if (componentDefaults.value) {\n const subComponents = Object.entries(componentDefaults.value).filter(([key]) => key.startsWith(key[0].toUpperCase()))\n _subcomponentDefaults.value = subComponents.length ? Object.fromEntries(subComponents) : undefined\n } else {\n _subcomponentDefaults.value = undefined\n }\n })\n\n function provideSubDefaults () {\n const injected = injectSelf(DefaultsSymbol, vm)\n provide(DefaultsSymbol, computed(() => {\n return _subcomponentDefaults.value ? mergeDeep(\n injected?.value ?? {},\n _subcomponentDefaults.value\n ) : injected?.value\n }))\n }\n\n return { props: _props, provideSubDefaults }\n}\n\nexport function useDefaults> (props: T, name?: string): T\nexport function useDefaults (props?: undefined, name?: string): Record\nexport function useDefaults (\n props: Record = {},\n name?: string,\n) {\n const { props: _props, provideSubDefaults } = internalUseDefaults(props, name)\n provideSubDefaults()\n return _props\n}\n","// Utilities\nimport { computed } from 'vue'\nimport { getCurrentInstanceName, propsFactory } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\n\nconst allowedDensities = [null, 'default', 'comfortable', 'compact'] as const\n\n// typeof allowedDensities[number] evalutes to any\n// when generating api types for whatever reason.\nexport type Density = null | 'default' | 'comfortable' | 'compact'\n\nexport interface DensityProps {\n density?: Density\n}\n\n// Composables\nexport const makeDensityProps = propsFactory({\n density: {\n type: String as PropType,\n default: 'default',\n validator: (v: any) => allowedDensities.includes(v),\n },\n}, 'density')\n\nexport function useDensity (\n props: DensityProps,\n name = getCurrentInstanceName(),\n) {\n const densityClasses = computed(() => {\n return `${name}--density-${props.density}`\n })\n\n return { densityClasses }\n}\n","// Utilities\nimport { computed } from 'vue'\nimport { convertToUnit, propsFactory } from '@/util'\n\n// Types\nexport interface DimensionProps {\n height?: number | string\n maxHeight?: number | string\n maxWidth?: number | string\n minHeight?: number | string\n minWidth?: number | string\n width?: number | string\n}\n\n// Composables\nexport const makeDimensionProps = propsFactory({\n height: [Number, String],\n maxHeight: [Number, String],\n maxWidth: [Number, String],\n minHeight: [Number, String],\n minWidth: [Number, String],\n width: [Number, String],\n}, 'dimension')\n\nexport function useDimension (props: DimensionProps) {\n const dimensionStyles = computed(() => ({\n height: convertToUnit(props.height),\n maxHeight: convertToUnit(props.maxHeight),\n maxWidth: convertToUnit(props.maxWidth),\n minHeight: convertToUnit(props.minHeight),\n minWidth: convertToUnit(props.minWidth),\n width: convertToUnit(props.width),\n }))\n\n return { dimensionStyles }\n}\n","// Utilities\nimport { inject, reactive, shallowRef, toRefs, watchEffect } from 'vue'\nimport { mergeDeep } from '@/util'\nimport { IN_BROWSER, SUPPORTS_TOUCH } from '@/util/globals'\n\n// Types\nimport type { InjectionKey, Ref } from 'vue'\n\nexport const breakpoints = ['sm', 'md', 'lg', 'xl', 'xxl'] as const // no xs\n\nexport type Breakpoint = typeof breakpoints[number]\n\nexport type DisplayBreakpoint = 'xs' | Breakpoint\n\nexport type DisplayThresholds = {\n [key in DisplayBreakpoint]: number\n}\n\nexport interface DisplayOptions {\n mobileBreakpoint?: number | DisplayBreakpoint\n thresholds?: Partial\n}\n\nexport interface InternalDisplayOptions {\n mobileBreakpoint: number | DisplayBreakpoint\n thresholds: DisplayThresholds\n}\n\nexport type SSROptions = boolean | {\n clientWidth: number\n clientHeight?: number\n}\n\nexport interface DisplayPlatform {\n android: boolean\n ios: boolean\n cordova: boolean\n electron: boolean\n chrome: boolean\n edge: boolean\n firefox: boolean\n opera: boolean\n win: boolean\n mac: boolean\n linux: boolean\n touch: boolean\n ssr: boolean\n}\n\nexport interface DisplayInstance {\n xs: Ref\n sm: Ref\n md: Ref\n lg: Ref\n xl: Ref\n xxl: Ref\n smAndUp: Ref\n mdAndUp: Ref\n lgAndUp: Ref\n xlAndUp: Ref\n smAndDown: Ref\n mdAndDown: Ref\n lgAndDown: Ref\n xlAndDown: Ref\n name: Ref\n height: Ref\n width: Ref