@vuetify/nightly 3.0.0-beta.3 → 3.0.0-beta.6

package/lib/components/VTextarea/VTextarea.mjs

@@ -1,16 +1,16 @@
-import { withDirectives as _withDirectives, mergeProps as _mergeProps, resolveDirective as _resolveDirective, vModelText as _vModelText, createVNode as _createVNode, Fragment as _Fragment } from "vue";
+import { vModelText as _vModelText, withDirectives as _withDirectives, mergeProps as _mergeProps, resolveDirective as _resolveDirective, createVNode as _createVNode, Fragment as _Fragment } from "vue";
 // Styles
 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 { VField } from "../VField/index.mjs"; // Directives
 
-import { useForwardRef } from "../../composables/forwardRef.mjs";
-import { useProxiedModel } from "../../composables/proxiedModel.mjs"; // Directives
+import Intersect from "../../directives/intersect/index.mjs"; // Composables
 
-import Intersect from "../../directives/intersect/index.mjs"; // Utilities
+import { useForwardRef } from "../../composables/forwardRef.mjs";
+import { useProxiedModel } from "../../composables/proxiedModel.mjs"; // Utilities
 
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import { convertToUnit, defineComponent, filterInputAttrs, useRender } from "../../util/index.mjs"; // Types
@@ -109,6 +109,10 @@ export const VTextarea = defineComponent({
       });
     }
 
+    function onInput(e) {
+      model.value = e.target.value;
+    }
+
     const sizerRef = ref();
 
     function calculateInputHeight() {
@@ -147,6 +151,7 @@ export const VTextarea = defineComponent({
     });
     useRender(() => {
       const hasCounter = !!(slots.counter || props.counter || props.counterValue);
+      const hasDetails = !!(hasCounter || slots.details);
       const [rootAttrs, inputAttrs] = filterInputAttrs(attrs);
       const [{
         modelValue: _,
@@ -197,7 +202,8 @@ export const VTextarea = defineComponent({
               }, [props.prefix]), _withDirectives(_createVNode("textarea", _mergeProps({
                 "ref": textareaRef,
                 "class": fieldClass,
-                "onUpdate:modelValue": $event => model.value = $event,
+                "value": model.value,
+                "onInput": onInput,
                 "autofocus": props.autofocus,
                 "readonly": isReadonly.value,
                 "disabled": isDisabled.value,
@@ -206,7 +212,7 @@ export const VTextarea = defineComponent({
                 "name": props.name,
                 "onFocus": onFocus,
                 "onBlur": () => isFocused.value = false
-              }, slotProps, inputAttrs), null), [[_vModelText, model.value], [_resolveDirective("intersect"), {
+              }, slotProps, inputAttrs), null), [[_resolveDirective("intersect"), {
                 handler: onIntersect
               }, null, {
                 once: true
@@ -222,11 +228,15 @@ export const VTextarea = defineComponent({
             }
           });
         },
-        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
+        details: hasDetails ? slotProps => {
+          var _slots$details;
+
+          return _createVNode(_Fragment, null, [(_slots$details = slots.details) == null ? void 0 : _slots$details.call(slots, slotProps), 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);

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

@@ -1 +1 @@
-{"version":3,"file":"VTextarea.mjs","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"],"sources":["../../../src/components/VTextarea/VTextarea.tsx"],"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"],"mappings":";AAAA;AACA,yB,CAEA;;SACSA,gB,EAAkBC,e;SAClBC,gB,EAAkBC,e,EAAiBC,M;SACnCC,Q;SACAC,M,+BAET;;SACSC,a;SACAC,e,8CAET;;OACOC,S,8CAEP;;AACA,SAASC,QAAT,EAAmBC,QAAnB,EAA6BC,eAA7B,EAA8CC,SAA9C,EAAyDC,GAAzD,EAA8DC,KAA9D,QAA2E,KAA3E;SACSC,a,EAAeC,e,EAAiBC,gB,EAAkBC,S,gCAE3D;;AAGA,OAAO,MAAMC,SAAS,GAAGH,eAAe,CAAC;EACvCI,IAAI,EAAE,WADiC;EAGvCC,UAAU,EAAE;IAAEb;EAAF,CAH2B;EAKvCc,YAAY,EAAE,KALyB;EAOvCC,KAAK,EAAE;IACLC,QAAQ,EAAEC,OADL;IAELC,SAAS,EAAED,OAFN;IAGLE,OAAO,EAAE,CAACF,OAAD,EAAUG,MAAV,EAAkBC,MAAlB,CAHJ;IAILC,YAAY,EAAEC,QAJT;IAKLC,IAAI,EAAEH,MALD;IAMLI,cAAc,EAAER,OANX;IAOLS,MAAM,EAAEL,MAPH;IAQLM,WAAW,EAAEN,MARR;IASLO,qBAAqB,EAAEX,OATlB;IAULY,iBAAiB,EAAEZ,OAVd;IAWLa,QAAQ,EAAEb,OAXL;IAYLc,IAAI,EAAE;MACJC,IAAI,EAAE,CAACZ,MAAD,EAASC,MAAT,CADF;MAEJY,OAAO,EAAE,CAFL;MAGJC,SAAS,EAAGC,CAAD,IAAY,CAACC,KAAK,CAACC,UAAU,CAACF,CAAD,CAAX;IAHzB,CAZD;IAiBLG,OAAO,EAAE;MACPN,IAAI,EAAE,CAACZ,MAAD,EAASC,MAAT,CADC;MAEPa,SAAS,EAAGC,CAAD,IAAY,CAACC,KAAK,CAACC,UAAU,CAACF,CAAD,CAAX;IAFtB,CAjBJ;IAqBLI,MAAM,EAAElB,MArBH;IAuBL,GAAG3B,eAAe,EAvBb;IAwBL,GAAGF,eAAe;EAxBb,CAPgC;EAkCvCgD,KAAK,EAAE;IACL,eAAgBC,CAAD,IAAmB,IAD7B;IAEL,iBAAkBA,CAAD,IAAmB,IAF/B;IAGL,qBAAsBC,GAAD,IAAiB;EAHjC,CAlCgC;;EAwCvCC,KAAK,CAAE5B,KAAF,QAAiC;IAAA,IAAxB;MAAE6B,KAAF;MAASC,IAAT;MAAeC;IAAf,CAAwB;IACpC,MAAMC,KAAK,GAAGhD,eAAe,CAACgB,KAAD,EAAQ,YAAR,CAA7B;IACA,MAAMO,YAAY,GAAGrB,QAAQ,CAAC,MAAM;MAClC,OAAO,OAAOc,KAAK,CAACO,YAAb,KAA8B,UAA9B,GACHP,KAAK,CAACO,YAAN,CAAmByB,KAAK,CAACC,KAAzB,CADG,GAEH,CAACD,KAAK,CAACC,KAAN,IAAe,EAAhB,EAAoBC,QAApB,GAA+BC,MAFnC;IAGD,CAJ4B,CAA7B;IAKA,MAAMC,GAAG,GAAGlD,QAAQ,CAAC,MAAM;MACzB,IAAI2C,KAAK,CAACQ,SAAV,EAAqB,OAAOR,KAAK,CAACQ,SAAb;MAErB,IACE,CAACrC,KAAK,CAACI,OAAP,IACC,OAAOJ,KAAK,CAACI,OAAb,KAAyB,QAAzB,IACD,OAAOJ,KAAK,CAACI,OAAb,KAAyB,QAH3B,EAIE,OAAOkC,SAAP;MAEF,OAAOtC,KAAK,CAACI,OAAb;IACD,CAVmB,CAApB;;IAYA,SAASmC,WAAT,CACEC,cADF,EAEEC,OAFF,EAGE;MAAA;;MACA,IAAI,CAACzC,KAAK,CAACG,SAAP,IAAoB,CAACqC,cAAzB,EAAyC;MAEzC,qBAACC,OAAO,CAAC,CAAD,CAAP,CAAWC,MAAZ,gEAAyCC,KAAzC;IACD;;IAED,MAAMC,SAAS,GAAGtD,GAAG,EAArB;IACA,MAAMuD,SAAS,GAAGvD,GAAG,EAArB;IACA,MAAMwD,SAAS,GAAGxD,GAAG,CAAC,KAAD,CAArB;IACA,MAAMyD,aAAa,GAAGzD,GAAG,CAAC,MAAD,CAAzB;IACA,MAAM0D,WAAW,GAAG1D,GAAG,EAAvB;IACA,MAAM2D,QAAQ,GAAG/D,QAAQ,CAAC,MACxB4D,SAAS,CAACb,KAAV,IACAjC,KAAK,CAACa,qBAFiB,CAAzB;IAKA,MAAMqC,QAAQ,GAAGhE,QAAQ,CAAC,MAAM;MAC9B,OAAOc,KAAK,CAACkD,QAAN,CAAef,MAAf,GACHnC,KAAK,CAACkD,QADH,GAEFD,QAAQ,CAAChB,KAAT,IAAkBjC,KAAK,CAACU,cAAzB,GAA2CV,KAAK,CAACS,IAAjD,GAAwD,EAF5D;IAGD,CAJwB,CAAzB;;IAMA,SAAS0C,OAAT,GAAoB;MAClB,IAAIH,WAAW,CAACf,KAAZ,KAAsBmB,QAAQ,CAACC,aAAnC,EAAkD;QAAA;;QAChD,sBAAAL,WAAW,CAACf,KAAZ,wCAAmBU,KAAnB;MACD;;MAED,IAAI,CAACG,SAAS,CAACb,KAAf,EAAsBa,SAAS,CAACb,KAAV,GAAkB,IAAlB;IACvB;;IACD,SAASqB,cAAT,CAAyB5B,CAAzB,EAAwC;MACtCyB,OAAO;MAEPrB,IAAI,CAAC,eAAD,EAAkBJ,CAAlB,CAAJ;IACD;;IACD,SAAS6B,OAAT,CAAkB7B,CAAlB,EAAiC;MAC/BA,CAAC,CAAC8B,eAAF;MAEAL,OAAO;MAEPhE,QAAQ,CAAC,MAAM;QACb6C,KAAK,CAACC,KAAN,GAAc,EAAd;QAEAH,IAAI,CAAC,aAAD,EAAgBJ,CAAhB,CAAJ;MACD,CAJO,CAAR;IAKD;;IAED,MAAM+B,QAAQ,GAAGnE,GAAG,EAApB;;IACA,SAASoE,oBAAT,GAAiC;MAC/B,IAAI,CAAC1D,KAAK,CAACC,QAAX,EAAqB;MAErBd,QAAQ,CAAC,MAAM;QACb,IAAI,CAACsE,QAAQ,CAACxB,KAAd,EAAqB;QAErB,MAAM0B,KAAK,GAAGC,gBAAgB,CAACH,QAAQ,CAACxB,KAAV,CAA9B;QAEA,MAAM4B,OAAO,GAAGvC,UAAU,CAACqC,KAAK,CAACG,gBAAN,CAAuB,uBAAvB,CAAD,CAAV,GAChBxC,UAAU,CAACqC,KAAK,CAACG,gBAAN,CAAuB,0BAAvB,CAAD,CADV;QAGA,MAAMC,MAAM,GAAGN,QAAQ,CAACxB,KAAT,CAAe+B,YAA9B;QACA,MAAMC,UAAU,GAAG3C,UAAU,CAACqC,KAAK,CAACM,UAAP,CAA7B;QACA,MAAMC,SAAS,GAAG5C,UAAU,CAACtB,KAAK,CAACgB,IAAP,CAAV,GAAyBiD,UAAzB,GAAsCJ,OAAxD;QACA,MAAMM,SAAS,GAAG7C,UAAU,CAACtB,KAAK,CAACuB,OAAP,CAAV,GAA6B0C,UAA7B,GAA0CJ,OAA1C,IAAqDO,QAAvE;QAEArB,aAAa,CAACd,KAAd,GAAsBzC,aAAa,CAAC6E,IAAI,CAACC,GAAL,CAASH,SAAT,EAAoBE,IAAI,CAACjC,GAAL,CAAS8B,SAAT,EAAoBH,MAApB,WAAoBA,MAApB,GAA8B,CAA9B,CAApB,CAAD,CAAnC;MACD,CAdO,CAAR;IAeD;;IAED1E,SAAS,CAACqE,oBAAD,CAAT;IACAnE,KAAK,CAACyC,KAAD,EAAQ0B,oBAAR,CAAL;IACAnE,KAAK,CAAC,MAAMS,KAAK,CAACgB,IAAb,EAAmB0C,oBAAnB,CAAL;IACAnE,KAAK,CAAC,MAAMS,KAAK,CAACuB,OAAb,EAAsBmC,oBAAtB,CAAL;IAEA,IAAIa,QAAJ;IACAhF,KAAK,CAACkE,QAAD,EAAW9B,GAAG,IAAI;MACrB,IAAIA,GAAJ,EAAS;QACP4C,QAAQ,GAAG,IAAIC,cAAJ,CAAmBd,oBAAnB,CAAX;QACAa,QAAQ,CAACE,OAAT,CAAiBhB,QAAQ,CAACxB,KAA1B;MACD,CAHD,MAGO;QAAA;;QACL,aAAAsC,QAAQ,SAAR,sBAAUG,UAAV;MACD;IACF,CAPI,CAAL;IAQAtF,eAAe,CAAC,MAAM;MAAA;;MACpB,cAAAmF,QAAQ,SAAR,uBAAUG,UAAV;IACD,CAFc,CAAf;IAIA/E,SAAS,CAAC,MAAM;MACd,MAAMgF,UAAU,GAAG,CAAC,EAAE5C,KAAK,CAAC3B,OAAN,IAAiBJ,KAAK,CAACI,OAAvB,IAAkCJ,KAAK,CAACO,YAA1C,CAApB;MACA,MAAM,CAACqE,SAAD,EAAYC,UAAZ,IAA0BnF,gBAAgB,CAACmC,KAAD,CAAhD;MACA,MAAM,CAAC;QAAEiD,UAAU,EAAEC,CAAd;QAAiB,GAAGC;MAApB,CAAD,IAAqCtG,gBAAgB,CAACsB,KAAD,CAA3D;MACA,MAAM,CAACiF,UAAD,IAAezG,gBAAgB,CAACwB,KAAD,CAArC;MAEA;QAAA,cAEcgC,KAAK,CAACC,KAFpB;QAAA,iCAEcD,KAAK,CAACC,KAFpB;QAAA,SAGW,CACL,YADK,EAEL;UACE,wBAAwBjC,KAAK,CAACW,MADhC;UAEE,wBAAwBX,KAAK,CAACwB,MAFhC;UAGE,yBAAyBxB,KAAK,CAACC,QAHjC;UAIE,yBAAyBD,KAAK,CAACe,QAAN,IAAkBf,KAAK,CAACC;QAJnD,CAFK;MAHX,GAYS2E,SAZT,EAaSI,UAbT;QAAA,YAce9B,QAAQ,CAACjB;MAdxB,MAiBM,GAAGF,KAjBT;QAkBMb,OAAO,EAAE;UAAA,IAAC;YACRgE,UADQ;YAERC,OAFQ;YAGRC,UAHQ;YAIRC;UAJQ,CAAD;UAAA;YAAA,SAOE;cACL,4BAA4BtC,aAAa,CAACd;YADrC,CAPF;YAAA,mBAUaqB,cAVb;YAAA,iBAWWC,OAXX;YAAA,QAYA;UAZA,GAaA0B,UAbA;YAAA,UAcIhC,QAAQ,CAAChB,KAAT,IAAkBkD,OAAO,CAAClD,KAd9B;YAAA,SAeGkD,OAAO,CAAClD,KAAR,IAAiBjC,KAAK,CAACsF,KAf1B;YAAA,WAgBKxC,SAAS,CAACb,KAhBf;YAAA,SAiBGoD,OAAO,CAACpD,KAAR,KAAkB;UAjBrB,MAoBH,GAAGF,KApBA;YAqBHb,OAAO,EAAE;cAAA,IAAC;gBACRlB,KAAK,EAAE;kBAAEuF,KAAK,EAAEC,UAAT;kBAAqB,GAAGC;gBAAxB;cADC,CAAD;cAAA,sCAIHzF,KAAK,CAACW,MAAN;gBAAA,SACY;cADZ,IAEIX,KAAK,CAACW,MAFV,EAJG;gBAAA,OAWGqC,WAXH;gBAAA,SAYKwC,UAZL;gBAAA,iCAaOxD,KAAK,CAACC,KAbb;gBAAA,aAiBSjC,KAAK,CAACG,SAjBf;gBAAA,YAkBQiF,UAAU,CAACnD,KAlBnB;gBAAA,YAmBQiD,UAAU,CAACjD,KAnBnB;gBAAA,eAoBWjC,KAAK,CAACY,WApBjB;gBAAA,QAqBIZ,KAAK,CAACgB,IArBV;gBAAA,QAsBIhB,KAAK,CAACH,IAtBV;gBAAA,WAuBOsD,OAvBP;gBAAA,UAwBM,MAAOL,SAAS,CAACb,KAAV,GAAkB;cAxB/B,GAyBEwD,SAzBF,EA0BEZ,UA1BF,yBAaO7C,KAAK,CAACC,KAbb,oCAcW;gBACZyD,OAAO,EAAEnD;cADG,CAdX,EAgBA,IAhBA;gBAAA;cAAA,MA6BHvC,KAAK,CAACC,QAAN;gBAAA,SAES,CACLuF,UADK,EAEL,mBAFK,CAFT;gBAAA,iCAMYxD,KAAK,CAACC,KANlB;gBAAA,OAOQwB,QAPR;gBAAA;gBAAA,eASc;cATd,yBAMYzB,KAAK,CAACC,KANlB,GA7BG,EA0CHjC,KAAK,CAACwB,MAAN;gBAAA,SACY;cADZ,IAEIxB,KAAK,CAACwB,MAFV,EA1CG;YAAA;UArBN;QAAA,CAlBf;QA2FMmE,OAAO,EAAEhB,UAAU,GAAG;UAAA,UAKP3E,KAAK,CAACc,iBAAN,IAA2BgC,SAAS,CAACb,KAL9B;UAAA,SAMR1B,YAAY,CAAC0B,KANL;UAAA,OAOVG,GAAG,CAACH;QAPM,GAQNF,KAAK,CAAC3B,OARA,GAAH,GAWfkC;MAtGV;IA0GD,CAhHQ,CAAT;IAkHA,OAAOvD,aAAa,CAAC,EAAD,EAAK6D,SAAL,EAAgBC,SAAhB,EAA2BG,WAA3B,CAApB;EACD;;AAtQsC,CAAD,CAAjC"}
+{"version":3,"file":"VTextarea.mjs","names":["filterFieldProps","makeVFieldProps","filterInputProps","makeVInputProps","VInput","VCounter","VField","Intersect","useForwardRef","useProxiedModel","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","onInput","sizerRef","calculateInputHeight","style","getComputedStyle","padding","getPropertyValue","height","scrollHeight","lineHeight","minHeight","maxHeight","Infinity","Math","min","observer","ResizeObserver","observe","disconnect","hasCounter","hasDetails","details","rootAttrs","inputAttrs","modelValue","_","inputProps","fieldProps","isDisabled","isDirty","isReadonly","isValid","dirty","class","fieldClass","slotProps","handler"],"sources":["../../../src/components/VTextarea/VTextarea.tsx"],"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// Directives\nimport Intersect from '@/directives/intersect'\n\n// Composables\nimport { useForwardRef } from '@/composables/forwardRef'\nimport { useProxiedModel } from '@/composables/proxiedModel'\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    function onInput (e: Event) {\n      model.value = (e.target as HTMLTextAreaElement).value\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 hasDetails = !!(hasCounter || slots.details)\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                        value={ model.value }\n                        onInput={ onInput }\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: hasDetails ? slotProps => (\n              <>\n                { slots.details?.(slotProps) }\n\n                { 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                ) }\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"],"mappings":";AAAA;AACA,yB,CAEA;;SACSA,gB,EAAkBC,e;SAClBC,gB,EAAkBC,e,EAAiBC,M;SACnCC,Q;SACAC,M,+BAET;;OACOC,S,8CAEP;;SACSC,a;SACAC,e,8CAET;;AACA,SAASC,QAAT,EAAmBC,QAAnB,EAA6BC,eAA7B,EAA8CC,SAA9C,EAAyDC,GAAzD,EAA8DC,KAA9D,QAA2E,KAA3E;SACSC,a,EAAeC,e,EAAiBC,gB,EAAkBC,S,gCAE3D;;AAGA,OAAO,MAAMC,SAAS,GAAGH,eAAe,CAAC;EACvCI,IAAI,EAAE,WADiC;EAGvCC,UAAU,EAAE;IAAEf;EAAF,CAH2B;EAKvCgB,YAAY,EAAE,KALyB;EAOvCC,KAAK,EAAE;IACLC,QAAQ,EAAEC,OADL;IAELC,SAAS,EAAED,OAFN;IAGLE,OAAO,EAAE,CAACF,OAAD,EAAUG,MAAV,EAAkBC,MAAlB,CAHJ;IAILC,YAAY,EAAEC,QAJT;IAKLC,IAAI,EAAEH,MALD;IAMLI,cAAc,EAAER,OANX;IAOLS,MAAM,EAAEL,MAPH;IAQLM,WAAW,EAAEN,MARR;IASLO,qBAAqB,EAAEX,OATlB;IAULY,iBAAiB,EAAEZ,OAVd;IAWLa,QAAQ,EAAEb,OAXL;IAYLc,IAAI,EAAE;MACJC,IAAI,EAAE,CAACZ,MAAD,EAASC,MAAT,CADF;MAEJY,OAAO,EAAE,CAFL;MAGJC,SAAS,EAAGC,CAAD,IAAY,CAACC,KAAK,CAACC,UAAU,CAACF,CAAD,CAAX;IAHzB,CAZD;IAiBLG,OAAO,EAAE;MACPN,IAAI,EAAE,CAACZ,MAAD,EAASC,MAAT,CADC;MAEPa,SAAS,EAAGC,CAAD,IAAY,CAACC,KAAK,CAACC,UAAU,CAACF,CAAD,CAAX;IAFtB,CAjBJ;IAqBLI,MAAM,EAAElB,MArBH;IAuBL,GAAG3B,eAAe,EAvBb;IAwBL,GAAGF,eAAe;EAxBb,CAPgC;EAkCvCgD,KAAK,EAAE;IACL,eAAgBC,CAAD,IAAmB,IAD7B;IAEL,iBAAkBA,CAAD,IAAmB,IAF/B;IAGL,qBAAsBC,GAAD,IAAiB;EAHjC,CAlCgC;;EAwCvCC,KAAK,CAAE5B,KAAF,QAAiC;IAAA,IAAxB;MAAE6B,KAAF;MAASC,IAAT;MAAeC;IAAf,CAAwB;IACpC,MAAMC,KAAK,GAAG/C,eAAe,CAACe,KAAD,EAAQ,YAAR,CAA7B;IACA,MAAMO,YAAY,GAAGrB,QAAQ,CAAC,MAAM;MAClC,OAAO,OAAOc,KAAK,CAACO,YAAb,KAA8B,UAA9B,GACHP,KAAK,CAACO,YAAN,CAAmByB,KAAK,CAACC,KAAzB,CADG,GAEH,CAACD,KAAK,CAACC,KAAN,IAAe,EAAhB,EAAoBC,QAApB,GAA+BC,MAFnC;IAGD,CAJ4B,CAA7B;IAKA,MAAMC,GAAG,GAAGlD,QAAQ,CAAC,MAAM;MACzB,IAAI2C,KAAK,CAACQ,SAAV,EAAqB,OAAOR,KAAK,CAACQ,SAAb;MAErB,IACE,CAACrC,KAAK,CAACI,OAAP,IACC,OAAOJ,KAAK,CAACI,OAAb,KAAyB,QAAzB,IACD,OAAOJ,KAAK,CAACI,OAAb,KAAyB,QAH3B,EAIE,OAAOkC,SAAP;MAEF,OAAOtC,KAAK,CAACI,OAAb;IACD,CAVmB,CAApB;;IAYA,SAASmC,WAAT,CACEC,cADF,EAEEC,OAFF,EAGE;MAAA;;MACA,IAAI,CAACzC,KAAK,CAACG,SAAP,IAAoB,CAACqC,cAAzB,EAAyC;MAEzC,qBAACC,OAAO,CAAC,CAAD,CAAP,CAAWC,MAAZ,gEAAyCC,KAAzC;IACD;;IAED,MAAMC,SAAS,GAAGtD,GAAG,EAArB;IACA,MAAMuD,SAAS,GAAGvD,GAAG,EAArB;IACA,MAAMwD,SAAS,GAAGxD,GAAG,CAAC,KAAD,CAArB;IACA,MAAMyD,aAAa,GAAGzD,GAAG,CAAC,MAAD,CAAzB;IACA,MAAM0D,WAAW,GAAG1D,GAAG,EAAvB;IACA,MAAM2D,QAAQ,GAAG/D,QAAQ,CAAC,MACxB4D,SAAS,CAACb,KAAV,IACAjC,KAAK,CAACa,qBAFiB,CAAzB;IAKA,MAAMqC,QAAQ,GAAGhE,QAAQ,CAAC,MAAM;MAC9B,OAAOc,KAAK,CAACkD,QAAN,CAAef,MAAf,GACHnC,KAAK,CAACkD,QADH,GAEFD,QAAQ,CAAChB,KAAT,IAAkBjC,KAAK,CAACU,cAAzB,GAA2CV,KAAK,CAACS,IAAjD,GAAwD,EAF5D;IAGD,CAJwB,CAAzB;;IAMA,SAAS0C,OAAT,GAAoB;MAClB,IAAIH,WAAW,CAACf,KAAZ,KAAsBmB,QAAQ,CAACC,aAAnC,EAAkD;QAAA;;QAChD,sBAAAL,WAAW,CAACf,KAAZ,wCAAmBU,KAAnB;MACD;;MAED,IAAI,CAACG,SAAS,CAACb,KAAf,EAAsBa,SAAS,CAACb,KAAV,GAAkB,IAAlB;IACvB;;IACD,SAASqB,cAAT,CAAyB5B,CAAzB,EAAwC;MACtCyB,OAAO;MAEPrB,IAAI,CAAC,eAAD,EAAkBJ,CAAlB,CAAJ;IACD;;IACD,SAAS6B,OAAT,CAAkB7B,CAAlB,EAAiC;MAC/BA,CAAC,CAAC8B,eAAF;MAEAL,OAAO;MAEPhE,QAAQ,CAAC,MAAM;QACb6C,KAAK,CAACC,KAAN,GAAc,EAAd;QAEAH,IAAI,CAAC,aAAD,EAAgBJ,CAAhB,CAAJ;MACD,CAJO,CAAR;IAKD;;IACD,SAAS+B,OAAT,CAAkB/B,CAAlB,EAA4B;MAC1BM,KAAK,CAACC,KAAN,GAAeP,CAAC,CAACgB,MAAH,CAAkCT,KAAhD;IACD;;IAED,MAAMyB,QAAQ,GAAGpE,GAAG,EAApB;;IACA,SAASqE,oBAAT,GAAiC;MAC/B,IAAI,CAAC3D,KAAK,CAACC,QAAX,EAAqB;MAErBd,QAAQ,CAAC,MAAM;QACb,IAAI,CAACuE,QAAQ,CAACzB,KAAd,EAAqB;QAErB,MAAM2B,KAAK,GAAGC,gBAAgB,CAACH,QAAQ,CAACzB,KAAV,CAA9B;QAEA,MAAM6B,OAAO,GAAGxC,UAAU,CAACsC,KAAK,CAACG,gBAAN,CAAuB,uBAAvB,CAAD,CAAV,GAChBzC,UAAU,CAACsC,KAAK,CAACG,gBAAN,CAAuB,0BAAvB,CAAD,CADV;QAGA,MAAMC,MAAM,GAAGN,QAAQ,CAACzB,KAAT,CAAegC,YAA9B;QACA,MAAMC,UAAU,GAAG5C,UAAU,CAACsC,KAAK,CAACM,UAAP,CAA7B;QACA,MAAMC,SAAS,GAAG7C,UAAU,CAACtB,KAAK,CAACgB,IAAP,CAAV,GAAyBkD,UAAzB,GAAsCJ,OAAxD;QACA,MAAMM,SAAS,GAAG9C,UAAU,CAACtB,KAAK,CAACuB,OAAP,CAAV,GAA6B2C,UAA7B,GAA0CJ,OAA1C,IAAqDO,QAAvE;QAEAtB,aAAa,CAACd,KAAd,GAAsBzC,aAAa,CAAC8E,IAAI,CAACC,GAAL,CAASH,SAAT,EAAoBE,IAAI,CAAClC,GAAL,CAAS+B,SAAT,EAAoBH,MAApB,WAAoBA,MAApB,GAA8B,CAA9B,CAApB,CAAD,CAAnC;MACD,CAdO,CAAR;IAeD;;IAED3E,SAAS,CAACsE,oBAAD,CAAT;IACApE,KAAK,CAACyC,KAAD,EAAQ2B,oBAAR,CAAL;IACApE,KAAK,CAAC,MAAMS,KAAK,CAACgB,IAAb,EAAmB2C,oBAAnB,CAAL;IACApE,KAAK,CAAC,MAAMS,KAAK,CAACuB,OAAb,EAAsBoC,oBAAtB,CAAL;IAEA,IAAIa,QAAJ;IACAjF,KAAK,CAACmE,QAAD,EAAW/B,GAAG,IAAI;MACrB,IAAIA,GAAJ,EAAS;QACP6C,QAAQ,GAAG,IAAIC,cAAJ,CAAmBd,oBAAnB,CAAX;QACAa,QAAQ,CAACE,OAAT,CAAiBhB,QAAQ,CAACzB,KAA1B;MACD,CAHD,MAGO;QAAA;;QACL,aAAAuC,QAAQ,SAAR,sBAAUG,UAAV;MACD;IACF,CAPI,CAAL;IAQAvF,eAAe,CAAC,MAAM;MAAA;;MACpB,cAAAoF,QAAQ,SAAR,uBAAUG,UAAV;IACD,CAFc,CAAf;IAIAhF,SAAS,CAAC,MAAM;MACd,MAAMiF,UAAU,GAAG,CAAC,EAAE7C,KAAK,CAAC3B,OAAN,IAAiBJ,KAAK,CAACI,OAAvB,IAAkCJ,KAAK,CAACO,YAA1C,CAApB;MACA,MAAMsE,UAAU,GAAG,CAAC,EAAED,UAAU,IAAI7C,KAAK,CAAC+C,OAAtB,CAApB;MACA,MAAM,CAACC,SAAD,EAAYC,UAAZ,IAA0BtF,gBAAgB,CAACmC,KAAD,CAAhD;MACA,MAAM,CAAC;QAAEoD,UAAU,EAAEC,CAAd;QAAiB,GAAGC;MAApB,CAAD,IAAqCzG,gBAAgB,CAACsB,KAAD,CAA3D;MACA,MAAM,CAACoF,UAAD,IAAe5G,gBAAgB,CAACwB,KAAD,CAArC;MAEA;QAAA,cAEcgC,KAAK,CAACC,KAFpB;QAAA,iCAEcD,KAAK,CAACC,KAFpB;QAAA,SAGW,CACL,YADK,EAEL;UACE,wBAAwBjC,KAAK,CAACW,MADhC;UAEE,wBAAwBX,KAAK,CAACwB,MAFhC;UAGE,yBAAyBxB,KAAK,CAACC,QAHjC;UAIE,yBAAyBD,KAAK,CAACe,QAAN,IAAkBf,KAAK,CAACC;QAJnD,CAFK;MAHX,GAYS8E,SAZT,EAaSI,UAbT;QAAA,YAcejC,QAAQ,CAACjB;MAdxB,MAiBM,GAAGF,KAjBT;QAkBMb,OAAO,EAAE;UAAA,IAAC;YACRmE,UADQ;YAERC,OAFQ;YAGRC,UAHQ;YAIRC;UAJQ,CAAD;UAAA;YAAA,SAOE;cACL,4BAA4BzC,aAAa,CAACd;YADrC,CAPF;YAAA,mBAUaqB,cAVb;YAAA,iBAWWC,OAXX;YAAA,QAYA;UAZA,GAaA6B,UAbA;YAAA,UAcInC,QAAQ,CAAChB,KAAT,IAAkBqD,OAAO,CAACrD,KAd9B;YAAA,SAeGqD,OAAO,CAACrD,KAAR,IAAiBjC,KAAK,CAACyF,KAf1B;YAAA,WAgBK3C,SAAS,CAACb,KAhBf;YAAA,SAiBGuD,OAAO,CAACvD,KAAR,KAAkB;UAjBrB,MAoBH,GAAGF,KApBA;YAqBHb,OAAO,EAAE;cAAA,IAAC;gBACRlB,KAAK,EAAE;kBAAE0F,KAAK,EAAEC,UAAT;kBAAqB,GAAGC;gBAAxB;cADC,CAAD;cAAA,sCAIH5F,KAAK,CAACW,MAAN;gBAAA,SACY;cADZ,IAEIX,KAAK,CAACW,MAFV,EAJG;gBAAA,OAWGqC,WAXH;gBAAA,SAYK2C,UAZL;gBAAA,SAaK3D,KAAK,CAACC,KAbX;gBAAA,WAcOwB,OAdP;gBAAA,aAkBSzD,KAAK,CAACG,SAlBf;gBAAA,YAmBQoF,UAAU,CAACtD,KAnBnB;gBAAA,YAoBQoD,UAAU,CAACpD,KApBnB;gBAAA,eAqBWjC,KAAK,CAACY,WArBjB;gBAAA,QAsBIZ,KAAK,CAACgB,IAtBV;gBAAA,QAuBIhB,KAAK,CAACH,IAvBV;gBAAA,WAwBOsD,OAxBP;gBAAA,UAyBM,MAAOL,SAAS,CAACb,KAAV,GAAkB;cAzB/B,GA0BE2D,SA1BF,EA2BEZ,UA3BF,4CAeW;gBACZa,OAAO,EAAEtD;cADG,CAfX,EAiBA,IAjBA;gBAAA;cAAA,MA8BHvC,KAAK,CAACC,QAAN;gBAAA,SAES,CACL0F,UADK,EAEL,mBAFK,CAFT;gBAAA,iCAMY3D,KAAK,CAACC,KANlB;gBAAA,OAOQyB,QAPR;gBAAA;gBAAA,eASc;cATd,yBAMY1B,KAAK,CAACC,KANlB,GA9BG,EA2CHjC,KAAK,CAACwB,MAAN;gBAAA,SACY;cADZ,IAEIxB,KAAK,CAACwB,MAFV,EA3CG;YAAA;UArBN;QAAA,CAlBf;QA4FMsD,OAAO,EAAED,UAAU,GAAGe,SAAS;UAAA;;UAAA,wDAEzB7D,KAAK,CAAC+C,OAFmB,qBAEzB,oBAAA/C,KAAK,EAAW6D,SAAX,CAFoB,EAIzBhB,UAAU;YAAA,UAKG5E,KAAK,CAACc,iBAAN,IAA2BgC,SAAS,CAACb,KALxC;YAAA,SAME1B,YAAY,CAAC0B,KANf;YAAA,OAOAG,GAAG,CAACH;UAPJ,GAQIF,KAAK,CAAC3B,OARV,GAJe;QAAA,CAAZ,GAiBfkC;MA7GV;IAiHD,CAxHQ,CAAT;IA0HA,OAAOtD,aAAa,CAAC,EAAD,EAAK4D,SAAL,EAAgBC,SAAhB,EAA2BG,WAA3B,CAApB;EACD;;AAjRsC,CAAD,CAAjC"}

package/lib/components/VTextarea/VTextarea.sass

@@ -1,10 +1,8 @@
-@forward './variables'
 @use 'sass:math'
 @use 'sass:selector'
 @use '../../styles/settings'
 @use '../../styles/tools'
 @use './variables' as *
-@use '../VInput/variables' as *
 
 .v-textarea
   .v-field__input

package/lib/components/VTextarea/_variables.scss

@@ -1,5 +1,6 @@
 @use '../../styles/settings';
 
+// VTextarea
 $textarea-box-enclosed-prefix-margin-top: 24px !default;
 $textarea-box-enclosed-single-outlined-label-top: 18px !default;
 $textarea-box-enclosed-single-outlined-margin-top: 10px !default;

package/lib/components/VTimeline/VTimeline.mjs

@@ -1,14 +1,14 @@
-import { createVNode as _createVNode } from "vue";
+import { createVNode as _createVNode, resolveDirective as _resolveDirective } from "vue";
 // Styles
 import "./VTimeline.css"; // Composables
 
-import { makeTagProps } from "../../composables/tag.mjs";
 import { makeDensityProps, useDensity } from "../../composables/density.mjs";
-import { makeThemeProps, provideTheme } from "../../composables/theme.mjs"; // Helpers
+import { makeTagProps } from "../../composables/tag.mjs";
+import { makeThemeProps, provideTheme } from "../../composables/theme.mjs";
+import { provideDefaults } from "../../composables/defaults.mjs"; // Utilities
 
-import { computed, provide, toRef } from 'vue';
-import { convertToUnit, defineComponent } from "../../util/index.mjs";
-import { VTimelineSymbol } from "./shared.mjs"; // Types
+import { computed, toRef } from 'vue';
+import { convertToUnit, defineComponent, useRender } from "../../util/index.mjs"; // Types
 
 export const VTimeline = defineComponent({
   name: 'VTimeline',
@@ -55,11 +55,15 @@ export const VTimeline = defineComponent({
     const {
       densityClasses
     } = useDensity(props);
-    provide(VTimelineSymbol, {
-      density: toRef(props, 'density'),
-      lineColor: toRef(props, 'lineColor')
+    provideDefaults({
+      VTimelineDivider: {
+        lineColor: toRef(props, 'lineColor')
+      },
+      VTimelineItem: {
+        density: toRef(props, 'density')
+      }
     });
-    const sideClass = computed(() => {
+    const sideClasses = computed(() => {
       const side = props.side ? props.side : props.density !== 'default' ? 'end' : null;
       return side && `v-timeline--side-${side}`;
     });
@@ -80,21 +84,16 @@ export const VTimeline = defineComponent({
           return null;
       }
     });
-    return () => {
-      var _slots$default;
-
-      return _createVNode(props.tag, {
-        "class": ['v-timeline', `v-timeline--${props.direction}`, `v-timeline--align-${props.align}`, !props.lineInset && truncateClasses.value, {
-          'v-timeline--inset-line': !!props.lineInset
-        }, themeClasses.value, densityClasses.value, sideClass.value],
-        "style": {
-          '--v-timeline-line-thickness': convertToUnit(props.lineThickness),
-          '--v-timeline-line-inset': convertToUnit(props.lineInset)
-        }
-      }, {
-        default: () => [(_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots)]
-      });
-    };
+    useRender(() => _createVNode(props.tag, {
+      "class": ['v-timeline', `v-timeline--${props.direction}`, `v-timeline--align-${props.align}`, !props.lineInset && truncateClasses.value, {
+        'v-timeline--inset-line': !!props.lineInset
+      }, themeClasses.value, densityClasses.value, sideClasses.value],
+      "style": {
+        '--v-timeline-line-thickness': convertToUnit(props.lineThickness),
+        '--v-timeline-line-inset': convertToUnit(props.lineInset)
+      }
+    }, slots));
+    return {};
   }
 
 });

package/lib/components/VTimeline/VTimeline.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VTimeline.mjs","names":["makeTagProps","makeDensityProps","useDensity","makeThemeProps","provideTheme","computed","provide","toRef","convertToUnit","defineComponent","VTimelineSymbol","VTimeline","name","props","align","type","String","default","validator","v","includes","direction","side","lineInset","Number","lineThickness","lineColor","truncateLine","setup","slots","themeClasses","densityClasses","density","sideClass","truncateClasses","classes","value"],"sources":["../../../src/components/VTimeline/VTimeline.tsx"],"sourcesContent":["// Styles\nimport './VTimeline.sass'\n\n// Composables\nimport { makeTagProps } from '@/composables/tag'\nimport { makeDensityProps, useDensity } from '@/composables/density'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\n\n// Helpers\nimport { computed, provide, toRef } from 'vue'\nimport { convertToUnit, defineComponent } from '@/util'\nimport { VTimelineSymbol } from './shared'\n\n// Types\nimport type { Prop } from 'vue'\n\nexport type TimelineDirection = 'vertical' | 'horizontal'\nexport type TimelineSide = 'start' | 'end' | undefined\nexport type TimelineAlign = 'center' | 'start'\nexport type TimelineTruncateLine = 'start' | 'end' | 'both' | undefined\n\nexport const VTimeline = defineComponent({\n  name: 'VTimeline',\n\n  props: {\n    align: {\n      type: String,\n      default: 'center',\n      validator: (v: any) => ['center', 'start'].includes(v),\n    } as Prop<TimelineAlign>,\n    direction: {\n      type: String,\n      default: 'vertical',\n      validator: (v: any) => ['vertical', 'horizontal'].includes(v),\n    } as Prop<TimelineDirection>,\n    side: {\n      type: String,\n      validator: (v: any) => v == null || ['start', 'end'].includes(v),\n    } as Prop<TimelineSide>,\n    lineInset: {\n      type: [String, Number],\n      default: 0,\n    },\n    lineThickness: {\n      type: [String, Number],\n      default: 2,\n    },\n    lineColor: String,\n    truncateLine: {\n      type: String,\n      validator: (v: any) => ['start', 'end', 'both'].includes(v),\n    } as Prop<TimelineTruncateLine>,\n\n    ...makeDensityProps(),\n    ...makeTagProps(),\n    ...makeThemeProps(),\n  },\n\n  setup (props, { slots }) {\n    const { themeClasses } = provideTheme(props)\n    const { densityClasses } = useDensity(props)\n\n    provide(VTimelineSymbol, {\n      density: toRef(props, 'density'),\n      lineColor: toRef(props, 'lineColor'),\n    })\n\n    const sideClass = computed(() => {\n      const side = props.side ? props.side : props.density !== 'default' ? 'end' : null\n\n      return side && `v-timeline--side-${side}`\n    })\n\n    const truncateClasses = computed(() => {\n      const classes = [\n        'v-timeline--truncate-line-start',\n        'v-timeline--truncate-line-end',\n      ]\n\n      switch (props.truncateLine) {\n        case 'both': return classes\n        case 'start': return classes[0]\n        case 'end': return classes[1]\n        default: return null\n      }\n    })\n\n    return () => (\n      <props.tag\n        class={[\n          'v-timeline',\n          `v-timeline--${props.direction}`,\n          `v-timeline--align-${props.align}`,\n          !props.lineInset && truncateClasses.value,\n          {\n            'v-timeline--inset-line': !!props.lineInset,\n          },\n          themeClasses.value,\n          densityClasses.value,\n          sideClass.value,\n        ]}\n        style={{\n          '--v-timeline-line-thickness': convertToUnit(props.lineThickness),\n          '--v-timeline-line-inset': convertToUnit(props.lineInset),\n        }}\n      >\n        { slots.default?.() }\n      </props.tag>\n    )\n  },\n})\n"],"mappings":";AAAA;AACA,yB,CAEA;;SACSA,Y;SACAC,gB,EAAkBC,U;SAClBC,c,EAAgBC,Y,uCAEzB;;AACA,SAASC,QAAT,EAAmBC,OAAnB,EAA4BC,KAA5B,QAAyC,KAAzC;SACSC,a,EAAeC,e;SACfC,e,wBAET;;AAQA,OAAO,MAAMC,SAAS,GAAGF,eAAe,CAAC;EACvCG,IAAI,EAAE,WADiC;EAGvCC,KAAK,EAAE;IACLC,KAAK,EAAE;MACLC,IAAI,EAAEC,MADD;MAELC,OAAO,EAAE,QAFJ;MAGLC,SAAS,EAAGC,CAAD,IAAY,CAAC,QAAD,EAAW,OAAX,EAAoBC,QAApB,CAA6BD,CAA7B;IAHlB,CADF;IAMLE,SAAS,EAAE;MACTN,IAAI,EAAEC,MADG;MAETC,OAAO,EAAE,UAFA;MAGTC,SAAS,EAAGC,CAAD,IAAY,CAAC,UAAD,EAAa,YAAb,EAA2BC,QAA3B,CAAoCD,CAApC;IAHd,CANN;IAWLG,IAAI,EAAE;MACJP,IAAI,EAAEC,MADF;MAEJE,SAAS,EAAGC,CAAD,IAAYA,CAAC,IAAI,IAAL,IAAa,CAAC,OAAD,EAAU,KAAV,EAAiBC,QAAjB,CAA0BD,CAA1B;IAFhC,CAXD;IAeLI,SAAS,EAAE;MACTR,IAAI,EAAE,CAACC,MAAD,EAASQ,MAAT,CADG;MAETP,OAAO,EAAE;IAFA,CAfN;IAmBLQ,aAAa,EAAE;MACbV,IAAI,EAAE,CAACC,MAAD,EAASQ,MAAT,CADO;MAEbP,OAAO,EAAE;IAFI,CAnBV;IAuBLS,SAAS,EAAEV,MAvBN;IAwBLW,YAAY,EAAE;MACZZ,IAAI,EAAEC,MADM;MAEZE,SAAS,EAAGC,CAAD,IAAY,CAAC,OAAD,EAAU,KAAV,EAAiB,MAAjB,EAAyBC,QAAzB,CAAkCD,CAAlC;IAFX,CAxBT;IA6BL,GAAGlB,gBAAgB,EA7Bd;IA8BL,GAAGD,YAAY,EA9BV;IA+BL,GAAGG,cAAc;EA/BZ,CAHgC;;EAqCvCyB,KAAK,CAAEf,KAAF,QAAoB;IAAA,IAAX;MAAEgB;IAAF,CAAW;IACvB,MAAM;MAAEC;IAAF,IAAmB1B,YAAY,CAACS,KAAD,CAArC;IACA,MAAM;MAAEkB;IAAF,IAAqB7B,UAAU,CAACW,KAAD,CAArC;IAEAP,OAAO,CAACI,eAAD,EAAkB;MACvBsB,OAAO,EAAEzB,KAAK,CAACM,KAAD,EAAQ,SAAR,CADS;MAEvBa,SAAS,EAAEnB,KAAK,CAACM,KAAD,EAAQ,WAAR;IAFO,CAAlB,CAAP;IAKA,MAAMoB,SAAS,GAAG5B,QAAQ,CAAC,MAAM;MAC/B,MAAMiB,IAAI,GAAGT,KAAK,CAACS,IAAN,GAAaT,KAAK,CAACS,IAAnB,GAA0BT,KAAK,CAACmB,OAAN,KAAkB,SAAlB,GAA8B,KAA9B,GAAsC,IAA7E;MAEA,OAAOV,IAAI,IAAK,oBAAmBA,IAAK,EAAxC;IACD,CAJyB,CAA1B;IAMA,MAAMY,eAAe,GAAG7B,QAAQ,CAAC,MAAM;MACrC,MAAM8B,OAAO,GAAG,CACd,iCADc,EAEd,+BAFc,CAAhB;;MAKA,QAAQtB,KAAK,CAACc,YAAd;QACE,KAAK,MAAL;UAAa,OAAOQ,OAAP;;QACb,KAAK,OAAL;UAAc,OAAOA,OAAO,CAAC,CAAD,CAAd;;QACd,KAAK,KAAL;UAAY,OAAOA,OAAO,CAAC,CAAD,CAAd;;QACZ;UAAS,OAAO,IAAP;MAJX;IAMD,CAZ+B,CAAhC;IAcA,OAAO;MAAA;;MAAA;QAAA,SAEI,CACL,YADK,EAEJ,eAActB,KAAK,CAACQ,SAAU,EAF1B,EAGJ,qBAAoBR,KAAK,CAACC,KAAM,EAH5B,EAIL,CAACD,KAAK,CAACU,SAAP,IAAoBW,eAAe,CAACE,KAJ/B,EAKL;UACE,0BAA0B,CAAC,CAACvB,KAAK,CAACU;QADpC,CALK,EAQLO,YAAY,CAACM,KARR,EASLL,cAAc,CAACK,KATV,EAULH,SAAS,CAACG,KAVL,CAFJ;QAAA,SAcI;UACL,+BAA+B5B,aAAa,CAACK,KAAK,CAACY,aAAP,CADvC;UAEL,2BAA2BjB,aAAa,CAACK,KAAK,CAACU,SAAP;QAFnC;MAdJ;QAAA,kCAmBDM,KAAK,CAACZ,OAnBL,qBAmBD,oBAAAY,KAAK,CAnBJ;MAAA;IAAA,CAAP;EAsBD;;AAxFsC,CAAD,CAAjC"}
+{"version":3,"file":"VTimeline.mjs","names":["makeDensityProps","useDensity","makeTagProps","makeThemeProps","provideTheme","provideDefaults","computed","toRef","convertToUnit","defineComponent","useRender","VTimeline","name","props","align","type","String","default","validator","v","includes","direction","side","lineInset","Number","lineThickness","lineColor","truncateLine","setup","slots","themeClasses","densityClasses","VTimelineDivider","VTimelineItem","density","sideClasses","truncateClasses","classes","value"],"sources":["../../../src/components/VTimeline/VTimeline.tsx"],"sourcesContent":["// Styles\nimport './VTimeline.sass'\n\n// Composables\nimport { makeDensityProps, useDensity } from '@/composables/density'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { provideDefaults } from '@/composables/defaults'\n\n// Utilities\nimport { computed, toRef } from 'vue'\nimport { convertToUnit, defineComponent, useRender } from '@/util'\n\n// Types\nimport type { Prop } from 'vue'\n\nexport type TimelineDirection = 'vertical' | 'horizontal'\nexport type TimelineSide = 'start' | 'end' | undefined\nexport type TimelineAlign = 'center' | 'start'\nexport type TimelineTruncateLine = 'start' | 'end' | 'both' | undefined\n\nexport const VTimeline = defineComponent({\n  name: 'VTimeline',\n\n  props: {\n    align: {\n      type: String,\n      default: 'center',\n      validator: (v: any) => ['center', 'start'].includes(v),\n    } as Prop<TimelineAlign>,\n    direction: {\n      type: String,\n      default: 'vertical',\n      validator: (v: any) => ['vertical', 'horizontal'].includes(v),\n    } as Prop<TimelineDirection>,\n    side: {\n      type: String,\n      validator: (v: any) => v == null || ['start', 'end'].includes(v),\n    } as Prop<TimelineSide>,\n    lineInset: {\n      type: [String, Number],\n      default: 0,\n    },\n    lineThickness: {\n      type: [String, Number],\n      default: 2,\n    },\n    lineColor: String,\n    truncateLine: {\n      type: String,\n      validator: (v: any) => ['start', 'end', 'both'].includes(v),\n    } as Prop<TimelineTruncateLine>,\n\n    ...makeDensityProps(),\n    ...makeTagProps(),\n    ...makeThemeProps(),\n  },\n\n  setup (props, { slots }) {\n    const { themeClasses } = provideTheme(props)\n    const { densityClasses } = useDensity(props)\n\n    provideDefaults({\n      VTimelineDivider: {\n        lineColor: toRef(props, 'lineColor'),\n      },\n      VTimelineItem: {\n        density: toRef(props, 'density'),\n      },\n    })\n\n    const sideClasses = computed(() => {\n      const side = props.side ? props.side : props.density !== 'default' ? 'end' : null\n\n      return side && `v-timeline--side-${side}`\n    })\n\n    const truncateClasses = computed(() => {\n      const classes = [\n        'v-timeline--truncate-line-start',\n        'v-timeline--truncate-line-end',\n      ]\n\n      switch (props.truncateLine) {\n        case 'both': return classes\n        case 'start': return classes[0]\n        case 'end': return classes[1]\n        default: return null\n      }\n    })\n\n    useRender(() => (\n      <props.tag\n        class={[\n          'v-timeline',\n          `v-timeline--${props.direction}`,\n          `v-timeline--align-${props.align}`,\n          !props.lineInset && truncateClasses.value,\n          {\n            'v-timeline--inset-line': !!props.lineInset,\n          },\n          themeClasses.value,\n          densityClasses.value,\n          sideClasses.value,\n        ]}\n        style={{\n          '--v-timeline-line-thickness': convertToUnit(props.lineThickness),\n          '--v-timeline-line-inset': convertToUnit(props.lineInset),\n        }}\n        v-slots={ slots }\n      />\n    ))\n\n    return {}\n  },\n})\n"],"mappings":"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"}

package/lib/components/VTimeline/VTimeline.sass

@@ -1,11 +1,10 @@
-@forward './variables'
 @use 'sass:map'
 @use '../../styles/settings'
 @use '../../styles/tools'
 @use './variables' as *
 @use './mixins' as *
 
-// Theme
+// VTimeline
 .v-timeline
   .v-timeline-divider__dot
     background: $timeline-dot-divider-background
@@ -13,7 +12,6 @@
   .v-timeline-divider__inner-dot
     background: $timeline-inner-dot-divider-background
 
-// Elements
 .v-timeline
   display: grid
   grid-auto-flow: dense
@@ -84,9 +82,11 @@
         text-align: end
         padding-inline-end: $timeline-item-padding
 
+// VTimelineItem
 .v-timeline-item
   display: contents
 
+// VTimelineDivider
 .v-timeline-divider
   position: relative
   display: flex

package/lib/components/VTimeline/VTimelineDivider.mjs

@@ -1,25 +1,25 @@
 import { createVNode as _createVNode } from "vue";
 // Components
-import { VIcon } from "../VIcon/index.mjs";
-import { VTimelineSymbol } from "./shared.mjs"; // Composables
+import { VIcon } from "../VIcon/index.mjs"; // Composables
 
-import { useBackgroundColor } from "../../composables/color.mjs";
+import { IconValue } from "../../composables/icons.mjs";
 import { makeElevationProps, useElevation } from "../../composables/elevation.mjs";
-import { makeSizeProps, useSize } from "../../composables/size.mjs";
 import { makeRoundedProps, useRounded } from "../../composables/rounded.mjs";
-import { IconValue } from "../../composables/icons.mjs"; // Utilities
+import { makeSizeProps, useSize } from "../../composables/size.mjs";
+import { provideDefaults } from "../../composables/defaults.mjs";
+import { useBackgroundColor } from "../../composables/color.mjs"; // Utilities
 
-import { inject, toRef } from 'vue';
-import { defineComponent } from "../../util/index.mjs";
+import { defineComponent, useRender } from "../../util/index.mjs";
+import { toRef } from 'vue';
 export const VTimelineDivider = defineComponent({
   name: 'VTimelineDivider',
   props: {
+    dotColor: String,
+    fillDot: Boolean,
     hideDot: Boolean,
-    lineColor: String,
     icon: IconValue,
     iconColor: String,
-    fillDot: Boolean,
-    dotColor: String,
+    lineColor: String,
     ...makeRoundedProps(),
     ...makeSizeProps(),
     ...makeElevationProps()
@@ -29,8 +29,6 @@ export const VTimelineDivider = defineComponent({
     let {
       slots
     } = _ref;
-    const timeline = inject(VTimelineSymbol);
-    if (!timeline) throw new Error('[Vuetify] Could not find v-timeline provider');
     const {
       sizeClasses,
       sizeStyles
@@ -39,38 +37,43 @@ export const VTimelineDivider = defineComponent({
       backgroundColorStyles,
       backgroundColorClasses
     } = useBackgroundColor(toRef(props, 'dotColor'));
-    const {
-      backgroundColorStyles: lineColorStyles,
-      backgroundColorClasses: lineColorClasses
-    } = useBackgroundColor(timeline.lineColor);
     const {
       roundedClasses
     } = useRounded(props, 'v-timeline-divider__dot');
     const {
       elevationClasses
     } = useElevation(props);
-    return () => _createVNode("div", {
-      "class": ['v-timeline-divider', {
-        'v-timeline-divider--fill-dot': props.fillDot
-      }]
-    }, [!props.hideDot && _createVNode("div", {
-      "class": ['v-timeline-divider__dot', roundedClasses.value, sizeClasses.value, elevationClasses.value],
-      "style": sizeStyles.value
-    }, [_createVNode("div", {
-      "class": ['v-timeline-divider__inner-dot', roundedClasses.value, backgroundColorClasses.value],
-      "style": backgroundColorStyles.value
-    }, [slots.default ? slots.default({
-      icon: props.icon,
-      iconColor: props.iconColor,
-      size: props.size
-    }) : props.icon ? _createVNode(VIcon, {
-      "icon": props.icon,
-      "color": props.iconColor,
-      "size": props.size
-    }, null) : undefined])]), _createVNode("div", {
-      "class": ['v-timeline-divider__line', lineColorClasses.value],
-      "style": lineColorStyles.value
-    }, null)]);
+    const {
+      backgroundColorClasses: lineColorClasses,
+      backgroundColorStyles: lineColorStyles
+    } = useBackgroundColor(toRef(props, 'lineColor'));
+    provideDefaults({
+      VIcon: {
+        color: toRef(props, 'iconColor'),
+        icon: toRef(props, 'icon'),
+        size: toRef(props, 'size')
+      }
+    });
+    useRender(() => {
+      var _slots$default, _slots$default2;
+
+      return _createVNode("div", {
+        "class": ['v-timeline-divider', {
+          'v-timeline-divider--fill-dot': props.fillDot
+        }]
+      }, [!props.hideDot && _createVNode("div", {
+        "key": "dot",
+        "class": ['v-timeline-divider__dot', elevationClasses.value, roundedClasses.value, sizeClasses.value],
+        "style": sizeStyles.value
+      }, [_createVNode("div", {
+        "class": ['v-timeline-divider__inner-dot', backgroundColorClasses.value, roundedClasses.value],
+        "style": backgroundColorStyles.value
+      }, [(_slots$default = (_slots$default2 = slots.default) == null ? void 0 : _slots$default2.call(slots)) != null ? _slots$default : props.icon ? _createVNode(VIcon, null, null) : undefined])]), _createVNode("div", {
+        "class": ['v-timeline-divider__line', lineColorClasses.value],
+        "style": lineColorStyles.value
+      }, null)]);
+    });
+    return {};
   }
 
 });

package/lib/components/VTimeline/VTimelineDivider.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VTimelineDivider.mjs","names":["VIcon","VTimelineSymbol","useBackgroundColor","makeElevationProps","useElevation","makeSizeProps","useSize","makeRoundedProps","useRounded","IconValue","inject","toRef","defineComponent","VTimelineDivider","name","props","hideDot","Boolean","lineColor","String","icon","iconColor","fillDot","dotColor","setup","slots","timeline","Error","sizeClasses","sizeStyles","backgroundColorStyles","backgroundColorClasses","lineColorStyles","lineColorClasses","roundedClasses","elevationClasses","value","default","size","undefined"],"sources":["../../../src/components/VTimeline/VTimelineDivider.tsx"],"sourcesContent":["// Components\nimport { VIcon } from '@/components/VIcon'\nimport { VTimelineSymbol } from './shared'\n\n// Composables\nimport { useBackgroundColor } from '@/composables/color'\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { makeSizeProps, useSize } from '@/composables/size'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { IconValue } from '@/composables/icons'\n\n// Utilities\nimport { inject, toRef } from 'vue'\nimport { defineComponent } from '@/util'\n\nexport const VTimelineDivider = defineComponent({\n  name: 'VTimelineDivider',\n\n  props: {\n    hideDot: Boolean,\n    lineColor: String,\n    icon: IconValue,\n    iconColor: String,\n    fillDot: Boolean,\n    dotColor: String,\n\n    ...makeRoundedProps(),\n    ...makeSizeProps(),\n    ...makeElevationProps(),\n  },\n\n  setup (props, { slots }) {\n    const timeline = inject(VTimelineSymbol)\n\n    if (!timeline) throw new Error('[Vuetify] Could not find v-timeline provider')\n\n    const { sizeClasses, sizeStyles } = useSize(props, 'v-timeline-divider__dot')\n    const { backgroundColorStyles, backgroundColorClasses } = useBackgroundColor(toRef(props, 'dotColor'))\n    const { backgroundColorStyles: lineColorStyles, backgroundColorClasses: lineColorClasses } = useBackgroundColor(timeline.lineColor)\n    const { roundedClasses } = useRounded(props, 'v-timeline-divider__dot')\n    const { elevationClasses } = useElevation(props)\n\n    return () => (\n      <div\n        class={[\n          'v-timeline-divider',\n          {\n            'v-timeline-divider--fill-dot': props.fillDot,\n          },\n        ]}\n      >\n        { !props.hideDot && (\n          <div\n            class={[\n              'v-timeline-divider__dot',\n              roundedClasses.value,\n              sizeClasses.value,\n              elevationClasses.value,\n            ]}\n            // @ts-expect-error: null\n            style={ sizeStyles.value }\n          >\n            <div\n              class={[\n                'v-timeline-divider__inner-dot',\n                roundedClasses.value,\n                backgroundColorClasses.value,\n              ]}\n              style={ backgroundColorStyles.value }\n            >\n              {\n                slots.default ? slots.default({ icon: props.icon, iconColor: props.iconColor, size: props.size })\n                : props.icon ? <VIcon icon={ props.icon } color={ props.iconColor } size={ props.size } />\n                : undefined\n              }\n            </div>\n          </div>\n        ) }\n        <div\n          class={[\n            'v-timeline-divider__line',\n            lineColorClasses.value,\n          ]}\n          style={ lineColorStyles.value }\n        />\n      </div>\n    )\n  },\n})\n\nexport type VTimelineDivider = InstanceType<typeof VTimelineDivider>\n"],"mappings":";AAAA;SACSA,K;SACAC,e,wBAET;;SACSC,kB;SACAC,kB,EAAoBC,Y;SACpBC,a,EAAeC,O;SACfC,gB,EAAkBC,U;SAClBC,S,uCAET;;AACA,SAASC,MAAT,EAAiBC,KAAjB,QAA8B,KAA9B;SACSC,e;AAET,OAAO,MAAMC,gBAAgB,GAAGD,eAAe,CAAC;EAC9CE,IAAI,EAAE,kBADwC;EAG9CC,KAAK,EAAE;IACLC,OAAO,EAAEC,OADJ;IAELC,SAAS,EAAEC,MAFN;IAGLC,IAAI,EAAEX,SAHD;IAILY,SAAS,EAAEF,MAJN;IAKLG,OAAO,EAAEL,OALJ;IAMLM,QAAQ,EAAEJ,MANL;IAQL,GAAGZ,gBAAgB,EARd;IASL,GAAGF,aAAa,EATX;IAUL,GAAGF,kBAAkB;EAVhB,CAHuC;;EAgB9CqB,KAAK,CAAET,KAAF,QAAoB;IAAA,IAAX;MAAEU;IAAF,CAAW;IACvB,MAAMC,QAAQ,GAAGhB,MAAM,CAACT,eAAD,CAAvB;IAEA,IAAI,CAACyB,QAAL,EAAe,MAAM,IAAIC,KAAJ,CAAU,8CAAV,CAAN;IAEf,MAAM;MAAEC,WAAF;MAAeC;IAAf,IAA8BvB,OAAO,CAACS,KAAD,EAAQ,yBAAR,CAA3C;IACA,MAAM;MAAEe,qBAAF;MAAyBC;IAAzB,IAAoD7B,kBAAkB,CAACS,KAAK,CAACI,KAAD,EAAQ,UAAR,CAAN,CAA5E;IACA,MAAM;MAAEe,qBAAqB,EAAEE,eAAzB;MAA0CD,sBAAsB,EAAEE;IAAlE,IAAuF/B,kBAAkB,CAACwB,QAAQ,CAACR,SAAV,CAA/G;IACA,MAAM;MAAEgB;IAAF,IAAqB1B,UAAU,CAACO,KAAD,EAAQ,yBAAR,CAArC;IACA,MAAM;MAAEoB;IAAF,IAAuB/B,YAAY,CAACW,KAAD,CAAzC;IAEA,OAAO;MAAA,SAEI,CACL,oBADK,EAEL;QACE,gCAAgCA,KAAK,CAACO;MADxC,CAFK;IAFJ,IASD,CAACP,KAAK,CAACC,OAAP;MAAA,SAES,CACL,yBADK,EAELkB,cAAc,CAACE,KAFV,EAGLR,WAAW,CAACQ,KAHP,EAILD,gBAAgB,CAACC,KAJZ,CAFT;MAAA,SASUP,UAAU,CAACO;IATrB;MAAA,SAYW,CACL,+BADK,EAELF,cAAc,CAACE,KAFV,EAGLL,sBAAsB,CAACK,KAHlB,CAZX;MAAA,SAiBYN,qBAAqB,CAACM;IAjBlC,IAoBMX,KAAK,CAACY,OAAN,GAAgBZ,KAAK,CAACY,OAAN,CAAc;MAAEjB,IAAI,EAAEL,KAAK,CAACK,IAAd;MAAoBC,SAAS,EAAEN,KAAK,CAACM,SAArC;MAAgDiB,IAAI,EAAEvB,KAAK,CAACuB;IAA5D,CAAd,CAAhB,GACEvB,KAAK,CAACK,IAAN;MAAA,QAA2BL,KAAK,CAACK,IAAjC;MAAA,SAAgDL,KAAK,CAACM,SAAtD;MAAA,QAAyEN,KAAK,CAACuB;IAA/E,WACAC,SAtBR,IATC;MAAA,SAqCM,CACL,0BADK,EAELN,gBAAgB,CAACG,KAFZ,CArCN;MAAA,SAyCOJ,eAAe,CAACI;IAzCvB,UAAP;EA6CD;;AAxE6C,CAAD,CAAxC"}
+{"version":3,"file":"VTimelineDivider.mjs","names":["VIcon","IconValue","makeElevationProps","useElevation","makeRoundedProps","useRounded","makeSizeProps","useSize","provideDefaults","useBackgroundColor","defineComponent","useRender","toRef","VTimelineDivider","name","props","dotColor","String","fillDot","Boolean","hideDot","icon","iconColor","lineColor","setup","slots","sizeClasses","sizeStyles","backgroundColorStyles","backgroundColorClasses","roundedClasses","elevationClasses","lineColorClasses","lineColorStyles","color","size","value","default","undefined"],"sources":["../../../src/components/VTimeline/VTimelineDivider.tsx"],"sourcesContent":["// Components\nimport { VIcon } from '@/components/VIcon'\n\n// Composables\nimport { IconValue } from '@/composables/icons'\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeSizeProps, useSize } from '@/composables/size'\nimport { provideDefaults } from '@/composables/defaults'\nimport { useBackgroundColor } from '@/composables/color'\n\n// Utilities\nimport { defineComponent, useRender } from '@/util'\nimport { toRef } from 'vue'\n\nexport const VTimelineDivider = defineComponent({\n  name: 'VTimelineDivider',\n\n  props: {\n    dotColor: String,\n    fillDot: Boolean,\n    hideDot: Boolean,\n    icon: IconValue,\n    iconColor: String,\n    lineColor: String,\n\n    ...makeRoundedProps(),\n    ...makeSizeProps(),\n    ...makeElevationProps(),\n  },\n\n  setup (props, { slots }) {\n    const { sizeClasses, sizeStyles } = useSize(props, 'v-timeline-divider__dot')\n    const { backgroundColorStyles, backgroundColorClasses } = useBackgroundColor(toRef(props, 'dotColor'))\n    const { roundedClasses } = useRounded(props, 'v-timeline-divider__dot')\n    const { elevationClasses } = useElevation(props)\n    const {\n      backgroundColorClasses: lineColorClasses,\n      backgroundColorStyles: lineColorStyles,\n    } = useBackgroundColor(toRef(props, 'lineColor'))\n\n    provideDefaults({\n      VIcon: {\n        color: toRef(props, 'iconColor'),\n        icon: toRef(props, 'icon'),\n        size: toRef(props, 'size'),\n      },\n    })\n\n    useRender(() => (\n      <div\n        class={[\n          'v-timeline-divider',\n          {\n            'v-timeline-divider--fill-dot': props.fillDot,\n          },\n        ]}\n      >\n        { !props.hideDot && (\n          <div\n            key=\"dot\"\n            class={[\n              'v-timeline-divider__dot',\n              elevationClasses.value,\n              roundedClasses.value,\n              sizeClasses.value,\n            ]}\n            style={ sizeStyles.value }\n          >\n            <div\n              class={[\n                'v-timeline-divider__inner-dot',\n                backgroundColorClasses.value,\n                roundedClasses.value,\n              ]}\n              style={ backgroundColorStyles.value }\n            >\n              { slots.default?.() ?? (props.icon ? (<VIcon />) : undefined) }\n            </div>\n          </div>\n        ) }\n\n        <div\n          class={[\n            'v-timeline-divider__line',\n            lineColorClasses.value,\n          ]}\n          style={ lineColorStyles.value }\n        />\n      </div>\n    ))\n\n    return {}\n  },\n})\n\nexport type VTimelineDivider = InstanceType<typeof VTimelineDivider>\n"],"mappings":";AAAA;SACSA,K,8BAET;;SACSC,S;SACAC,kB,EAAoBC,Y;SACpBC,gB,EAAkBC,U;SAClBC,a,EAAeC,O;SACfC,e;SACAC,kB,uCAET;;SACSC,e,EAAiBC,S;AAC1B,SAASC,KAAT,QAAsB,KAAtB;AAEA,OAAO,MAAMC,gBAAgB,GAAGH,eAAe,CAAC;EAC9CI,IAAI,EAAE,kBADwC;EAG9CC,KAAK,EAAE;IACLC,QAAQ,EAAEC,MADL;IAELC,OAAO,EAAEC,OAFJ;IAGLC,OAAO,EAAED,OAHJ;IAILE,IAAI,EAAEpB,SAJD;IAKLqB,SAAS,EAAEL,MALN;IAMLM,SAAS,EAAEN,MANN;IAQL,GAAGb,gBAAgB,EARd;IASL,GAAGE,aAAa,EATX;IAUL,GAAGJ,kBAAkB;EAVhB,CAHuC;;EAgB9CsB,KAAK,CAAET,KAAF,QAAoB;IAAA,IAAX;MAAEU;IAAF,CAAW;IACvB,MAAM;MAAEC,WAAF;MAAeC;IAAf,IAA8BpB,OAAO,CAACQ,KAAD,EAAQ,yBAAR,CAA3C;IACA,MAAM;MAAEa,qBAAF;MAAyBC;IAAzB,IAAoDpB,kBAAkB,CAACG,KAAK,CAACG,KAAD,EAAQ,UAAR,CAAN,CAA5E;IACA,MAAM;MAAEe;IAAF,IAAqBzB,UAAU,CAACU,KAAD,EAAQ,yBAAR,CAArC;IACA,MAAM;MAAEgB;IAAF,IAAuB5B,YAAY,CAACY,KAAD,CAAzC;IACA,MAAM;MACJc,sBAAsB,EAAEG,gBADpB;MAEJJ,qBAAqB,EAAEK;IAFnB,IAGFxB,kBAAkB,CAACG,KAAK,CAACG,KAAD,EAAQ,WAAR,CAAN,CAHtB;IAKAP,eAAe,CAAC;MACdR,KAAK,EAAE;QACLkC,KAAK,EAAEtB,KAAK,CAACG,KAAD,EAAQ,WAAR,CADP;QAELM,IAAI,EAAET,KAAK,CAACG,KAAD,EAAQ,MAAR,CAFN;QAGLoB,IAAI,EAAEvB,KAAK,CAACG,KAAD,EAAQ,MAAR;MAHN;IADO,CAAD,CAAf;IAQAJ,SAAS,CAAC;MAAA;;MAAA;QAAA,SAEC,CACL,oBADK,EAEL;UACE,gCAAgCI,KAAK,CAACG;QADxC,CAFK;MAFD,IASJ,CAACH,KAAK,CAACK,OAAP;QAAA,OAEM,KAFN;QAAA,SAGS,CACL,yBADK,EAELW,gBAAgB,CAACK,KAFZ,EAGLN,cAAc,CAACM,KAHV,EAILV,WAAW,CAACU,KAJP,CAHT;QAAA,SASUT,UAAU,CAACS;MATrB;QAAA,SAYW,CACL,+BADK,EAELP,sBAAsB,CAACO,KAFlB,EAGLN,cAAc,CAACM,KAHV,CAZX;QAAA,SAiBYR,qBAAqB,CAACQ;MAjBlC,yCAmBMX,KAAK,CAACY,OAnBZ,qBAmBM,qBAAAZ,KAAK,CAnBX,6BAmB4BV,KAAK,CAACM,IAAN,qCAA2BiB,SAnBvD,IATI;QAAA,SAkCG,CACL,0BADK,EAELN,gBAAgB,CAACI,KAFZ,CAlCH;QAAA,SAsCIH,eAAe,CAACG;MAtCpB;IAAA,CAAD,CAAT;IA2CA,OAAO,EAAP;EACD;;AA9E6C,CAAD,CAAxC"}

package/lib/components/VTimeline/VTimelineItem.mjs

@@ -1,20 +1,20 @@
 import { resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue";
 // Components
-import { VTimelineSymbol } from "./shared.mjs";
 import { VTimelineDivider } from "./VTimelineDivider.mjs"; // Composables
 
-import { makeTagProps } from "../../composables/tag.mjs";
-import { makeSizeProps } from "../../composables/size.mjs";
+import { IconValue } from "../../composables/icons.mjs";
 import { makeElevationProps } from "../../composables/elevation.mjs";
 import { makeRoundedProps } from "../../composables/rounded.mjs";
-import { IconValue } from "../../composables/icons.mjs"; // Utilities
+import { makeSizeProps } from "../../composables/size.mjs";
+import { makeTagProps } from "../../composables/tag.mjs"; // Utilities
 
-import { inject, ref, watch } from 'vue';
-import { convertToUnit, defineComponent } from "../../util/index.mjs";
+import { ref, watch } from 'vue';
+import { convertToUnit, defineComponent, useRender } from "../../util/index.mjs";
 import { makeDimensionProps, useDimension } from "../../composables/dimensions.mjs";
 export const VTimelineItem = defineComponent({
   name: 'VTimelineItem',
   props: {
+    density: String,
     dotColor: String,
     fillDot: Boolean,
     hideDot: Boolean,
@@ -35,8 +35,6 @@ export const VTimelineItem = defineComponent({
     let {
       slots
     } = _ref;
-    const timeline = inject(VTimelineSymbol);
-    if (!timeline) throw new Error('[Vuetify] Could not find v-timeline provider');
     const {
       dimensionStyles
     } = useDimension(props);
@@ -50,7 +48,7 @@ export const VTimelineItem = defineComponent({
     }, {
       flush: 'post'
     });
-    return () => {
+    useRender(() => {
       var _slots$default, _slots$opposite;
 
       return _createVNode("div", {
@@ -75,10 +73,11 @@ export const VTimelineItem = defineComponent({
         "rounded": props.rounded
       }, {
         default: slots.icon
-      }), timeline.density.value !== 'compact' && _createVNode("div", {
+      }), props.density !== 'compact' && _createVNode("div", {
         "class": "v-timeline-item__opposite"
       }, [!props.hideOpposite && ((_slots$opposite = slots.opposite) == null ? void 0 : _slots$opposite.call(slots))])]);
-    };
+    });
+    return {};
   }
 
 });

package/lib/components/VTimeline/VTimelineItem.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VTimelineItem.mjs","names":["VTimelineSymbol","VTimelineDivider","makeTagProps","makeSizeProps","makeElevationProps","makeRoundedProps","IconValue","inject","ref","watch","convertToUnit","defineComponent","makeDimensionProps","useDimension","VTimelineItem","name","props","dotColor","String","fillDot","Boolean","hideDot","hideOpposite","type","default","undefined","icon","iconColor","setup","slots","timeline","Error","dimensionStyles","dotSize","dotRef","newValue","value","$el","querySelector","getBoundingClientRect","width","flush","size","elevation","rounded","density","opposite"],"sources":["../../../src/components/VTimeline/VTimelineItem.tsx"],"sourcesContent":["// Components\nimport { VTimelineSymbol } from './shared'\nimport { VTimelineDivider } from './VTimelineDivider'\n\n// Composables\nimport { makeTagProps } from '@/composables/tag'\nimport { makeSizeProps } from '@/composables/size'\nimport { makeElevationProps } from '@/composables/elevation'\nimport { makeRoundedProps } from '@/composables/rounded'\nimport { IconValue } from '@/composables/icons'\n\n// Utilities\nimport { inject, ref, watch } from 'vue'\nimport { convertToUnit, defineComponent } from '@/util'\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\n\nexport const VTimelineItem = defineComponent({\n  name: 'VTimelineItem',\n\n  props: {\n    dotColor: String,\n    fillDot: Boolean,\n    hideDot: Boolean,\n    hideOpposite: {\n      type: Boolean,\n      default: undefined,\n    },\n    icon: IconValue,\n    iconColor: String,\n\n    ...makeRoundedProps(),\n    ...makeElevationProps(),\n    ...makeSizeProps(),\n    ...makeTagProps(),\n    ...makeDimensionProps(),\n  },\n\n  setup (props, { slots }) {\n    const timeline = inject(VTimelineSymbol)\n\n    if (!timeline) throw new Error('[Vuetify] Could not find v-timeline provider')\n\n    const { dimensionStyles } = useDimension(props)\n\n    const dotSize = ref(0)\n    const dotRef = ref<VTimelineDivider>()\n    watch(dotRef, newValue => {\n      if (!newValue) return\n      dotSize.value = newValue.$el.querySelector('.v-timeline-divider__dot')?.getBoundingClientRect().width ?? 0\n    }, {\n      flush: 'post',\n    })\n\n    return () => (\n      <div\n        class={[\n          'v-timeline-item',\n          {\n            'v-timeline-item--fill-dot': props.fillDot,\n          },\n        ]}\n        style={{\n          '--v-timeline-dot-size': convertToUnit(dotSize.value),\n        }}\n      >\n        <div\n          class=\"v-timeline-item__body\"\n          style={ dimensionStyles.value }\n        >\n          { slots.default?.() }\n        </div>\n\n        <VTimelineDivider\n          ref={ dotRef }\n          hideDot={ props.hideDot }\n          icon={ props.icon }\n          iconColor={ props.iconColor }\n          size={ props.size }\n          elevation={ props.elevation }\n          dotColor={ props.dotColor }\n          fillDot={ props.fillDot }\n          rounded={ props.rounded }\n          v-slots={{ default: slots.icon }}\n        />\n\n        { timeline.density.value !== 'compact' && (\n          <div class=\"v-timeline-item__opposite\">\n            { !props.hideOpposite && slots.opposite?.() }\n          </div>\n        ) }\n      </div>\n    )\n  },\n})\n"],"mappings":";AAAA;SACSA,e;SACAC,gB,kCAET;;SACSC,Y;SACAC,a;SACAC,kB;SACAC,gB;SACAC,S,uCAET;;AACA,SAASC,MAAT,EAAiBC,GAAjB,EAAsBC,KAAtB,QAAmC,KAAnC;SACSC,a,EAAeC,e;SACfC,kB,EAAoBC,Y;AAE7B,OAAO,MAAMC,aAAa,GAAGH,eAAe,CAAC;EAC3CI,IAAI,EAAE,eADqC;EAG3CC,KAAK,EAAE;IACLC,QAAQ,EAAEC,MADL;IAELC,OAAO,EAAEC,OAFJ;IAGLC,OAAO,EAAED,OAHJ;IAILE,YAAY,EAAE;MACZC,IAAI,EAAEH,OADM;MAEZI,OAAO,EAAEC;IAFG,CAJT;IAQLC,IAAI,EAAEpB,SARD;IASLqB,SAAS,EAAET,MATN;IAWL,GAAGb,gBAAgB,EAXd;IAYL,GAAGD,kBAAkB,EAZhB;IAaL,GAAGD,aAAa,EAbX;IAcL,GAAGD,YAAY,EAdV;IAeL,GAAGU,kBAAkB;EAfhB,CAHoC;;EAqB3CgB,KAAK,CAAEZ,KAAF,QAAoB;IAAA,IAAX;MAAEa;IAAF,CAAW;IACvB,MAAMC,QAAQ,GAAGvB,MAAM,CAACP,eAAD,CAAvB;IAEA,IAAI,CAAC8B,QAAL,EAAe,MAAM,IAAIC,KAAJ,CAAU,8CAAV,CAAN;IAEf,MAAM;MAAEC;IAAF,IAAsBnB,YAAY,CAACG,KAAD,CAAxC;IAEA,MAAMiB,OAAO,GAAGzB,GAAG,CAAC,CAAD,CAAnB;IACA,MAAM0B,MAAM,GAAG1B,GAAG,EAAlB;IACAC,KAAK,CAACyB,MAAD,EAASC,QAAQ,IAAI;MAAA;;MACxB,IAAI,CAACA,QAAL,EAAe;MACfF,OAAO,CAACG,KAAR,sDAAgBD,QAAQ,CAACE,GAAT,CAAaC,aAAb,CAA2B,0BAA3B,CAAhB,qBAAgB,uBAAwDC,qBAAxD,GAAgFC,KAAhG,oCAAyG,CAAzG;IACD,CAHI,EAGF;MACDC,KAAK,EAAE;IADN,CAHE,CAAL;IAOA,OAAO;MAAA;;MAAA;QAAA,SAEI,CACL,iBADK,EAEL;UACE,6BAA6BzB,KAAK,CAACG;QADrC,CAFK,CAFJ;QAAA,SAQI;UACL,yBAAyBT,aAAa,CAACuB,OAAO,CAACG,KAAT;QADjC;MARJ;QAAA,SAaK,uBAbL;QAAA,SAcOJ,eAAe,CAACI;MAdvB,sBAgBCP,KAAK,CAACL,OAhBP,qBAgBC,oBAAAK,KAAK,CAhBN;QAAA,OAoBKK,MApBL;QAAA,WAqBSlB,KAAK,CAACK,OArBf;QAAA,QAsBML,KAAK,CAACU,IAtBZ;QAAA,aAuBWV,KAAK,CAACW,SAvBjB;QAAA,QAwBMX,KAAK,CAAC0B,IAxBZ;QAAA,aAyBW1B,KAAK,CAAC2B,SAzBjB;QAAA,YA0BU3B,KAAK,CAACC,QA1BhB;QAAA,WA2BSD,KAAK,CAACG,OA3Bf;QAAA,WA4BSH,KAAK,CAAC4B;MA5Bf,GA6BQ;QAAEpB,OAAO,EAAEK,KAAK,CAACH;MAAjB,CA7BR,GAgCDI,QAAQ,CAACe,OAAT,CAAiBT,KAAjB,KAA2B,SAA3B;QAAA,SACW;MADX,IAEI,CAACpB,KAAK,CAACM,YAAP,wBAAuBO,KAAK,CAACiB,QAA7B,qBAAuB,qBAAAjB,KAAK,CAA5B,CAFJ,EAhCC;IAAA,CAAP;EAuCD;;AA5E0C,CAAD,CAArC"}
+{"version":3,"file":"VTimelineItem.mjs","names":["VTimelineDivider","IconValue","makeElevationProps","makeRoundedProps","makeSizeProps","makeTagProps","ref","watch","convertToUnit","defineComponent","useRender","makeDimensionProps","useDimension","VTimelineItem","name","props","density","String","dotColor","fillDot","Boolean","hideDot","hideOpposite","type","default","undefined","icon","iconColor","setup","slots","dimensionStyles","dotSize","dotRef","newValue","value","$el","querySelector","getBoundingClientRect","width","flush","size","elevation","rounded","opposite"],"sources":["../../../src/components/VTimeline/VTimelineItem.tsx"],"sourcesContent":["// Components\nimport { VTimelineDivider } from './VTimelineDivider'\n\n// Composables\nimport { IconValue } from '@/composables/icons'\nimport { makeElevationProps } from '@/composables/elevation'\nimport { makeRoundedProps } from '@/composables/rounded'\nimport { makeSizeProps } from '@/composables/size'\nimport { makeTagProps } from '@/composables/tag'\n\n// Utilities\nimport type { PropType } from 'vue'\nimport { ref, watch } from 'vue'\nimport { convertToUnit, defineComponent, useRender } from '@/util'\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\n\nexport const VTimelineItem = defineComponent({\n  name: 'VTimelineItem',\n\n  props: {\n    density: String as PropType<'default' | 'compact'>,\n    dotColor: String,\n    fillDot: Boolean,\n    hideDot: Boolean,\n    hideOpposite: {\n      type: Boolean,\n      default: undefined,\n    },\n    icon: IconValue,\n    iconColor: String,\n\n    ...makeRoundedProps(),\n    ...makeElevationProps(),\n    ...makeSizeProps(),\n    ...makeTagProps(),\n    ...makeDimensionProps(),\n  },\n\n  setup (props, { slots }) {\n    const { dimensionStyles } = useDimension(props)\n\n    const dotSize = ref(0)\n    const dotRef = ref<VTimelineDivider>()\n    watch(dotRef, newValue => {\n      if (!newValue) return\n      dotSize.value = newValue.$el.querySelector('.v-timeline-divider__dot')?.getBoundingClientRect().width ?? 0\n    }, {\n      flush: 'post',\n    })\n\n    useRender(() => (\n      <div\n        class={[\n          'v-timeline-item',\n          {\n            'v-timeline-item--fill-dot': props.fillDot,\n          },\n        ]}\n        style={{\n          '--v-timeline-dot-size': convertToUnit(dotSize.value),\n        }}\n      >\n        <div\n          class=\"v-timeline-item__body\"\n          style={ dimensionStyles.value }\n        >\n          { slots.default?.() }\n        </div>\n\n        <VTimelineDivider\n          ref={ dotRef }\n          hideDot={ props.hideDot }\n          icon={ props.icon }\n          iconColor={ props.iconColor }\n          size={ props.size }\n          elevation={ props.elevation }\n          dotColor={ props.dotColor }\n          fillDot={ props.fillDot }\n          rounded={ props.rounded }\n          v-slots={{ default: slots.icon }}\n        />\n\n        { props.density !== 'compact' && (\n          <div class=\"v-timeline-item__opposite\">\n            { !props.hideOpposite && slots.opposite?.() }\n          </div>\n        ) }\n      </div>\n    ))\n\n    return {}\n  },\n})\n"],"mappings":";AAAA;SACSA,gB,kCAET;;SACSC,S;SACAC,kB;SACAC,gB;SACAC,a;SACAC,Y,qCAET;;AAEA,SAASC,GAAT,EAAcC,KAAd,QAA2B,KAA3B;SACSC,a,EAAeC,e,EAAiBC,S;SAChCC,kB,EAAoBC,Y;AAE7B,OAAO,MAAMC,aAAa,GAAGJ,eAAe,CAAC;EAC3CK,IAAI,EAAE,eADqC;EAG3CC,KAAK,EAAE;IACLC,OAAO,EAAEC,MADJ;IAELC,QAAQ,EAAED,MAFL;IAGLE,OAAO,EAAEC,OAHJ;IAILC,OAAO,EAAED,OAJJ;IAKLE,YAAY,EAAE;MACZC,IAAI,EAAEH,OADM;MAEZI,OAAO,EAAEC;IAFG,CALT;IASLC,IAAI,EAAEzB,SATD;IAUL0B,SAAS,EAAEV,MAVN;IAYL,GAAGd,gBAAgB,EAZd;IAaL,GAAGD,kBAAkB,EAbhB;IAcL,GAAGE,aAAa,EAdX;IAeL,GAAGC,YAAY,EAfV;IAgBL,GAAGM,kBAAkB;EAhBhB,CAHoC;;EAsB3CiB,KAAK,CAAEb,KAAF,QAAoB;IAAA,IAAX;MAAEc;IAAF,CAAW;IACvB,MAAM;MAAEC;IAAF,IAAsBlB,YAAY,CAACG,KAAD,CAAxC;IAEA,MAAMgB,OAAO,GAAGzB,GAAG,CAAC,CAAD,CAAnB;IACA,MAAM0B,MAAM,GAAG1B,GAAG,EAAlB;IACAC,KAAK,CAACyB,MAAD,EAASC,QAAQ,IAAI;MAAA;;MACxB,IAAI,CAACA,QAAL,EAAe;MACfF,OAAO,CAACG,KAAR,sDAAgBD,QAAQ,CAACE,GAAT,CAAaC,aAAb,CAA2B,0BAA3B,CAAhB,qBAAgB,uBAAwDC,qBAAxD,GAAgFC,KAAhG,oCAAyG,CAAzG;IACD,CAHI,EAGF;MACDC,KAAK,EAAE;IADN,CAHE,CAAL;IAOA7B,SAAS,CAAC;MAAA;;MAAA;QAAA,SAEC,CACL,iBADK,EAEL;UACE,6BAA6BK,KAAK,CAACI;QADrC,CAFK,CAFD;QAAA,SAQC;UACL,yBAAyBX,aAAa,CAACuB,OAAO,CAACG,KAAT;QADjC;MARD;QAAA,SAaE,uBAbF;QAAA,SAcIJ,eAAe,CAACI;MAdpB,sBAgBFL,KAAK,CAACL,OAhBJ,qBAgBF,oBAAAK,KAAK,CAhBH;QAAA,OAoBEG,MApBF;QAAA,WAqBMjB,KAAK,CAACM,OArBZ;QAAA,QAsBGN,KAAK,CAACW,IAtBT;QAAA,aAuBQX,KAAK,CAACY,SAvBd;QAAA,QAwBGZ,KAAK,CAACyB,IAxBT;QAAA,aAyBQzB,KAAK,CAAC0B,SAzBd;QAAA,YA0BO1B,KAAK,CAACG,QA1Bb;QAAA,WA2BMH,KAAK,CAACI,OA3BZ;QAAA,WA4BMJ,KAAK,CAAC2B;MA5BZ,GA6BK;QAAElB,OAAO,EAAEK,KAAK,CAACH;MAAjB,CA7BL,GAgCJX,KAAK,CAACC,OAAN,KAAkB,SAAlB;QAAA,SACW;MADX,IAEI,CAACD,KAAK,CAACO,YAAP,wBAAuBO,KAAK,CAACc,QAA7B,qBAAuB,qBAAAd,KAAK,CAA5B,CAFJ,EAhCI;IAAA,CAAD,CAAT;IAwCA,OAAO,EAAP;EACD;;AA3E0C,CAAD,CAArC"}

package/lib/components/VTimeline/_variables.scss

@@ -1,23 +1,28 @@
 @use '../../styles/tools';
 
-// Defaults
+// VTimeline
 $timeline-density-comfortable-grid-template-end: min-content min-content auto !default;
 $timeline-density-comfortable-grid-template-start: auto min-content min-content !default;
 $timeline-density-compact-grid-template-end: min-content auto !default;
 $timeline-density-compact-grid-template-start: auto min-content !default;
-$timeline-divider-dot-elevation: 0 !default;
-$timeline-divider-line-background: rgba(var(--v-border-color), var(--v-border-opacity)) !default;
-$timeline-divider-line-horizontal-width: var(--v-timeline-line-inset, 0px) !default;
-$timeline-divider-line-thickness: var(--v-timeline-line-thickness) !default;
 $timeline-dot-border-radius: 50% !default;
 $timeline-dot-divider-background: rgb(var(--v-theme-on-surface-variant)) !default;
+$timeline-dot-size: 38px !default;
 $timeline-inner-dot-divider-background: rgb(var(--v-theme-on-surface)) !default;
 $timeline-inset-divider-line: var(--v-timeline-line-inset) !default;
 $timeline-inset-line-size: 4px !default;
+
+// VTimelineDivider
+$timeline-divider-dot-elevation: 0 !default;
+$timeline-divider-line-background: rgba(var(--v-border-color), var(--v-border-opacity)) !default;
+$timeline-divider-line-horizontal-width: var(--v-timeline-line-inset, 0px) !default;
+$timeline-divider-line-thickness: var(--v-timeline-line-thickness) !default;
+
+// VTimelineItem
 $timeline-item-grid-template: auto min-content auto !default;
 $timeline-item-padding: 24px !default;
-$timeline-dot-size: 38px !default;
 
+// Lists
 $timeline-dot-border-sizes: () !default;
 $timeline-dot-border-sizes: tools.map-deep-merge(
   (