vuetify 3.6.0-alpha.2 → 3.6.0

package/lib/components/VInput/VInput.mjs

@@ -10,6 +10,7 @@ import { makeDensityProps, useDensity } from "../../composables/density.mjs";
 import { makeDimensionProps, useDimension } from "../../composables/dimensions.mjs";
 import { IconValue } from "../../composables/icons.mjs";
 import { useRtl } from "../../composables/locale.mjs";
+import { makeThemeProps, provideTheme } from "../../composables/theme.mjs";
 import { makeValidationProps, useValidation } from "../../composables/validation.mjs"; // Utilities
 import { computed } from 'vue';
 import { EventProp, genericComponent, getUid, only, propsFactory, useRender } from "../../util/index.mjs"; // Types
@@ -39,6 +40,7 @@ export const makeVInputProps = propsFactory({
   ...makeComponentProps(),
   ...makeDensityProps(),
   ...only(makeDimensionProps(), ['maxWidth', 'minWidth', 'width']),
+  ...makeThemeProps(),
   ...makeValidationProps()
 }, 'VInput');
 export const VInput = genericComponent()({
@@ -61,6 +63,9 @@ export const VInput = genericComponent()({
     const {
       dimensionStyles
     } = useDimension(props);
+    const {
+      themeClasses
+    } = provideTheme(props);
     const {
       rtlClasses
     } = useRtl();
@@ -114,7 +119,7 @@ export const VInput = genericComponent()({
         "class": ['v-input', `v-input--${props.direction}`, {
           'v-input--center-affix': props.centerAffix,
           'v-input--hide-spin-buttons': props.hideSpinButtons
-        }, densityClasses.value, rtlClasses.value, validationClasses.value, props.class],
+        }, densityClasses.value, themeClasses.value, rtlClasses.value, validationClasses.value, props.class],
         "style": [dimensionStyles.value, props.style]
       }, [hasPrepend && _createVNode("div", {
         "key": "prepend",

package/lib/components/VInput/VInput.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VInput.mjs","names":["useInputIcon","VMessages","makeComponentProps","makeDensityProps","useDensity","makeDimensionProps","useDimension","IconValue","useRtl","makeValidationProps","useValidation","computed","EventProp","genericComponent","getUid","only","propsFactory","useRender","makeVInputProps","id","String","appendIcon","centerAffix","type","Boolean","default","prependIcon","hideDetails","hideSpinButtons","hint","persistentHint","messages","Array","direction","validator","v","includes","VInput","name","props","emits","value","setup","_ref","attrs","slots","emit","densityClasses","dimensionStyles","rtlClasses","InputIcon","uid","messagesId","errorMessages","isDirty","isDisabled","isReadonly","isPristine","isValid","isValidating","reset","resetValidation","validate","validationClasses","slotProps","length","focused","hasPrepend","prepend","hasAppend","append","hasMessages","hasDetails","details","_createVNode","class","style","message"],"sources":["../../../src/components/VInput/VInput.tsx"],"sourcesContent":["// Styles\nimport './VInput.sass'\n\n// Components\nimport { useInputIcon } from '@/components/VInput/InputIcon'\nimport { VMessages } from '@/components/VMessages/VMessages'\n\n// Composables\nimport { makeComponentProps } from '@/composables/component'\nimport { makeDensityProps, useDensity } from '@/composables/density'\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\nimport { IconValue } from '@/composables/icons'\nimport { useRtl } from '@/composables/locale'\nimport { makeValidationProps, useValidation } from '@/composables/validation'\n\n// Utilities\nimport { computed } from 'vue'\nimport { EventProp, genericComponent, getUid, only, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { ComputedRef, PropType, Ref } from 'vue'\nimport type { VMessageSlot } from '@/components/VMessages/VMessages'\nimport type { GenericProps } from '@/util'\n\nexport interface VInputSlot {\n  id: ComputedRef<string>\n  messagesId: ComputedRef<string>\n  isDirty: ComputedRef<boolean>\n  isDisabled: ComputedRef<boolean>\n  isReadonly: ComputedRef<boolean>\n  isPristine: Ref<boolean>\n  isValid: ComputedRef<boolean | null>\n  isValidating: Ref<boolean>\n  reset: () => void\n  resetValidation: () => void\n  validate: () => void\n}\n\nexport const makeVInputProps = propsFactory({\n  id: String,\n  appendIcon: IconValue,\n  centerAffix: {\n    type: Boolean,\n    default: true,\n  },\n  prependIcon: IconValue,\n  hideDetails: [Boolean, String] as PropType<boolean | 'auto'>,\n  hideSpinButtons: Boolean,\n  hint: String,\n  persistentHint: Boolean,\n  messages: {\n    type: [Array, String] as PropType<string | readonly string[]>,\n    default: () => ([]),\n  },\n  direction: {\n    type: String as PropType<'horizontal' | 'vertical'>,\n    default: 'horizontal',\n    validator: (v: any) => ['horizontal', 'vertical'].includes(v),\n  },\n\n  'onClick:prepend': EventProp<[MouseEvent]>(),\n  'onClick:append': EventProp<[MouseEvent]>(),\n\n  ...makeComponentProps(),\n  ...makeDensityProps(),\n  ...only(makeDimensionProps(), [\n    'maxWidth',\n    'minWidth',\n    'width',\n  ]),\n  ...makeValidationProps(),\n}, 'VInput')\n\nexport type VInputSlots = {\n  default: VInputSlot\n  prepend: VInputSlot\n  append: VInputSlot\n  details: VInputSlot\n  message: VMessageSlot\n}\n\nexport const VInput = genericComponent<new <T>(\n  props: {\n    modelValue?: T | null\n    'onUpdate:modelValue'?: (value: T | null) => void\n  },\n  slots: VInputSlots,\n) => GenericProps<typeof props, typeof slots>>()({\n  name: 'VInput',\n\n  props: {\n    ...makeVInputProps(),\n  },\n\n  emits: {\n    'update:modelValue': (value: any) => true,\n  },\n\n  setup (props, { attrs, slots, emit }) {\n    const { densityClasses } = useDensity(props)\n    const { dimensionStyles } = useDimension(props)\n    const { rtlClasses } = useRtl()\n    const { InputIcon } = useInputIcon(props)\n\n    const uid = getUid()\n    const id = computed(() => props.id || `input-${uid}`)\n    const messagesId = computed(() => `${id.value}-messages`)\n\n    const {\n      errorMessages,\n      isDirty,\n      isDisabled,\n      isReadonly,\n      isPristine,\n      isValid,\n      isValidating,\n      reset,\n      resetValidation,\n      validate,\n      validationClasses,\n    } = useValidation(props, 'v-input', id)\n\n    const slotProps = computed<VInputSlot>(() => ({\n      id,\n      messagesId,\n      isDirty,\n      isDisabled,\n      isReadonly,\n      isPristine,\n      isValid,\n      isValidating,\n      reset,\n      resetValidation,\n      validate,\n    }))\n\n    const messages = computed(() => {\n      if (props.errorMessages?.length || (!isPristine.value && errorMessages.value.length)) {\n        return errorMessages.value\n      } else if (props.hint && (props.persistentHint || props.focused)) {\n        return props.hint\n      } else {\n        return props.messages\n      }\n    })\n\n    useRender(() => {\n      const hasPrepend = !!(slots.prepend || props.prependIcon)\n      const hasAppend = !!(slots.append || props.appendIcon)\n      const hasMessages = messages.value.length > 0\n      const hasDetails = !props.hideDetails || (\n        props.hideDetails === 'auto' &&\n        (hasMessages || !!slots.details)\n      )\n\n      return (\n        <div\n          class={[\n            'v-input',\n            `v-input--${props.direction}`,\n            {\n              'v-input--center-affix': props.centerAffix,\n              'v-input--hide-spin-buttons': props.hideSpinButtons,\n            },\n            densityClasses.value,\n            rtlClasses.value,\n            validationClasses.value,\n            props.class,\n          ]}\n          style={[\n            dimensionStyles.value,\n            props.style,\n          ]}\n        >\n          { hasPrepend && (\n            <div key=\"prepend\" class=\"v-input__prepend\">\n              { slots.prepend?.(slotProps.value) }\n\n              { props.prependIcon && (\n                <InputIcon\n                  key=\"prepend-icon\"\n                  name=\"prepend\"\n                />\n              )}\n            </div>\n          )}\n\n          { slots.default && (\n            <div class=\"v-input__control\">\n              { slots.default?.(slotProps.value) }\n            </div>\n          )}\n\n          { hasAppend && (\n            <div key=\"append\" class=\"v-input__append\">\n              { props.appendIcon && (\n                <InputIcon\n                  key=\"append-icon\"\n                  name=\"append\"\n                />\n              )}\n\n              { slots.append?.(slotProps.value) }\n            </div>\n          )}\n\n          { hasDetails && (\n            <div class=\"v-input__details\">\n              <VMessages\n                id={ messagesId.value }\n                active={ hasMessages }\n                messages={ messages.value }\n                v-slots={{ message: slots.message }}\n              />\n\n              { slots.details?.(slotProps.value) }\n            </div>\n          )}\n        </div>\n      )\n    })\n\n    return {\n      reset,\n      resetValidation,\n      validate,\n      isValid,\n      errorMessages,\n    }\n  },\n})\n\nexport type VInput = InstanceType<typeof VInput>\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"VInput.mjs","names":["useInputIcon","VMessages","makeComponentProps","makeDensityProps","useDensity","makeDimensionProps","useDimension","IconValue","useRtl","makeThemeProps","provideTheme","makeValidationProps","useValidation","computed","EventProp","genericComponent","getUid","only","propsFactory","useRender","makeVInputProps","id","String","appendIcon","centerAffix","type","Boolean","default","prependIcon","hideDetails","hideSpinButtons","hint","persistentHint","messages","Array","direction","validator","v","includes","VInput","name","props","emits","value","setup","_ref","attrs","slots","emit","densityClasses","dimensionStyles","themeClasses","rtlClasses","InputIcon","uid","messagesId","errorMessages","isDirty","isDisabled","isReadonly","isPristine","isValid","isValidating","reset","resetValidation","validate","validationClasses","slotProps","length","focused","hasPrepend","prepend","hasAppend","append","hasMessages","hasDetails","details","_createVNode","class","style","message"],"sources":["../../../src/components/VInput/VInput.tsx"],"sourcesContent":["// Styles\nimport './VInput.sass'\n\n// Components\nimport { useInputIcon } from '@/components/VInput/InputIcon'\nimport { VMessages } from '@/components/VMessages/VMessages'\n\n// Composables\nimport { makeComponentProps } from '@/composables/component'\nimport { makeDensityProps, useDensity } from '@/composables/density'\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\nimport { IconValue } from '@/composables/icons'\nimport { useRtl } from '@/composables/locale'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { makeValidationProps, useValidation } from '@/composables/validation'\n\n// Utilities\nimport { computed } from 'vue'\nimport { EventProp, genericComponent, getUid, only, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { ComputedRef, PropType, Ref } from 'vue'\nimport type { VMessageSlot } from '@/components/VMessages/VMessages'\nimport type { GenericProps } from '@/util'\n\nexport interface VInputSlot {\n  id: ComputedRef<string>\n  messagesId: ComputedRef<string>\n  isDirty: ComputedRef<boolean>\n  isDisabled: ComputedRef<boolean>\n  isReadonly: ComputedRef<boolean>\n  isPristine: Ref<boolean>\n  isValid: ComputedRef<boolean | null>\n  isValidating: Ref<boolean>\n  reset: () => void\n  resetValidation: () => void\n  validate: () => void\n}\n\nexport const makeVInputProps = propsFactory({\n  id: String,\n  appendIcon: IconValue,\n  centerAffix: {\n    type: Boolean,\n    default: true,\n  },\n  prependIcon: IconValue,\n  hideDetails: [Boolean, String] as PropType<boolean | 'auto'>,\n  hideSpinButtons: Boolean,\n  hint: String,\n  persistentHint: Boolean,\n  messages: {\n    type: [Array, String] as PropType<string | readonly string[]>,\n    default: () => ([]),\n  },\n  direction: {\n    type: String as PropType<'horizontal' | 'vertical'>,\n    default: 'horizontal',\n    validator: (v: any) => ['horizontal', 'vertical'].includes(v),\n  },\n\n  'onClick:prepend': EventProp<[MouseEvent]>(),\n  'onClick:append': EventProp<[MouseEvent]>(),\n\n  ...makeComponentProps(),\n  ...makeDensityProps(),\n  ...only(makeDimensionProps(), [\n    'maxWidth',\n    'minWidth',\n    'width',\n  ]),\n  ...makeThemeProps(),\n  ...makeValidationProps(),\n}, 'VInput')\n\nexport type VInputSlots = {\n  default: VInputSlot\n  prepend: VInputSlot\n  append: VInputSlot\n  details: VInputSlot\n  message: VMessageSlot\n}\n\nexport const VInput = genericComponent<new <T>(\n  props: {\n    modelValue?: T | null\n    'onUpdate:modelValue'?: (value: T | null) => void\n  },\n  slots: VInputSlots,\n) => GenericProps<typeof props, typeof slots>>()({\n  name: 'VInput',\n\n  props: {\n    ...makeVInputProps(),\n  },\n\n  emits: {\n    'update:modelValue': (value: any) => true,\n  },\n\n  setup (props, { attrs, slots, emit }) {\n    const { densityClasses } = useDensity(props)\n    const { dimensionStyles } = useDimension(props)\n    const { themeClasses } = provideTheme(props)\n    const { rtlClasses } = useRtl()\n    const { InputIcon } = useInputIcon(props)\n\n    const uid = getUid()\n    const id = computed(() => props.id || `input-${uid}`)\n    const messagesId = computed(() => `${id.value}-messages`)\n\n    const {\n      errorMessages,\n      isDirty,\n      isDisabled,\n      isReadonly,\n      isPristine,\n      isValid,\n      isValidating,\n      reset,\n      resetValidation,\n      validate,\n      validationClasses,\n    } = useValidation(props, 'v-input', id)\n\n    const slotProps = computed<VInputSlot>(() => ({\n      id,\n      messagesId,\n      isDirty,\n      isDisabled,\n      isReadonly,\n      isPristine,\n      isValid,\n      isValidating,\n      reset,\n      resetValidation,\n      validate,\n    }))\n\n    const messages = computed(() => {\n      if (props.errorMessages?.length || (!isPristine.value && errorMessages.value.length)) {\n        return errorMessages.value\n      } else if (props.hint && (props.persistentHint || props.focused)) {\n        return props.hint\n      } else {\n        return props.messages\n      }\n    })\n\n    useRender(() => {\n      const hasPrepend = !!(slots.prepend || props.prependIcon)\n      const hasAppend = !!(slots.append || props.appendIcon)\n      const hasMessages = messages.value.length > 0\n      const hasDetails = !props.hideDetails || (\n        props.hideDetails === 'auto' &&\n        (hasMessages || !!slots.details)\n      )\n\n      return (\n        <div\n          class={[\n            'v-input',\n            `v-input--${props.direction}`,\n            {\n              'v-input--center-affix': props.centerAffix,\n              'v-input--hide-spin-buttons': props.hideSpinButtons,\n            },\n            densityClasses.value,\n            themeClasses.value,\n            rtlClasses.value,\n            validationClasses.value,\n            props.class,\n          ]}\n          style={[\n            dimensionStyles.value,\n            props.style,\n          ]}\n        >\n          { hasPrepend && (\n            <div key=\"prepend\" class=\"v-input__prepend\">\n              { slots.prepend?.(slotProps.value) }\n\n              { props.prependIcon && (\n                <InputIcon\n                  key=\"prepend-icon\"\n                  name=\"prepend\"\n                />\n              )}\n            </div>\n          )}\n\n          { slots.default && (\n            <div class=\"v-input__control\">\n              { slots.default?.(slotProps.value) }\n            </div>\n          )}\n\n          { hasAppend && (\n            <div key=\"append\" class=\"v-input__append\">\n              { props.appendIcon && (\n                <InputIcon\n                  key=\"append-icon\"\n                  name=\"append\"\n                />\n              )}\n\n              { slots.append?.(slotProps.value) }\n            </div>\n          )}\n\n          { hasDetails && (\n            <div class=\"v-input__details\">\n              <VMessages\n                id={ messagesId.value }\n                active={ hasMessages }\n                messages={ messages.value }\n                v-slots={{ message: slots.message }}\n              />\n\n              { slots.details?.(slotProps.value) }\n            </div>\n          )}\n        </div>\n      )\n    })\n\n    return {\n      reset,\n      resetValidation,\n      validate,\n      isValid,\n      errorMessages,\n    }\n  },\n})\n\nexport type VInput = InstanceType<typeof VInput>\n"],"mappings":"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","ignoreList":[]}

package/lib/components/VInput/VInput.sass

@@ -3,113 +3,114 @@
 @use '../../styles/tools'
 @use './variables' as *
 
-.v-input
-  display: grid
-  flex: $input-flex
-  font-size: $input-font-size
-  font-weight: $input-font-weight
-  line-height: $input-line-height
-
-  &--disabled
-    pointer-events: none
-
-  @at-root
-    @include tools.density('v-input', $input-density) using ($modifier)
-      --v-input-control-height: #{$input-control-height + $modifier}
-      --v-input-padding-top: #{16px + $modifier * .5}
-
-.v-input--vertical
-  grid-template-areas: "append" "control" "prepend"
-  grid-template-rows: max-content auto max-content
-  grid-template-columns: min-content
+@include tools.layer('components')
+  .v-input
+    display: grid
+    flex: $input-flex
+    font-size: $input-font-size
+    font-weight: $input-font-weight
+    line-height: $input-line-height
+
+    &--disabled
+      pointer-events: none
+
+    @at-root
+      @include tools.density('v-input', $input-density) using ($modifier)
+        --v-input-control-height: #{$input-control-height + $modifier}
+        --v-input-padding-top: #{16px + $modifier * .5}
+
+  .v-input--vertical
+    grid-template-areas: "append" "control" "prepend"
+    grid-template-rows: max-content auto max-content
+    grid-template-columns: min-content
+
+    .v-input__prepend
+      margin-block-start: $input-affix-margin-inside
 
-  .v-input__prepend
-    margin-block-start: $input-affix-margin-inside
+    .v-input__append
+      margin-block-end: $input-affix-margin-inside
+
+  .v-input--horizontal
+    grid-template-areas: "prepend control append" "a messages b"
+    grid-template-columns: max-content minmax(0, 1fr) max-content
+    grid-template-rows: auto auto
 
+    .v-input__prepend
+      margin-inline-end: $input-affix-margin-inside
+
+    .v-input__append
+      margin-inline-start: $input-affix-margin-inside
+
+  .v-input__details
+    align-items: flex-end
+    display: flex
+    font-size: $input-details-font-size
+    font-weight: $input-details-font-weight
+    grid-area: messages
+    letter-spacing: $input-details-letter-spacing
+    line-height: $input-details-line-height
+    min-height: $input-details-min-height
+    padding-top: $input-details-padding-above
+    overflow: hidden
+    justify-content: space-between
+
+  .v-input__details,
+  .v-input__prepend,
   .v-input__append
-    margin-block-end: $input-affix-margin-inside
+    > .v-icon
+      opacity: var(--v-medium-emphasis-opacity)
 
-.v-input--horizontal
-  grid-template-areas: "prepend control append" "a messages b"
-  grid-template-columns: max-content minmax(0, 1fr) max-content
-  grid-template-rows: auto auto
+    .v-input--disabled &,
+    .v-input--error &
+      > .v-icon,
+      .v-messages
+        opacity: 1
 
-  .v-input__prepend
-    margin-inline-end: $input-affix-margin-inside
+    .v-input--disabled &
+      opacity: var(--v-disabled-opacity)
 
+    .v-input--error:not(.v-input--disabled) &
+      > .v-icon,
+      .v-messages
+        color: rgb(var(--v-theme-error))
+
+  .v-input__prepend,
   .v-input__append
-    margin-inline-start: $input-affix-margin-inside
-
-.v-input__details
-  align-items: flex-end
-  display: flex
-  font-size: $input-details-font-size
-  font-weight: $input-details-font-weight
-  grid-area: messages
-  letter-spacing: $input-details-letter-spacing
-  line-height: $input-details-line-height
-  min-height: $input-details-min-height
-  padding-top: $input-details-padding-above
-  overflow: hidden
-  justify-content: space-between
-
-.v-input__details,
-.v-input__prepend,
-.v-input__append
-  > .v-icon
-    opacity: var(--v-medium-emphasis-opacity)
-
-  .v-input--disabled &,
-  .v-input--error &
-    > .v-icon,
-    .v-messages
-      opacity: 1
-
-  .v-input--disabled &
-    opacity: var(--v-disabled-opacity)
-
-  .v-input--error:not(.v-input--disabled) &
-    > .v-icon,
-    .v-messages
-      color: rgb(var(--v-theme-error))
-
-.v-input__prepend,
-.v-input__append
-  display: flex
-  align-items: flex-start
-  padding-top: var(--v-input-padding-top)
-
-  .v-input--center-affix &
-    align-items: center
-    padding-top: 0
-
-.v-input__prepend
-  grid-area: prepend
-
-.v-input__append
-  grid-area: append
-
-.v-input__control
-  display: flex
-  grid-area: control
-
-.v-input
-  &--hide-spin-buttons
-    input::-webkit-outer-spin-button,
-    input::-webkit-inner-spin-button
-      -webkit-appearance: none
-      margin: 0
-    input[type=number]
-      -moz-appearance: textfield
-
-  &--plain-underlined
-
-    .v-input__prepend,
-    .v-input__append
-      $this: &
-      align-items: flex-start
+    display: flex
+    align-items: flex-start
+    padding-top: var(--v-input-padding-top)
+
+    .v-input--center-affix &
+      align-items: center
+      padding-top: 0
 
-      @at-root
-        @include tools.density('v-input', $input-density) using ($modifier)
-          @at-root #{selector.append(&, $this)}
-            padding-top: calc(var(--v-input-padding-top) + #{math.max(0px, 4px + $modifier * .25)})
+  .v-input__prepend
+    grid-area: prepend
+
+  .v-input__append
+    grid-area: append
+
+  .v-input__control
+    display: flex
+    grid-area: control
+
+  .v-input
+    &--hide-spin-buttons
+      input::-webkit-outer-spin-button,
+      input::-webkit-inner-spin-button
+        -webkit-appearance: none
+        margin: 0
+      input[type=number]
+        -moz-appearance: textfield
+
+    &--plain-underlined
+
+      .v-input__prepend,
+      .v-input__append
+        $this: &
+        align-items: flex-start
+
+        @at-root
+          @include tools.density('v-input', $input-density) using ($modifier)
+            @at-root #{selector.append(&, $this)}
+              padding-top: calc(var(--v-input-padding-top) + #{math.max(0px, 4px + $modifier * .25)})

package/lib/components/VInput/index.d.mts

@@ -83,6 +83,7 @@ declare const VInput: {
         id?: string | undefined;
         label?: string | undefined;
         width?: string | number | undefined;
+        theme?: string | undefined;
         name?: string | undefined;
         'onUpdate:focused'?: ((args_0: boolean) => void) | undefined;
         validateOn?: ("input" | "blur" | "submit") | "input lazy" | "blur lazy" | "submit lazy" | "lazy input" | "lazy blur" | "lazy submit" | "lazy" | undefined;
@@ -123,6 +124,7 @@ declare const VInput: {
         id?: string | undefined;
         label?: string | undefined;
         width?: string | number | undefined;
+        theme?: string | undefined;
         name?: string | undefined;
         'onUpdate:focused'?: ((args_0: boolean) => void) | undefined;
         validateOn?: ("input" | "blur" | "submit") | "input lazy" | "blur lazy" | "submit lazy" | "lazy input" | "lazy blur" | "lazy submit" | "lazy" | undefined;
@@ -193,6 +195,7 @@ declare const VInput: {
         id?: string | undefined;
         label?: string | undefined;
         width?: string | number | undefined;
+        theme?: string | undefined;
         name?: string | undefined;
         'onUpdate:focused'?: ((args_0: boolean) => void) | undefined;
         validateOn?: ("input" | "blur" | "submit") | "input lazy" | "blur lazy" | "submit lazy" | "lazy input" | "lazy blur" | "lazy submit" | "lazy" | undefined;
@@ -250,6 +253,7 @@ declare const VInput: {
     id?: string | undefined;
     label?: string | undefined;
     width?: string | number | undefined;
+    theme?: string | undefined;
     name?: string | undefined;
     'onUpdate:focused'?: ((args_0: boolean) => void) | undefined;
     validateOn?: ("input" | "blur" | "submit") | "input lazy" | "blur lazy" | "submit lazy" | "lazy input" | "lazy blur" | "lazy submit" | "lazy" | undefined;
@@ -336,6 +340,7 @@ declare const VInput: {
     modelValue: null;
     validateOn: PropType<("input" | "blur" | "submit") | "input lazy" | "blur lazy" | "submit lazy" | "lazy input" | "lazy blur" | "lazy submit" | "lazy" | undefined>;
     validationValue: null;
+    theme: StringConstructor;
     width: (StringConstructor | NumberConstructor)[];
     maxWidth: (StringConstructor | NumberConstructor)[];
     minWidth: (StringConstructor | NumberConstructor)[];
@@ -400,6 +405,7 @@ declare const VInput: {
     modelValue: null;
     validateOn: PropType<("input" | "blur" | "submit") | "input lazy" | "blur lazy" | "submit lazy" | "lazy input" | "lazy blur" | "lazy submit" | "lazy" | undefined>;
     validationValue: null;
+    theme: StringConstructor;
     width: (StringConstructor | NumberConstructor)[];
     maxWidth: (StringConstructor | NumberConstructor)[];
     minWidth: (StringConstructor | NumberConstructor)[];

package/lib/components/VItemGroup/VItemGroup.sass

@@ -1,7 +1,9 @@
+@use '../../styles/tools'
 @use './variables' as *
 
-.v-item-group
-  flex: 0 1 auto
-  max-width: 100%
-  position: relative
-  transition: $item-group-transition
+@include tools.layer('components')
+  .v-item-group
+    flex: 0 1 auto
+    max-width: 100%
+    position: relative
+    transition: $item-group-transition

package/lib/components/VKbd/VKbd.sass

@@ -1,13 +1,14 @@
 @use '../../styles/tools'
 @use './variables' as *
 
-.v-kbd
-  background: rgb(var(--v-theme-kbd))
-  color: rgb(var(--v-theme-on-kbd))
-  border-radius: $kbd-border-radius
-  display: $kbd-display
-  font-size: $kbd-font-size
-  font-weight: $kbd-font-weight
-  padding: $kbd-padding
+@include tools.layer('components')
+  .v-kbd
+    background: rgb(var(--v-theme-kbd))
+    color: rgb(var(--v-theme-on-kbd))
+    border-radius: $kbd-border-radius
+    display: $kbd-display
+    font-size: $kbd-font-size
+    font-weight: $kbd-font-weight
+    padding: $kbd-padding
 
-  @include tools.elevation($kbd-elevation)
+    @include tools.elevation($kbd-elevation)

package/lib/components/VLabel/VLabel.sass

@@ -2,17 +2,18 @@
 @use '../../styles/tools'
 @use './variables' as *
 
-.v-label
-  align-items: center
-  color: $label-color
-  display: $label-display
-  font-size: $label-font-size
-  letter-spacing: $label-letter-spacing
-  min-width: 0
-  opacity: $label-opacity
-  overflow: hidden
-  text-overflow: ellipsis
-  white-space: nowrap
+@include tools.layer('components')
+  .v-label
+    align-items: center
+    color: $label-color
+    display: $label-display
+    font-size: $label-font-size
+    letter-spacing: $label-letter-spacing
+    min-width: 0
+    opacity: $label-opacity
+    overflow: hidden
+    text-overflow: ellipsis
+    white-space: nowrap
 
-.v-label--clickable
-  cursor: pointer
+  .v-label--clickable
+    cursor: pointer

package/lib/components/VLayout/VLayout.mjs

@@ -4,11 +4,13 @@ import "./VLayout.css";
 
 // Composables
 import { makeComponentProps } from "../../composables/component.mjs";
+import { makeDimensionProps, useDimension } from "../../composables/dimensions.mjs";
 import { createLayout, makeLayoutProps } from "../../composables/layout.mjs"; // Utilities
 import { Suspense } from 'vue';
 import { genericComponent, propsFactory, useRender } from "../../util/index.mjs";
 export const makeVLayoutProps = propsFactory({
   ...makeComponentProps(),
+  ...makeDimensionProps(),
   ...makeLayoutProps()
 }, 'VLayout');
 export const VLayout = genericComponent()({
@@ -25,10 +27,13 @@ export const VLayout = genericComponent()({
       items,
       layoutRef
     } = createLayout(props);
+    const {
+      dimensionStyles
+    } = useDimension(props);
     useRender(() => _createVNode("div", {
       "ref": layoutRef,
       "class": [layoutClasses.value, props.class],
-      "style": [layoutStyles.value, props.style]
+      "style": [dimensionStyles.value, layoutStyles.value, props.style]
     }, [_createVNode(Suspense, null, {
       default: () => [_createVNode(_Fragment, null, [slots.default?.()])]
     })]));

package/lib/components/VLayout/VLayout.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VLayout.mjs","names":["makeComponentProps","createLayout","makeLayoutProps","Suspense","genericComponent","propsFactory","useRender","makeVLayoutProps","VLayout","name","props","setup","_ref","slots","layoutClasses","layoutStyles","getLayoutItem","items","layoutRef","_createVNode","value","class","style","default","_Fragment"],"sources":["../../../src/components/VLayout/VLayout.tsx"],"sourcesContent":["// Styles\nimport './VLayout.sass'\n\n// Composables\nimport { makeComponentProps } from '@/composables/component'\nimport { createLayout, makeLayoutProps } from '@/composables/layout'\n\n// Utilities\nimport { Suspense } from 'vue'\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\nexport const makeVLayoutProps = propsFactory({\n  ...makeComponentProps(),\n  ...makeLayoutProps(),\n}, 'VLayout')\n\nexport const VLayout = genericComponent()({\n  name: 'VLayout',\n\n  props: makeVLayoutProps(),\n\n  setup (props, { slots }) {\n    const { layoutClasses, layoutStyles, getLayoutItem, items, layoutRef } = createLayout(props)\n\n    useRender(() => (\n      <div\n        ref={ layoutRef }\n        class={[\n          layoutClasses.value,\n          props.class,\n        ]}\n        style={[\n          layoutStyles.value,\n          props.style,\n        ]}\n      >\n        <Suspense>\n          <>\n            { slots.default?.() }\n          </>\n        </Suspense>\n      </div>\n    ))\n\n    return {\n      getLayoutItem,\n      items,\n    }\n  },\n})\n\nexport type VLayout = InstanceType<typeof VLayout>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,kBAAkB;AAAA,SAClBC,YAAY,EAAEC,eAAe,wCAEtC;AACA,SAASC,QAAQ,QAAQ,KAAK;AAAA,SACrBC,gBAAgB,EAAEC,YAAY,EAAEC,SAAS;AAElD,OAAO,MAAMC,gBAAgB,GAAGF,YAAY,CAAC;EAC3C,GAAGL,kBAAkB,CAAC,CAAC;EACvB,GAAGE,eAAe,CAAC;AACrB,CAAC,EAAE,SAAS,CAAC;AAEb,OAAO,MAAMM,OAAO,GAAGJ,gBAAgB,CAAC,CAAC,CAAC;EACxCK,IAAI,EAAE,SAAS;EAEfC,KAAK,EAAEH,gBAAgB,CAAC,CAAC;EAEzBI,KAAKA,CAAED,KAAK,EAAAE,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACrB,MAAM;MAAEE,aAAa;MAAEC,YAAY;MAAEC,aAAa;MAAEC,KAAK;MAAEC;IAAU,CAAC,GAAGjB,YAAY,CAACS,KAAK,CAAC;IAE5FJ,SAAS,CAAC,MAAAa,YAAA;MAAA,OAEAD,SAAS;MAAA,SACR,CACLJ,aAAa,CAACM,KAAK,EACnBV,KAAK,CAACW,KAAK,CACZ;MAAA,SACM,CACLN,YAAY,CAACK,KAAK,EAClBV,KAAK,CAACY,KAAK;IACZ,IAAAH,YAAA,CAAAhB,QAAA;MAAAoB,OAAA,EAAAA,CAAA,MAAAJ,YAAA,CAAAK,SAAA,SAIKX,KAAK,CAACU,OAAO,GAAG,CAAC;IAAA,IAI1B,CAAC;IAEF,OAAO;MACLP,aAAa;MACbC;IACF,CAAC;EACH;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"file":"VLayout.mjs","names":["makeComponentProps","makeDimensionProps","useDimension","createLayout","makeLayoutProps","Suspense","genericComponent","propsFactory","useRender","makeVLayoutProps","VLayout","name","props","setup","_ref","slots","layoutClasses","layoutStyles","getLayoutItem","items","layoutRef","dimensionStyles","_createVNode","value","class","style","default","_Fragment"],"sources":["../../../src/components/VLayout/VLayout.tsx"],"sourcesContent":["// Styles\nimport './VLayout.sass'\n\n// Composables\nimport { makeComponentProps } from '@/composables/component'\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\nimport { createLayout, makeLayoutProps } from '@/composables/layout'\n\n// Utilities\nimport { Suspense } from 'vue'\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\nexport const makeVLayoutProps = propsFactory({\n  ...makeComponentProps(),\n  ...makeDimensionProps(),\n  ...makeLayoutProps(),\n}, 'VLayout')\n\nexport const VLayout = genericComponent()({\n  name: 'VLayout',\n\n  props: makeVLayoutProps(),\n\n  setup (props, { slots }) {\n    const { layoutClasses, layoutStyles, getLayoutItem, items, layoutRef } = createLayout(props)\n    const { dimensionStyles } = useDimension(props)\n\n    useRender(() => (\n      <div\n        ref={ layoutRef }\n        class={[\n          layoutClasses.value,\n          props.class,\n        ]}\n        style={[\n          dimensionStyles.value,\n          layoutStyles.value,\n          props.style,\n        ]}\n      >\n        <Suspense>\n          <>\n            { slots.default?.() }\n          </>\n        </Suspense>\n      </div>\n    ))\n\n    return {\n      getLayoutItem,\n      items,\n    }\n  },\n})\n\nexport type VLayout = InstanceType<typeof VLayout>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,kBAAkB;AAAA,SAClBC,kBAAkB,EAAEC,YAAY;AAAA,SAChCC,YAAY,EAAEC,eAAe,wCAEtC;AACA,SAASC,QAAQ,QAAQ,KAAK;AAAA,SACrBC,gBAAgB,EAAEC,YAAY,EAAEC,SAAS;AAElD,OAAO,MAAMC,gBAAgB,GAAGF,YAAY,CAAC;EAC3C,GAAGP,kBAAkB,CAAC,CAAC;EACvB,GAAGC,kBAAkB,CAAC,CAAC;EACvB,GAAGG,eAAe,CAAC;AACrB,CAAC,EAAE,SAAS,CAAC;AAEb,OAAO,MAAMM,OAAO,GAAGJ,gBAAgB,CAAC,CAAC,CAAC;EACxCK,IAAI,EAAE,SAAS;EAEfC,KAAK,EAAEH,gBAAgB,CAAC,CAAC;EAEzBI,KAAKA,CAAED,KAAK,EAAAE,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACrB,MAAM;MAAEE,aAAa;MAAEC,YAAY;MAAEC,aAAa;MAAEC,KAAK;MAAEC;IAAU,CAAC,GAAGjB,YAAY,CAACS,KAAK,CAAC;IAC5F,MAAM;MAAES;IAAgB,CAAC,GAAGnB,YAAY,CAACU,KAAK,CAAC;IAE/CJ,SAAS,CAAC,MAAAc,YAAA;MAAA,OAEAF,SAAS;MAAA,SACR,CACLJ,aAAa,CAACO,KAAK,EACnBX,KAAK,CAACY,KAAK,CACZ;MAAA,SACM,CACLH,eAAe,CAACE,KAAK,EACrBN,YAAY,CAACM,KAAK,EAClBX,KAAK,CAACa,KAAK;IACZ,IAAAH,YAAA,CAAAjB,QAAA;MAAAqB,OAAA,EAAAA,CAAA,MAAAJ,YAAA,CAAAK,SAAA,SAIKZ,KAAK,CAACW,OAAO,GAAG,CAAC;IAAA,IAI1B,CAAC;IAEF,OAAO;MACLR,aAAa;MACbC;IACF,CAAC;EACH;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/components/VLayout/VLayout.sass

@@ -1,8 +1,11 @@
-.v-layout
-  --v-scrollbar-offset: 0px
-  display: flex
-  flex: 1 1 auto
+@use '../../styles/tools'
 
-  &--full-height
-    --v-scrollbar-offset: inherit
-    height: 100%
+@include tools.layer('components')
+  .v-layout
+    --v-scrollbar-offset: 0px
+    display: flex
+    flex: 1 1 auto
+
+    &--full-height
+      --v-scrollbar-offset: inherit
+      height: 100%

package/lib/components/VLayout/VLayoutItem.sass

@@ -1,8 +1,10 @@
 @use '../../styles/settings'
+@use '../../styles/tools'
 
-.v-layout-item
-  position: absolute
-  transition: 0.2s settings.$standard-easing
+@include tools.layer('components')
+  .v-layout-item
+    position: absolute
+    transition: 0.2s settings.$standard-easing
 
-.v-layout-item--absolute
-  position: absolute
+  .v-layout-item--absolute
+    position: absolute

package/lib/components/VLayout/index.d.mts

@@ -13,7 +13,13 @@ declare const VLayout: {
         fullHeight: boolean;
     } & {
         class?: any;
+        width?: string | number | undefined;
+        height?: string | number | undefined;
         overlaps?: string[] | undefined;
+        maxHeight?: string | number | undefined;
+        maxWidth?: string | number | undefined;
+        minHeight?: string | number | undefined;
+        minWidth?: string | number | undefined;
     } & {
         $children?: vue.VNodeChild | {
             default?: (() => vue.VNodeChild) | undefined;
@@ -47,7 +53,13 @@ declare const VLayout: {
         fullHeight: boolean;
     } & {
         class?: any;
+        width?: string | number | undefined;
+        height?: string | number | undefined;
         overlaps?: string[] | undefined;
+        maxHeight?: string | number | undefined;
+        maxWidth?: string | number | undefined;
+        minHeight?: string | number | undefined;
+        minWidth?: string | number | undefined;
     } & {
         $children?: vue.VNodeChild | {
             default?: (() => vue.VNodeChild) | undefined;
@@ -76,7 +88,13 @@ declare const VLayout: {
         fullHeight: boolean;
     } & {
         class?: any;
+        width?: string | number | undefined;
+        height?: string | number | undefined;
         overlaps?: string[] | undefined;
+        maxHeight?: string | number | undefined;
+        maxWidth?: string | number | undefined;
+        minHeight?: string | number | undefined;
+        minWidth?: string | number | undefined;
     } & {
         $children?: vue.VNodeChild | {
             default?: (() => vue.VNodeChild) | undefined;
@@ -117,7 +135,13 @@ declare const VLayout: {
     fullHeight: boolean;
 } & {
     class?: any;
+    width?: string | number | undefined;
+    height?: string | number | undefined;
     overlaps?: string[] | undefined;
+    maxHeight?: string | number | undefined;
+    maxWidth?: string | number | undefined;
+    minHeight?: string | number | undefined;
+    minWidth?: string | number | undefined;
 } & {
     $children?: vue.VNodeChild | {
         default?: (() => vue.VNodeChild) | undefined;
@@ -156,6 +180,12 @@ declare const VLayout: {
 }>>> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & FilterPropsOptions<{
     overlaps: vue.Prop<string[]>;
     fullHeight: BooleanConstructor;
+    height: (StringConstructor | NumberConstructor)[];
+    maxHeight: (StringConstructor | NumberConstructor)[];
+    maxWidth: (StringConstructor | NumberConstructor)[];
+    minHeight: (StringConstructor | NumberConstructor)[];
+    minWidth: (StringConstructor | NumberConstructor)[];
+    width: (StringConstructor | NumberConstructor)[];
     class: vue.PropType<any>;
     style: {
         type: vue.PropType<vue.StyleValue>;
@@ -164,6 +194,12 @@ declare const VLayout: {
 }, vue.ExtractPropTypes<{
     overlaps: vue.Prop<string[]>;
     fullHeight: BooleanConstructor;
+    height: (StringConstructor | NumberConstructor)[];
+    maxHeight: (StringConstructor | NumberConstructor)[];
+    maxWidth: (StringConstructor | NumberConstructor)[];
+    minHeight: (StringConstructor | NumberConstructor)[];
+    minWidth: (StringConstructor | NumberConstructor)[];
+    width: (StringConstructor | NumberConstructor)[];
     class: vue.PropType<any>;
     style: {
         type: vue.PropType<vue.StyleValue>;

package/lib/components/VList/VList.mjs

@@ -176,7 +176,8 @@ export const VList = genericComponent()({
       if (!isFocused.value && !(e.relatedTarget && contentRef.value?.contains(e.relatedTarget))) focus();
     }
     function onKeydown(e) {
-      if (!contentRef.value) return;
+      const target = e.target;
+      if (!contentRef.value || ['INPUT', 'TEXTAREA'].includes(target.tagName)) return;
       if (e.key === 'ArrowDown') {
         focus('next');
       } else if (e.key === 'ArrowUp') {