@vuetify/nightly 3.0.0-alpha.8 → 3.0.0-beta.0

package/lib/components/VField/VField.css

@@ -0,0 +1,410 @@
+/* region INPUT */
+.v-field {
+  display: grid;
+  grid-template-areas: "prepend-inner field clear append-inner";
+  grid-template-columns: min-content auto 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-field-padding-start: 16px;
+  --v-field-padding-end: 16px;
+  --v-field-padding-top: 8px;
+  --v-field-padding-bottom: 6px;
+}
+.v-field--disabled {
+  opacity: var(--v-disabled-opacity);
+  pointer-events: none;
+}
+
+/* endregion */
+/* region MODIFIERS */
+.v-field--prepended {
+  padding-inline-start: 12px;
+  --v-field-padding-start: 6px;
+  --v-field-padding-end: 6px;
+}
+.v-field--appended {
+  padding-inline-end: 12px;
+}
+.v-field--variant-contained {
+  background: rgb(var(--v-theme-surface));
+  border-color: transparent;
+  color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
+  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+}
+.v-field--variant-contained, .v-field--variant-filled {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.v-field--variant-plain, .v-field--variant-underlined {
+  border-radius: 0;
+  padding: 0;
+  --v-field-padding-start: 0;
+  --v-field-padding-end: 0;
+  --v-field-padding-top: 0;
+}
+.v-field--variant-plain.v-field--single-line, .v-field--variant-underlined.v-field--single-line {
+  --v-field-padding-top: 0;
+}
+.v-field--variant-outlined, .v-field--single-line {
+  --v-field-padding-top: 0;
+}
+.v-input--density-default .v-field--variant-contained, .v-input--density-default .v-field--variant-filled {
+  --v-input-control-height: 56px;
+  --v-field-padding-bottom: 6px;
+}
+
+.v-input--density-comfortable .v-field--variant-contained, .v-input--density-comfortable .v-field--variant-filled {
+  --v-input-control-height: 48px;
+  --v-field-padding-bottom: 2px;
+}
+
+.v-input--density-compact .v-field--variant-contained, .v-input--density-compact .v-field--variant-filled {
+  --v-input-control-height: 40px;
+  --v-field-padding-bottom: -2px;
+}
+
+.v-input--density-default .v-field--variant-underlined {
+  --v-input-control-height: 40px;
+  --v-field-padding-bottom: 6px;
+}
+
+.v-input--density-comfortable .v-field--variant-underlined {
+  --v-input-control-height: 32px;
+  --v-field-padding-bottom: 4px;
+}
+
+.v-input--density-compact .v-field--variant-underlined {
+  --v-input-control-height: 24px;
+  --v-field-padding-bottom: 2px;
+}
+
+/* endregion */
+/* region ELEMENTS */
+.v-field__input {
+  align-self: stretch;
+  color: inherit;
+  display: flex;
+  flex-wrap: wrap;
+  letter-spacing: 0.009375em;
+  opacity: var(--v-high-emphasis-opacity);
+  padding-inline-start: var(--v-field-padding-start);
+  padding-inline-end: var(--v-field-padding-end);
+  padding-top: var(--v-field-padding-top, 8px);
+  width: 100%;
+}
+.v-field__input input {
+  letter-spacing: inherit;
+}
+.v-field__input:focus, .v-field__input:active {
+  outline: none;
+}
+.v-field__input:invalid {
+  box-shadow: none;
+}
+
+.v-field__field {
+  flex: 1 0;
+  min-height: var(--v-input-control-height, 56px);
+  grid-area: field;
+  padding-bottom: var(--v-field-padding-bottom, 6px);
+  position: relative;
+}
+
+/* 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__field,
+.v-field__prepend-inner,
+.v-field__append-inner,
+.v-field__clearable {
+  align-items: flex-start;
+  display: flex;
+  padding-top: var(--v-input-padding-top, 8px);
+}
+
+.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--disabled .v-field__append-inner > .v-icon,
+.v-field--error .v-field__append-inner > .v-icon,
+.v-field--disabled .v-field__clearable > .v-icon,
+.v-field--error .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;
+  margin-inline-start: 4px;
+  margin-inline-end: 4px;
+  transition: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+  transition-property: opacity, transform, width;
+}
+.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;
+  }
+}
+
+/* endregion */
+/* region LABEL */
+.v-label.v-field-label {
+  contain: layout paint;
+  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;
+  transform-origin: left center;
+  transition: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+  transition-property: opacity, transform;
+}
+.v-field--active .v-label.v-field-label {
+  visibility: hidden;
+}
+.v-field--disabled .v-label.v-field-label, .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;
+  max-width: 100%;
+}
+.v-field.v-field--active .v-label.v-field-label--floating {
+  visibility: visible;
+}
+.v-input--density-default .v-field--variant-contained .v-label.v-field-label--floating, .v-input--density-default .v-field--variant-filled .v-label.v-field-label--floating {
+  top: 7px;
+}
+
+.v-input--density-comfortable .v-field--variant-contained .v-label.v-field-label--floating, .v-input--density-comfortable .v-field--variant-filled .v-label.v-field-label--floating {
+  top: 5px;
+}
+
+.v-input--density-compact .v-field--variant-contained .v-label.v-field-label--floating, .v-input--density-compact .v-field--variant-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(-6px);
+  margin: 0;
+}
+.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-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);
+  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);
+  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);
+  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);
+}
+.v-field--variant-outlined .v-field__outline__start.v-locale--is-ltr, .v-locale--is-ltr .v-field--variant-outlined .v-field__outline__start {
+  border-radius: 4px 0 0 4px;
+}
+.v-field--variant-outlined .v-field__outline__start.v-locale--is-rtl, .v-locale--is-rtl .v-field--variant-outlined .v-field__outline__start {
+  border-radius: 0 4px 4px 0;
+}
+.v-field--variant-outlined .v-field__outline__notch {
+  flex: none;
+  position: relative;
+  border-width: 0 0 var(--v-field-border-width);
+}
+.v-field--variant-outlined .v-field__outline__notch::before, .v-field--variant-outlined .v-field__outline__notch::after {
+  opacity: var(--v-field-border-opacity);
+  transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  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);
+}
+.v-field--variant-outlined .v-field__outline__end.v-locale--is-ltr, .v-locale--is-ltr .v-field--variant-outlined .v-field__outline__end {
+  border-radius: 0 4px 4px 0;
+}
+.v-field--variant-outlined .v-field__outline__end.v-locale--is-rtl, .v-locale--is-rtl .v-field--variant-outlined .v-field__outline__end {
+  border-radius: 4px 0 0 4px;
+}
+
+/* endregion */
+/* region LOADER */
+.v-field__loader {
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  width: 100%;
+}
+
+/* endregion */
+/* region OVERLAY */
+.v-field--variant-filled .v-field__overlay {
+  background-color: currentColor;
+  border-radius: inherit;
+  opacity: 0.04;
+  pointer-events: none;
+  transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+.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.08 * var(--v-theme-overlay-multiplier));
+  }
+}
+.v-field--variant-filled.v-field--focused .v-field__overlay {
+  opacity: calc(0.16 * var(--v-theme-overlay-multiplier));
+}
+
+/* endregion */
+/* region MODIFIERS */
+.v-field--reverse .v-field__input.v-locale--is-ltr, .v-locale--is-ltr .v-field--reverse .v-field__input {
+  text-align: right;
+}
+.v-field--reverse .v-field__input.v-locale--is-rtl, .v-locale--is-rtl .v-field--reverse .v-field__input {
+  text-align: left;
+}
+
+.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, rgba(var(--v-theme-on-surface), var(--v-disabled-opacity)) 0px, rgba(var(--v-theme-on-surface), var(--v-disabled-opacity)) 2px, transparent 2px, transparent 4px) 1 repeat;
+}
+
+.v-field--loading .v-field__outline::after,
+.v-field--loading .v-field__outline::before {
+  opacity: 0;
+}
+
+/* endregion */

package/lib/components/VField/VField.mjs

@@ -0,0 +1,249 @@
+import { mergeProps as _mergeProps, Fragment as _Fragment, withDirectives as _withDirectives, vShow as _vShow, resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue";
+// Styles
+import "./VField.css"; // Components
+
+import { VExpandXTransition } from "../transitions/index.mjs";
+import { VIcon } from "../VIcon/index.mjs";
+import { VFieldLabel } from "./VFieldLabel.mjs"; // Composables
+
+import { LoaderSlot, makeLoaderProps, useLoader } from "../../composables/loader.mjs";
+import { makeThemeProps, provideTheme } from "../../composables/theme.mjs";
+import { useBackgroundColor, useTextColor } from "../../composables/color.mjs";
+import { makeFocusProps, useFocus } from "../../composables/focus.mjs"; // Utilities
+
+import { computed, ref, toRef, watch } from 'vue';
+import { convertToUnit, genericComponent, getUid, nullifyTransforms, pick, propsFactory, standardEasing, useRender } from "../../util/index.mjs"; // Types
+
+const allowedVariants = ['underlined', 'outlined', 'filled', 'contained', 'plain'];
+export const makeVFieldProps = propsFactory({
+  appendInnerIcon: String,
+  bgColor: String,
+  clearable: Boolean,
+  clearIcon: {
+    type: String,
+    default: '$clear'
+  },
+  active: Boolean,
+  color: String,
+  dirty: Boolean,
+  disabled: Boolean,
+  error: Boolean,
+  label: String,
+  persistentClear: Boolean,
+  prependInnerIcon: String,
+  reverse: Boolean,
+  singleLine: Boolean,
+  variant: {
+    type: String,
+    default: 'filled',
+    validator: v => allowedVariants.includes(v)
+  },
+  ...makeThemeProps(),
+  ...makeLoaderProps()
+}, 'v-field');
+export const VField = genericComponent()({
+  name: 'VField',
+  inheritAttrs: false,
+  props: {
+    id: String,
+    ...makeFocusProps(),
+    ...makeVFieldProps()
+  },
+  emits: {
+    'click:clear': e => true,
+    'click:prepend-inner': e => true,
+    'click:append-inner': e => true,
+    'click:control': e => true,
+    'update:focused': focused => true,
+    'update:modelValue': val => true
+  },
+
+  setup(props, _ref) {
+    let {
+      attrs,
+      emit,
+      slots
+    } = _ref;
+    const {
+      themeClasses
+    } = provideTheme(props);
+    const {
+      loaderClasses
+    } = useLoader(props);
+    const {
+      focusClasses,
+      isFocused,
+      focus,
+      blur
+    } = useFocus(props);
+    const isActive = computed(() => props.dirty || props.active);
+    const hasLabel = computed(() => !props.singleLine && !!(props.label || slots.label));
+    const uid = getUid();
+    const id = computed(() => props.id || `input-${uid}`);
+    const labelRef = ref();
+    const floatingLabelRef = ref();
+    const controlRef = ref();
+    const {
+      backgroundColorClasses,
+      backgroundColorStyles
+    } = useBackgroundColor(toRef(props, 'bgColor'));
+    const {
+      textColorClasses,
+      textColorStyles
+    } = useTextColor(computed(() => {
+      return isActive.value && isFocused.value && !props.error && !props.disabled ? props.color : undefined;
+    }));
+    watch(isActive, val => {
+      if (hasLabel.value) {
+        const el = labelRef.value.$el;
+        const targetEl = floatingLabelRef.value.$el;
+        const rect = nullifyTransforms(el);
+        const targetRect = targetEl.getBoundingClientRect();
+        const x = targetRect.x - rect.x;
+        const y = targetRect.y - rect.y - (rect.height / 2 - targetRect.height / 2);
+        const targetWidth = targetRect.width / 0.75;
+        const width = Math.abs(targetWidth - rect.width) > 1 ? {
+          maxWidth: convertToUnit(targetWidth)
+        } : undefined;
+        const duration = parseFloat(getComputedStyle(el).transitionDuration) * 1000;
+        const scale = parseFloat(getComputedStyle(targetEl).getPropertyValue('--v-field-label-scale'));
+        el.style.visibility = 'visible';
+        targetEl.style.visibility = 'hidden';
+        el.animate([{
+          transform: 'translate(0)'
+        }, {
+          transform: `translate(${x}px, ${y}px) scale(${scale})`,
+          ...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,
+      blur,
+      focus
+    }));
+
+    function onClick(e) {
+      if (e.target !== document.activeElement) {
+        e.preventDefault();
+      }
+
+      emit('click:control', e);
+    }
+
+    useRender(() => {
+      var _slots$prependInner, _slots$default, _slots$appendInner;
+
+      const isOutlined = props.variant === 'outlined';
+      const hasPrepend = slots.prependInner || props.prependInnerIcon;
+      const hasClear = !!(props.clearable || slots.clear);
+      const hasAppend = !!(slots.appendInner || props.appendInnerIcon || hasClear);
+      const label = slots.label ? slots.label({
+        label: props.label,
+        props: {
+          for: id.value
+        }
+      }) : props.label;
+      return _createVNode("div", _mergeProps({
+        "class": ['v-field', {
+          'v-field--active': isActive.value,
+          'v-field--appended': hasAppend,
+          'v-field--disabled': props.disabled,
+          'v-field--dirty': props.dirty,
+          'v-field--error': props.error,
+          '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--variant-${props.variant}`]: true
+        }, themeClasses.value, backgroundColorClasses.value, focusClasses.value, loaderClasses.value],
+        "style": [backgroundColorStyles.value, textColorStyles.value],
+        "onClick": onClick
+      }, attrs), [_createVNode("div", {
+        "class": "v-field__overlay"
+      }, null), _createVNode(LoaderSlot, {
+        "name": "v-field",
+        "active": props.loading,
+        "color": props.error ? 'error' : props.color
+      }, {
+        default: slots.loader
+      }), hasPrepend && _createVNode("div", {
+        "class": "v-field__prepend-inner"
+      }, [props.prependInnerIcon && _createVNode(VIcon, {
+        "onClick": e => emit('click:prepend-inner', e),
+        "icon": props.prependInnerIcon
+      }, null), slots == null ? void 0 : (_slots$prependInner = slots.prependInner) == null ? void 0 : _slots$prependInner.call(slots, slotProps.value)]), _createVNode("div", {
+        "class": "v-field__field"
+      }, [['contained', 'filled'].includes(props.variant) && hasLabel.value && _createVNode(VFieldLabel, {
+        "ref": floatingLabelRef,
+        "class": [textColorClasses.value],
+        "floating": true
+      }, {
+        default: () => [label]
+      }), _createVNode(VFieldLabel, {
+        "ref": labelRef,
+        "for": id.value
+      }, {
+        default: () => [label]
+      }), (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots, { ...slotProps.value,
+        props: {
+          id: id.value,
+          class: 'v-field__input'
+        },
+        focus,
+        blur
+      })]), hasClear && _createVNode(VExpandXTransition, null, {
+        default: () => [_withDirectives(_createVNode("div", {
+          "class": "v-field__clearable"
+        }, [slots.clear ? slots.clear() : _createVNode(VIcon, {
+          "onClick": e => emit('click:clear', e),
+          "icon": props.clearIcon
+        }, null)]), [[_vShow, props.dirty]])]
+      }), hasAppend && _createVNode("div", {
+        "class": "v-field__append-inner"
+      }, [slots == null ? void 0 : (_slots$appendInner = slots.appendInner) == null ? void 0 : _slots$appendInner.call(slots, slotProps.value), props.appendInnerIcon && _createVNode(VIcon, {
+        "onClick": e => emit('click:append-inner', e),
+        "icon": props.appendInnerIcon
+      }, null)]), _createVNode("div", {
+        "class": ['v-field__outline', textColorClasses.value]
+      }, [isOutlined && _createVNode(_Fragment, null, [_createVNode("div", {
+        "class": "v-field__outline__start"
+      }, null), hasLabel.value && _createVNode("div", {
+        "class": "v-field__outline__notch"
+      }, [_createVNode(VFieldLabel, {
+        "ref": floatingLabelRef,
+        "floating": true
+      }, {
+        default: () => [label]
+      })]), _createVNode("div", {
+        "class": "v-field__outline__end"
+      }, null)]), ['plain', 'underlined'].includes(props.variant) && hasLabel.value && _createVNode(VFieldLabel, {
+        "ref": floatingLabelRef,
+        "floating": true
+      }, {
+        default: () => [label]
+      })])]);
+    });
+    return {
+      controlRef
+    };
+  }
+
+});
+// TODO: this is kinda slow, might be better to implicitly inherit props instead
+export function filterFieldProps(attrs) {
+  return pick(attrs, Object.keys(VField.props));
+}
+//# sourceMappingURL=VField.mjs.map