@vuetify/nightly 3.0.0-beta.0 → 3.0.0-beta.2

package/lib/components/VTextField/VTextField.css

@@ -2,8 +2,8 @@
 .v-text-field input {
   color: inherit;
   flex: 1;
-  opacity: 0;
   transition: 0.15s opacity cubic-bezier(0.4, 0, 0.2, 1);
+  min-width: 0;
 }
 .v-text-field input:focus, .v-text-field input:active {
   outline: none;
@@ -26,6 +26,9 @@
   padding-inline-start: 16px;
   padding-inline-end: 16px;
 }
+.v-text-field .v-field--has-label input {
+  opacity: 0;
+}
 .v-text-field .v-field--active input {
   opacity: 1;
 }
@@ -63,8 +66,5 @@
 .v-text-field--flush-details .v-input__details {
   padding: 0;
 }
-.v-text-field--persistent-placeholder input {
-  opacity: 1;
-}
 
 /* endregion */

package/lib/components/VTextField/VTextField.mjs

@@ -40,13 +40,9 @@ export const VTextField = genericComponent()({
     ...makeVFieldProps()
   },
   emits: {
-    'click:append': e => true,
-    'click:append-inner': e => true,
     'click:clear': e => true,
     'click:control': e => true,
     'click:input': e => true,
-    'click:prepend': e => true,
-    'click:prepend-inner': e => true,
     'update:modelValue': val => true
   },
 
@@ -121,13 +117,12 @@ export const VTextField = genericComponent()({
         "modelValue": model.value,
         "onUpdate:modelValue": $event => model.value = $event,
         "class": ['v-text-field', {
-          'v-text-field--persistent-placeholder': props.persistentPlaceholder,
           'v-text-field--prefixed': props.prefix,
           'v-text-field--suffixed': props.suffix,
           'v-text-field--flush-details': ['plain', 'underlined'].includes(props.variant)
         }],
-        "onClick:prepend": e => emit('click:prepend', e),
-        "onClick:append": e => emit('click:append', e)
+        "onClick:prepend": attrs['onClick:prepend'],
+        "onClick:append": attrs['onClick:append']
       }, rootAttrs, inputProps, {
         "messages": messages.value
       }), { ...slots,
@@ -146,8 +141,8 @@ export const VTextField = genericComponent()({
             },
             "onClick:control": onControlClick,
             "onClick:clear": onClear,
-            "onClick:prependInner": e => emit('click:prepend-inner', e),
-            "onClick:appendInner": e => emit('click:append-inner', e),
+            "onClick:prependInner": attrs['onClick:prependInner'],
+            "onClick:appendInner": attrs['onClick:prependInner'],
             "role": "textbox"
           }, fieldProps, {
             "active": isActive.value || isDirty.value,
@@ -175,6 +170,7 @@ export const VTextField = genericComponent()({
                 "autofocus": props.autofocus,
                 "readonly": isReadonly.value,
                 "disabled": isDisabled.value,
+                "name": props.name,
                 "placeholder": props.placeholder,
                 "size": 1,
                 "type": props.type,

package/lib/components/VTextField/VTextField.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VTextField/VTextField.tsx"],"names":["filterInputProps","makeVInputProps","VInput","filterFieldProps","makeVFieldProps","VField","VCounter","useForwardRef","useProxiedModel","Intersect","computed","nextTick","ref","filterInputAttrs","genericComponent","useRender","activeTypes","VTextField","name","directives","inheritAttrs","props","autofocus","Boolean","counter","Number","String","counterValue","Function","hint","persistentHint","prefix","placeholder","persistentPlaceholder","persistentCounter","suffix","type","default","emits","e","val","setup","attrs","emit","slots","model","value","toString","length","max","maxlength","undefined","onIntersect","isIntersecting","entries","target","focus","vInputRef","vFieldRef","isFocused","inputRef","isActive","includes","messages","onFocus","document","activeElement","onControlClick","onClear","stopPropagation","hasCounter","rootAttrs","inputAttrs","modelValue","_","inputProps","fieldProps","variant","isDisabled","isDirty","isReadonly","isValid","preventDefault","dirty","class","fieldClass","slotProps","handler","details"],"mappings":"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","sourcesContent":["// Styles\nimport './VTextField.sass'\n\n// Components\nimport { filterInputProps, makeVInputProps, VInput } from '@/components/VInput/VInput'\nimport { filterFieldProps, makeVFieldProps, VField } from '@/components/VField/VField'\nimport { VCounter } from '@/components/VCounter'\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, ref } from 'vue'\nimport { filterInputAttrs, genericComponent, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { VInputSlots } from '@/components/VInput/VInput'\nimport type { VFieldSlots } from '@/components/VField/VField'\n\nconst activeTypes = ['color', 'file', 'time', 'date', 'datetime-local', 'week', 'month']\n\nexport const VTextField = genericComponent<new <T>() => {\n  $slots: VInputSlots & VFieldSlots\n}>()({\n  name: 'VTextField',\n\n  directives: { Intersect },\n\n  inheritAttrs: false,\n\n  props: {\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    suffix: String,\n    type: {\n      type: String,\n      default: 'text',\n    },\n\n    ...makeVInputProps(),\n    ...makeVFieldProps(),\n  },\n\n  emits: {\n    'click:append': (e: MouseEvent) => true,\n    'click:append-inner': (e: MouseEvent) => true,\n    'click:clear': (e: MouseEvent) => true,\n    'click:control': (e: MouseEvent) => true,\n    'click:input': (e: MouseEvent) => true,\n    'click:prepend': (e: MouseEvent) => true,\n    'click:prepend-inner': (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 inputRef = ref<HTMLInputElement>()\n    const isActive = computed(() => (\n      activeTypes.includes(props.type) ||\n      props.persistentPlaceholder ||\n      isFocused.value\n    ))\n    const messages = computed(() => {\n      return props.messages.length\n        ? props.messages\n        : (isFocused.value || props.persistentHint) ? props.hint : ''\n    })\n    function onFocus () {\n      if (inputRef.value !== document.activeElement) {\n        inputRef.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    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          ref={ vInputRef }\n          v-model={ model.value }\n          class={[\n            'v-text-field',\n            {\n              'v-text-field--persistent-placeholder': props.persistentPlaceholder,\n              'v-text-field--prefixed': props.prefix,\n              'v-text-field--suffixed': props.suffix,\n              'v-text-field--flush-details': ['plain', 'underlined'].includes(props.variant),\n            },\n          ]}\n          onClick:prepend={ (e: MouseEvent) => emit('click:prepend', e) }\n          onClick:append={ (e: MouseEvent) => emit('click:append', e) }\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                ref={ vFieldRef }\n                onMousedown={ (e: MouseEvent) => {\n                  if (e.target === inputRef.value) return\n\n                  e.preventDefault()\n                }}\n                onClick:control={ onControlClick }\n                onClick:clear={ onClear }\n                onClick:prependInner={ (e: MouseEvent) => emit('click:prepend-inner', e) }\n                onClick:appendInner={ (e: MouseEvent) => emit('click:append-inner', e) }\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                    return (\n                      <>\n                        { props.prefix && (\n                          <span class=\"v-text-field__prefix\">\n                            { props.prefix }\n                          </span>\n                        ) }\n\n                        <div\n                          class={ fieldClass }\n                          onClick={ e => emit('click:input', e) }\n                        >\n                          { slots.default?.() }\n\n                          <input\n                            ref={ inputRef }\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                            size={ 1 }\n                            type={ props.type }\n                            onFocus={ onFocus }\n                            onBlur={ () => (isFocused.value = false) }\n                            { ...slotProps }\n                            { ...inputAttrs }\n                          />\n                        </div>\n\n                        { props.suffix && (\n                          <span class=\"v-text-field__suffix\">\n                            { props.suffix }\n                          </span>\n                        ) }\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, inputRef)\n  },\n})\n\nexport type VTextField = InstanceType<typeof VTextField>\n"],"file":"VTextField.mjs"}
+{"version":3,"sources":["../../../src/components/VTextField/VTextField.tsx"],"names":["filterInputProps","makeVInputProps","VInput","filterFieldProps","makeVFieldProps","VField","VCounter","useForwardRef","useProxiedModel","Intersect","computed","nextTick","ref","filterInputAttrs","genericComponent","useRender","activeTypes","VTextField","name","directives","inheritAttrs","props","autofocus","Boolean","counter","Number","String","counterValue","Function","hint","persistentHint","prefix","placeholder","persistentPlaceholder","persistentCounter","suffix","type","default","emits","e","val","setup","attrs","emit","slots","model","value","toString","length","max","maxlength","undefined","onIntersect","isIntersecting","entries","target","focus","vInputRef","vFieldRef","isFocused","inputRef","isActive","includes","messages","onFocus","document","activeElement","onControlClick","onClear","stopPropagation","hasCounter","rootAttrs","inputAttrs","modelValue","_","inputProps","fieldProps","variant","isDisabled","isDirty","isReadonly","isValid","preventDefault","dirty","class","fieldClass","slotProps","handler","details"],"mappings":"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","sourcesContent":["// Styles\nimport './VTextField.sass'\n\n// Components\nimport { filterInputProps, makeVInputProps, VInput } from '@/components/VInput/VInput'\nimport { filterFieldProps, makeVFieldProps, VField } from '@/components/VField/VField'\nimport { VCounter } from '@/components/VCounter'\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, ref } from 'vue'\nimport { filterInputAttrs, genericComponent, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { VInputSlots } from '@/components/VInput/VInput'\nimport type { VFieldSlots } from '@/components/VField/VField'\n\nconst activeTypes = ['color', 'file', 'time', 'date', 'datetime-local', 'week', 'month']\n\nexport const VTextField = genericComponent<new <T>() => {\n  $slots: VInputSlots & VFieldSlots\n}>()({\n  name: 'VTextField',\n\n  directives: { Intersect },\n\n  inheritAttrs: false,\n\n  props: {\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    suffix: String,\n    type: {\n      type: String,\n      default: 'text',\n    },\n\n    ...makeVInputProps(),\n    ...makeVFieldProps(),\n  },\n\n  emits: {\n    'click:clear': (e: MouseEvent) => true,\n    'click:control': (e: MouseEvent) => true,\n    'click:input': (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 inputRef = ref<HTMLInputElement>()\n    const isActive = computed(() => (\n      activeTypes.includes(props.type) ||\n      props.persistentPlaceholder ||\n      isFocused.value\n    ))\n    const messages = computed(() => {\n      return props.messages.length\n        ? props.messages\n        : (isFocused.value || props.persistentHint) ? props.hint : ''\n    })\n    function onFocus () {\n      if (inputRef.value !== document.activeElement) {\n        inputRef.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    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          ref={ vInputRef }\n          v-model={ model.value }\n          class={[\n            'v-text-field',\n            {\n              'v-text-field--prefixed': props.prefix,\n              'v-text-field--suffixed': props.suffix,\n              'v-text-field--flush-details': ['plain', 'underlined'].includes(props.variant),\n            },\n          ]}\n          onClick:prepend={ attrs['onClick:prepend'] }\n          onClick:append={ attrs['onClick:append'] }\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                ref={ vFieldRef }\n                onMousedown={ (e: MouseEvent) => {\n                  if (e.target === inputRef.value) return\n\n                  e.preventDefault()\n                }}\n                onClick:control={ onControlClick }\n                onClick:clear={ onClear }\n                onClick:prependInner={ attrs['onClick:prependInner'] }\n                onClick:appendInner={ attrs['onClick:prependInner'] }\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                    return (\n                      <>\n                        { props.prefix && (\n                          <span class=\"v-text-field__prefix\">\n                            { props.prefix }\n                          </span>\n                        ) }\n\n                        <div\n                          class={ fieldClass }\n                          onClick={ e => emit('click:input', e) }\n                        >\n                          { slots.default?.() }\n\n                          <input\n                            ref={ inputRef }\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                            name={ props.name }\n                            placeholder={ props.placeholder }\n                            size={ 1 }\n                            type={ props.type }\n                            onFocus={ onFocus }\n                            onBlur={ () => (isFocused.value = false) }\n                            { ...slotProps }\n                            { ...inputAttrs }\n                          />\n                        </div>\n\n                        { props.suffix && (\n                          <span class=\"v-text-field__suffix\">\n                            { props.suffix }\n                          </span>\n                        ) }\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, inputRef)\n  },\n})\n\nexport type VTextField = InstanceType<typeof VTextField>\n"],"file":"VTextField.mjs"}

package/lib/components/VTextField/VTextField.sass

@@ -8,8 +8,8 @@
   input
     color: inherit
     flex: $text-field-input-flex
-    opacity: 0
     transition: $text-field-input-transition
+    min-width: 0
 
     &:focus,
     &:active
@@ -33,6 +33,10 @@
     padding-inline-start: $text-field-details-padding-inline
     padding-inline-end: $text-field-details-padding-inline
 
+  .v-field--has-label
+    input
+      opacity: 0
+
   .v-field--active
     input
       opacity: 1
@@ -73,8 +77,4 @@
   &--flush-details
     .v-input__details
       padding: 0
-
-  &--persistent-placeholder
-    input
-      opacity: 1
 /* endregion */

package/lib/components/VTextarea/VTextarea.css

@@ -1,6 +1,3 @@
-.v-textarea .v-field--active textarea {
-  opacity: 1;
-}
 .v-textarea .v-field__input {
   flex: 1 1 auto;
   line-height: 1.75;
@@ -21,9 +18,15 @@
   height: 0 !important;
   pointer-events: none;
 }
+.v-textarea .v-field--has-label textarea {
+  opacity: 0;
+}
+.v-textarea .v-field--active textarea {
+  opacity: 1;
+}
 .v-textarea textarea {
   flex: 1;
-  opacity: 0;
+  min-width: 0;
   transition: 0.15s opacity cubic-bezier(0.4, 0, 0.2, 1);
 }
 .v-textarea textarea:focus, .v-textarea textarea:active {

package/lib/components/VTextarea/VTextarea.sass

@@ -7,10 +7,6 @@
 @use '../VInput/variables' as *
 
 .v-textarea
-  .v-field--active
-    textarea
-      opacity: 1
-
   .v-field__input
     flex: 1 1 auto
     line-height: $textarea-line-height
@@ -33,9 +29,17 @@
     height: 0 !important
     pointer-events: none
 
+  .v-field--has-label
+    textarea
+      opacity: 0
+
+  .v-field--active
+    textarea
+      opacity: 1
+
   textarea
     flex: 1
-    opacity: 0
+    min-width: 0
     transition: .15s opacity settings.$standard-easing
 
     &:focus,

package/lib/components/VTimeline/VTimeline.css

@@ -1,4 +1,7 @@
 .v-timeline .v-timeline-divider__dot {
+  background: rgb(var(--v-theme-on-surface-variant));
+}
+.v-timeline .v-timeline-divider__inner-dot {
   background: rgb(var(--v-theme-on-surface));
 }
 
@@ -9,34 +12,43 @@
 }
 .v-timeline--horizontal.v-timeline {
   grid-template-rows: auto min-content auto;
+  grid-column-gap: 24px;
   width: 100%;
 }
-.v-timeline--horizontal.v-timeline .v-timeline-item__body, .v-timeline--horizontal.v-timeline .v-timeline-item__opposite {
-  padding-inline-start: calc(var(--v-timeline-dot-size) / 2 - 5px);
+.v-timeline--horizontal.v-timeline .v-timeline-item:first-child .v-timeline-item__body, .v-timeline--horizontal.v-timeline .v-timeline-item:first-child .v-timeline-item__opposite, .v-timeline--horizontal.v-timeline .v-timeline-item:first-child .v-timeline-divider {
+  padding-inline-start: 24px;
+}
+.v-timeline--horizontal.v-timeline .v-timeline-item:last-child .v-timeline-item__body, .v-timeline--horizontal.v-timeline .v-timeline-item:last-child .v-timeline-item__opposite, .v-timeline--horizontal.v-timeline .v-timeline-item:last-child .v-timeline-divider {
+  padding-inline-end: 24px;
 }
 .v-timeline--horizontal.v-timeline .v-timeline-item:nth-child(2n) .v-timeline-item__body {
   grid-row: 3;
-  padding-top: 24px;
+  padding-block-start: 24px;
 }
 .v-timeline--horizontal.v-timeline .v-timeline-item:nth-child(2n) .v-timeline-item__opposite {
   grid-row: 1;
-  padding-bottom: 24px;
+  padding-block-end: 24px;
+  align-self: flex-end;
 }
 .v-timeline--horizontal.v-timeline .v-timeline-item:nth-child(2n+1) .v-timeline-item__body {
   grid-row: 1;
-  padding-bottom: 24px;
+  padding-block-end: 24px;
 }
 .v-timeline--horizontal.v-timeline .v-timeline-item:nth-child(2n+1) .v-timeline-item__opposite {
   grid-row: 3;
-  padding-top: 24px;
+  padding-block-start: 24px;
 }
 
 .v-timeline--vertical.v-timeline {
   grid-template-columns: auto min-content auto;
+  grid-row-gap: 24px;
   height: 100%;
 }
-.v-timeline--vertical.v-timeline .v-timeline-item__body, .v-timeline--vertical.v-timeline .v-timeline-item__opposite {
-  padding-top: calc((var(--v-timeline-dot-size) - 1.5em) / 2);
+.v-timeline--vertical.v-timeline .v-timeline-item:first-child .v-timeline-divider, .v-timeline--vertical.v-timeline .v-timeline-item:first-child .v-timeline-item__body, .v-timeline--vertical.v-timeline .v-timeline-item:first-child .v-timeline-item__opposite {
+  padding-block-start: 24px;
+}
+.v-timeline--vertical.v-timeline .v-timeline-item:last-child .v-timeline-item__body, .v-timeline--vertical.v-timeline .v-timeline-item:last-child .v-timeline-item__opposite, .v-timeline--vertical.v-timeline .v-timeline-item:last-child .v-timeline-divider {
+  padding-block-end: 24px;
 }
 .v-timeline--vertical.v-timeline .v-timeline-item:nth-child(2n) .v-timeline-item__body {
   grid-column: 1;
@@ -61,53 +73,55 @@
   display: contents;
 }
 
+.v-timeline-divider {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+.v-timeline--horizontal .v-timeline-divider {
+  flex-direction: row;
+  grid-row: 2;
+  width: 100%;
+}
+
+.v-timeline--vertical .v-timeline-divider {
+  height: 100%;
+  flex-direction: column;
+  grid-column: 2;
+}
+
 .v-timeline-divider__line {
   background: rgba(var(--v-border-color), var(--v-border-opacity));
   position: absolute;
 }
 .v-timeline--horizontal .v-timeline-divider__line {
   height: var(--v-timeline-line-thickness);
-  width: calc(100% - var(--v-timeline-line-inset, 0px));
+  width: calc(100% + 24px);
+}
+.v-timeline--horizontal .v-timeline-divider__line.v-locale--is-ltr, .v-locale--is-ltr .v-timeline--horizontal .v-timeline-divider__line {
+  left: 0;
+}
+.v-timeline--horizontal .v-timeline-divider__line.v-locale--is-rtl, .v-locale--is-rtl .v-timeline--horizontal .v-timeline-divider__line {
+  right: 0;
 }
 
 .v-timeline--vertical .v-timeline-divider__line {
-  height: 100%;
+  height: calc(100% + 24px);
   width: var(--v-timeline-line-thickness);
 }
-
-.v-timeline--vertical.v-timeline--inset-line .v-timeline-divider__line {
-  height: calc(100% - var(--v-timeline-dot-size) - var(--v-timeline-line-inset));
-  bottom: calc(var(--v-timeline-line-inset) / 2);
-}
-
-.v-timeline--horizontal.v-timeline--inset-line .v-timeline-divider__line {
-  width: calc(100% - var(--v-timeline-dot-size) - var(--v-timeline-line-inset));
-  inset-inline-end: calc(var(--v-timeline-line-inset) / 2);
+.v-timeline--vertical .v-timeline-divider__line.v-locale--is-ltr, .v-locale--is-ltr .v-timeline--vertical .v-timeline-divider__line {
+  top: 0;
 }
-
-.v-timeline--vertical.v-timeline:not(.v-timeline--inset-line) .v-timeline-item:first-child .v-timeline-divider__line {
+.v-timeline--vertical .v-timeline-divider__line.v-locale--is-rtl, .v-locale--is-rtl .v-timeline--vertical .v-timeline-divider__line {
   bottom: 0;
-  height: calc(100% - var(--v-timeline-dot-size) / 2);
-}
-
-.v-timeline--horizontal.v-timeline:not(.v-timeline--inset-line) .v-timeline-item:first-child .v-timeline-divider__line {
-  width: calc(100% - var(--v-timeline-dot-size) / 2);
-  inset-inline-end: 0;
 }
 
-.v-timeline-divider {
-  position: relative;
-  display: flex;
-  align-items: center;
-}
-.v-timeline--horizontal .v-timeline-divider {
-  flex-direction: row;
-  grid-row: 2;
+.v-timeline--vertical .v-timeline-item:last-child .v-timeline-divider__line {
+  height: 100%;
 }
 
-.v-timeline--vertical .v-timeline-divider {
-  flex-direction: column;
-  grid-column: 2;
+.v-timeline--horizontal .v-timeline-item:last-child .v-timeline-divider__line {
+  width: 100%;
 }
 
 .v-timeline-divider__dot {
@@ -210,34 +224,37 @@
 
 .v-timeline--horizontal.v-timeline.v-timeline--side-end .v-timeline-item .v-timeline-item__body {
   grid-row: 3;
-  padding-bottom: initial;
-  padding-top: 24px;
+  padding-block-end: initial;
+  padding-block-start: 24px;
 }
 .v-timeline--horizontal.v-timeline.v-timeline--side-end .v-timeline-item .v-timeline-item__opposite {
   grid-row: 1;
-  padding-bottom: 24px;
-  padding-top: initial;
+  padding-block-end: 24px;
+  padding-block-start: initial;
 }
 
 .v-timeline--vertical.v-timeline.v-timeline--side-end .v-timeline-item .v-timeline-item__body {
   grid-column: 3;
   text-align: initial;
   padding-inline-start: 24px;
+  padding-inline-end: initial;
 }
 .v-timeline--vertical.v-timeline.v-timeline--side-end .v-timeline-item .v-timeline-item__opposite {
   grid-column: 1;
+  text-align: end;
   padding-inline-end: 24px;
+  padding-inline-start: initial;
 }
 
 .v-timeline--horizontal.v-timeline.v-timeline--side-start .v-timeline-item .v-timeline-item__body {
   grid-row: 1;
-  padding-bottom: 24px;
-  padding-top: initial;
+  padding-block-end: 24px;
+  padding-block-start: initial;
 }
 .v-timeline--horizontal.v-timeline.v-timeline--side-start .v-timeline-item .v-timeline-item__opposite {
   grid-row: 3;
-  padding-bottom: initial;
-  padding-top: 24px;
+  padding-block-end: initial;
+  padding-block-start: 24px;
 }
 
 .v-timeline--vertical.v-timeline.v-timeline--side-start .v-timeline-item .v-timeline-item__body {
@@ -247,6 +264,7 @@
 }
 .v-timeline--vertical.v-timeline.v-timeline--side-start .v-timeline-item .v-timeline-item__opposite {
   grid-column: 3;
+  text-align: initial;
   padding-inline-start: 24px;
 }
 
@@ -255,6 +273,127 @@
   width: inherit;
 }
 
-.v-timeline--truncate-line-end .v-timeline-item:last-child .v-timeline-divider__line {
-  display: none;
+.v-timeline--horizontal.v-timeline--truncate-line-end .v-timeline-item:last-child .v-timeline-divider__line {
+  width: 50%;
+}
+
+.v-timeline--vertical.v-timeline--truncate-line-end .v-timeline-item:last-child .v-timeline-divider__line {
+  height: 24px;
+}
+
+.v-timeline--horizontal.v-timeline--truncate-line-end.v-timeline--align-start .v-timeline-item:last-child .v-timeline-divider__line {
+  width: 24px;
+}
+
+.v-timeline--horizontal.v-timeline--truncate-line-start .v-timeline-item:first-child .v-timeline-item__body, .v-timeline--horizontal.v-timeline--truncate-line-start .v-timeline-item:first-child .v-timeline-item__opposite, .v-timeline--horizontal.v-timeline--truncate-line-start .v-timeline-item:first-child .v-timeline-divider {
+  padding-inline-start: 0;
+}
+
+.v-timeline--vertical.v-timeline--truncate-line-start .v-timeline-item:first-child .v-timeline-item__body, .v-timeline--vertical.v-timeline--truncate-line-start .v-timeline-item:first-child .v-timeline-item__opposite, .v-timeline--vertical.v-timeline--truncate-line-start .v-timeline-item:first-child .v-timeline-divider {
+  padding-block-start: 0;
+}
+
+.v-timeline--horizontal.v-timeline--truncate-line-start.v-timeline--align-center .v-timeline-item:first-child .v-timeline-divider__line {
+  width: calc(50% + var(--v-timeline-dot-size));
+}
+.v-timeline--horizontal.v-timeline--truncate-line-start.v-timeline--align-center .v-timeline-item:first-child .v-timeline-divider__line.v-locale--is-ltr, .v-locale--is-ltr .v-timeline--horizontal.v-timeline--truncate-line-start.v-timeline--align-center .v-timeline-item:first-child .v-timeline-divider__line {
+  left: calc(50% + 24px - var(--v-timeline-dot-size));
+}
+.v-timeline--horizontal.v-timeline--truncate-line-start.v-timeline--align-center .v-timeline-item:first-child .v-timeline-divider__line.v-locale--is-rtl, .v-locale--is-rtl .v-timeline--horizontal.v-timeline--truncate-line-start.v-timeline--align-center .v-timeline-item:first-child .v-timeline-divider__line {
+  right: calc(50% + 24px - var(--v-timeline-dot-size));
+}
+
+.v-timeline--vertical.v-timeline--truncate-line-start.v-timeline--align-center .v-timeline-item:first-child .v-timeline-divider__line {
+  height: calc(50% + var(--v-timeline-dot-size));
+}
+.v-timeline--vertical.v-timeline--truncate-line-start.v-timeline--align-center .v-timeline-item:first-child .v-timeline-divider__line.v-locale--is-ltr, .v-locale--is-ltr .v-timeline--vertical.v-timeline--truncate-line-start.v-timeline--align-center .v-timeline-item:first-child .v-timeline-divider__line {
+  top: calc(50% + 24px - var(--v-timeline-dot-size));
+}
+.v-timeline--vertical.v-timeline--truncate-line-start.v-timeline--align-center .v-timeline-item:first-child .v-timeline-divider__line.v-locale--is-rtl, .v-locale--is-rtl .v-timeline--vertical.v-timeline--truncate-line-start.v-timeline--align-center .v-timeline-item:first-child .v-timeline-divider__line {
+  bottom: calc(50% + 24px - var(--v-timeline-dot-size));
+}
+
+.v-timeline--horizontal.v-timeline--align-center {
+  justify-items: center;
+}
+.v-timeline--horizontal.v-timeline--align-center .v-timeline-divider {
+  justify-content: center;
+}
+
+.v-timeline--vertical.v-timeline--align-center {
+  align-items: center;
+}
+.v-timeline--vertical.v-timeline--align-center .v-timeline-divider {
+  justify-content: center;
+}
+
+.v-timeline--horizontal .v-timeline--align-start {
+  justify-content: flex-start;
+}
+
+.v-timeline--vertical.v-timeline--align-start {
+  align-items: flex-start;
+}
+.v-timeline--vertical.v-timeline--align-start .v-timeline-divider {
+  justify-content: flex-start;
+}
+
+.v-timeline--horizontal.v-timeline--inset-line .v-timeline-divider__line {
+  width: calc(100% + 24px - var(--v-timeline-dot-size) - var(--v-timeline-line-inset) * 2);
+}
+.v-timeline--horizontal.v-timeline--inset-line .v-timeline-divider__line.v-locale--is-ltr, .v-locale--is-ltr .v-timeline--horizontal.v-timeline--inset-line .v-timeline-divider__line {
+  left: calc(50% + var(--v-timeline-line-inset) + var(--v-timeline-dot-size) / 2);
+}
+.v-timeline--horizontal.v-timeline--inset-line .v-timeline-divider__line.v-locale--is-rtl, .v-locale--is-rtl .v-timeline--horizontal.v-timeline--inset-line .v-timeline-divider__line {
+  right: calc(50% + var(--v-timeline-line-inset) + var(--v-timeline-dot-size) / 2);
+}
+
+.v-timeline--vertical.v-timeline--inset-line .v-timeline-divider__line {
+  height: calc(100% + 24px - var(--v-timeline-dot-size) - var(--v-timeline-line-inset) * 2);
+}
+.v-timeline--vertical.v-timeline--inset-line .v-timeline-divider__line.v-locale--is-ltr, .v-locale--is-ltr .v-timeline--vertical.v-timeline--inset-line .v-timeline-divider__line {
+  top: calc(50% + var(--v-timeline-line-inset) + var(--v-timeline-dot-size) / 2);
+}
+.v-timeline--vertical.v-timeline--inset-line .v-timeline-divider__line.v-locale--is-rtl, .v-locale--is-rtl .v-timeline--vertical.v-timeline--inset-line .v-timeline-divider__line {
+  bottom: calc(50% + var(--v-timeline-line-inset) + var(--v-timeline-dot-size) / 2);
+}
+
+.v-timeline--horizontal.v-timeline--inset-line .v-timeline-item:first-child .v-timeline-divider__line {
+  width: calc(100% - var(--v-timeline-dot-size) - var(--v-timeline-line-inset) * 2);
+}
+.v-timeline--horizontal.v-timeline--inset-line .v-timeline-item:first-child .v-timeline-divider__line.v-locale--is-ltr, .v-locale--is-ltr .v-timeline--horizontal.v-timeline--inset-line .v-timeline-item:first-child .v-timeline-divider__line {
+  left: calc(50% + var(--v-timeline-dot-size) / 2 + 24px / 2 + var(--v-timeline-line-inset));
+}
+.v-timeline--horizontal.v-timeline--inset-line .v-timeline-item:first-child .v-timeline-divider__line.v-locale--is-rtl, .v-locale--is-rtl .v-timeline--horizontal.v-timeline--inset-line .v-timeline-item:first-child .v-timeline-divider__line {
+  right: calc(50% + var(--v-timeline-dot-size) / 2 + 24px / 2 + var(--v-timeline-line-inset));
+}
+
+.v-timeline--vertical.v-timeline--inset-line .v-timeline-item:first-child .v-timeline-divider__line {
+  height: calc(100% - var(--v-timeline-dot-size) - var(--v-timeline-line-inset) * 2);
+}
+.v-timeline--vertical.v-timeline--inset-line .v-timeline-item:first-child .v-timeline-divider__line.v-locale--is-ltr, .v-locale--is-ltr .v-timeline--vertical.v-timeline--inset-line .v-timeline-item:first-child .v-timeline-divider__line {
+  top: calc(50% + var(--v-timeline-dot-size) / 2 + 24px / 2 + var(--v-timeline-line-inset));
+}
+.v-timeline--vertical.v-timeline--inset-line .v-timeline-item:first-child .v-timeline-divider__line.v-locale--is-rtl, .v-locale--is-rtl .v-timeline--vertical.v-timeline--inset-line .v-timeline-item:first-child .v-timeline-divider__line {
+  bottom: calc(50% + var(--v-timeline-dot-size) / 2 + 24px / 2 + var(--v-timeline-line-inset));
+}
+
+.v-timeline--horizontal.v-timeline--inset-line .v-timeline-item:last-child .v-timeline-divider__line {
+  width: calc(50% - 24px - var(--v-timeline-line-inset) * 2);
+}
+.v-timeline--horizontal.v-timeline--inset-line .v-timeline-item:last-child .v-timeline-divider__line.v-locale--is-ltr, .v-locale--is-ltr .v-timeline--horizontal.v-timeline--inset-line .v-timeline-item:last-child .v-timeline-divider__line {
+  left: calc(50% + var(--v-timeline-line-inset) - 24px / 2 + var(--v-timeline-dot-size) / 2);
+}
+.v-timeline--horizontal.v-timeline--inset-line .v-timeline-item:last-child .v-timeline-divider__line.v-locale--is-rtl, .v-locale--is-rtl .v-timeline--horizontal.v-timeline--inset-line .v-timeline-item:last-child .v-timeline-divider__line {
+  right: calc(50% + var(--v-timeline-line-inset) - 24px / 2 + var(--v-timeline-dot-size) / 2);
+}
+
+.v-timeline--vertical.v-timeline--inset-line .v-timeline-item:last-child .v-timeline-divider__line {
+  height: calc(50% - 24px - var(--v-timeline-line-inset) * 2);
+}
+.v-timeline--vertical.v-timeline--inset-line .v-timeline-item:last-child .v-timeline-divider__line.v-locale--is-ltr, .v-locale--is-ltr .v-timeline--vertical.v-timeline--inset-line .v-timeline-item:last-child .v-timeline-divider__line {
+  top: calc(50% + var(--v-timeline-line-inset) - 24px / 2 + var(--v-timeline-dot-size) / 2);
+}
+.v-timeline--vertical.v-timeline--inset-line .v-timeline-item:last-child .v-timeline-divider__line.v-locale--is-rtl, .v-locale--is-rtl .v-timeline--vertical.v-timeline--inset-line .v-timeline-item:last-child .v-timeline-divider__line {
+  bottom: calc(50% + var(--v-timeline-line-inset) - 24px / 2 + var(--v-timeline-dot-size) / 2);
 }

package/lib/components/VTimeline/VTimeline.mjs

@@ -1,8 +1,6 @@
 import { createVNode as _createVNode } from "vue";
 // Styles
-import "./VTimeline.css"; // Components
-
-import { VTimelineItem } from "./VTimelineItem.mjs"; // Composables
+import "./VTimeline.css"; // Composables
 
 import { makeTagProps } from "../../composables/tag.mjs";
 import { makeDensityProps, useDensity } from "../../composables/density.mjs";
@@ -15,6 +13,11 @@ import { VTimelineSymbol } from "./shared.mjs"; // Types
 export const VTimeline = defineComponent({
   name: 'VTimeline',
   props: {
+    align: {
+      type: String,
+      default: 'center',
+      validator: v => ['center', 'start'].includes(v)
+    },
     direction: {
       type: String,
       default: 'vertical',
@@ -35,8 +38,7 @@ export const VTimeline = defineComponent({
     lineColor: String,
     truncateLine: {
       type: String,
-      default: 'start',
-      validator: v => ['none', 'start', 'end', 'both'].includes(v)
+      validator: v => ['start', 'end', 'both'].includes(v)
     },
     ...makeDensityProps(),
     ...makeTagProps(),
@@ -61,22 +63,36 @@ export const VTimeline = defineComponent({
       const side = props.side ? props.side : props.density !== 'default' ? 'end' : null;
       return side && `v-timeline--side-${side}`;
     });
+    const truncateClasses = computed(() => {
+      const classes = ['v-timeline--truncate-line-start', 'v-timeline--truncate-line-end'];
+
+      switch (props.truncateLine) {
+        case 'both':
+          return classes;
+
+        case 'start':
+          return classes[0];
+
+        case 'end':
+          return classes[1];
+
+        default:
+          return null;
+      }
+    });
     return () => {
       var _slots$default;
 
       return _createVNode(props.tag, {
-        "class": ['v-timeline', `v-timeline--${props.direction}`, {
-          'v-timeline--inset-line': !!props.lineInset,
-          'v-timeline--truncate-line-end': props.truncateLine === 'end' || props.truncateLine === 'both'
+        "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: () => [(props.truncateLine === 'none' || props.truncateLine === 'end') && _createVNode(VTimelineItem, {
-          "hideDot": true
-        }, null), (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots)]
+        default: () => [(_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots)]
       });
     };
   }