routie dev init since i didn't adhere to any proper guidance up until now
This commit is contained in:
+576
@@ -0,0 +1,576 @@
|
||||
@layer vuetify-components {
|
||||
/* region INPUT */
|
||||
.v-field {
|
||||
display: grid;
|
||||
grid-template-areas: "prepend-inner field clear append-inner";
|
||||
grid-template-columns: min-content minmax(0, 1fr) min-content min-content;
|
||||
font-size: 16px;
|
||||
letter-spacing: 0.009375em;
|
||||
max-width: 100%;
|
||||
border-radius: 4px;
|
||||
contain: layout;
|
||||
flex: 1 0;
|
||||
grid-area: control;
|
||||
position: relative;
|
||||
--v-theme-overlay-multiplier: 1;
|
||||
--v-field-padding-start: 16px;
|
||||
--v-field-padding-end: 16px;
|
||||
--v-field-padding-top: 8px;
|
||||
--v-field-padding-bottom: 4px;
|
||||
--v-field-input-padding-top: calc(var(--v-field-padding-top, 8px) + var(--v-input-padding-top, 0px));
|
||||
--v-field-input-padding-bottom: var(--v-field-padding-bottom, 4px);
|
||||
}
|
||||
.v-field--disabled {
|
||||
opacity: var(--v-disabled-opacity);
|
||||
pointer-events: none;
|
||||
}
|
||||
.v-field .v-chip {
|
||||
--v-chip-height: 24px;
|
||||
}
|
||||
/* endregion */
|
||||
/* region MODIFIERS */
|
||||
.v-field--prepended {
|
||||
padding-inline-start: 12px;
|
||||
}
|
||||
.v-field--appended {
|
||||
padding-inline-end: 12px;
|
||||
}
|
||||
.v-field--variant-solo, .v-field--variant-solo-filled {
|
||||
background: rgb(var(--v-theme-surface));
|
||||
border-color: transparent;
|
||||
color: color-mix(in srgb, rgb(var(--v-theme-on-surface)) calc(var(--v-high-emphasis-opacity) * 100%), transparent);
|
||||
}
|
||||
.v-field--variant-solo, .v-field--variant-solo-filled {
|
||||
box-shadow: 0px 1px 2px 0px rgba(var(--v-shadow-color), var(--v-shadow-key-opacity, 0.3)), 0px 1px 3px 1px rgba(var(--v-shadow-color), var(--v-shadow-ambient-opacity, 0.15));
|
||||
--v-elevation-overlay: color-mix(in srgb, var(--v-elevation-overlay-color) 2%, transparent);
|
||||
}
|
||||
.v-field--variant-solo-inverted {
|
||||
background: rgb(var(--v-theme-surface));
|
||||
border-color: transparent;
|
||||
color: color-mix(in srgb, rgb(var(--v-theme-on-surface)) calc(var(--v-high-emphasis-opacity) * 100%), transparent);
|
||||
}
|
||||
.v-field--variant-solo-inverted {
|
||||
box-shadow: 0px 1px 2px 0px rgba(var(--v-shadow-color), var(--v-shadow-key-opacity, 0.3)), 0px 1px 3px 1px rgba(var(--v-shadow-color), var(--v-shadow-ambient-opacity, 0.15));
|
||||
--v-elevation-overlay: color-mix(in srgb, var(--v-elevation-overlay-color) 2%, transparent);
|
||||
}
|
||||
.v-field--variant-solo-inverted.v-field--focused {
|
||||
color: rgb(var(--v-theme-on-surface-variant));
|
||||
}
|
||||
.v-field--variant-filled {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
.v-input--density-default .v-field--variant-solo, .v-input--density-default .v-field--variant-solo-inverted, .v-input--density-default .v-field--variant-solo-filled, .v-input--density-default .v-field--variant-filled {
|
||||
--v-input-control-height: 56px;
|
||||
--v-field-padding-bottom: 4px;
|
||||
}
|
||||
.v-input--density-comfortable .v-field--variant-solo, .v-input--density-comfortable .v-field--variant-solo-inverted, .v-input--density-comfortable .v-field--variant-solo-filled, .v-input--density-comfortable .v-field--variant-filled {
|
||||
--v-input-control-height: 48px;
|
||||
--v-field-padding-bottom: 0px;
|
||||
}
|
||||
.v-input--density-compact .v-field--variant-solo, .v-input--density-compact .v-field--variant-solo-inverted, .v-input--density-compact .v-field--variant-solo-filled, .v-input--density-compact .v-field--variant-filled {
|
||||
--v-input-control-height: 40px;
|
||||
--v-field-padding-bottom: 0px;
|
||||
}
|
||||
.v-field--variant-outlined, .v-field--single-line, .v-field--no-label {
|
||||
--v-field-padding-top: 0px;
|
||||
}
|
||||
.v-input--density-default .v-field--variant-outlined, .v-input--density-default .v-field--single-line, .v-input--density-default .v-field--no-label {
|
||||
--v-field-padding-bottom: 16px;
|
||||
}
|
||||
.v-input--density-comfortable .v-field--variant-outlined, .v-input--density-comfortable .v-field--single-line, .v-input--density-comfortable .v-field--no-label {
|
||||
--v-field-padding-bottom: 12px;
|
||||
}
|
||||
.v-input--density-compact .v-field--variant-outlined, .v-input--density-compact .v-field--single-line, .v-input--density-compact .v-field--no-label {
|
||||
--v-field-padding-bottom: 8px;
|
||||
}
|
||||
.v-field--variant-plain, .v-field--variant-underlined {
|
||||
border-radius: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.v-field--variant-plain.v-field, .v-field--variant-underlined.v-field {
|
||||
--v-field-padding-start: 0px;
|
||||
--v-field-padding-end: 0px;
|
||||
}
|
||||
.v-input--density-default .v-field--variant-plain, .v-input--density-default .v-field--variant-underlined {
|
||||
--v-input-control-height: 48px;
|
||||
--v-field-padding-top: 4px;
|
||||
--v-field-padding-bottom: 4px;
|
||||
}
|
||||
.v-input--density-comfortable .v-field--variant-plain, .v-input--density-comfortable .v-field--variant-underlined {
|
||||
--v-input-control-height: 40px;
|
||||
--v-field-padding-top: 2px;
|
||||
--v-field-padding-bottom: 0px;
|
||||
}
|
||||
.v-input--density-compact .v-field--variant-plain, .v-input--density-compact .v-field--variant-underlined {
|
||||
--v-input-control-height: 32px;
|
||||
--v-field-padding-top: 0px;
|
||||
--v-field-padding-bottom: 0px;
|
||||
}
|
||||
.v-field--flat {
|
||||
box-shadow: none;
|
||||
}
|
||||
.v-field--rounded {
|
||||
border-radius: 24px;
|
||||
}
|
||||
.v-field.v-field--prepended {
|
||||
--v-field-padding-start: 6px;
|
||||
}
|
||||
.v-field.v-field--appended {
|
||||
--v-field-padding-end: 6px;
|
||||
}
|
||||
/* endregion */
|
||||
/* region ELEMENTS */
|
||||
.v-field__input {
|
||||
align-items: center;
|
||||
color: inherit;
|
||||
column-gap: 2px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
letter-spacing: 0.009375em;
|
||||
opacity: var(--v-high-emphasis-opacity);
|
||||
min-height: max(var(--v-input-control-height, 56px), 1.5rem + var(--v-field-input-padding-top) + var(--v-field-input-padding-bottom));
|
||||
min-width: 0;
|
||||
padding-inline: var(--v-field-padding-start) var(--v-field-padding-end);
|
||||
padding-top: var(--v-field-input-padding-top);
|
||||
padding-bottom: var(--v-field-input-padding-bottom);
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
.v-input--density-default .v-field__input {
|
||||
row-gap: 8px;
|
||||
}
|
||||
.v-input--density-comfortable .v-field__input {
|
||||
row-gap: 6px;
|
||||
}
|
||||
.v-input--density-compact .v-field__input {
|
||||
row-gap: 4px;
|
||||
}
|
||||
.v-field__input input {
|
||||
letter-spacing: inherit;
|
||||
}
|
||||
:where(.v-field__input input, input.v-field__input, textarea.v-field__input, select.v-field__input) {
|
||||
background-color: transparent;
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
:where(.v-field__input input, input.v-field__input, textarea.v-field__input, select.v-field__input)::placeholder {
|
||||
color: currentColor;
|
||||
opacity: var(--v-disabled-opacity);
|
||||
}
|
||||
.v-field__input:focus, .v-field__input:active {
|
||||
outline: none;
|
||||
}
|
||||
.v-field__input:invalid {
|
||||
box-shadow: none;
|
||||
}
|
||||
.v-field__field {
|
||||
flex: 1 0;
|
||||
grid-area: field;
|
||||
position: relative;
|
||||
align-items: flex-start;
|
||||
display: flex;
|
||||
}
|
||||
/* endregion */
|
||||
/* region AFFIXES */
|
||||
.v-field__prepend-inner {
|
||||
grid-area: prepend-inner;
|
||||
padding-inline-end: var(--v-field-padding-after);
|
||||
}
|
||||
.v-field__clearable {
|
||||
grid-area: clear;
|
||||
}
|
||||
.v-field__append-inner {
|
||||
grid-area: append-inner;
|
||||
padding-inline-start: var(--v-field-padding-after);
|
||||
}
|
||||
.v-field__append-inner,
|
||||
.v-field__clearable,
|
||||
.v-field__prepend-inner {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding-top: var(--v-input-padding-top, 8px);
|
||||
}
|
||||
.v-field--center-affix .v-field__append-inner,
|
||||
.v-field--center-affix .v-field__clearable,
|
||||
.v-field--center-affix .v-field__prepend-inner {
|
||||
align-items: center;
|
||||
padding-top: 0;
|
||||
}
|
||||
.v-field.v-field--variant-underlined .v-field__append-inner,
|
||||
.v-field.v-field--variant-underlined .v-field__clearable,
|
||||
.v-field.v-field--variant-underlined .v-field__prepend-inner,
|
||||
.v-field.v-field--variant-plain .v-field__append-inner,
|
||||
.v-field.v-field--variant-plain .v-field__clearable,
|
||||
.v-field.v-field--variant-plain .v-field__prepend-inner {
|
||||
align-items: flex-start;
|
||||
padding-top: calc(var(--v-field-padding-top, 8px) + var(--v-input-padding-top, 0px));
|
||||
padding-bottom: var(--v-field-padding-bottom, 4px);
|
||||
}
|
||||
.v-field--focused .v-field__prepend-inner,
|
||||
.v-field--focused .v-field__append-inner {
|
||||
opacity: 1;
|
||||
}
|
||||
.v-field__prepend-inner > .v-icon,
|
||||
.v-field__append-inner > .v-icon,
|
||||
.v-field__clearable > .v-icon {
|
||||
opacity: var(--v-medium-emphasis-opacity);
|
||||
}
|
||||
.v-field--disabled .v-field__prepend-inner > .v-icon, .v-field--error .v-field__prepend-inner > .v-icon, .v-field--glow.v-field--focused .v-field__prepend-inner > .v-icon,
|
||||
.v-field--disabled .v-field__append-inner > .v-icon,
|
||||
.v-field--error .v-field__append-inner > .v-icon,
|
||||
.v-field--glow.v-field--focused .v-field__append-inner > .v-icon,
|
||||
.v-field--disabled .v-field__clearable > .v-icon,
|
||||
.v-field--error .v-field__clearable > .v-icon,
|
||||
.v-field--glow.v-field--focused .v-field__clearable > .v-icon {
|
||||
opacity: 1;
|
||||
}
|
||||
.v-field--error:not(.v-field--disabled) .v-field__prepend-inner > .v-icon,
|
||||
.v-field--error:not(.v-field--disabled) .v-field__append-inner > .v-icon,
|
||||
.v-field--error:not(.v-field--disabled) .v-field__clearable > .v-icon {
|
||||
color: rgb(var(--v-theme-error));
|
||||
}
|
||||
.v-field__clearable {
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
margin-inline: 4px;
|
||||
transition: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-property: opacity, transform, width;
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.v-field__clearable {
|
||||
transition-property: opacity;
|
||||
}
|
||||
}
|
||||
.v-field--focused .v-field__clearable, .v-field--persistent-clear .v-field__clearable {
|
||||
opacity: 1;
|
||||
}
|
||||
@media (hover: hover) {
|
||||
.v-field:hover .v-field__clearable {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@media (hover: none) {
|
||||
.v-field__clearable {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
/* endregion */
|
||||
/* region LABEL */
|
||||
.v-label.v-field-label {
|
||||
contain: layout paint;
|
||||
display: block;
|
||||
margin-inline-start: var(--v-field-padding-start);
|
||||
margin-inline-end: var(--v-field-padding-end);
|
||||
max-width: calc(100% - var(--v-field-padding-start) - var(--v-field-padding-end));
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
top: var(--v-input-padding-top);
|
||||
transform-origin: left center;
|
||||
z-index: 1;
|
||||
}
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.v-label.v-field-label {
|
||||
transition: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-property: opacity, transform;
|
||||
}
|
||||
}
|
||||
.v-field--variant-underlined .v-label.v-field-label, .v-field--variant-plain .v-label.v-field-label {
|
||||
top: calc(var(--v-input-padding-top) + var(--v-field-padding-top));
|
||||
}
|
||||
.v-field--center-affix .v-label.v-field-label {
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.v-field--active .v-label.v-field-label {
|
||||
visibility: hidden;
|
||||
}
|
||||
.v-field--focused .v-label.v-field-label, .v-field--error .v-label.v-field-label {
|
||||
opacity: 1;
|
||||
}
|
||||
.v-field--error:not(.v-field--disabled) .v-label.v-field-label {
|
||||
color: rgb(var(--v-theme-error));
|
||||
}
|
||||
.v-label.v-field-label--floating {
|
||||
--v-field-label-scale: 0.75em;
|
||||
font-size: var(--v-field-label-scale);
|
||||
visibility: hidden;
|
||||
}
|
||||
.v-field--variant-outlined .v-label.v-field-label--floating {
|
||||
max-width: 100%;
|
||||
}
|
||||
.v-field--center-affix .v-label.v-field-label--floating {
|
||||
transform: none;
|
||||
}
|
||||
.v-field.v-field--active .v-label.v-field-label--floating {
|
||||
visibility: unset;
|
||||
}
|
||||
.v-input--density-default .v-field--variant-solo .v-label.v-field-label--floating, .v-input--density-default .v-field--variant-solo-inverted .v-label.v-field-label--floating, .v-input--density-default .v-field--variant-filled .v-label.v-field-label--floating, .v-input--density-default .v-field--variant-solo-filled .v-label.v-field-label--floating {
|
||||
top: 7px;
|
||||
}
|
||||
.v-input--density-comfortable .v-field--variant-solo .v-label.v-field-label--floating, .v-input--density-comfortable .v-field--variant-solo-inverted .v-label.v-field-label--floating, .v-input--density-comfortable .v-field--variant-filled .v-label.v-field-label--floating, .v-input--density-comfortable .v-field--variant-solo-filled .v-label.v-field-label--floating {
|
||||
top: 5px;
|
||||
}
|
||||
.v-input--density-compact .v-field--variant-solo .v-label.v-field-label--floating, .v-input--density-compact .v-field--variant-solo-inverted .v-label.v-field-label--floating, .v-input--density-compact .v-field--variant-filled .v-label.v-field-label--floating, .v-input--density-compact .v-field--variant-solo-filled .v-label.v-field-label--floating {
|
||||
top: 3px;
|
||||
}
|
||||
.v-field--variant-plain .v-label.v-field-label--floating, .v-field--variant-underlined .v-label.v-field-label--floating {
|
||||
transform: translateY(-16px);
|
||||
margin: 0;
|
||||
top: var(--v-input-padding-top);
|
||||
}
|
||||
.v-field--variant-outlined .v-label.v-field-label--floating {
|
||||
transform: translateY(-50%);
|
||||
transform-origin: center;
|
||||
position: static;
|
||||
margin: 0 4px;
|
||||
}
|
||||
/* endregion */
|
||||
/* region OUTLINE */
|
||||
.v-field__outline {
|
||||
--v-field-border-width: 1px;
|
||||
--v-field-border-opacity: 0.38;
|
||||
align-items: stretch;
|
||||
contain: layout;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
}
|
||||
@media (hover: hover) {
|
||||
.v-field:hover .v-field__outline {
|
||||
--v-field-border-opacity: var(--v-high-emphasis-opacity);
|
||||
}
|
||||
}
|
||||
.v-field--error:not(.v-field--disabled) .v-field__outline {
|
||||
color: rgb(var(--v-theme-error));
|
||||
}
|
||||
.v-field.v-field--focused .v-field__outline, .v-input.v-input--error .v-field__outline {
|
||||
--v-field-border-opacity: 1;
|
||||
}
|
||||
.v-field--variant-outlined.v-field--focused .v-field__outline {
|
||||
--v-field-border-width: 2px;
|
||||
}
|
||||
.v-field--variant-filled .v-field__outline::before, .v-field--variant-underlined .v-field__outline::before {
|
||||
border-color: currentColor;
|
||||
border-style: solid;
|
||||
border-width: 0 0 var(--v-field-border-width);
|
||||
opacity: var(--v-field-border-opacity);
|
||||
transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.v-field--variant-filled .v-field__outline::before, .v-field--variant-underlined .v-field__outline::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.v-field--variant-filled .v-field__outline::after, .v-field--variant-underlined .v-field__outline::after {
|
||||
border-color: currentColor;
|
||||
border-style: solid;
|
||||
border-width: 0 0 2px;
|
||||
transform: scaleX(0);
|
||||
transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.v-field--variant-filled .v-field__outline::after, .v-field--variant-underlined .v-field__outline::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.v-field--focused.v-field--variant-filled .v-field__outline::after, .v-field--focused.v-field--variant-underlined .v-field__outline::after {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
.v-field--variant-outlined .v-field__outline {
|
||||
border-radius: inherit;
|
||||
}
|
||||
.v-field--variant-outlined .v-field__outline__start, .v-field--variant-outlined .v-field__outline__notch::before, .v-field--variant-outlined .v-field__outline__notch::after, .v-field--variant-outlined .v-field__outline__end {
|
||||
border: 0 solid currentColor;
|
||||
opacity: var(--v-field-border-opacity);
|
||||
}
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.v-field--variant-outlined .v-field__outline__start, .v-field--variant-outlined .v-field__outline__notch::before, .v-field--variant-outlined .v-field__outline__notch::after, .v-field--variant-outlined .v-field__outline__end {
|
||||
transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
}
|
||||
.v-field--variant-outlined .v-field__outline__start {
|
||||
flex: 0 0 12px;
|
||||
border-top-width: var(--v-field-border-width);
|
||||
border-bottom-width: var(--v-field-border-width);
|
||||
border-inline-start-width: var(--v-field-border-width);
|
||||
border-start-start-radius: inherit;
|
||||
border-start-end-radius: 0;
|
||||
border-end-end-radius: 0;
|
||||
border-end-start-radius: inherit;
|
||||
}
|
||||
.v-field--rounded.v-field--variant-outlined .v-field__outline__start,
|
||||
[class^=rounded-].v-field--variant-outlined .v-field__outline__start,
|
||||
[class*=" rounded-"].v-field--variant-outlined .v-field__outline__start {
|
||||
flex-basis: calc(var(--v-input-control-height) / 2 + 2px);
|
||||
}
|
||||
.v-field--reverse.v-field--variant-outlined .v-field__outline__start {
|
||||
border-start-start-radius: 0;
|
||||
border-start-end-radius: inherit;
|
||||
border-end-end-radius: inherit;
|
||||
border-end-start-radius: 0;
|
||||
border-inline-end-width: var(--v-field-border-width);
|
||||
border-inline-start-width: 0;
|
||||
}
|
||||
.v-field--variant-outlined .v-field__outline__notch {
|
||||
flex: none;
|
||||
position: relative;
|
||||
max-width: calc(100% - 24px);
|
||||
}
|
||||
.v-field--rounded.v-field--variant-outlined .v-field__outline__notch,
|
||||
[class^=rounded-].v-field--variant-outlined .v-field__outline__notch,
|
||||
[class*=" rounded-"].v-field--variant-outlined .v-field__outline__notch {
|
||||
max-width: calc(100% - var(--v-input-control-height));
|
||||
}
|
||||
.v-field--variant-outlined .v-field__outline__notch::before, .v-field--variant-outlined .v-field__outline__notch::after {
|
||||
opacity: var(--v-field-border-opacity);
|
||||
}
|
||||
.v-field--variant-outlined .v-field__outline__notch::before, .v-field--variant-outlined .v-field__outline__notch::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.v-field--variant-outlined .v-field__outline__notch::before {
|
||||
border-width: var(--v-field-border-width) 0 0;
|
||||
}
|
||||
.v-field--variant-outlined .v-field__outline__notch::after {
|
||||
bottom: 0;
|
||||
border-width: 0 0 var(--v-field-border-width);
|
||||
}
|
||||
.v-field--active.v-field--variant-outlined .v-field__outline__notch::before {
|
||||
opacity: 0;
|
||||
}
|
||||
.v-field--variant-outlined .v-field__outline__end {
|
||||
flex: 1;
|
||||
border-top-width: var(--v-field-border-width);
|
||||
border-bottom-width: var(--v-field-border-width);
|
||||
border-inline-end-width: var(--v-field-border-width);
|
||||
border-start-start-radius: 0;
|
||||
border-start-end-radius: inherit;
|
||||
border-end-end-radius: inherit;
|
||||
border-end-start-radius: 0;
|
||||
}
|
||||
.v-field--reverse.v-field--variant-outlined .v-field__outline__end {
|
||||
border-start-start-radius: inherit;
|
||||
border-start-end-radius: 0;
|
||||
border-end-end-radius: 0;
|
||||
border-end-start-radius: inherit;
|
||||
border-inline-end-width: 0;
|
||||
border-inline-start-width: var(--v-field-border-width);
|
||||
}
|
||||
/* endregion */
|
||||
/* region LOADER */
|
||||
.v-field__loader {
|
||||
top: calc(100% - 2px);
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-left-radius: inherit;
|
||||
border-bottom-right-radius: inherit;
|
||||
overflow: hidden;
|
||||
}
|
||||
.v-field--variant-outlined .v-field__loader {
|
||||
top: calc(100% - 3px);
|
||||
width: calc(100% - 1px * 2);
|
||||
left: 1px;
|
||||
}
|
||||
/* endregion */
|
||||
/* region OVERLAY */
|
||||
.v-field__overlay {
|
||||
border-radius: inherit;
|
||||
pointer-events: none;
|
||||
}
|
||||
.v-field__overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.v-field--variant-filled .v-field__overlay {
|
||||
background-color: currentColor;
|
||||
opacity: 0.04;
|
||||
transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.v-field--variant-filled.v-field--has-background .v-field__overlay {
|
||||
opacity: 0;
|
||||
}
|
||||
@media (hover: hover) {
|
||||
.v-field--variant-filled:hover .v-field__overlay {
|
||||
opacity: calc((0.04 + var(--v-hover-opacity)) * var(--v-theme-overlay-multiplier));
|
||||
}
|
||||
}
|
||||
.v-field--variant-filled.v-field--focused .v-field__overlay {
|
||||
opacity: calc((0.04 + var(--v-focus-opacity)) * var(--v-theme-overlay-multiplier));
|
||||
}
|
||||
.v-field--variant-solo-filled .v-field__overlay {
|
||||
background-color: currentColor;
|
||||
opacity: 0.04;
|
||||
transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
@media (hover: hover) {
|
||||
.v-field--variant-solo-filled:hover .v-field__overlay {
|
||||
opacity: calc((0.04 + var(--v-hover-opacity)) * var(--v-theme-overlay-multiplier));
|
||||
}
|
||||
}
|
||||
.v-field--variant-solo-filled.v-field--focused .v-field__overlay {
|
||||
opacity: calc((0.04 + var(--v-focus-opacity)) * var(--v-theme-overlay-multiplier));
|
||||
}
|
||||
.v-field--variant-solo-inverted .v-field__overlay {
|
||||
transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.v-field--variant-solo-inverted.v-field--has-background .v-field__overlay {
|
||||
opacity: 0;
|
||||
}
|
||||
@media (hover: hover) {
|
||||
.v-field--variant-solo-inverted:hover .v-field__overlay {
|
||||
opacity: calc((0.04 + var(--v-hover-opacity)) * var(--v-theme-overlay-multiplier));
|
||||
}
|
||||
}
|
||||
.v-field--variant-solo-inverted.v-field--focused .v-field__overlay {
|
||||
background-color: rgb(var(--v-theme-surface-variant));
|
||||
opacity: 1;
|
||||
}
|
||||
/* endregion */
|
||||
/* region MODIFIERS */
|
||||
.v-field--reverse .v-field__field,
|
||||
.v-field--reverse .v-field__input,
|
||||
.v-field--reverse .v-field__outline {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
.v-field--reverse .v-field__input, .v-field--reverse input {
|
||||
text-align: end;
|
||||
}
|
||||
.v-input--disabled .v-field--variant-filled .v-field__outline::before,
|
||||
.v-input--disabled .v-field--variant-underlined .v-field__outline::before {
|
||||
border-image: repeating-linear-gradient(to right, color-mix(in srgb, rgb(var(--v-theme-on-surface)) calc(var(--v-disabled-opacity) * 100%), transparent) 0px, color-mix(in srgb, rgb(var(--v-theme-on-surface)) calc(var(--v-disabled-opacity) * 100%), transparent) 2px, transparent 2px, transparent 4px) 1 repeat;
|
||||
}
|
||||
.v-field--loading .v-field__outline::after,
|
||||
.v-field--loading .v-field__outline::before {
|
||||
opacity: 0;
|
||||
}
|
||||
/* endregion */
|
||||
@media (forced-colors: active) {
|
||||
.v-field .v-progress-linear {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
+580
@@ -0,0 +1,580 @@
|
||||
|
||||
import { IconValue } from '../../composables/icons.js';
|
||||
import type { ComputedRef, PropType, Ref } from 'vue';
|
||||
import type { ClassValue } from '../../composables/component.js';
|
||||
import type { LoaderSlotProps } from '../../composables/loader.js';
|
||||
import type { GenericProps } from '../../util/index.js';
|
||||
declare const allowedVariants: readonly ['underlined', 'outlined', 'filled', 'solo', 'solo-inverted', 'solo-filled', 'plain'];
|
||||
type Variant = (typeof allowedVariants)[number];
|
||||
export interface DefaultInputSlot {
|
||||
isActive: Ref<boolean>;
|
||||
isFocused: Ref<boolean>;
|
||||
iconColor: ComputedRef<string | undefined>;
|
||||
controlRef: Ref<HTMLElement | undefined>;
|
||||
focus: () => void;
|
||||
blur: () => void;
|
||||
}
|
||||
export interface VFieldSlot extends DefaultInputSlot {
|
||||
props: Record<string, unknown> & {
|
||||
class?: ClassValue;
|
||||
};
|
||||
}
|
||||
export declare const makeVFieldProps: <Defaults extends {
|
||||
theme?: unknown;
|
||||
class?: unknown;
|
||||
style?: unknown;
|
||||
rounded?: unknown;
|
||||
tile?: unknown;
|
||||
loading?: unknown;
|
||||
appendInnerIcon?: unknown;
|
||||
bgColor?: unknown;
|
||||
clearable?: unknown;
|
||||
clearIcon?: unknown;
|
||||
active?: unknown;
|
||||
centerAffix?: unknown;
|
||||
color?: unknown;
|
||||
baseColor?: unknown;
|
||||
dirty?: unknown;
|
||||
disabled?: unknown;
|
||||
glow?: unknown;
|
||||
error?: unknown;
|
||||
flat?: unknown;
|
||||
iconColor?: unknown;
|
||||
label?: unknown;
|
||||
persistentClear?: unknown;
|
||||
prependInnerIcon?: unknown;
|
||||
reverse?: unknown;
|
||||
singleLine?: unknown;
|
||||
variant?: unknown;
|
||||
'onClick:clear'?: unknown;
|
||||
'onClick:appendInner'?: unknown;
|
||||
'onClick:prependInner'?: unknown;
|
||||
} = {}>(defaults?: Defaults | undefined) => {
|
||||
theme: unknown extends Defaults["theme"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["theme"] ? string : string | Defaults["theme"]>;
|
||||
default: unknown extends Defaults["theme"] ? string : string | Defaults["theme"];
|
||||
};
|
||||
class: unknown extends Defaults["class"] ? PropType<any> : {
|
||||
type: PropType<unknown extends Defaults["class"] ? any : any>;
|
||||
default: unknown extends Defaults["class"] ? any : any;
|
||||
};
|
||||
style: unknown extends Defaults["style"] ? {
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
} : Omit<{
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["style"] ? import("vue").StyleValue : Defaults["style"] | import("vue").StyleValue>;
|
||||
default: unknown extends Defaults["style"] ? import("vue").StyleValue : Defaults["style"] | NonNullable<import("vue").StyleValue>;
|
||||
};
|
||||
rounded: unknown extends Defaults["rounded"] ? {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
} : Omit<{
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["rounded"] ? string | number | boolean : string | number | boolean | Defaults["rounded"]>;
|
||||
default: unknown extends Defaults["rounded"] ? string | number | boolean : Defaults["rounded"] | NonNullable<string | number | boolean>;
|
||||
};
|
||||
tile: unknown extends Defaults["tile"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["tile"] ? boolean : boolean | Defaults["tile"]>;
|
||||
default: unknown extends Defaults["tile"] ? boolean : boolean | Defaults["tile"];
|
||||
};
|
||||
loading: unknown extends Defaults["loading"] ? (BooleanConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["loading"] ? string | boolean : string | boolean | Defaults["loading"]>;
|
||||
default: unknown extends Defaults["loading"] ? string | boolean : Defaults["loading"] | NonNullable<string | boolean>;
|
||||
};
|
||||
appendInnerIcon: unknown extends Defaults["appendInnerIcon"] ? PropType<IconValue> : {
|
||||
type: PropType<unknown extends Defaults["appendInnerIcon"] ? IconValue : Defaults["appendInnerIcon"] | IconValue>;
|
||||
default: unknown extends Defaults["appendInnerIcon"] ? IconValue : Defaults["appendInnerIcon"] | NonNullable<IconValue>;
|
||||
};
|
||||
bgColor: unknown extends Defaults["bgColor"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["bgColor"] ? string : string | Defaults["bgColor"]>;
|
||||
default: unknown extends Defaults["bgColor"] ? string : string | Defaults["bgColor"];
|
||||
};
|
||||
clearable: unknown extends Defaults["clearable"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["clearable"] ? boolean : boolean | Defaults["clearable"]>;
|
||||
default: unknown extends Defaults["clearable"] ? boolean : boolean | Defaults["clearable"];
|
||||
};
|
||||
clearIcon: unknown extends Defaults["clearIcon"] ? {
|
||||
type: PropType<IconValue>;
|
||||
default: string;
|
||||
} : Omit<{
|
||||
type: PropType<IconValue>;
|
||||
default: string;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["clearIcon"] ? IconValue : Defaults["clearIcon"] | IconValue>;
|
||||
default: unknown extends Defaults["clearIcon"] ? IconValue : Defaults["clearIcon"] | NonNullable<IconValue>;
|
||||
};
|
||||
active: unknown extends Defaults["active"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["active"] ? boolean : boolean | Defaults["active"]>;
|
||||
default: unknown extends Defaults["active"] ? boolean : boolean | Defaults["active"];
|
||||
};
|
||||
centerAffix: unknown extends Defaults["centerAffix"] ? {
|
||||
type: BooleanConstructor;
|
||||
default: undefined;
|
||||
} : Omit<{
|
||||
type: BooleanConstructor;
|
||||
default: undefined;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["centerAffix"] ? boolean : boolean | Defaults["centerAffix"]>;
|
||||
default: unknown extends Defaults["centerAffix"] ? boolean : boolean | Defaults["centerAffix"];
|
||||
};
|
||||
color: unknown extends Defaults["color"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["color"] ? string : string | Defaults["color"]>;
|
||||
default: unknown extends Defaults["color"] ? string : string | Defaults["color"];
|
||||
};
|
||||
baseColor: unknown extends Defaults["baseColor"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["baseColor"] ? string : string | Defaults["baseColor"]>;
|
||||
default: unknown extends Defaults["baseColor"] ? string : string | Defaults["baseColor"];
|
||||
};
|
||||
dirty: unknown extends Defaults["dirty"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["dirty"] ? boolean : boolean | Defaults["dirty"]>;
|
||||
default: unknown extends Defaults["dirty"] ? boolean : boolean | Defaults["dirty"];
|
||||
};
|
||||
disabled: unknown extends Defaults["disabled"] ? {
|
||||
type: BooleanConstructor;
|
||||
default: null;
|
||||
} : Omit<{
|
||||
type: BooleanConstructor;
|
||||
default: null;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["disabled"] ? boolean : boolean | Defaults["disabled"]>;
|
||||
default: unknown extends Defaults["disabled"] ? boolean : boolean | Defaults["disabled"];
|
||||
};
|
||||
glow: unknown extends Defaults["glow"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["glow"] ? boolean : boolean | Defaults["glow"]>;
|
||||
default: unknown extends Defaults["glow"] ? boolean : boolean | Defaults["glow"];
|
||||
};
|
||||
error: unknown extends Defaults["error"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["error"] ? boolean : boolean | Defaults["error"]>;
|
||||
default: unknown extends Defaults["error"] ? boolean : boolean | Defaults["error"];
|
||||
};
|
||||
flat: unknown extends Defaults["flat"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["flat"] ? boolean : boolean | Defaults["flat"]>;
|
||||
default: unknown extends Defaults["flat"] ? boolean : boolean | Defaults["flat"];
|
||||
};
|
||||
iconColor: unknown extends Defaults["iconColor"] ? (BooleanConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["iconColor"] ? string | boolean : string | boolean | Defaults["iconColor"]>;
|
||||
default: unknown extends Defaults["iconColor"] ? string | boolean : Defaults["iconColor"] | NonNullable<string | boolean>;
|
||||
};
|
||||
label: unknown extends Defaults["label"] ? StringConstructor : {
|
||||
type: PropType<unknown extends Defaults["label"] ? string : string | Defaults["label"]>;
|
||||
default: unknown extends Defaults["label"] ? string : string | Defaults["label"];
|
||||
};
|
||||
persistentClear: unknown extends Defaults["persistentClear"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["persistentClear"] ? boolean : boolean | Defaults["persistentClear"]>;
|
||||
default: unknown extends Defaults["persistentClear"] ? boolean : boolean | Defaults["persistentClear"];
|
||||
};
|
||||
prependInnerIcon: unknown extends Defaults["prependInnerIcon"] ? PropType<IconValue> : {
|
||||
type: PropType<unknown extends Defaults["prependInnerIcon"] ? IconValue : Defaults["prependInnerIcon"] | IconValue>;
|
||||
default: unknown extends Defaults["prependInnerIcon"] ? IconValue : Defaults["prependInnerIcon"] | NonNullable<IconValue>;
|
||||
};
|
||||
reverse: unknown extends Defaults["reverse"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["reverse"] ? boolean : boolean | Defaults["reverse"]>;
|
||||
default: unknown extends Defaults["reverse"] ? boolean : boolean | Defaults["reverse"];
|
||||
};
|
||||
singleLine: unknown extends Defaults["singleLine"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["singleLine"] ? boolean : boolean | Defaults["singleLine"]>;
|
||||
default: unknown extends Defaults["singleLine"] ? boolean : boolean | Defaults["singleLine"];
|
||||
};
|
||||
variant: unknown extends Defaults["variant"] ? {
|
||||
type: PropType<Variant>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
} : Omit<{
|
||||
type: PropType<Variant>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["variant"] ? "filled" | "outlined" | "plain" | "solo" | "solo-filled" | "solo-inverted" | "underlined" : "filled" | "outlined" | "plain" | "solo" | "solo-filled" | "solo-inverted" | "underlined" | Defaults["variant"]>;
|
||||
default: unknown extends Defaults["variant"] ? "filled" | "outlined" | "plain" | "solo" | "solo-filled" | "solo-inverted" | "underlined" : Defaults["variant"] | NonNullable<"filled" | "outlined" | "plain" | "solo" | "solo-filled" | "solo-inverted" | "underlined">;
|
||||
};
|
||||
'onClick:clear': unknown extends Defaults["onClick:clear"] ? PropType<(args_0: MouseEvent) => void> : {
|
||||
type: PropType<unknown extends Defaults["onClick:clear"] ? (args_0: MouseEvent) => void : ((args_0: MouseEvent) => void) | Defaults["onClick:clear"]>;
|
||||
default: unknown extends Defaults["onClick:clear"] ? (args_0: MouseEvent) => void : ((args_0: MouseEvent) => void) | Defaults["onClick:clear"];
|
||||
};
|
||||
'onClick:appendInner': unknown extends Defaults["onClick:appendInner"] ? PropType<(args_0: MouseEvent) => void> : {
|
||||
type: PropType<unknown extends Defaults["onClick:appendInner"] ? (args_0: MouseEvent) => void : ((args_0: MouseEvent) => void) | Defaults["onClick:appendInner"]>;
|
||||
default: unknown extends Defaults["onClick:appendInner"] ? (args_0: MouseEvent) => void : ((args_0: MouseEvent) => void) | Defaults["onClick:appendInner"];
|
||||
};
|
||||
'onClick:prependInner': unknown extends Defaults["onClick:prependInner"] ? PropType<(args_0: MouseEvent) => void> : {
|
||||
type: PropType<unknown extends Defaults["onClick:prependInner"] ? (args_0: MouseEvent) => void : ((args_0: MouseEvent) => void) | Defaults["onClick:prependInner"]>;
|
||||
default: unknown extends Defaults["onClick:prependInner"] ? (args_0: MouseEvent) => void : ((args_0: MouseEvent) => void) | Defaults["onClick:prependInner"];
|
||||
};
|
||||
};
|
||||
export type VFieldSlots = {
|
||||
clear: DefaultInputSlot & {
|
||||
props: Record<string, any>;
|
||||
};
|
||||
'prepend-inner': DefaultInputSlot;
|
||||
'append-inner': DefaultInputSlot;
|
||||
label: DefaultInputSlot & {
|
||||
label: string | undefined;
|
||||
props: Record<string, any>;
|
||||
};
|
||||
loader: LoaderSlotProps;
|
||||
default: VFieldSlot;
|
||||
};
|
||||
export declare const VField: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
focused: boolean;
|
||||
tile: boolean;
|
||||
clearable: boolean;
|
||||
clearIcon: IconValue;
|
||||
active: boolean;
|
||||
dirty: boolean;
|
||||
disabled: boolean;
|
||||
glow: boolean;
|
||||
error: boolean;
|
||||
flat: boolean;
|
||||
persistentClear: boolean;
|
||||
reverse: boolean;
|
||||
singleLine: boolean;
|
||||
variant: "filled" | "outlined" | "plain" | "solo" | "solo-filled" | "solo-inverted" | "underlined";
|
||||
details: boolean;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
'onUpdate:focused'?: ((args_0: boolean) => void) | undefined;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
loading?: string | boolean | undefined;
|
||||
appendInnerIcon?: IconValue | undefined;
|
||||
bgColor?: string | undefined;
|
||||
centerAffix?: boolean | undefined;
|
||||
color?: string | undefined;
|
||||
baseColor?: string | undefined;
|
||||
iconColor?: string | boolean | undefined;
|
||||
label?: string | undefined;
|
||||
prependInnerIcon?: IconValue | undefined;
|
||||
'onClick:clear'?: ((args_0: MouseEvent) => void) | undefined;
|
||||
'onClick:appendInner'?: ((args_0: MouseEvent) => void) | undefined;
|
||||
'onClick:prependInner'?: ((args_0: MouseEvent) => void) | undefined;
|
||||
id?: string | undefined;
|
||||
labelId?: string | undefined;
|
||||
} & {
|
||||
"onUpdate:focused"?: ((focused: boolean) => any) | undefined;
|
||||
}, {
|
||||
controlRef: Ref<HTMLElement | undefined, HTMLElement | undefined>;
|
||||
fieldIconColor: ComputedRef<string | undefined>;
|
||||
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Omit<{
|
||||
'update:focused': (focused: boolean) => true;
|
||||
'update:modelValue': (value: any) => true;
|
||||
}, "$children" | "modelValue" | "update:modelValue" | "v-slot:append-inner" | "v-slot:clear" | "v-slot:default" | "v-slot:label" | "v-slot:loader" | "v-slot:prepend-inner" | "v-slots">, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, {
|
||||
style: import("vue").StyleValue;
|
||||
focused: boolean;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
clearable: boolean;
|
||||
clearIcon: IconValue;
|
||||
active: boolean;
|
||||
centerAffix: boolean;
|
||||
dirty: boolean;
|
||||
disabled: boolean;
|
||||
glow: boolean;
|
||||
error: boolean;
|
||||
flat: boolean;
|
||||
persistentClear: boolean;
|
||||
reverse: boolean;
|
||||
singleLine: boolean;
|
||||
variant: "filled" | "outlined" | "plain" | "solo" | "solo-filled" | "solo-inverted" | "underlined";
|
||||
details: boolean;
|
||||
}, true, {}, import("vue").SlotsType<Partial<{
|
||||
clear: (arg: DefaultInputSlot & {
|
||||
props: Record<string, any>;
|
||||
}) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
'prepend-inner': (arg: DefaultInputSlot) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
'append-inner': (arg: DefaultInputSlot) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
label: (arg: DefaultInputSlot & {
|
||||
label: string | undefined;
|
||||
props: Record<string, any>;
|
||||
}) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
loader: (arg: LoaderSlotProps) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
default: (arg: VFieldSlot) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
}>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
|
||||
P: {};
|
||||
B: {};
|
||||
D: {};
|
||||
C: {};
|
||||
M: {};
|
||||
Defaults: {};
|
||||
}, {
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
focused: boolean;
|
||||
tile: boolean;
|
||||
clearable: boolean;
|
||||
clearIcon: IconValue;
|
||||
active: boolean;
|
||||
dirty: boolean;
|
||||
disabled: boolean;
|
||||
glow: boolean;
|
||||
error: boolean;
|
||||
flat: boolean;
|
||||
persistentClear: boolean;
|
||||
reverse: boolean;
|
||||
singleLine: boolean;
|
||||
variant: "filled" | "outlined" | "plain" | "solo" | "solo-filled" | "solo-inverted" | "underlined";
|
||||
details: boolean;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
'onUpdate:focused'?: ((args_0: boolean) => void) | undefined;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
loading?: string | boolean | undefined;
|
||||
appendInnerIcon?: IconValue | undefined;
|
||||
bgColor?: string | undefined;
|
||||
centerAffix?: boolean | undefined;
|
||||
color?: string | undefined;
|
||||
baseColor?: string | undefined;
|
||||
iconColor?: string | boolean | undefined;
|
||||
label?: string | undefined;
|
||||
prependInnerIcon?: IconValue | undefined;
|
||||
'onClick:clear'?: ((args_0: MouseEvent) => void) | undefined;
|
||||
'onClick:appendInner'?: ((args_0: MouseEvent) => void) | undefined;
|
||||
'onClick:prependInner'?: ((args_0: MouseEvent) => void) | undefined;
|
||||
id?: string | undefined;
|
||||
labelId?: string | undefined;
|
||||
} & {
|
||||
"onUpdate:focused"?: ((focused: boolean) => any) | undefined;
|
||||
}, {
|
||||
controlRef: Ref<HTMLElement | undefined, HTMLElement | undefined>;
|
||||
fieldIconColor: ComputedRef<string | undefined>;
|
||||
}, {}, {}, {}, {
|
||||
style: import("vue").StyleValue;
|
||||
focused: boolean;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
clearable: boolean;
|
||||
clearIcon: IconValue;
|
||||
active: boolean;
|
||||
centerAffix: boolean;
|
||||
dirty: boolean;
|
||||
disabled: boolean;
|
||||
glow: boolean;
|
||||
error: boolean;
|
||||
flat: boolean;
|
||||
persistentClear: boolean;
|
||||
reverse: boolean;
|
||||
singleLine: boolean;
|
||||
variant: "filled" | "outlined" | "plain" | "solo" | "solo-filled" | "solo-inverted" | "underlined";
|
||||
details: boolean;
|
||||
}>;
|
||||
__isFragment?: never;
|
||||
__isTeleport?: never;
|
||||
__isSuspense?: never;
|
||||
} & import("vue").ComponentOptionsBase<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
focused: boolean;
|
||||
tile: boolean;
|
||||
clearable: boolean;
|
||||
clearIcon: IconValue;
|
||||
active: boolean;
|
||||
dirty: boolean;
|
||||
disabled: boolean;
|
||||
glow: boolean;
|
||||
error: boolean;
|
||||
flat: boolean;
|
||||
persistentClear: boolean;
|
||||
reverse: boolean;
|
||||
singleLine: boolean;
|
||||
variant: "filled" | "outlined" | "plain" | "solo" | "solo-filled" | "solo-inverted" | "underlined";
|
||||
details: boolean;
|
||||
} & {
|
||||
theme?: string | undefined;
|
||||
class?: any;
|
||||
'onUpdate:focused'?: ((args_0: boolean) => void) | undefined;
|
||||
rounded?: string | number | boolean | undefined;
|
||||
loading?: string | boolean | undefined;
|
||||
appendInnerIcon?: IconValue | undefined;
|
||||
bgColor?: string | undefined;
|
||||
centerAffix?: boolean | undefined;
|
||||
color?: string | undefined;
|
||||
baseColor?: string | undefined;
|
||||
iconColor?: string | boolean | undefined;
|
||||
label?: string | undefined;
|
||||
prependInnerIcon?: IconValue | undefined;
|
||||
'onClick:clear'?: ((args_0: MouseEvent) => void) | undefined;
|
||||
'onClick:appendInner'?: ((args_0: MouseEvent) => void) | undefined;
|
||||
'onClick:prependInner'?: ((args_0: MouseEvent) => void) | undefined;
|
||||
id?: string | undefined;
|
||||
labelId?: string | undefined;
|
||||
} & {
|
||||
"onUpdate:focused"?: ((focused: boolean) => any) | undefined;
|
||||
}, {
|
||||
controlRef: Ref<HTMLElement | undefined, HTMLElement | undefined>;
|
||||
fieldIconColor: ComputedRef<string | undefined>;
|
||||
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Omit<{
|
||||
'update:focused': (focused: boolean) => true;
|
||||
'update:modelValue': (value: any) => true;
|
||||
}, "$children" | "modelValue" | "update:modelValue" | "v-slot:append-inner" | "v-slot:clear" | "v-slot:default" | "v-slot:label" | "v-slot:loader" | "v-slot:prepend-inner" | "v-slots">, string, {
|
||||
style: import("vue").StyleValue;
|
||||
focused: boolean;
|
||||
rounded: string | number | boolean;
|
||||
tile: boolean;
|
||||
clearable: boolean;
|
||||
clearIcon: IconValue;
|
||||
active: boolean;
|
||||
centerAffix: boolean;
|
||||
dirty: boolean;
|
||||
disabled: boolean;
|
||||
glow: boolean;
|
||||
error: boolean;
|
||||
flat: boolean;
|
||||
persistentClear: boolean;
|
||||
reverse: boolean;
|
||||
singleLine: boolean;
|
||||
variant: "filled" | "outlined" | "plain" | "solo" | "solo-filled" | "solo-inverted" | "underlined";
|
||||
details: boolean;
|
||||
}, {}, string, import("vue").SlotsType<Partial<{
|
||||
clear: (arg: DefaultInputSlot & {
|
||||
props: Record<string, any>;
|
||||
}) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
'prepend-inner': (arg: DefaultInputSlot) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
'append-inner': (arg: DefaultInputSlot) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
label: (arg: DefaultInputSlot & {
|
||||
label: string | undefined;
|
||||
props: Record<string, any>;
|
||||
}) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
loader: (arg: LoaderSlotProps) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
default: (arg: VFieldSlot) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
}>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new <T>(props: {
|
||||
modelValue?: T;
|
||||
'onUpdate:modelValue'?: (value: T) => void;
|
||||
}, slots: VFieldSlots) => GenericProps<typeof props, typeof slots>) & import("../../util/index.js").FilterPropsOptions<{
|
||||
theme: StringConstructor;
|
||||
class: PropType<ClassValue>;
|
||||
style: {
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
focused: BooleanConstructor;
|
||||
'onUpdate:focused': PropType<(args_0: boolean) => void>;
|
||||
rounded: {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
};
|
||||
tile: BooleanConstructor;
|
||||
loading: (BooleanConstructor | StringConstructor)[];
|
||||
appendInnerIcon: PropType<IconValue>;
|
||||
bgColor: StringConstructor;
|
||||
clearable: BooleanConstructor;
|
||||
clearIcon: {
|
||||
type: PropType<IconValue>;
|
||||
default: string;
|
||||
};
|
||||
active: BooleanConstructor;
|
||||
centerAffix: {
|
||||
type: BooleanConstructor;
|
||||
default: undefined;
|
||||
};
|
||||
color: StringConstructor;
|
||||
baseColor: StringConstructor;
|
||||
dirty: BooleanConstructor;
|
||||
disabled: {
|
||||
type: BooleanConstructor;
|
||||
default: null;
|
||||
};
|
||||
glow: BooleanConstructor;
|
||||
error: BooleanConstructor;
|
||||
flat: BooleanConstructor;
|
||||
iconColor: (BooleanConstructor | StringConstructor)[];
|
||||
label: StringConstructor;
|
||||
persistentClear: BooleanConstructor;
|
||||
prependInnerIcon: PropType<IconValue>;
|
||||
reverse: BooleanConstructor;
|
||||
singleLine: BooleanConstructor;
|
||||
variant: {
|
||||
type: PropType<Variant>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
'onClick:clear': PropType<(args_0: MouseEvent) => void>;
|
||||
'onClick:appendInner': PropType<(args_0: MouseEvent) => void>;
|
||||
'onClick:prependInner': PropType<(args_0: MouseEvent) => void>;
|
||||
id: StringConstructor;
|
||||
details: BooleanConstructor;
|
||||
labelId: StringConstructor;
|
||||
}, import("vue").ExtractPropTypes<{
|
||||
theme: StringConstructor;
|
||||
class: PropType<ClassValue>;
|
||||
style: {
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
focused: BooleanConstructor;
|
||||
'onUpdate:focused': PropType<(args_0: boolean) => void>;
|
||||
rounded: {
|
||||
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||
default: undefined;
|
||||
};
|
||||
tile: BooleanConstructor;
|
||||
loading: (BooleanConstructor | StringConstructor)[];
|
||||
appendInnerIcon: PropType<IconValue>;
|
||||
bgColor: StringConstructor;
|
||||
clearable: BooleanConstructor;
|
||||
clearIcon: {
|
||||
type: PropType<IconValue>;
|
||||
default: string;
|
||||
};
|
||||
active: BooleanConstructor;
|
||||
centerAffix: {
|
||||
type: BooleanConstructor;
|
||||
default: undefined;
|
||||
};
|
||||
color: StringConstructor;
|
||||
baseColor: StringConstructor;
|
||||
dirty: BooleanConstructor;
|
||||
disabled: {
|
||||
type: BooleanConstructor;
|
||||
default: null;
|
||||
};
|
||||
glow: BooleanConstructor;
|
||||
error: BooleanConstructor;
|
||||
flat: BooleanConstructor;
|
||||
iconColor: (BooleanConstructor | StringConstructor)[];
|
||||
label: StringConstructor;
|
||||
persistentClear: BooleanConstructor;
|
||||
prependInnerIcon: PropType<IconValue>;
|
||||
reverse: BooleanConstructor;
|
||||
singleLine: BooleanConstructor;
|
||||
variant: {
|
||||
type: PropType<Variant>;
|
||||
default: string;
|
||||
validator: (v: any) => boolean;
|
||||
};
|
||||
'onClick:clear': PropType<(args_0: MouseEvent) => void>;
|
||||
'onClick:appendInner': PropType<(args_0: MouseEvent) => void>;
|
||||
'onClick:prependInner': PropType<(args_0: MouseEvent) => void>;
|
||||
id: StringConstructor;
|
||||
details: BooleanConstructor;
|
||||
labelId: StringConstructor;
|
||||
}>>;
|
||||
export type VField = InstanceType<typeof VField>;
|
||||
|
||||
+337
@@ -0,0 +1,337 @@
|
||||
import { createElementVNode as _createElementVNode, createVNode as _createVNode, mergeProps as _mergeProps, vShow as _vShow, withDirectives as _withDirectives, Fragment as _Fragment, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle } from "vue";
|
||||
// Styles
|
||||
import "./VField.css";
|
||||
|
||||
// Components
|
||||
import { VFieldLabel } from "./VFieldLabel.js";
|
||||
import { VExpandXTransition } from "../transitions/index.js";
|
||||
import { VDefaultsProvider } from "../VDefaultsProvider/index.js";
|
||||
import { useInputIcon } from "../VInput/InputIcon.js"; // Composables
|
||||
import { useBackgroundColor, useTextColor } from "../../composables/color.js";
|
||||
import { makeComponentProps } from "../../composables/component.js";
|
||||
import { makeFocusProps, useFocus } from "../../composables/focus.js";
|
||||
import { IconValue } from "../../composables/icons.js";
|
||||
import { LoaderSlot, makeLoaderProps, useLoader } from "../../composables/loader.js";
|
||||
import { useRtl } from "../../composables/locale.js";
|
||||
import { makeRoundedProps, useRounded } from "../../composables/rounded.js";
|
||||
import { makeThemeProps, provideTheme } from "../../composables/theme.js"; // Utilities
|
||||
import { computed, ref, toRef, useId, watch } from 'vue';
|
||||
import { animate, convertToUnit, EventProp, genericComponent, nullifyTransforms, PREFERS_REDUCED_MOTION, propsFactory, standardEasing, useRender } from "../../util/index.js";
|
||||
import { Box } from "../../util/box.js"; // Types
|
||||
const allowedVariants = ['underlined', 'outlined', 'filled', 'solo', 'solo-inverted', 'solo-filled', 'plain'];
|
||||
export const makeVFieldProps = propsFactory({
|
||||
appendInnerIcon: IconValue,
|
||||
bgColor: String,
|
||||
clearable: Boolean,
|
||||
clearIcon: {
|
||||
type: IconValue,
|
||||
default: '$clear'
|
||||
},
|
||||
active: Boolean,
|
||||
centerAffix: {
|
||||
type: Boolean,
|
||||
default: undefined
|
||||
},
|
||||
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');
|
||||
export const 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, {
|
||||
attrs,
|
||||
emit,
|
||||
slots
|
||||
}) {
|
||||
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 ? undefined : `${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 ? undefined : isActive.value && isFocused.value ? props.color : props.baseColor;
|
||||
});
|
||||
const iconColor = computed(() => {
|
||||
if (props.iconColor === true || !props.iconColor && props.glow && isFocused.value) return color.value;
|
||||
if (!props.iconColor || props.glow && !isFocused.value) return undefined;
|
||||
return 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 = new Box(targetEl);
|
||||
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)
|
||||
} : undefined;
|
||||
const style = getComputedStyle(el);
|
||||
const targetStyle = getComputedStyle(targetEl);
|
||||
const duration = parseFloat(style.transitionDuration) * 1000 || 150;
|
||||
const scale = parseFloat(targetStyle.getPropertyValue('--v-field-label-scale'));
|
||||
const color = targetStyle.getPropertyValue('color');
|
||||
el.style.visibility = 'visible';
|
||||
targetEl.style.visibility = 'hidden';
|
||||
animate(el, {
|
||||
transform: `translate(${x}px, ${y}px) scale(${scale})`,
|
||||
color,
|
||||
...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
|
||||
}));
|
||||
const floatingLabelProps = toRef(() => {
|
||||
const ariaHidden = !isActive.value;
|
||||
return {
|
||||
'aria-hidden': ariaHidden,
|
||||
for: ariaHidden ? undefined : id.value
|
||||
};
|
||||
});
|
||||
const mainLabelProps = toRef(() => {
|
||||
const ariaHidden = hasFloatingLabel.value && isActive.value;
|
||||
return {
|
||||
'aria-hidden': ariaHidden,
|
||||
for: ariaHidden ? undefined : id.value
|
||||
};
|
||||
});
|
||||
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 _createElementVNode("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), [_createElementVNode("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 && _createElementVNode("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)]), _createElementVNode("div", {
|
||||
"class": "v-field__field",
|
||||
"data-no-activator": ""
|
||||
}, [['filled', 'solo', 'solo-inverted', 'solo-filled'].includes(props.variant) && hasFloatingLabel.value && _createVNode(VFieldLabel, _mergeProps({
|
||||
"key": "floating-label",
|
||||
"ref": floatingLabelRef,
|
||||
"class": [textColorClasses.value],
|
||||
"floating": true
|
||||
}, floatingLabelProps.value, {
|
||||
"style": textColorStyles.value
|
||||
}), {
|
||||
default: () => [label()]
|
||||
}), hasLabel.value && _createVNode(VFieldLabel, _mergeProps({
|
||||
"key": "label",
|
||||
"ref": labelRef,
|
||||
"id": props.labelId
|
||||
}, mainLabelProps.value), {
|
||||
default: () => [label()]
|
||||
}), slots.default?.({
|
||||
...slotProps.value,
|
||||
props: {
|
||||
id: id.value,
|
||||
class: 'v-field__input',
|
||||
'aria-describedby': messagesId.value
|
||||
},
|
||||
focus,
|
||||
blur
|
||||
}) ?? _createElementVNode("div", {
|
||||
"id": id.value,
|
||||
"class": "v-field__input",
|
||||
"aria-describedby": messagesId.value
|
||||
}, null)]), hasClear && _createVNode(VExpandXTransition, {
|
||||
"key": "clear"
|
||||
}, {
|
||||
default: () => [_withDirectives(_createElementVNode("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 && _createElementVNode("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)]), _createElementVNode("div", {
|
||||
"class": _normalizeClass(['v-field__outline', textColorClasses.value]),
|
||||
"style": _normalizeStyle(textColorStyles.value)
|
||||
}, [isOutlined && _createElementVNode(_Fragment, null, [_createElementVNode("div", {
|
||||
"class": "v-field__outline__start"
|
||||
}, null), hasFloatingLabel.value && _createElementVNode("div", {
|
||||
"class": "v-field__outline__notch"
|
||||
}, [_createVNode(VFieldLabel, _mergeProps({
|
||||
"ref": floatingLabelRef,
|
||||
"floating": true
|
||||
}, floatingLabelProps.value), {
|
||||
default: () => [label()]
|
||||
})]), _createElementVNode("div", {
|
||||
"class": "v-field__outline__end"
|
||||
}, null)]), isPlainOrUnderlined.value && hasFloatingLabel.value && _createVNode(VFieldLabel, _mergeProps({
|
||||
"ref": floatingLabelRef,
|
||||
"floating": true
|
||||
}, floatingLabelProps.value), {
|
||||
default: () => [label()]
|
||||
})])]);
|
||||
});
|
||||
return {
|
||||
controlRef,
|
||||
fieldIconColor: iconColor
|
||||
};
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VField.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+556
@@ -0,0 +1,556 @@
|
||||
@use 'sass:map'
|
||||
@use 'sass:math'
|
||||
@use 'sass:selector'
|
||||
@use '../../styles/settings'
|
||||
@use '../../styles/tools'
|
||||
@use './variables' as *
|
||||
|
||||
@include tools.layer('components')
|
||||
/* region INPUT */
|
||||
.v-field
|
||||
display: grid
|
||||
grid-template-areas: "prepend-inner field clear append-inner"
|
||||
grid-template-columns: min-content minmax(0, 1fr) min-content min-content
|
||||
font-size: $field-font-size
|
||||
letter-spacing: $field-letter-spacing
|
||||
max-width: $field-max-width
|
||||
border-radius: $field-border-radius
|
||||
contain: layout
|
||||
flex: 1 0
|
||||
grid-area: control
|
||||
position: relative
|
||||
|
||||
--v-theme-overlay-multiplier: 1
|
||||
--v-field-padding-start: #{$field-control-padding-start}
|
||||
--v-field-padding-end: #{$field-control-padding-end}
|
||||
--v-field-padding-top: #{$field-control-padding-top}
|
||||
--v-field-padding-bottom: #{$field-control-padding-bottom}
|
||||
--v-field-input-padding-top: #{$field-input-padding-top}
|
||||
--v-field-input-padding-bottom: #{$field-input-padding-bottom}
|
||||
|
||||
&--disabled
|
||||
opacity: var(--v-disabled-opacity)
|
||||
pointer-events: none
|
||||
|
||||
.v-chip
|
||||
--v-chip-height: #{$field-chip-height}
|
||||
|
||||
/* endregion */
|
||||
/* region MODIFIERS */
|
||||
.v-field
|
||||
&--prepended
|
||||
padding-inline-start: $field-control-affixed-padding
|
||||
|
||||
&--appended
|
||||
padding-inline-end: $field-control-affixed-padding
|
||||
|
||||
&--variant-solo,
|
||||
&--variant-solo-filled
|
||||
background: $field-control-solo-background
|
||||
border-color: transparent
|
||||
color: $field-control-solo-color
|
||||
@include tools.elevation($field-control-solo-elevation)
|
||||
|
||||
&--variant-solo-inverted
|
||||
background: $field-control-solo-background
|
||||
border-color: transparent
|
||||
color: $field-control-solo-inverted-color
|
||||
@include tools.elevation($field-control-solo-elevation)
|
||||
|
||||
&.v-field--focused
|
||||
color: $field-control-solo-inverted-focused-color
|
||||
|
||||
&--variant-filled
|
||||
border-bottom-left-radius: 0
|
||||
border-bottom-right-radius: 0
|
||||
|
||||
&--variant-solo,
|
||||
&--variant-solo-inverted,
|
||||
&--variant-solo-filled,
|
||||
&--variant-filled
|
||||
$root: &
|
||||
|
||||
@at-root
|
||||
@include tools.density('v-input', $input-density) using ($modifier)
|
||||
@at-root #{selector.nest(&, $root)}
|
||||
--v-input-control-height: #{$field-control-height + $modifier}
|
||||
--v-field-padding-bottom: #{math.max(0px, $field-control-padding-bottom + $modifier * .5)}
|
||||
|
||||
&--variant-outlined,
|
||||
&--single-line,
|
||||
&--no-label
|
||||
--v-field-padding-top: 0px
|
||||
$root: &
|
||||
|
||||
@at-root
|
||||
@include tools.density('v-input', $input-density) using ($modifier)
|
||||
@at-root #{selector.nest(&, $root)}
|
||||
--v-field-padding-bottom: #{16px + $modifier * .5}
|
||||
|
||||
&--variant-plain,
|
||||
&--variant-underlined
|
||||
$root: &
|
||||
border-radius: 0
|
||||
padding: 0
|
||||
|
||||
&.v-field
|
||||
--v-field-padding-start: 0px
|
||||
--v-field-padding-end: 0px
|
||||
|
||||
@at-root
|
||||
@include tools.density('v-input', $input-density) using ($modifier)
|
||||
@at-root #{selector.nest(&, $root)}
|
||||
--v-input-control-height: #{$field-control-underlined-height + $modifier}
|
||||
--v-field-padding-top: #{math.max(0px, 4px + $modifier * .25)}
|
||||
--v-field-padding-bottom: #{math.max(0px, $field-control-padding-bottom + $modifier * .5)}
|
||||
|
||||
&--flat
|
||||
box-shadow: none
|
||||
|
||||
&--rounded
|
||||
@include tools.rounded($field-rounded-border-radius)
|
||||
|
||||
// These are separate so they can override the default variant styles
|
||||
&.v-field
|
||||
&--prepended
|
||||
--v-field-padding-start: #{$field-control-affixed-inner-padding}
|
||||
|
||||
&--appended
|
||||
--v-field-padding-end: #{$field-control-affixed-inner-padding}
|
||||
|
||||
/* endregion */
|
||||
/* region ELEMENTS */
|
||||
.v-field__input
|
||||
align-items: center
|
||||
color: inherit
|
||||
column-gap: $field-input-column-gap
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
letter-spacing: $field-letter-spacing
|
||||
opacity: $field-input-opacity
|
||||
min-height: $field-input-min-height
|
||||
min-width: 0
|
||||
padding-inline: var(--v-field-padding-start) var(--v-field-padding-end)
|
||||
padding-top: var(--v-field-input-padding-top)
|
||||
padding-bottom: var(--v-field-input-padding-bottom)
|
||||
position: relative
|
||||
width: 100%
|
||||
|
||||
$root: &
|
||||
|
||||
@at-root
|
||||
@include tools.density('v-input', $input-density) using ($modifier)
|
||||
@at-root #{selector.nest(&, $root)}
|
||||
row-gap: #{$field-input-row-gap + $modifier * .25}
|
||||
|
||||
input
|
||||
letter-spacing: inherit
|
||||
|
||||
@at-root :where(& input, input#{&}, textarea#{&}, select#{&})
|
||||
background-color: transparent
|
||||
border-style: none
|
||||
padding: 0
|
||||
margin: 0
|
||||
|
||||
&::placeholder
|
||||
color: currentColor
|
||||
opacity: var(--v-disabled-opacity)
|
||||
|
||||
&:focus,
|
||||
&:active
|
||||
outline: none
|
||||
|
||||
// Remove Firefox red outline
|
||||
&:invalid
|
||||
box-shadow: none
|
||||
|
||||
.v-field__field
|
||||
flex: 1 0
|
||||
grid-area: field
|
||||
position: relative
|
||||
align-items: flex-start
|
||||
display: flex
|
||||
|
||||
/* endregion */
|
||||
/* region AFFIXES */
|
||||
.v-field__prepend-inner
|
||||
grid-area: prepend-inner
|
||||
padding-inline-end: var(--v-field-padding-after)
|
||||
|
||||
.v-field__clearable
|
||||
grid-area: clear
|
||||
|
||||
.v-field__append-inner
|
||||
grid-area: append-inner
|
||||
padding-inline-start: var(--v-field-padding-after)
|
||||
|
||||
.v-field__append-inner,
|
||||
.v-field__clearable,
|
||||
.v-field__prepend-inner
|
||||
display: flex
|
||||
align-items: flex-start
|
||||
padding-top: var(--v-input-padding-top, $field-control-padding-top)
|
||||
|
||||
.v-field--center-affix &
|
||||
align-items: center
|
||||
padding-top: 0
|
||||
|
||||
.v-field.v-field--variant-underlined,
|
||||
.v-field.v-field--variant-plain
|
||||
.v-field__append-inner,
|
||||
.v-field__clearable,
|
||||
.v-field__prepend-inner
|
||||
align-items: flex-start
|
||||
padding-top: $field-input-padding-top
|
||||
padding-bottom: $field-input-padding-bottom
|
||||
|
||||
.v-field__prepend-inner,
|
||||
.v-field__append-inner
|
||||
.v-field--focused &
|
||||
opacity: 1
|
||||
|
||||
.v-field__prepend-inner,
|
||||
.v-field__append-inner,
|
||||
.v-field__clearable
|
||||
> .v-icon
|
||||
opacity: var(--v-medium-emphasis-opacity)
|
||||
|
||||
.v-field--disabled &,
|
||||
.v-field--error &,
|
||||
.v-field--glow.v-field--focused &
|
||||
> .v-icon
|
||||
opacity: 1
|
||||
|
||||
.v-field--error:not(.v-field--disabled) &
|
||||
> .v-icon
|
||||
color: rgb(var(--v-theme-error))
|
||||
|
||||
.v-field__clearable
|
||||
cursor: pointer
|
||||
opacity: 0
|
||||
overflow: hidden
|
||||
margin-inline: $field-clearable-margin
|
||||
transition: $field-transition-timing
|
||||
transition-property: opacity, transform, width
|
||||
|
||||
@media (prefers-reduced-motion: reduce)
|
||||
transition-property: opacity
|
||||
|
||||
.v-field--focused &,
|
||||
.v-field--persistent-clear &
|
||||
opacity: 1
|
||||
|
||||
@media (hover: hover)
|
||||
.v-field:hover &
|
||||
opacity: 1
|
||||
|
||||
@media (hover: none)
|
||||
opacity: 1
|
||||
|
||||
/* endregion */
|
||||
/* region LABEL */
|
||||
.v-label.v-field-label
|
||||
contain: layout paint
|
||||
display: block
|
||||
margin-inline-start: var(--v-field-padding-start)
|
||||
margin-inline-end: var(--v-field-padding-end)
|
||||
max-width: calc(100% - var(--v-field-padding-start) - var(--v-field-padding-end))
|
||||
pointer-events: none
|
||||
position: absolute
|
||||
top: var(--v-input-padding-top)
|
||||
transform-origin: left center
|
||||
z-index: 1
|
||||
|
||||
@media (prefers-reduced-motion: no-preference)
|
||||
transition: $field-transition-timing
|
||||
transition-property: opacity, transform
|
||||
|
||||
.v-field--variant-underlined &,
|
||||
.v-field--variant-plain &
|
||||
top: calc(var(--v-input-padding-top) + var(--v-field-padding-top))
|
||||
|
||||
.v-field--center-affix &
|
||||
top: 50%
|
||||
transform: translateY(-50%)
|
||||
|
||||
.v-field--active &
|
||||
visibility: hidden
|
||||
|
||||
.v-field--focused &,
|
||||
.v-field--error &
|
||||
opacity: 1
|
||||
|
||||
.v-field--error:not(.v-field--disabled) &
|
||||
color: rgb(var(--v-theme-error))
|
||||
|
||||
&--floating
|
||||
--v-field-label-scale: #{$field-label-floating-scale}em
|
||||
font-size: var(--v-field-label-scale)
|
||||
visibility: hidden
|
||||
|
||||
.v-field--variant-outlined &
|
||||
max-width: 100%
|
||||
|
||||
.v-field--center-affix &
|
||||
transform: none
|
||||
|
||||
.v-field.v-field--active &
|
||||
visibility: unset
|
||||
|
||||
.v-field--variant-solo &,
|
||||
.v-field--variant-solo-inverted &,
|
||||
.v-field--variant-filled &,
|
||||
.v-field--variant-solo-filled &
|
||||
$root: &
|
||||
|
||||
@at-root
|
||||
@include tools.density('v-input', $input-density) using ($modifier)
|
||||
@at-root #{selector.nest(&, $root)}
|
||||
top: 7px + $modifier * .25
|
||||
|
||||
.v-field--variant-plain &,
|
||||
.v-field--variant-underlined &
|
||||
transform: translateY(-16px)
|
||||
margin: 0
|
||||
top: var(--v-input-padding-top)
|
||||
|
||||
.v-field--variant-outlined &
|
||||
transform: translateY(-50%)
|
||||
transform-origin: center
|
||||
position: static
|
||||
margin: 0 4px
|
||||
|
||||
/* endregion */
|
||||
/* region OUTLINE */
|
||||
.v-field__outline
|
||||
--v-field-border-width: #{$field-border-width}
|
||||
--v-field-border-opacity: #{$field-outline-opacity}
|
||||
align-items: stretch
|
||||
contain: layout
|
||||
display: flex
|
||||
height: 100%
|
||||
left: 0
|
||||
pointer-events: none
|
||||
position: absolute
|
||||
right: 0
|
||||
width: 100%
|
||||
|
||||
@media (hover: hover)
|
||||
.v-field:hover &
|
||||
--v-field-border-opacity: var(--v-high-emphasis-opacity)
|
||||
|
||||
.v-field--error:not(.v-field--disabled) &
|
||||
color: rgb(var(--v-theme-error))
|
||||
|
||||
.v-field.v-field--focused &,
|
||||
.v-input.v-input--error &
|
||||
--v-field-border-opacity: 1
|
||||
|
||||
.v-field--variant-outlined.v-field--focused &
|
||||
--v-field-border-width: #{$field-focused-border-width}
|
||||
|
||||
.v-field--variant-filled &,
|
||||
.v-field--variant-underlined &
|
||||
&::before
|
||||
border-color: currentColor
|
||||
border-style: solid
|
||||
border-width: 0 0 var(--v-field-border-width)
|
||||
opacity: var(--v-field-border-opacity)
|
||||
transition: opacity $field-subtle-transition-timing
|
||||
@include tools.absolute(true)
|
||||
|
||||
.v-field--variant-filled &,
|
||||
.v-field--variant-underlined &
|
||||
&::after
|
||||
border-color: currentColor
|
||||
border-style: solid
|
||||
border-width: 0 0 $field-focused-border-width
|
||||
transform: scaleX(0)
|
||||
transition: transform $field-transition-timing
|
||||
@include tools.absolute(true)
|
||||
|
||||
@at-root #{selector.append('.v-field--focused', &)}
|
||||
transform: scaleX(1)
|
||||
|
||||
.v-field--variant-outlined &
|
||||
border-radius: inherit
|
||||
|
||||
&__start,
|
||||
&__notch::before,
|
||||
&__notch::after,
|
||||
&__end
|
||||
border: 0 solid currentColor
|
||||
opacity: var(--v-field-border-opacity)
|
||||
|
||||
@media (prefers-reduced-motion: no-preference)
|
||||
transition: opacity $field-subtle-transition-timing
|
||||
|
||||
&__start
|
||||
flex: 0 0 $field-control-affixed-padding
|
||||
border-top-width: var(--v-field-border-width)
|
||||
border-bottom-width: var(--v-field-border-width)
|
||||
border-inline-start-width: var(--v-field-border-width)
|
||||
border-start-start-radius: inherit
|
||||
border-start-end-radius: 0
|
||||
border-end-end-radius: 0
|
||||
border-end-start-radius: inherit
|
||||
|
||||
@at-root
|
||||
#{selector.append('.v-field--rounded', &)},
|
||||
#{selector.append('[class^="rounded-"]', &)},
|
||||
#{selector.append('[class*=" rounded-"]', &)}
|
||||
flex-basis: calc(var(--v-input-control-height) / 2 + 2px)
|
||||
|
||||
@at-root #{selector.append('.v-field--reverse', &)}
|
||||
border-start-start-radius: 0
|
||||
border-start-end-radius: inherit
|
||||
border-end-end-radius: inherit
|
||||
border-end-start-radius: 0
|
||||
border-inline-end-width: var(--v-field-border-width)
|
||||
border-inline-start-width: 0
|
||||
|
||||
&__notch
|
||||
flex: none
|
||||
position: relative
|
||||
max-width: calc(100% - $field-control-affixed-padding * 2)
|
||||
|
||||
@at-root
|
||||
#{selector.append('.v-field--rounded', &)},
|
||||
#{selector.append('[class^="rounded-"]', &)},
|
||||
#{selector.append('[class*=" rounded-"]', &)}
|
||||
max-width: calc(100% - var(--v-input-control-height))
|
||||
|
||||
&::before,
|
||||
&::after
|
||||
opacity: var(--v-field-border-opacity)
|
||||
|
||||
@include tools.absolute(true)
|
||||
|
||||
&::before
|
||||
border-width: var(--v-field-border-width) 0 0
|
||||
|
||||
&::after
|
||||
bottom: 0
|
||||
border-width: 0 0 var(--v-field-border-width)
|
||||
|
||||
@at-root #{selector.append('.v-field--active', &)}
|
||||
&::before
|
||||
opacity: 0
|
||||
|
||||
&__end
|
||||
flex: 1
|
||||
border-top-width: var(--v-field-border-width)
|
||||
border-bottom-width: var(--v-field-border-width)
|
||||
border-inline-end-width: var(--v-field-border-width)
|
||||
border-start-start-radius: 0
|
||||
border-start-end-radius: inherit
|
||||
border-end-end-radius: inherit
|
||||
border-end-start-radius: 0
|
||||
|
||||
@at-root #{selector.append('.v-field--reverse', &)}
|
||||
border-start-start-radius: inherit
|
||||
border-start-end-radius: 0
|
||||
border-end-end-radius: 0
|
||||
border-end-start-radius: inherit
|
||||
border-inline-end-width: 0
|
||||
border-inline-start-width: var(--v-field-border-width)
|
||||
|
||||
/* endregion */
|
||||
/* region LOADER */
|
||||
.v-field__loader
|
||||
top: calc(100% - 2px)
|
||||
left: 0
|
||||
position: absolute
|
||||
right: 0
|
||||
width: 100%
|
||||
border-top-left-radius: 0
|
||||
border-top-right-radius: 0
|
||||
border-bottom-left-radius: inherit
|
||||
border-bottom-right-radius: inherit
|
||||
overflow: hidden
|
||||
|
||||
.v-field--variant-outlined &
|
||||
top: calc(100% - 3px)
|
||||
width: calc(100% - #{$field-border-width} * 2)
|
||||
left: $field-border-width
|
||||
|
||||
/* endregion */
|
||||
/* region OVERLAY */
|
||||
.v-field__overlay
|
||||
border-radius: inherit
|
||||
pointer-events: none
|
||||
|
||||
@include tools.absolute()
|
||||
|
||||
.v-field--variant-filled
|
||||
.v-field__overlay
|
||||
background-color: currentColor
|
||||
opacity: $field-overlay-filled-opacity
|
||||
transition: opacity $field-subtle-transition-timing
|
||||
|
||||
&.v-field--has-background .v-field__overlay
|
||||
opacity: 0
|
||||
|
||||
@media (hover: hover)
|
||||
&:hover .v-field__overlay
|
||||
opacity: calc((#{$field-overlay-filled-opacity} + #{map.get(settings.$states, 'hover')}) * var(--v-theme-overlay-multiplier))
|
||||
|
||||
&.v-field--focused .v-field__overlay
|
||||
opacity: calc((#{$field-overlay-filled-opacity} + #{map.get(settings.$states, 'focus')}) * var(--v-theme-overlay-multiplier))
|
||||
|
||||
.v-field--variant-solo-filled
|
||||
.v-field__overlay
|
||||
background-color: currentColor
|
||||
opacity: $field-overlay-filled-opacity
|
||||
transition: opacity $field-subtle-transition-timing
|
||||
|
||||
@media (hover: hover)
|
||||
&:hover .v-field__overlay
|
||||
opacity: calc((#{$field-overlay-filled-opacity} + #{map.get(settings.$states, 'hover')}) * var(--v-theme-overlay-multiplier))
|
||||
|
||||
&.v-field--focused .v-field__overlay
|
||||
opacity: calc((#{$field-overlay-filled-opacity} + #{map.get(settings.$states, 'focus')}) * var(--v-theme-overlay-multiplier))
|
||||
|
||||
.v-field--variant-solo-inverted
|
||||
.v-field__overlay
|
||||
transition: opacity $field-subtle-transition-timing
|
||||
|
||||
&.v-field--has-background .v-field__overlay
|
||||
opacity: 0
|
||||
|
||||
@media (hover: hover)
|
||||
&:hover .v-field__overlay
|
||||
opacity: calc((#{.04} + #{map.get(settings.$states, 'hover')}) * var(--v-theme-overlay-multiplier))
|
||||
|
||||
&.v-field--focused .v-field__overlay
|
||||
background-color: $field-overlay-focused-background-color
|
||||
opacity: 1
|
||||
|
||||
/* endregion */
|
||||
/* region MODIFIERS */
|
||||
.v-field--reverse
|
||||
.v-field__field,
|
||||
.v-field__input,
|
||||
.v-field__outline
|
||||
flex-direction: row-reverse
|
||||
|
||||
.v-field__input, input
|
||||
text-align: end
|
||||
|
||||
.v-field--variant-filled,
|
||||
.v-field--variant-underlined
|
||||
.v-input--disabled &
|
||||
.v-field__outline::before
|
||||
border-image: repeating-linear-gradient(to right, $field-disabled-color 0px, $field-disabled-color 2px, transparent 2px, transparent 4px) 1 repeat
|
||||
|
||||
.v-field--loading
|
||||
.v-field__outline::after,
|
||||
.v-field__outline::before
|
||||
opacity: 0
|
||||
|
||||
/* endregion */
|
||||
|
||||
@media (forced-colors: active)
|
||||
.v-field
|
||||
.v-progress-linear
|
||||
border: none
|
||||
+117
@@ -0,0 +1,117 @@
|
||||
export declare const makeVFieldLabelProps: <Defaults extends {
|
||||
class?: unknown;
|
||||
style?: unknown;
|
||||
floating?: unknown;
|
||||
} = {}>(defaults?: Defaults | undefined) => {
|
||||
class: unknown extends Defaults["class"] ? import("vue").PropType<any> : {
|
||||
type: import("vue").PropType<unknown extends Defaults["class"] ? any : any>;
|
||||
default: unknown extends Defaults["class"] ? any : any;
|
||||
};
|
||||
style: unknown extends Defaults["style"] ? {
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
} : Omit<{
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["style"] ? import("vue").StyleValue : Defaults["style"] | import("vue").StyleValue>;
|
||||
default: unknown extends Defaults["style"] ? import("vue").StyleValue : Defaults["style"] | NonNullable<import("vue").StyleValue>;
|
||||
};
|
||||
floating: unknown extends Defaults["floating"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["floating"] ? boolean : boolean | Defaults["floating"]>;
|
||||
default: unknown extends Defaults["floating"] ? boolean : boolean | Defaults["floating"];
|
||||
};
|
||||
};
|
||||
export declare const VFieldLabel: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
floating: boolean;
|
||||
} & {
|
||||
class?: any;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, {
|
||||
style: import("vue").StyleValue;
|
||||
floating: boolean;
|
||||
}, true, {}, import("vue").SlotsType<Partial<{
|
||||
default: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
}>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
|
||||
P: {};
|
||||
B: {};
|
||||
D: {};
|
||||
C: {};
|
||||
M: {};
|
||||
Defaults: {};
|
||||
}, {
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
floating: boolean;
|
||||
} & {
|
||||
class?: any;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, {}, {}, {}, {}, {
|
||||
style: import("vue").StyleValue;
|
||||
floating: boolean;
|
||||
}>;
|
||||
__isFragment?: never;
|
||||
__isTeleport?: never;
|
||||
__isSuspense?: never;
|
||||
} & import("vue").ComponentOptionsBase<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
floating: boolean;
|
||||
} & {
|
||||
class?: any;
|
||||
} & {
|
||||
$children?: {
|
||||
default?: (() => import("vue").VNodeChild) | undefined;
|
||||
} | {
|
||||
$stable?: boolean;
|
||||
} | (() => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||
'v-slots'?: {
|
||||
default?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
} | undefined;
|
||||
} & {
|
||||
"v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {
|
||||
style: import("vue").StyleValue;
|
||||
floating: boolean;
|
||||
}, {}, string, import("vue").SlotsType<Partial<{
|
||||
default: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
}>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("../../util/index.js").FilterPropsOptions<{
|
||||
class: import("vue").PropType<any>;
|
||||
style: {
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
floating: BooleanConstructor;
|
||||
}, import("vue").ExtractPropTypes<{
|
||||
class: import("vue").PropType<any>;
|
||||
style: {
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
floating: BooleanConstructor;
|
||||
}>>;
|
||||
export type VFieldLabel = InstanceType<typeof VFieldLabel>;
|
||||
+25
@@ -0,0 +1,25 @@
|
||||
import { normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createVNode as _createVNode } from "vue";
|
||||
// Components
|
||||
import { VLabel } from "../VLabel/index.js"; // Composables
|
||||
import { makeComponentProps } from "../../composables/component.js"; // Utilities
|
||||
import { genericComponent, propsFactory, useRender } from "../../util/index.js";
|
||||
export const makeVFieldLabelProps = propsFactory({
|
||||
floating: Boolean,
|
||||
...makeComponentProps()
|
||||
}, 'VFieldLabel');
|
||||
export const VFieldLabel = genericComponent()({
|
||||
name: 'VFieldLabel',
|
||||
props: makeVFieldLabelProps(),
|
||||
setup(props, {
|
||||
slots
|
||||
}) {
|
||||
useRender(() => _createVNode(VLabel, {
|
||||
"class": _normalizeClass(['v-field-label', {
|
||||
'v-field-label--floating': props.floating
|
||||
}, props.class]),
|
||||
"style": _normalizeStyle(props.style)
|
||||
}, slots));
|
||||
return {};
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VFieldLabel.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"VFieldLabel.js","names":["VLabel","makeComponentProps","genericComponent","propsFactory","useRender","makeVFieldLabelProps","floating","Boolean","VFieldLabel","name","props","setup","slots","_createVNode","_normalizeClass","class","_normalizeStyle","style"],"sources":["../../../src/components/VField/VFieldLabel.tsx"],"sourcesContent":["// Components\nimport { VLabel } from '@/components/VLabel'\n\n// Composables\nimport { makeComponentProps } from '@/composables/component'\n\n// Utilities\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\nexport const makeVFieldLabelProps = propsFactory({\n floating: Boolean,\n\n ...makeComponentProps(),\n}, 'VFieldLabel')\n\nexport const VFieldLabel = genericComponent()({\n name: 'VFieldLabel',\n\n props: makeVFieldLabelProps(),\n\n setup (props, { slots }) {\n useRender(() => (\n <VLabel\n class={[\n 'v-field-label',\n { 'v-field-label--floating': props.floating },\n props.class,\n ]}\n style={ props.style }\n v-slots={ slots }\n />\n ))\n\n return {}\n },\n})\n\nexport type VFieldLabel = InstanceType<typeof VFieldLabel>\n"],"mappings":";AAAA;AAAA,SACSA,MAAM,8BAEf;AAAA,SACSC,kBAAkB,0CAE3B;AAAA,SACSC,gBAAgB,EAAEC,YAAY,EAAEC,SAAS;AAElD,OAAO,MAAMC,oBAAoB,GAAGF,YAAY,CAAC;EAC/CG,QAAQ,EAAEC,OAAO;EAEjB,GAAGN,kBAAkB,CAAC;AACxB,CAAC,EAAE,aAAa,CAAC;AAEjB,OAAO,MAAMO,WAAW,GAAGN,gBAAgB,CAAC,CAAC,CAAC;EAC5CO,IAAI,EAAE,aAAa;EAEnBC,KAAK,EAAEL,oBAAoB,CAAC,CAAC;EAE7BM,KAAKA,CAAED,KAAK,EAAE;IAAEE;EAAM,CAAC,EAAE;IACvBR,SAAS,CAAC,MAAAS,YAAA,CAAAb,MAAA;MAAA,SAAAc,eAAA,CAEC,CACL,eAAe,EACf;QAAE,yBAAyB,EAAEJ,KAAK,CAACJ;MAAS,CAAC,EAC7CI,KAAK,CAACK,KAAK,CACZ;MAAA,SAAAC,eAAA,CACON,KAAK,CAACO,KAAK;IAAA,GACTL,KAAK,CAElB,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC","ignoreList":[]}
|
||||
+61
@@ -0,0 +1,61 @@
|
||||
@forward '../VInput/variables';
|
||||
@use 'sass:map';
|
||||
@use '../../styles/settings';
|
||||
@use '../../styles/tools';
|
||||
@use '../VInput/variables' as *;
|
||||
|
||||
// INPUT
|
||||
$field-border-radius: settings.$border-radius-root !default;
|
||||
$field-rounded-border-radius: map.get(settings.$rounded, 'xl') !default;
|
||||
$field-color: tools.theme-color('on-surface', var(--v-medium-emphasis-opacity)) !default;
|
||||
$field-disabled-color: tools.theme-color('on-surface', var(--v-disabled-opacity)) !default;
|
||||
$field-error-color: rgb(var(--v-theme-error)) !default;
|
||||
$field-font-size: 16px !default;
|
||||
$field-letter-spacing: .009375em !default;
|
||||
$field-max-width: 100% !default;
|
||||
$field-transition-timing: .15s settings.$standard-easing !default;
|
||||
$field-subtle-transition-timing: 250ms settings.$standard-easing !default;
|
||||
$field-underlined-margin-bottom: 4px !default;
|
||||
$field-clearable-margin: 4px !default;
|
||||
$field-clearable-transition: .15s opacity, .15s width settings.$standard-easing !default;
|
||||
$field-chip-height: 24px !default;
|
||||
|
||||
// CONTROL
|
||||
$field-control-solo-background: rgb(var(--v-theme-surface)) !default;
|
||||
$field-control-solo-color: tools.theme-color('on-surface', var(--v-high-emphasis-opacity)) !default;
|
||||
$field-control-solo-elevation: 1 !default;
|
||||
$field-control-solo-inverted-color: tools.theme-color('on-surface', var(--v-high-emphasis-opacity)) !default;
|
||||
$field-control-solo-inverted-focused-color: rgb(var(--v-theme-on-surface-variant)) !default;
|
||||
$field-control-filled-background: tools.theme-color('on-surface', var(--v-idle-opacity)) !default;
|
||||
$field-control-padding-start: 16px !default;
|
||||
$field-control-padding-end: 16px !default;
|
||||
$field-control-padding-top: 8px !default;
|
||||
$field-control-padding-bottom: 4px !default;
|
||||
$field-control-affixed-padding: 12px !default;
|
||||
$field-control-affixed-inner-padding: 6px !default;
|
||||
$field-control-underlined-height: 48px !default;
|
||||
$field-control-underlined-padding-bottom: 2px !default;
|
||||
$field-control-height: 56px !default;
|
||||
|
||||
// INPUT
|
||||
$field-input-opacity: var(--v-high-emphasis-opacity) !default;
|
||||
$field-input-min-height: #{max(
|
||||
var(--v-input-control-height, $input-control-height),
|
||||
calc($input-font-size * $input-line-height + var(--v-field-input-padding-top) + var(--v-field-input-padding-bottom))
|
||||
)} !default;
|
||||
$field-input-padding-top: calc(var(--v-field-padding-top, $field-control-padding-top) + var(--v-input-padding-top, 0px)) !default;
|
||||
$field-input-padding-bottom: var(--v-field-padding-bottom, $field-control-padding-bottom) !default;
|
||||
$field-input-column-gap: 2px !default;
|
||||
$field-input-row-gap: 8px !default;
|
||||
|
||||
// LABEL
|
||||
$field-label-floating-scale: .75 !default;
|
||||
|
||||
// OUTLINE
|
||||
$field-outline-opacity: .38 !default;
|
||||
$field-border-width: 1px !default;
|
||||
$field-focused-border-width: 2px !default;
|
||||
|
||||
// OVERLAY
|
||||
$field-overlay-filled-opacity: 0.04 !default;
|
||||
$field-overlay-focused-background-color: rgb(var(--v-theme-surface-variant)) !default;
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
export { VField } from './VField.js';
|
||||
export { VFieldLabel } from './VFieldLabel.js';
|
||||
+3
@@ -0,0 +1,3 @@
|
||||
export { VField } from "./VField.js";
|
||||
export { VFieldLabel } from "./VFieldLabel.js";
|
||||
//# sourceMappingURL=index.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"index.js","names":["VField","VFieldLabel"],"sources":["../../../src/components/VField/index.ts"],"sourcesContent":["export { VField } from './VField'\nexport { VFieldLabel } from './VFieldLabel'\n"],"mappings":"SAASA,MAAM;AAAA,SACNC,WAAW","ignoreList":[]}
|
||||
Reference in New Issue
Block a user