Many resources are needed to download a project. Please understand that we have to compensate our server costs. Thank you in advance.
Project price only 1 $
You can buy this project and download/modify it how often you want.
package.lib.components.VField.VField.mjs.map Maven / Gradle / Ivy
{"version":3,"file":"VField.mjs","names":["VFieldLabel","VExpandXTransition","VDefaultsProvider","useInputIcon","useBackgroundColor","useTextColor","makeComponentProps","makeFocusProps","useFocus","IconValue","LoaderSlot","makeLoaderProps","useLoader","useRtl","makeRoundedProps","useRounded","makeThemeProps","provideTheme","computed","ref","toRef","watch","animate","convertToUnit","EventProp","genericComponent","getUid","isOn","nullifyTransforms","pick","propsFactory","standardEasing","useRender","allowedVariants","makeVFieldProps","appendInnerIcon","bgColor","String","clearable","Boolean","clearIcon","type","default","active","centerAffix","undefined","color","baseColor","dirty","disabled","error","flat","label","persistentClear","prependInnerIcon","reverse","singleLine","variant","validator","v","includes","VField","name","inheritAttrs","props","id","emits","focused","value","setup","_ref","attrs","emit","slots","themeClasses","loaderClasses","focusClasses","isFocused","focus","blur","InputIcon","roundedClasses","rtlClasses","isActive","hasLabel","uid","messagesId","labelRef","floatingLabelRef","controlRef","isPlainOrUnderlined","backgroundColorClasses","backgroundColorStyles","textColorClasses","textColorStyles","val","el","$el","targetEl","requestAnimationFrame","rect","targetRect","getBoundingClientRect","x","y","height","targetWidth","width","Math","abs","maxWidth","style","getComputedStyle","targetStyle","duration","parseFloat","transitionDuration","scale","getPropertyValue","visibility","transform","easing","direction","finished","then","removeProperty","flush","slotProps","onClick","e","target","document","activeElement","preventDefault","onKeydownClear","key","stopPropagation","MouseEvent","isOutlined","hasPrepend","hasClear","clear","hasAppend","for","_createVNode","_mergeProps","class","loading","loader","_withDirectives","VIcon","icon","onKeydown","onFocus","onBlur","_vShow","_Fragment","filterFieldProps","keys","Object","filter","k"],"sources":["../../../src/components/VField/VField.tsx"],"sourcesContent":["// Styles\nimport './VField.sass'\n\n// Components\nimport { VFieldLabel } from './VFieldLabel'\nimport { VExpandXTransition } from '@/components/transitions'\nimport { VDefaultsProvider } from '@/components/VDefaultsProvider'\nimport { useInputIcon } from '@/components/VInput/InputIcon'\n\n// Composables\nimport { useBackgroundColor, useTextColor } from '@/composables/color'\nimport { makeComponentProps } from '@/composables/component'\nimport { makeFocusProps, useFocus } from '@/composables/focus'\nimport { IconValue } from '@/composables/icons'\nimport { LoaderSlot, makeLoaderProps, useLoader } from '@/composables/loader'\nimport { useRtl } from '@/composables/locale'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\n\n// Utilities\nimport { computed, ref, toRef, watch } from 'vue'\nimport {\n animate,\n convertToUnit,\n EventProp,\n genericComponent,\n getUid,\n isOn,\n nullifyTransforms,\n pick,\n propsFactory,\n standardEasing,\n useRender,\n} from '@/util'\n\n// Types\nimport type { PropType, Ref } from 'vue'\nimport type { LoaderSlotProps } from '@/composables/loader'\nimport type { GenericProps } from '@/util'\n\nconst allowedVariants = ['underlined', 'outlined', 'filled', 'solo', 'solo-inverted', 'solo-filled', 'plain'] as const\ntype Variant = typeof allowedVariants[number]\n\nexport interface DefaultInputSlot {\n isActive: Ref\n isFocused: Ref\n controlRef: Ref\n focus: () => void\n blur: () => void\n}\n\nexport interface VFieldSlot extends DefaultInputSlot {\n props: Record\n}\n\nexport const makeVFieldProps = propsFactory({\n appendInnerIcon: IconValue,\n bgColor: String,\n clearable: Boolean,\n clearIcon: {\n type: IconValue,\n default: '$clear',\n },\n active: Boolean,\n centerAffix: {\n type: Boolean,\n default: undefined,\n },\n color: String,\n baseColor: String,\n dirty: Boolean,\n disabled: {\n type: Boolean,\n default: null,\n },\n error: Boolean,\n flat: Boolean,\n label: String,\n persistentClear: Boolean,\n prependInnerIcon: IconValue,\n reverse: Boolean,\n singleLine: Boolean,\n variant: {\n type: String as PropType,\n default: 'filled',\n validator: (v: any) => allowedVariants.includes(v),\n },\n\n 'onClick:clear': EventProp<[MouseEvent]>(),\n 'onClick:appendInner': EventProp<[MouseEvent]>(),\n 'onClick:prependInner': EventProp<[MouseEvent]>(),\n\n ...makeComponentProps(),\n ...makeLoaderProps(),\n ...makeRoundedProps(),\n ...makeThemeProps(),\n}, 'VField')\n\nexport type VFieldSlots = {\n clear: DefaultInputSlot & { props: Record }\n 'prepend-inner': DefaultInputSlot\n 'append-inner': DefaultInputSlot\n label: DefaultInputSlot & { label: string | undefined, props: Record }\n loader: LoaderSlotProps\n default: VFieldSlot\n}\n\nexport const VField = genericComponent(\n props: {\n modelValue?: T\n 'onUpdate:modelValue'?: (value: T) => void\n },\n slots: VFieldSlots\n) => GenericProps>()({\n name: 'VField',\n\n inheritAttrs: false,\n\n props: {\n id: String,\n\n ...makeFocusProps(),\n ...makeVFieldProps(),\n },\n\n emits: {\n 'update:focused': (focused: boolean) => true,\n 'update:modelValue': (value: any) => true,\n },\n\n setup (props, { attrs, emit, slots }) {\n const { themeClasses } = provideTheme(props)\n const { loaderClasses } = useLoader(props)\n const { focusClasses, isFocused, focus, blur } = useFocus(props)\n const { InputIcon } = useInputIcon(props)\n const { roundedClasses } = useRounded(props)\n const { rtlClasses } = useRtl()\n\n const isActive = computed(() => props.dirty || props.active)\n const hasLabel = computed(() => !props.singleLine && !!(props.label || slots.label))\n\n const uid = getUid()\n const id = computed(() => props.id || `input-${uid}`)\n const messagesId = computed(() => `${id.value}-messages`)\n\n const labelRef = ref()\n const floatingLabelRef = ref()\n const controlRef = ref()\n const isPlainOrUnderlined = computed(() => ['plain', 'underlined'].includes(props.variant))\n\n const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'bgColor'))\n const { textColorClasses, textColorStyles } = useTextColor(computed(() => {\n return props.error || props.disabled ? undefined\n : isActive.value && isFocused.value ? props.color\n : props.baseColor\n }))\n\n watch(isActive, val => {\n if (hasLabel.value) {\n const el: HTMLElement = labelRef.value!.$el\n const targetEl: HTMLElement = floatingLabelRef.value!.$el\n\n requestAnimationFrame(() => {\n const rect = nullifyTransforms(el)\n const targetRect = targetEl.getBoundingClientRect()\n\n const x = targetRect.x - rect.x\n const y = targetRect.y - rect.y - (rect.height / 2 - targetRect.height / 2)\n\n const targetWidth = targetRect.width / 0.75\n const width = Math.abs(targetWidth - rect.width) > 1\n ? { maxWidth: convertToUnit(targetWidth) }\n : undefined\n\n const style = getComputedStyle(el)\n const targetStyle = getComputedStyle(targetEl)\n const duration = parseFloat(style.transitionDuration) * 1000 || 150\n const scale = parseFloat(targetStyle.getPropertyValue('--v-field-label-scale'))\n const color = targetStyle.getPropertyValue('color')\n\n el.style.visibility = 'visible'\n targetEl.style.visibility = 'hidden'\n\n animate(el, {\n transform: `translate(${x}px, ${y}px) scale(${scale})`,\n color,\n ...width,\n }, {\n duration,\n easing: standardEasing,\n direction: val ? 'normal' : 'reverse',\n }).finished.then(() => {\n el.style.removeProperty('visibility')\n targetEl.style.removeProperty('visibility')\n })\n })\n }\n }, { flush: 'post' })\n\n const slotProps = computed(() => ({\n isActive,\n isFocused,\n controlRef,\n blur,\n focus,\n }))\n\n function onClick (e: MouseEvent) {\n if (e.target !== document.activeElement) {\n e.preventDefault()\n }\n }\n\n function onKeydownClear (e: KeyboardEvent) {\n if (e.key !== 'Enter' && e.key !== ' ') return\n\n e.preventDefault()\n e.stopPropagation()\n\n props['onClick:clear']?.(new MouseEvent('click'))\n }\n\n useRender(() => {\n const isOutlined = props.variant === 'outlined'\n const hasPrepend = !!(slots['prepend-inner'] || props.prependInnerIcon)\n const hasClear = !!(props.clearable || slots.clear)\n const hasAppend = !!(slots['append-inner'] || props.appendInnerIcon || hasClear)\n const label = () => (\n slots.label\n ? slots.label({\n ...slotProps.value,\n label: props.label,\n props: { for: id.value },\n })\n : props.label\n )\n\n return (\n \n
\n\n \n { props.prependInnerIcon && (\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 \n { slots.clear\n ? slots.clear({\n ...slotProps.value,\n props: {\n onKeydown: onKeydownClear,\n onFocus: focus,\n onBlur: blur,\n onClick: props['onClick:clear'],\n },\n })\n : (\n 