@vuetify/nightly 3.0.0-alpha.3 → 3.0.0-beta.2

package/lib/components/VTextarea/VTextarea.mjs

@@ -1,100 +1,236 @@
-// @ts-nocheck
-
-/* eslint-disable */
+import { withDirectives as _withDirectives, mergeProps as _mergeProps, resolveDirective as _resolveDirective, vModelText as _vModelText, createVNode as _createVNode, Fragment as _Fragment } from "vue";
 // Styles
-import "./VTextarea.sass"; // Extensions
+import "./VTextarea.css"; // Components
+
+import { filterFieldProps, makeVFieldProps } from "../VField/VField.mjs";
+import { filterInputProps, makeVInputProps, VInput } from "../VInput/VInput.mjs";
+import { VCounter } from "../VCounter/index.mjs";
+import { VField } from "../VField/index.mjs"; // Composables
 
-import VTextField from "../VTextField/VTextField.mjs"; // Utilities
+import { useForwardRef } from "../../composables/forwardRef.mjs";
+import { useProxiedModel } from "../../composables/proxiedModel.mjs"; // Directives
 
-import mixins from "../../util/mixins.mjs"; // Types
+import Intersect from "../../directives/intersect/index.mjs"; // Utilities
 
-const baseMixins = mixins(VTextField);
-/* @vue/component */
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { convertToUnit, defineComponent, filterInputAttrs, useRender } from "../../util/index.mjs"; // Types
 
-export default baseMixins.extend({
-  name: 'v-textarea',
+export const VTextarea = defineComponent({
+  name: 'VTextarea',
+  directives: {
+    Intersect
+  },
+  inheritAttrs: false,
   props: {
     autoGrow: Boolean,
+    autofocus: Boolean,
+    counter: [Boolean, Number, String],
+    counterValue: Function,
+    hint: String,
+    persistentHint: Boolean,
+    prefix: String,
+    placeholder: String,
+    persistentPlaceholder: Boolean,
+    persistentCounter: Boolean,
     noResize: Boolean,
-    rowHeight: {
-      type: [Number, String],
-      default: 24,
-      validator: v => !isNaN(parseFloat(v))
-    },
     rows: {
       type: [Number, String],
       default: 5,
-      validator: v => !isNaN(parseInt(v, 10))
-    }
-  },
-  computed: {
-    classes() {
-      return {
-        'v-textarea': true,
-        'v-textarea--auto-grow': this.autoGrow,
-        'v-textarea--no-resize': this.noResizeHandle,
-        ...VTextField.options.computed.classes.call(this)
-      };
+      validator: v => !isNaN(parseFloat(v))
     },
-
-    noResizeHandle() {
-      return this.noResize || this.autoGrow;
-    }
-
-  },
-  watch: {
-    lazyValue() {
-      this.autoGrow && this.$nextTick(this.calculateInputHeight);
+    maxRows: {
+      type: [Number, String],
+      validator: v => !isNaN(parseFloat(v))
     },
-
-    rowHeight() {
-      this.autoGrow && this.$nextTick(this.calculateInputHeight);
-    }
-
+    suffix: String,
+    ...makeVInputProps(),
+    ...makeVFieldProps()
   },
-
-  mounted() {
-    setTimeout(() => {
-      this.autoGrow && this.calculateInputHeight();
-    }, 0);
+  emits: {
+    'click:clear': e => true,
+    'click:control': e => true,
+    'update:modelValue': val => true
   },
 
-  methods: {
-    calculateInputHeight() {
-      const input = this.$refs.input;
-      if (!input) return;
-      input.style.height = '0';
-      const height = input.scrollHeight;
-      const minHeight = parseInt(this.rows, 10) * parseFloat(this.rowHeight); // This has to be done ASAP, waiting for Vue
-      // to update the DOM causes ugly layout jumping
+  setup(props, _ref) {
+    let {
+      attrs,
+      emit,
+      slots
+    } = _ref;
+    const model = useProxiedModel(props, 'modelValue');
+    const counterValue = computed(() => {
+      return typeof props.counterValue === 'function' ? props.counterValue(model.value) : (model.value || '').toString().length;
+    });
+    const max = computed(() => {
+      if (attrs.maxlength) return attrs.maxlength;
+      if (!props.counter || typeof props.counter !== 'number' && typeof props.counter !== 'string') return undefined;
+      return props.counter;
+    });
+
+    function onIntersect(isIntersecting, entries) {
+      var _entries$0$target, _entries$0$target$foc;
+
+      if (!props.autofocus || !isIntersecting) return;
+      (_entries$0$target = entries[0].target) == null ? void 0 : (_entries$0$target$foc = _entries$0$target.focus) == null ? void 0 : _entries$0$target$foc.call(_entries$0$target);
+    }
 
-      input.style.height = Math.max(minHeight, height) + 'px';
-    },
+    const vInputRef = ref();
+    const vFieldRef = ref();
+    const isFocused = ref(false);
+    const controlHeight = ref('auto');
+    const textareaRef = ref();
+    const isActive = computed(() => isFocused.value || props.persistentPlaceholder);
+    const messages = computed(() => {
+      return props.messages.length ? props.messages : isActive.value || props.persistentHint ? props.hint : '';
+    });
+
+    function onFocus() {
+      if (textareaRef.value !== document.activeElement) {
+        var _textareaRef$value;
+
+        (_textareaRef$value = textareaRef.value) == null ? void 0 : _textareaRef$value.focus();
+      }
 
-    genInput() {
-      const input = VTextField.options.methods.genInput.call(this);
-      input.tag = 'textarea';
-      delete input.data.attrs.type;
-      input.data.attrs.rows = this.rows;
-      return input;
-    },
+      if (!isFocused.value) isFocused.value = true;
+    }
 
-    onInput(e) {
-      VTextField.options.methods.onInput.call(this, e);
-      this.autoGrow && this.calculateInputHeight();
-    },
+    function onControlClick(e) {
+      onFocus();
+      emit('click:control', e);
+    }
 
-    onKeyDown(e) {
-      // Prevents closing of a
-      // dialog when pressing
-      // enter
-      if (this.isFocused && e.keyCode === 13) {
-        e.stopPropagation();
-      }
+    function onClear(e) {
+      e.stopPropagation();
+      onFocus();
+      nextTick(() => {
+        model.value = '';
+        emit('click:clear', e);
+      });
+    }
 
-      this.$emit('keydown', e);
+    const sizerRef = ref();
+
+    function calculateInputHeight() {
+      if (!props.autoGrow) return;
+      nextTick(() => {
+        if (!sizerRef.value) return;
+        const style = getComputedStyle(sizerRef.value);
+        const padding = parseFloat(style.getPropertyValue('--v-field-padding-top')) + parseFloat(style.getPropertyValue('--v-field-padding-bottom'));
+        const height = sizerRef.value.scrollHeight;
+        const lineHeight = parseFloat(style.lineHeight);
+        const minHeight = parseFloat(props.rows) * lineHeight + padding;
+        const maxHeight = parseFloat(props.maxRows) * lineHeight + padding || Infinity;
+        controlHeight.value = convertToUnit(Math.min(maxHeight, Math.max(minHeight, height != null ? height : 0)));
+      });
     }
 
+    onMounted(calculateInputHeight);
+    watch(model, calculateInputHeight);
+    watch(() => props.rows, calculateInputHeight);
+    watch(() => props.maxRows, calculateInputHeight);
+    let observer;
+    watch(sizerRef, val => {
+      if (val) {
+        observer = new ResizeObserver(calculateInputHeight);
+        observer.observe(sizerRef.value);
+      } else {
+        var _observer;
+
+        (_observer = observer) == null ? void 0 : _observer.disconnect();
+      }
+    });
+    onBeforeUnmount(() => {
+      var _observer2;
+
+      (_observer2 = observer) == null ? void 0 : _observer2.disconnect();
+    });
+    useRender(() => {
+      const hasCounter = !!(slots.counter || props.counter || props.counterValue);
+      const [rootAttrs, inputAttrs] = filterInputAttrs(attrs);
+      const [{
+        modelValue: _,
+        ...inputProps
+      }] = filterInputProps(props);
+      const [fieldProps] = filterFieldProps(props);
+      return _createVNode(VInput, _mergeProps({
+        "modelValue": model.value,
+        "onUpdate:modelValue": $event => model.value = $event,
+        "class": ['v-textarea', {
+          'v-textarea--prefixed': props.prefix,
+          'v-textarea--suffixed': props.suffix,
+          'v-textarea--auto-grow': props.autoGrow,
+          'v-textarea--no-resize': props.noResize || props.autoGrow
+        }]
+      }, rootAttrs, inputProps, {
+        "messages": messages.value
+      }), { ...slots,
+        default: _ref2 => {
+          let {
+            isDisabled,
+            isDirty,
+            isReadonly,
+            isValid
+          } = _ref2;
+          return _createVNode(VField, _mergeProps({
+            "style": {
+              '--v-input-control-height': controlHeight.value
+            },
+            "onClick:control": onControlClick,
+            "onClick:clear": onClear,
+            "role": "textbox"
+          }, fieldProps, {
+            "active": isActive.value || isDirty.value,
+            "dirty": isDirty.value || props.dirty,
+            "focused": isFocused.value,
+            "error": isValid.value === false
+          }), { ...slots,
+            default: _ref3 => {
+              let {
+                props: {
+                  class: fieldClass,
+                  ...slotProps
+                }
+              } = _ref3;
+              return _createVNode(_Fragment, null, [props.prefix && _createVNode("span", {
+                "class": "v-text-field__prefix"
+              }, [props.prefix]), _withDirectives(_createVNode("textarea", _mergeProps({
+                "ref": textareaRef,
+                "class": fieldClass,
+                "onUpdate:modelValue": $event => model.value = $event,
+                "autofocus": props.autofocus,
+                "readonly": isReadonly.value,
+                "disabled": isDisabled.value,
+                "placeholder": props.placeholder,
+                "rows": props.rows,
+                "name": props.name,
+                "onFocus": onFocus,
+                "onBlur": () => isFocused.value = false
+              }, slotProps, inputAttrs), null), [[_vModelText, model.value], [_resolveDirective("intersect"), {
+                handler: onIntersect
+              }, null, {
+                once: true
+              }]]), props.autoGrow && _withDirectives(_createVNode("textarea", {
+                "class": [fieldClass, 'v-textarea__sizer'],
+                "onUpdate:modelValue": $event => model.value = $event,
+                "ref": sizerRef,
+                "readonly": true,
+                "aria-hidden": "true"
+              }, null), [[_vModelText, model.value]]), props.suffix && _createVNode("span", {
+                "class": "v-text-field__suffix"
+              }, [props.suffix])]);
+            }
+          });
+        },
+        details: hasCounter ? () => _createVNode(_Fragment, null, [_createVNode("span", null, null), _createVNode(VCounter, {
+          "active": props.persistentCounter || isFocused.value,
+          "value": counterValue.value,
+          "max": max.value
+        }, slots.counter)]) : undefined
+      });
+    });
+    return useForwardRef({}, vInputRef, vFieldRef, textareaRef);
   }
+
 });
 //# sourceMappingURL=VTextarea.mjs.map

package/lib/components/VTextarea/VTextarea.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VTextarea/VTextarea.ts"],"names":["VTextField","mixins","baseMixins","extend","name","props","autoGrow","Boolean","noResize","rowHeight","type","Number","String","default","validator","v","isNaN","parseFloat","rows","parseInt","computed","classes","noResizeHandle","options","call","watch","lazyValue","$nextTick","calculateInputHeight","mounted","setTimeout","methods","input","$refs","style","height","scrollHeight","minHeight","Math","max","genInput","tag","data","attrs","onInput","e","onKeyDown","isFocused","keyCode","stopPropagation","$emit"],"mappings":"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","sourcesContent":["// @ts-nocheck\n/* eslint-disable */\n\n// Styles\nimport './VTextarea.sass'\n\n// Extensions\nimport VTextField from '../VTextField/VTextField'\n\n// Utilities\nimport mixins from '../../util/mixins'\n\n// Types\nimport Vue from 'vue'\n\ninterface options extends Vue {\n  $refs: {\n    input: HTMLTextAreaElement\n  }\n}\n\nconst baseMixins = mixins<options &\n  InstanceType<typeof VTextField>\n>(\n  VTextField\n)\n\n/* @vue/component */\nexport default baseMixins.extend({\n  name: 'v-textarea',\n\n  props: {\n    autoGrow: Boolean,\n    noResize: Boolean,\n    rowHeight: {\n      type: [Number, String],\n      default: 24,\n      validator: (v: any) => !isNaN(parseFloat(v)),\n    },\n    rows: {\n      type: [Number, String],\n      default: 5,\n      validator: (v: any) => !isNaN(parseInt(v, 10)),\n    },\n  },\n\n  computed: {\n    classes (): object {\n      return {\n        'v-textarea': true,\n        'v-textarea--auto-grow': this.autoGrow,\n        'v-textarea--no-resize': this.noResizeHandle,\n        ...VTextField.options.computed.classes.call(this),\n      }\n    },\n    noResizeHandle (): boolean {\n      return this.noResize || this.autoGrow\n    },\n  },\n\n  watch: {\n    lazyValue () {\n      this.autoGrow && this.$nextTick(this.calculateInputHeight)\n    },\n    rowHeight () {\n      this.autoGrow && this.$nextTick(this.calculateInputHeight)\n    },\n  },\n\n  mounted () {\n    setTimeout(() => {\n      this.autoGrow && this.calculateInputHeight()\n    }, 0)\n  },\n\n  methods: {\n    calculateInputHeight () {\n      const input = this.$refs.input\n      if (!input) return\n\n      input.style.height = '0'\n      const height = input.scrollHeight\n      const minHeight = parseInt(this.rows, 10) * parseFloat(this.rowHeight)\n      // This has to be done ASAP, waiting for Vue\n      // to update the DOM causes ugly layout jumping\n      input.style.height = Math.max(minHeight, height) + 'px'\n    },\n    genInput () {\n      const input = VTextField.options.methods.genInput.call(this)\n\n      input.tag = 'textarea'\n      delete input.data!.attrs!.type\n      input.data!.attrs!.rows = this.rows\n\n      return input\n    },\n    onInput (e: Event) {\n      VTextField.options.methods.onInput.call(this, e)\n      this.autoGrow && this.calculateInputHeight()\n    },\n    onKeyDown (e: KeyboardEvent) {\n      // Prevents closing of a\n      // dialog when pressing\n      // enter\n      if (this.isFocused && e.keyCode === 13) {\n        e.stopPropagation()\n      }\n\n      this.$emit('keydown', e)\n    },\n  },\n})\n"],"file":"VTextarea.mjs"}
+{"version":3,"sources":["../../../src/components/VTextarea/VTextarea.tsx"],"names":["filterFieldProps","makeVFieldProps","filterInputProps","makeVInputProps","VInput","VCounter","VField","useForwardRef","useProxiedModel","Intersect","computed","nextTick","onBeforeUnmount","onMounted","ref","watch","convertToUnit","defineComponent","filterInputAttrs","useRender","VTextarea","name","directives","inheritAttrs","props","autoGrow","Boolean","autofocus","counter","Number","String","counterValue","Function","hint","persistentHint","prefix","placeholder","persistentPlaceholder","persistentCounter","noResize","rows","type","default","validator","v","isNaN","parseFloat","maxRows","suffix","emits","e","val","setup","attrs","emit","slots","model","value","toString","length","max","maxlength","undefined","onIntersect","isIntersecting","entries","target","focus","vInputRef","vFieldRef","isFocused","controlHeight","textareaRef","isActive","messages","onFocus","document","activeElement","onControlClick","onClear","stopPropagation","sizerRef","calculateInputHeight","style","getComputedStyle","padding","getPropertyValue","height","scrollHeight","lineHeight","minHeight","maxHeight","Infinity","Math","min","observer","ResizeObserver","observe","disconnect","hasCounter","rootAttrs","inputAttrs","modelValue","_","inputProps","fieldProps","isDisabled","isDirty","isReadonly","isValid","dirty","class","fieldClass","slotProps","handler","details"],"mappings":"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","sourcesContent":["// Styles\nimport './VTextarea.sass'\n\n// Components\nimport { filterFieldProps, makeVFieldProps } from '@/components/VField/VField'\nimport { filterInputProps, makeVInputProps, VInput } from '@/components/VInput/VInput'\nimport { VCounter } from '@/components/VCounter'\nimport { VField } from '@/components/VField'\n\n// Composables\nimport { useForwardRef } from '@/composables/forwardRef'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Directives\nimport Intersect from '@/directives/intersect'\n\n// Utilities\nimport { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'\nimport { convertToUnit, defineComponent, filterInputAttrs, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\n\nexport const VTextarea = defineComponent({\n  name: 'VTextarea',\n\n  directives: { Intersect },\n\n  inheritAttrs: false,\n\n  props: {\n    autoGrow: Boolean,\n    autofocus: Boolean,\n    counter: [Boolean, Number, String] as PropType<true | number | string>,\n    counterValue: Function as PropType<(value: any) => number>,\n    hint: String,\n    persistentHint: Boolean,\n    prefix: String,\n    placeholder: String,\n    persistentPlaceholder: Boolean,\n    persistentCounter: Boolean,\n    noResize: Boolean,\n    rows: {\n      type: [Number, String],\n      default: 5,\n      validator: (v: any) => !isNaN(parseFloat(v)),\n    },\n    maxRows: {\n      type: [Number, String],\n      validator: (v: any) => !isNaN(parseFloat(v)),\n    },\n    suffix: String,\n\n    ...makeVInputProps(),\n    ...makeVFieldProps(),\n  },\n\n  emits: {\n    'click:clear': (e: MouseEvent) => true,\n    'click:control': (e: MouseEvent) => true,\n    'update:modelValue': (val: string) => true,\n  },\n\n  setup (props, { attrs, emit, slots }) {\n    const model = useProxiedModel(props, 'modelValue')\n    const counterValue = computed(() => {\n      return typeof props.counterValue === 'function'\n        ? props.counterValue(model.value)\n        : (model.value || '').toString().length\n    })\n    const max = computed(() => {\n      if (attrs.maxlength) return attrs.maxlength as undefined\n\n      if (\n        !props.counter ||\n        (typeof props.counter !== 'number' &&\n        typeof props.counter !== 'string')\n      ) return undefined\n\n      return props.counter\n    })\n\n    function onIntersect (\n      isIntersecting: boolean,\n      entries: IntersectionObserverEntry[]\n    ) {\n      if (!props.autofocus || !isIntersecting) return\n\n      (entries[0].target as HTMLInputElement)?.focus?.()\n    }\n\n    const vInputRef = ref<VInput>()\n    const vFieldRef = ref<VInput>()\n    const isFocused = ref(false)\n    const controlHeight = ref('auto')\n    const textareaRef = ref<HTMLInputElement>()\n    const isActive = computed(() => (\n      isFocused.value ||\n      props.persistentPlaceholder\n    ))\n\n    const messages = computed(() => {\n      return props.messages.length\n        ? props.messages\n        : (isActive.value || props.persistentHint) ? props.hint : ''\n    })\n\n    function onFocus () {\n      if (textareaRef.value !== document.activeElement) {\n        textareaRef.value?.focus()\n      }\n\n      if (!isFocused.value) isFocused.value = true\n    }\n    function onControlClick (e: MouseEvent) {\n      onFocus()\n\n      emit('click:control', e)\n    }\n    function onClear (e: MouseEvent) {\n      e.stopPropagation()\n\n      onFocus()\n\n      nextTick(() => {\n        model.value = ''\n\n        emit('click:clear', e)\n      })\n    }\n\n    const sizerRef = ref<HTMLTextAreaElement>()\n    function calculateInputHeight () {\n      if (!props.autoGrow) return\n\n      nextTick(() => {\n        if (!sizerRef.value) return\n\n        const style = getComputedStyle(sizerRef.value)\n\n        const padding = parseFloat(style.getPropertyValue('--v-field-padding-top')) +\n        parseFloat(style.getPropertyValue('--v-field-padding-bottom'))\n\n        const height = sizerRef.value.scrollHeight\n        const lineHeight = parseFloat(style.lineHeight)\n        const minHeight = parseFloat(props.rows) * lineHeight + padding\n        const maxHeight = parseFloat(props.maxRows!) * lineHeight + padding || Infinity\n\n        controlHeight.value = convertToUnit(Math.min(maxHeight, Math.max(minHeight, height ?? 0)))\n      })\n    }\n\n    onMounted(calculateInputHeight)\n    watch(model, calculateInputHeight)\n    watch(() => props.rows, calculateInputHeight)\n    watch(() => props.maxRows, calculateInputHeight)\n\n    let observer: ResizeObserver | undefined\n    watch(sizerRef, val => {\n      if (val) {\n        observer = new ResizeObserver(calculateInputHeight)\n        observer.observe(sizerRef.value!)\n      } else {\n        observer?.disconnect()\n      }\n    })\n    onBeforeUnmount(() => {\n      observer?.disconnect()\n    })\n\n    useRender(() => {\n      const hasCounter = !!(slots.counter || props.counter || props.counterValue)\n      const [rootAttrs, inputAttrs] = filterInputAttrs(attrs)\n      const [{ modelValue: _, ...inputProps }] = filterInputProps(props)\n      const [fieldProps] = filterFieldProps(props)\n\n      return (\n        <VInput\n          v-model={ model.value }\n          class={[\n            'v-textarea',\n            {\n              'v-textarea--prefixed': props.prefix,\n              'v-textarea--suffixed': props.suffix,\n              'v-textarea--auto-grow': props.autoGrow,\n              'v-textarea--no-resize': props.noResize || props.autoGrow,\n            },\n          ]}\n          { ...rootAttrs }\n          { ...inputProps }\n          messages={ messages.value }\n        >\n          {{\n            ...slots,\n            default: ({\n              isDisabled,\n              isDirty,\n              isReadonly,\n              isValid,\n            }) => (\n              <VField\n                style={{\n                  '--v-input-control-height': controlHeight.value,\n                }}\n                onClick:control={ onControlClick }\n                onClick:clear={ onClear }\n                role=\"textbox\"\n                { ...fieldProps }\n                active={ isActive.value || isDirty.value }\n                dirty={ isDirty.value || props.dirty }\n                focused={ isFocused.value }\n                error={ isValid.value === false }\n              >\n                {{\n                  ...slots,\n                  default: ({\n                    props: { class: fieldClass, ...slotProps },\n                  }) => (\n                    <>\n                      { props.prefix && (\n                        <span class=\"v-text-field__prefix\">\n                          { props.prefix }\n                        </span>\n                      ) }\n\n                      <textarea\n                        ref={ textareaRef }\n                        class={ fieldClass }\n                        v-model={ model.value }\n                        v-intersect={[{\n                          handler: onIntersect,\n                        }, null, ['once']]}\n                        autofocus={ props.autofocus }\n                        readonly={ isReadonly.value }\n                        disabled={ isDisabled.value }\n                        placeholder={ props.placeholder }\n                        rows={ props.rows }\n                        name={ props.name }\n                        onFocus={ onFocus }\n                        onBlur={ () => (isFocused.value = false) }\n                        { ...slotProps }\n                        { ...inputAttrs }\n                      />\n\n                      { props.autoGrow && (\n                        <textarea\n                          class={[\n                            fieldClass,\n                            'v-textarea__sizer',\n                          ]}\n                          v-model={ model.value }\n                          ref={ sizerRef }\n                          readonly\n                          aria-hidden=\"true\"\n                        />\n                      )}\n\n                      { props.suffix && (\n                        <span class=\"v-text-field__suffix\">\n                          { props.suffix }\n                        </span>\n                      ) }\n                    </>\n                  ),\n                }}\n              </VField>\n            ),\n            details: hasCounter ? () => (\n              <>\n                <span />\n\n                <VCounter\n                  active={ props.persistentCounter || isFocused.value }\n                  value={ counterValue.value }\n                  max={ max.value }\n                  v-slots={ slots.counter }\n                />\n              </>\n            ) : undefined,\n          }}\n        </VInput>\n      )\n    })\n\n    return useForwardRef({}, vInputRef, vFieldRef, textareaRef)\n  },\n})\n\nexport type VTextarea = InstanceType<typeof VTextarea>\n"],"file":"VTextarea.mjs"}

package/lib/components/VTextarea/VTextarea.sass

@@ -1,91 +1,51 @@
-@import './_variables.scss'
+@forward './variables'
+@use 'sass:math'
+@use 'sass:selector'
+@use '../../styles/settings'
+@use '../../styles/tools'
+@use './variables' as *
+@use '../VInput/variables' as *
 
 .v-textarea
-  textarea
-    align-self: stretch
+  .v-field__input
     flex: 1 1 auto
     line-height: $textarea-line-height
-    max-width: 100%
-    min-height: $textarea-min-height
     outline: none
-    padding: $textarea-padding
-    width: 100%
-
-  .v-text-field__prefix,
-  .v-text-field__suffix
-    padding-top: $textarea-prefix-padding-top
-    align-self: start
-
-  &.v-text-field--box,
-  &.v-text-field--enclosed
-    .v-text-field__prefix,
-    textarea
-      margin-top: $textarea-box-enclosed-prefix-margin-top
-
-    &.v-text-field--single-line,
-    &.v-text-field--outlined
-      &:not(.v-input--dense)
-        .v-text-field__prefix,
-        .v-text-field__suffix,
-        textarea
-          margin-top: $textarea-box-enclosed-single-outlined-margin-top
-
-        .v-label
-          top: $textarea-box-enclosed-single-outlined-label-top
-
-      &.v-input--dense
-        .v-text-field__prefix,
-        .v-text-field__suffix,
-        textarea
-          margin-top: $textarea-dense-box-enclosed-single-outlined-margin-top
-
-        .v-input__prepend-inner,
-        .v-input__prepend-outer,
-        .v-input__append-inner,
-        .v-input__append-outer
-          align-self: flex-start
-          margin-top: $textarea-dense-append-prepend-margin-top
-
-  &.v-text-field--solo
-    align-items: flex-start
-
-    // Essentially revert styles
-    // applied by v-text-field
-    .v-input__prepend-inner,
-    .v-input__prepend-outer,
-    .v-input__append-inner,
-    .v-input__append-outer
-      align-self: flex-start
-      margin-top: $textarea-solo-append-prepend-margin-top
-
-    .v-input__append-inner
-      +ltr()
-        padding-left: $textarea-solo-append-padding
-
-      +rtl()
-        padding-right: $textarea-solo-append-padding
+    mask-image: linear-gradient(to bottom, transparent, transparent calc(var(--v-field-padding-top, 0) / 1.25), black var(--v-field-padding-top, 0))
 
   &--auto-grow
-    textarea
+    .v-field__input
       overflow: hidden
 
   &--no-resize
-    textarea
+    .v-field__input
       resize: none
 
-  &.v-text-field--enclosed
-    .v-text-field__slot
-      align-self: stretch
+  &__sizer
+    visibility: hidden
+    position: absolute
+    top: 0
+    left: 0
+    height: 0 !important
+    pointer-events: none
 
-      +ltr()
-        margin-right: $textarea-enclosed-text-slot-margin
+  .v-field--has-label
+    textarea
+      opacity: 0
+
+  .v-field--active
+    textarea
+      opacity: 1
 
-      +rtl()
-        margin-left: $textarea-enclosed-text-slot-margin
+  textarea
+    flex: 1
+    min-width: 0
+    transition: .15s opacity settings.$standard-easing
 
-      textarea
-        +ltr()
-          padding-right: $textarea-enclosed-text-slot-padding
+    &:focus,
+    &:active
+      outline: none
 
-        +rtl()
-          padding-left: $textarea-enclosed-text-slot-padding
+    // Remove Firefox red outline
+    &:invalid
+      box-shadow: none

package/lib/components/VTextarea/_variables.scss

@@ -1,4 +1,4 @@
-@import '../../styles/styles.sass';
+@use '../../styles/settings';
 
 $textarea-box-enclosed-prefix-margin-top: 24px !default;
 $textarea-box-enclosed-single-outlined-label-top: 18px !default;
@@ -7,9 +7,7 @@ $textarea-dense-box-enclosed-single-outlined-margin-top: 6px !default;
 $textarea-dense-append-prepend-margin-top: 8px !default;
 $textarea-enclosed-text-slot-margin: -12px !default;
 $textarea-enclosed-text-slot-padding: 12px !default;
-$textarea-line-height: 1.75rem !default;
-$textarea-min-height: 32px !default;
-$textarea-padding: 0 !default;
+$textarea-line-height: 1.75 !default;
 $textarea-prefix-padding-top: 2px !default;
 $textarea-solo-append-padding: 12px !default;
 $textarea-solo-append-prepend-margin-top: 12px !default;

package/lib/components/VTextarea/index.mjs

@@ -1,4 +1,2 @@
-import VTextarea from "./VTextarea.mjs";
-export { VTextarea };
-export default VTextarea;
+export { VTextarea } from "./VTextarea.mjs";
 //# sourceMappingURL=index.mjs.map

package/lib/components/VTextarea/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VTextarea/index.ts"],"names":["VTextarea"],"mappings":"OAAOA,S;AAEP,SAASA,SAAT;AACA,eAAeA,SAAf","sourcesContent":["import VTextarea from './VTextarea'\n\nexport { VTextarea }\nexport default VTextarea\n"],"file":"index.mjs"}
+{"version":3,"sources":["../../../src/components/VTextarea/index.ts"],"names":["VTextarea"],"mappings":"SAASA,S","sourcesContent":["export { VTextarea } from './VTextarea'\n"],"file":"index.mjs"}

package/lib/components/VThemeProvider/VThemeProvider.css

@@ -0,0 +1,4 @@
+.v-theme-provider {
+  background: rgb(var(--v-theme-background));
+  color: rgb(var(--v-theme-on-background));
+}

package/lib/components/VThemeProvider/VThemeProvider.mjs

@@ -1,30 +1,35 @@
 import { createVNode as _createVNode } from "vue";
 // Styles
-import "./VThemeProvider.sass"; // Utilities
+import "./VThemeProvider.css"; // Composables
 
-import { defineComponent } from 'vue';
-import { provideTheme } from "../../composables/theme.mjs";
-import { makeProps } from "../../util/index.mjs";
-export default defineComponent({
+import { makeThemeProps, provideTheme } from "../../composables/theme.mjs";
+import { makeTagProps } from "../../composables/tag.mjs"; // Utilities
+
+import { defineComponent } from "../../util/index.mjs";
+export const VThemeProvider = defineComponent({
   name: 'VThemeProvider',
-  props: makeProps({
-    theme: {
-      type: String
-    },
-    // TODO: Better name
-    newContext: {
-      type: Boolean
-    }
-  }),
+  props: {
+    withBackground: Boolean,
+    ...makeThemeProps(),
+    ...makeTagProps()
+  },
 
-  setup(props, context) {
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
     const {
       themeClasses
-    } = provideTheme(props, context);
+    } = provideTheme(props);
     return () => {
-      return _createVNode("div", {
+      var _slots$default, _slots$default2;
+
+      if (!props.withBackground) return (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots);
+      return _createVNode(props.tag, {
         "class": ['v-theme-provider', themeClasses.value]
-      }, [_createVNode("div", null, [context.slots.default == null ? void 0 : context.slots.default()])], 2);
+      }, {
+        default: () => [(_slots$default2 = slots.default) == null ? void 0 : _slots$default2.call(slots)]
+      });
     };
   }
 

package/lib/components/VThemeProvider/VThemeProvider.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VThemeProvider/VThemeProvider.tsx"],"names":["defineComponent","provideTheme","makeProps","name","props","theme","type","String","newContext","Boolean","setup","context","themeClasses","value","slots","default"],"mappings":";AAAA;AACA,+B,CAEA;;AACA,SAASA,eAAT,QAAgC,KAAhC;SACSC,Y;SACAC,S;AAET,eAAeF,eAAe,CAAC;AAC7BG,EAAAA,IAAI,EAAE,gBADuB;AAG7BC,EAAAA,KAAK,EAAEF,SAAS,CAAC;AACfG,IAAAA,KAAK,EAAE;AACLC,MAAAA,IAAI,EAAEC;AADD,KADQ;AAIf;AACAC,IAAAA,UAAU,EAAE;AACVF,MAAAA,IAAI,EAAEG;AADI;AALG,GAAD,CAHa;;AAa7BC,EAAAA,KAAK,CAAEN,KAAF,EAASO,OAAT,EAAkB;AACrB,UAAM;AAAEC,MAAAA;AAAF,QAAmBX,YAAY,CAACG,KAAD,EAAQO,OAAR,CAArC;AAEA,WAAO,MAAM;AACX;AAAA,iBACc,CAAC,kBAAD,EAAqBC,YAAY,CAACC,KAAlC;AADd,qCAEWF,OAAO,CAACG,KAAR,CAAcC,OAFzB,oBAEWJ,OAAO,CAACG,KAAR,CAAcC,OAAd,EAFX;AAKD,KAND;AAOD;;AAvB4B,CAAD,CAA9B","sourcesContent":["// Styles\nimport './VThemeProvider.sass'\n\n// Utilities\nimport { defineComponent } from 'vue'\nimport { provideTheme } from '@/composables/theme'\nimport { makeProps } from '@/util'\n\nexport default defineComponent({\n  name: 'VThemeProvider',\n\n  props: makeProps({\n    theme: {\n      type: String,\n    },\n    // TODO: Better name\n    newContext: {\n      type: Boolean,\n    },\n  }),\n\n  setup (props, context) {\n    const { themeClasses } = provideTheme(props, context)\n\n    return () => {\n      return (\n        <div class={['v-theme-provider', themeClasses.value]}>\n          <div>{ context.slots.default?.() }</div>\n        </div>\n      )\n    }\n  },\n})\n"],"file":"VThemeProvider.mjs"}
+{"version":3,"sources":["../../../src/components/VThemeProvider/VThemeProvider.tsx"],"names":["makeThemeProps","provideTheme","makeTagProps","defineComponent","VThemeProvider","name","props","withBackground","Boolean","setup","slots","themeClasses","default","value"],"mappings":";AAAA;AACA,8B,CAEA;;SACSA,c,EAAgBC,Y;SAChBC,Y,qCAET;;SACSC,e;AAET,OAAO,MAAMC,cAAc,GAAGD,eAAe,CAAC;AAC5CE,EAAAA,IAAI,EAAE,gBADsC;AAG5CC,EAAAA,KAAK,EAAE;AACLC,IAAAA,cAAc,EAAEC,OADX;AAGL,OAAGR,cAAc,EAHZ;AAIL,OAAGE,YAAY;AAJV,GAHqC;;AAU5CO,EAAAA,KAAK,CAAEH,KAAF,QAAoB;AAAA,QAAX;AAAEI,MAAAA;AAAF,KAAW;AACvB,UAAM;AAAEC,MAAAA;AAAF,QAAmBV,YAAY,CAACK,KAAD,CAArC;AAEA,WAAO,MAAM;AAAA;;AACX,UAAI,CAACA,KAAK,CAACC,cAAX,EAA2B,yBAAOG,KAAK,CAACE,OAAb,qBAAO,oBAAAF,KAAK,CAAZ;AAE3B;AAAA,iBACoB,CAAC,kBAAD,EAAqBC,YAAY,CAACE,KAAlC;AADpB;AAAA,2CAEMH,KAAK,CAACE,OAFZ,qBAEM,qBAAAF,KAAK,CAFX;AAAA;AAKD,KARD;AASD;;AAtB2C,CAAD,CAAtC","sourcesContent":["// Styles\nimport './VThemeProvider.sass'\n\n// Composables\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { makeTagProps } from '@/composables/tag'\n\n// Utilities\nimport { defineComponent } from '@/util'\n\nexport const VThemeProvider = defineComponent({\n  name: 'VThemeProvider',\n\n  props: {\n    withBackground: Boolean,\n\n    ...makeThemeProps(),\n    ...makeTagProps(),\n  },\n\n  setup (props, { slots }) {\n    const { themeClasses } = provideTheme(props)\n\n    return () => {\n      if (!props.withBackground) return slots.default?.()\n\n      return (\n        <props.tag class={['v-theme-provider', themeClasses.value]}>\n          { slots.default?.() }\n        </props.tag>\n      )\n    }\n  },\n})\n"],"file":"VThemeProvider.mjs"}

package/lib/components/VThemeProvider/index.mjs

@@ -1,2 +1,2 @@
-export { default as VThemeProvider } from "./VThemeProvider.mjs";
+export { VThemeProvider } from "./VThemeProvider.mjs";
 //# sourceMappingURL=index.mjs.map

package/lib/components/VThemeProvider/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VThemeProvider/index.ts"],"names":["default","VThemeProvider"],"mappings":"SAASA,OAAO,IAAIC,c","sourcesContent":["export { default as VThemeProvider } from './VThemeProvider'\n"],"file":"index.mjs"}
+{"version":3,"sources":["../../../src/components/VThemeProvider/index.ts"],"names":["VThemeProvider"],"mappings":"SAASA,c","sourcesContent":["export { VThemeProvider } from './VThemeProvider'\n"],"file":"index.mjs"}

package/lib/components/VTimePicker/VTimePicker.mjs

@@ -5,8 +5,8 @@
 import VTimePickerTitle from "./VTimePickerTitle.mjs";
 import VTimePickerClock from "./VTimePickerClock.mjs"; // Mixins
 
-import Picker from "../../mixins/picker/index.mjs";
-import PickerButton from "../../mixins/picker-button/index.mjs"; // Utils
+import Picker from "../../mixins/picker.mjs";
+import PickerButton from "../../mixins/picker-button.mjs"; // Utils
 
 import { createRange } from "../../util/helpers.mjs";
 import pad from "../VDatePicker/util/pad.mjs";
@@ -178,7 +178,7 @@ export default mixins(Picker, PickerButton
   methods: {
     genValue() {
       if (this.inputHour != null && this.inputMinute != null && (!this.useSeconds || this.inputSecond != null)) {
-        return "".concat(pad(this.inputHour), ":").concat(pad(this.inputMinute)) + (this.useSeconds ? ":".concat(pad(this.inputSecond)) : '');
+        return `${pad(this.inputHour)}:${pad(this.inputMinute)}` + (this.useSeconds ? `:${pad(this.inputSecond)}` : '');
       }
 
       return null;
@@ -239,7 +239,7 @@ export default mixins(Picker, PickerButton
     },
 
     onChange(value) {
-      this.$emit("click:".concat(selectingNames[this.selecting]), value);
+      this.$emit(`click:${selectingNames[this.selecting]}`, value);
       const emitChange = this.selecting === (this.useSeconds ? SelectingTimes.Second : SelectingTimes.Minute);
 
       if (this.selecting === SelectingTimes.Hour) {