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

package/lib/components/VInput/VInput.mjs

@@ -1,51 +1,117 @@
-import { createVNode as _createVNode } from "vue";
-import "./VInput.css"; // Utilities
+import { resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue";
+// Styles
+import "./VInput.css"; // Components
 
-import { defineComponent } from "../../util/index.mjs";
 import { VIcon } from "../VIcon/index.mjs";
+import { VMessages } from "../VMessages/index.mjs"; // Composables
+
 import { makeDensityProps, useDensity } from "../../composables/density.mjs";
-export const VInput = defineComponent({
+import { makeValidationProps, useValidation } from "../../composables/validation.mjs"; // Utilities
+
+import { computed } from 'vue';
+import { genericComponent, getUid, pick, propsFactory, useRender } from "../../util/index.mjs"; // Types
+
+export const makeVInputProps = propsFactory({
+  id: String,
+  appendIcon: String,
+  prependIcon: String,
+  hideDetails: [Boolean, String],
+  messages: {
+    type: [Array, String],
+    default: () => []
+  },
+  direction: {
+    type: String,
+    default: 'horizontal',
+    validator: v => ['horizontal', 'vertical'].includes(v)
+  },
+  ...makeDensityProps(),
+  ...makeValidationProps()
+});
+export const VInput = genericComponent()({
   name: 'VInput',
-  props: {
-    appendIcon: String,
-    prependIcon: String,
-    ...makeDensityProps()
+  props: { ...makeVInputProps()
   },
   emits: {
     'click:prepend': e => true,
-    'click:append': e => true
+    'click:append': e => true,
+    'update:modelValue': val => true
   },
 
-  setup(props, {
-    slots,
-    emit
-  }) {
+  setup(props, _ref) {
+    let {
+      slots,
+      emit
+    } = _ref;
     const {
       densityClasses
-    } = useDensity(props, 'v-input');
-    return () => {
-      var _slots$prepend, _slots$default, _slots$append, _slots$details;
+    } = useDensity(props);
+    const {
+      errorMessages,
+      isDirty,
+      isDisabled,
+      isReadonly,
+      isPristine,
+      isValid,
+      isValidating,
+      reset,
+      resetValidation,
+      validate,
+      validationClasses
+    } = useValidation(props);
+    const uid = getUid();
+    const id = computed(() => props.id || `input-${uid}`);
+    const slotProps = computed(() => ({
+      id,
+      isDirty,
+      isDisabled,
+      isReadonly,
+      isPristine,
+      isValid,
+      isValidating,
+      reset,
+      resetValidation,
+      validate
+    }));
+    useRender(() => {
+      var _props$messages, _slots$prepend, _slots$default, _slots$append, _slots$details;
 
-      const hasPrepend = slots.prepend || props.prependIcon;
-      const hasAppend = slots.append || props.appendIcon;
+      const hasPrepend = !!(slots.prepend || props.prependIcon);
+      const hasAppend = !!(slots.append || props.appendIcon);
+      const hasMessages = !!((_props$messages = props.messages) != null && _props$messages.length || errorMessages.value.length);
+      const hasDetails = !props.hideDetails || props.hideDetails === 'auto' && hasMessages;
       return _createVNode("div", {
-        "class": ['v-input', densityClasses.value]
+        "class": ['v-input', `v-input--${props.direction}`, densityClasses.value, validationClasses.value]
       }, [hasPrepend && _createVNode("div", {
-        "class": "v-input__prepend",
-        "onClick": e => emit('click:prepend', e)
-      }, [slots == null ? void 0 : (_slots$prepend = slots.prepend) == null ? void 0 : _slots$prepend.call(slots), props.prependIcon && _createVNode(VIcon, {
+        "class": "v-input__prepend"
+      }, [slots == null ? void 0 : (_slots$prepend = slots.prepend) == null ? void 0 : _slots$prepend.call(slots, slotProps.value), props.prependIcon && _createVNode(VIcon, {
+        "onClick": e => emit('click:prepend', e),
         "icon": props.prependIcon
-      }, null, 8, ["icon"])], 8, ["onClick"]), (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots), hasAppend && _createVNode("div", {
-        "class": "v-input__append",
-        "onClick": e => emit('click:append', e)
-      }, [slots == null ? void 0 : (_slots$append = slots.append) == null ? void 0 : _slots$append.call(slots), props.appendIcon && _createVNode(VIcon, {
+      }, null)]), slots.default && _createVNode("div", {
+        "class": "v-input__control"
+      }, [(_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots, slotProps.value)]), hasAppend && _createVNode("div", {
+        "class": "v-input__append"
+      }, [slots == null ? void 0 : (_slots$append = slots.append) == null ? void 0 : _slots$append.call(slots, slotProps.value), props.appendIcon && _createVNode(VIcon, {
+        "onClick": e => emit('click:append', e),
         "icon": props.appendIcon
-      }, null, 8, ["icon"])], 8, ["onClick"]), slots.details && _createVNode("div", {
+      }, null)]), hasDetails && _createVNode("div", {
         "class": "v-input__details"
-      }, [(_slots$details = slots.details) == null ? void 0 : _slots$details.call(slots)])], 2);
+      }, [_createVNode(VMessages, {
+        "active": hasMessages,
+        "messages": errorMessages.value.length > 0 ? errorMessages.value : props.messages
+      }, {
+        message: slots.message
+      }), (_slots$details = slots.details) == null ? void 0 : _slots$details.call(slots, slotProps.value)])]);
+    });
+    return {
+      reset,
+      resetValidation,
+      validate
     };
   }
 
 });
-/* eslint-disable-next-line @typescript-eslint/no-redeclare */
+export function filterInputProps(props) {
+  return pick(props, Object.keys(VInput.props));
+}
 //# sourceMappingURL=VInput.mjs.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VInput/VInput.tsx"],"names":["defineComponent","VIcon","makeDensityProps","useDensity","VInput","name","props","appendIcon","String","prependIcon","emits","e","setup","slots","emit","densityClasses","hasPrepend","prepend","hasAppend","append","value","default","details"],"mappings":";AAAA,sB,CAEA;;SACSA,e;SACAC,K;SACAC,gB,EAAkBC,U;AAE3B,OAAO,MAAMC,MAAM,GAAGJ,eAAe,CAAC;AACpCK,EAAAA,IAAI,EAAE,QAD8B;AAGpCC,EAAAA,KAAK,EAAE;AACLC,IAAAA,UAAU,EAAEC,MADP;AAELC,IAAAA,WAAW,EAAED,MAFR;AAIL,OAAGN,gBAAgB;AAJd,GAH6B;AAUpCQ,EAAAA,KAAK,EAAE;AACL,qBAAkBC,CAAD,IAAmB,IAD/B;AAEL,oBAAiBA,CAAD,IAAmB;AAF9B,GAV6B;;AAepCC,EAAAA,KAAK,CAAEN,KAAF,EAAS;AAAEO,IAAAA,KAAF;AAASC,IAAAA;AAAT,GAAT,EAA0B;AAC7B,UAAM;AAAEC,MAAAA;AAAF,QAAqBZ,UAAU,CAACG,KAAD,EAAQ,SAAR,CAArC;AAEA,WAAO,MAAM;AAAA;;AACX,YAAMU,UAAU,GAAIH,KAAK,CAACI,OAAN,IAAiBX,KAAK,CAACG,WAA3C;AACA,YAAMS,SAAS,GAAIL,KAAK,CAACM,MAAN,IAAgBb,KAAK,CAACC,UAAzC;AAEA;AAAA,iBACc,CACV,SADU,EAEVQ,cAAc,CAACK,KAFL;AADd,UAMMJ,UAAU;AAAA,iBAEF,kBAFE;AAAA,mBAGEL,CAAC,IAAIG,IAAI,CAAC,eAAD,EAAkBH,CAAlB;AAHX,UAKNE,KALM,sCAKNA,KAAK,CAAEI,OALD,qBAKN,oBAAAJ,KAAK,CALC,EAONP,KAAK,CAACG,WAAN;AAAA,gBACcH,KAAK,CAACG;AADpB,2BAPM,kBANhB,oBAmBMI,KAAK,CAACQ,OAnBZ,qBAmBM,oBAAAR,KAAK,CAnBX,EAqBMK,SAAS;AAAA,iBAED,iBAFC;AAAA,mBAGGP,CAAC,IAAIG,IAAI,CAAC,cAAD,EAAiBH,CAAjB;AAHZ,UAKLE,KALK,qCAKLA,KAAK,CAAEM,MALF,qBAKL,mBAAAN,KAAK,CALA,EAOLP,KAAK,CAACC,UAAN;AAAA,gBACcD,KAAK,CAACC;AADpB,2BAPK,kBArBf,EAkCMM,KAAK,CAACS,OAAN;AAAA,iBACW;AADX,4BAEIT,KAAK,CAACS,OAFV,qBAEI,oBAAAT,KAAK,CAFT,EAlCN;AAyCD,KA7CD;AA8CD;;AAhEmC,CAAD,CAA9B;AAmEP","sourcesContent":["import './VInput.sass'\n\n// Utilities\nimport { defineComponent } from '@/util'\nimport { VIcon } from '@/components/VIcon'\nimport { makeDensityProps, useDensity } from '@/composables/density'\n\nexport const VInput = defineComponent({\n  name: 'VInput',\n\n  props: {\n    appendIcon: String,\n    prependIcon: String,\n\n    ...makeDensityProps(),\n  },\n\n  emits: {\n    'click:prepend': (e: MouseEvent) => true,\n    'click:append': (e: MouseEvent) => true,\n  },\n\n  setup (props, { slots, emit }) {\n    const { densityClasses } = useDensity(props, 'v-input')\n\n    return () => {\n      const hasPrepend = (slots.prepend || props.prependIcon)\n      const hasAppend = (slots.append || props.appendIcon)\n\n      return (\n        <div class={[\n          'v-input',\n          densityClasses.value,\n        ]}\n        >\n          { hasPrepend && (\n            <div\n              class=\"v-input__prepend\"\n              onClick={ e => emit('click:prepend', e) }\n            >\n              { slots?.prepend?.() }\n\n              { props.prependIcon && (\n                <VIcon icon={ props.prependIcon } />\n              ) }\n            </div>\n          ) }\n\n          { slots.default?.() }\n\n          { hasAppend && (\n            <div\n              class=\"v-input__append\"\n              onClick={ e => emit('click:append', e) }\n            >\n              { slots?.append?.() }\n\n              { props.appendIcon && (\n                <VIcon icon={ props.appendIcon } />\n              ) }\n            </div>\n          ) }\n\n          { slots.details && (\n            <div class=\"v-input__details\">\n              { slots.details?.() }\n            </div>\n          ) }\n        </div>\n      )\n    }\n  },\n})\n\n/* eslint-disable-next-line @typescript-eslint/no-redeclare */\nexport type VInput = InstanceType<typeof VInput>\n"],"file":"VInput.mjs"}
+{"version":3,"sources":["../../../src/components/VInput/VInput.tsx"],"names":["VIcon","VMessages","makeDensityProps","useDensity","makeValidationProps","useValidation","computed","genericComponent","getUid","pick","propsFactory","useRender","makeVInputProps","id","String","appendIcon","prependIcon","hideDetails","Boolean","messages","type","Array","default","direction","validator","v","includes","VInput","name","props","emits","e","val","setup","slots","emit","densityClasses","errorMessages","isDirty","isDisabled","isReadonly","isPristine","isValid","isValidating","reset","resetValidation","validate","validationClasses","uid","slotProps","hasPrepend","prepend","hasAppend","append","hasMessages","length","value","hasDetails","message","details","filterInputProps","Object","keys"],"mappings":"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","sourcesContent":["// Styles\nimport './VInput.sass'\n\n// Components\nimport { VIcon } from '@/components/VIcon'\nimport { VMessages } from '@/components/VMessages'\n\n// Composables\nimport { makeDensityProps, useDensity } from '@/composables/density'\nimport { makeValidationProps, useValidation } from '@/composables/validation'\n\n// Utilities\nimport { computed } from 'vue'\nimport { genericComponent, getUid, pick, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { ComputedRef, ExtractPropTypes, PropType, Ref } from 'vue'\nimport type { MakeSlots } from '@/util'\n\nexport interface VInputSlot {\n  id: 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: String,\n  prependIcon: String,\n  hideDetails: [Boolean, String] as PropType<boolean | 'auto'>,\n  messages: {\n    type: [Array, String] as PropType<string | 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  ...makeDensityProps(),\n  ...makeValidationProps(),\n})\n\nexport type VInputSlots = MakeSlots<{\n  default: [VInputSlot]\n  prepend: [VInputSlot]\n  append: [VInputSlot]\n  details: [VInputSlot]\n}>\n\nexport const VInput = genericComponent<new <T>() => {\n  $slots: VInputSlots\n}>()({\n  name: 'VInput',\n\n  props: {\n    ...makeVInputProps(),\n  },\n\n  emits: {\n    'click:prepend': (e: MouseEvent) => true,\n    'click:append': (e: MouseEvent) => true,\n    'update:modelValue': (val: any) => true,\n  },\n\n  setup (props, { slots, emit }) {\n    const { densityClasses } = useDensity(props)\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)\n\n    const uid = getUid()\n    const id = computed(() => props.id || `input-${uid}`)\n\n    const slotProps = computed<VInputSlot>(() => ({\n      id,\n      isDirty,\n      isDisabled,\n      isReadonly,\n      isPristine,\n      isValid,\n      isValidating,\n      reset,\n      resetValidation,\n      validate,\n    }))\n\n    useRender(() => {\n      const hasPrepend = !!(slots.prepend || props.prependIcon)\n      const hasAppend = !!(slots.append || props.appendIcon)\n      const hasMessages = !!(\n        props.messages?.length ||\n        errorMessages.value.length\n      )\n      const hasDetails = !props.hideDetails || (\n        props.hideDetails === 'auto' &&\n        hasMessages\n      )\n\n      return (\n        <div class={[\n          'v-input',\n          `v-input--${props.direction}`,\n          densityClasses.value,\n          validationClasses.value,\n        ]}\n        >\n          { hasPrepend && (\n            <div\n              class=\"v-input__prepend\"\n            >\n              { slots?.prepend?.(slotProps.value) }\n\n              { props.prependIcon && (\n                <VIcon\n                  onClick={ (e: MouseEvent) => emit('click:prepend', e) }\n                  icon={ props.prependIcon }\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\n              class=\"v-input__append\"\n            >\n              { slots?.append?.(slotProps.value) }\n\n              { props.appendIcon && (\n                <VIcon\n                  onClick={ (e: MouseEvent) => emit('click:append', e) }\n                  icon={ props.appendIcon }\n                />\n              ) }\n            </div>\n          ) }\n\n          { hasDetails && (\n            <div class=\"v-input__details\">\n              <VMessages\n                active={ hasMessages }\n                messages={ errorMessages.value.length > 0\n                  ? errorMessages.value\n                  : props.messages\n                }\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    }\n  },\n})\n\nexport type VInput = InstanceType<typeof VInput>\n\nexport function filterInputProps (props: ExtractPropTypes<ReturnType<typeof makeVInputProps>>) {\n  return pick(props, Object.keys(VInput.props) as any)\n}\n"],"file":"VInput.mjs"}

package/lib/components/VInput/VInput.sass

@@ -5,42 +5,81 @@
 .v-input
   display: grid
   flex: 1 1 auto
-  grid-template-areas: "prepend control append" "a messages b"
-  grid-template-columns: max-content auto max-content
-  grid-template-rows: auto auto
+
+  &--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__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 auto 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
-  // TODO: fix this when text-fields are implemented
-  color: rgba(0, 0, 0, .6)
   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
+  margin-bottom: $input-details-margin-bottom
   min-height: $input-details-min-height
   padding-top: $input-details-padding-above
   overflow: hidden
-  padding-inline-start: $input-details-padding-inline
-  padding-inline-end: $input-details-padding-inline
   justify-content: space-between
-  transition: $input-details-transition
+
+.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: center
-  align-self: center
+  padding-top: var(--v-input-padding-top)
 
 .v-input__prepend
-  margin-inline-end: $input-affix-margin-inside
   grid-area: prepend
 
 .v-input__append
-  margin-inline-start: $input-affix-margin-inside
   grid-area: append
+
+.v-input__control
+  grid-area: control

package/lib/components/VInput/_variables.scss

@@ -9,9 +9,9 @@ $input-details-font-size: .75rem !default;
 $input-details-font-weight: 400 !default;
 $input-details-letter-spacing: .0333333333em !default;
 $input-details-line-height: normal !default;
+$input-details-margin-bottom: 16px !default;
 $input-details-min-height: 22px !default;
 $input-details-padding-above: 6px !default;
-$input-details-padding-inline: 16px !default;
 $input-details-transition: 150ms settings.$standard-easing !default;
 
 // AFFIXES

package/lib/components/VItemGroup/VItem.mjs

@@ -2,14 +2,16 @@
 import { makeGroupItemProps, useGroupItem } from "../../composables/group.mjs";
 import { VItemGroupSymbol } from "./VItemGroup.mjs"; // Utilities
 
-import { defineComponent } from "../../util/index.mjs";
-export default defineComponent({
+import { genericComponent } from "../../util/index.mjs"; // Types
+
+export const VItem = genericComponent()({
   name: 'VItem',
   props: makeGroupItemProps(),
 
-  setup(props, {
-    slots
-  }) {
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
     const {
       isSelected,
       select,

package/lib/components/VItemGroup/VItem.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VItemGroup/VItem.tsx"],"names":["makeGroupItemProps","useGroupItem","VItemGroupSymbol","defineComponent","name","props","setup","slots","isSelected","select","toggle","selectedClass","value","disabled","default"],"mappings":"AAAA;SACSA,kB,EAAoBC,Y;SACpBC,gB,4BAET;;SACSC,e;AAET,eAAeA,eAAe,CAAC;AAC7BC,EAAAA,IAAI,EAAE,OADuB;AAG7BC,EAAAA,KAAK,EAAEL,kBAAkB,EAHI;;AAK7BM,EAAAA,KAAK,CAAED,KAAF,EAAS;AAAEE,IAAAA;AAAF,GAAT,EAAoB;AACvB,UAAM;AAAEC,MAAAA,UAAF;AAAcC,MAAAA,MAAd;AAAsBC,MAAAA,MAAtB;AAA8BC,MAAAA,aAA9B;AAA6CC,MAAAA,KAA7C;AAAoDC,MAAAA;AAApD,QAAiEZ,YAAY,CAACI,KAAD,EAAQH,gBAAR,CAAnF;AACA,WAAO;AAAA;;AAAA,+BAAMK,KAAK,CAACO,OAAZ,qBAAM,oBAAAP,KAAK,EAAW;AAC3BC,QAAAA,UAAU,EAAEA,UAAU,CAACI,KADI;AAE3BD,QAAAA,aAAa,EAAEA,aAAa,CAACC,KAFF;AAG3BH,QAAAA,MAH2B;AAI3BC,QAAAA,MAJ2B;AAK3BE,QAAAA,KAAK,EAAEA,KAAK,CAACA,KALc;AAM3BC,QAAAA,QAAQ,EAAEA,QAAQ,CAACD;AANQ,OAAX,CAAX;AAAA,KAAP;AAQD;;AAf4B,CAAD,CAA9B","sourcesContent":["// Composables\nimport { makeGroupItemProps, useGroupItem } from '@/composables/group'\nimport { VItemGroupSymbol } from './VItemGroup'\n\n// Utilities\nimport { defineComponent } from '@/util'\n\nexport default defineComponent({\n  name: 'VItem',\n\n  props: makeGroupItemProps(),\n\n  setup (props, { slots }) {\n    const { isSelected, select, toggle, selectedClass, value, disabled } = useGroupItem(props, VItemGroupSymbol)\n    return () => slots.default?.({\n      isSelected: isSelected.value,\n      selectedClass: selectedClass.value,\n      select,\n      toggle,\n      value: value.value,\n      disabled: disabled.value,\n    })\n  },\n})\n"],"file":"VItem.mjs"}
+{"version":3,"sources":["../../../src/components/VItemGroup/VItem.tsx"],"names":["makeGroupItemProps","useGroupItem","VItemGroupSymbol","genericComponent","VItem","name","props","setup","slots","isSelected","select","toggle","selectedClass","value","disabled","default"],"mappings":"AAAA;SACSA,kB,EAAoBC,Y;SACpBC,gB,4BAET;;SACSC,gB,gCAET;;AAIA,OAAO,MAAMC,KAAK,GAAGD,gBAAgB,GAIhC;AACHE,EAAAA,IAAI,EAAE,OADH;AAGHC,EAAAA,KAAK,EAAEN,kBAAkB,EAHtB;;AAKHO,EAAAA,KAAK,CAAED,KAAF,QAAoB;AAAA,QAAX;AAAEE,MAAAA;AAAF,KAAW;AACvB,UAAM;AAAEC,MAAAA,UAAF;AAAcC,MAAAA,MAAd;AAAsBC,MAAAA,MAAtB;AAA8BC,MAAAA,aAA9B;AAA6CC,MAAAA,KAA7C;AAAoDC,MAAAA;AAApD,QAAiEb,YAAY,CAACK,KAAD,EAAQJ,gBAAR,CAAnF;AACA,WAAO;AAAA;;AAAA,+BAAMM,KAAK,CAACO,OAAZ,qBAAM,oBAAAP,KAAK,EAAW;AAC3BC,QAAAA,UAAU,EAAEA,UAAU,CAACI,KADI;AAE3BD,QAAAA,aAAa,EAAEA,aAAa,CAACC,KAFF;AAG3BH,QAAAA,MAH2B;AAI3BC,QAAAA,MAJ2B;AAK3BE,QAAAA,KAAK,EAAEA,KAAK,CAACA,KALc;AAM3BC,QAAAA,QAAQ,EAAEA,QAAQ,CAACD;AANQ,OAAX,CAAX;AAAA,KAAP;AAQD;;AAfE,CAJgC,CAA9B","sourcesContent":["// Composables\nimport { makeGroupItemProps, useGroupItem } from '@/composables/group'\nimport { VItemGroupSymbol } from './VItemGroup'\n\n// Utilities\nimport { genericComponent } from '@/util'\n\n// Types\nimport type { MakeSlots } from '@/util'\nimport type { GroupItemProvide } from '@/composables/group'\n\nexport const VItem = genericComponent<new () => {\n  $slots: MakeSlots<{\n    default: [GroupItemProvide]\n  }>\n}>()({\n  name: 'VItem',\n\n  props: makeGroupItemProps(),\n\n  setup (props, { slots }) {\n    const { isSelected, select, toggle, selectedClass, value, disabled } = useGroupItem(props, VItemGroupSymbol)\n    return () => slots.default?.({\n      isSelected: isSelected.value,\n      selectedClass: selectedClass.value,\n      select,\n      toggle,\n      value: value.value,\n      disabled: disabled.value,\n    })\n  },\n})\n\nexport type VItem = InstanceType<typeof VItem>\n"],"file":"VItem.mjs"}

package/lib/components/VItemGroup/VItemGroup.mjs

@@ -4,11 +4,11 @@ import "./VItemGroup.css"; // Composables
 
 import { makeGroupProps, useGroup } from "../../composables/group.mjs";
 import { makeTagProps } from "../../composables/tag.mjs";
-import { makeThemeProps, useTheme } from "../../composables/theme.mjs"; // Utilities
+import { makeThemeProps, provideTheme } from "../../composables/theme.mjs"; // Utilities
 
 import { defineComponent } from "../../util/index.mjs";
 export const VItemGroupSymbol = Symbol.for('vuetify:v-item-group');
-export default defineComponent({
+export const VItemGroup = defineComponent({
   name: 'VItemGroup',
   props: { ...makeGroupProps({
       selectedClass: 'v-item--selected'
@@ -20,12 +20,13 @@ export default defineComponent({
     'update:modelValue': value => true
   },
 
-  setup(props, {
-    slots
-  }) {
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
     const {
       themeClasses
-    } = useTheme(props);
+    } = provideTheme(props);
     const {
       isSelected,
       select,
@@ -46,7 +47,7 @@ export default defineComponent({
           prev,
           selected: selected.value
         })]
-      }, 8, ["class"]);
+      });
     };
   }
 

package/lib/components/VItemGroup/VItemGroup.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VItemGroup/VItemGroup.tsx"],"names":["makeGroupProps","useGroup","makeTagProps","makeThemeProps","useTheme","defineComponent","VItemGroupSymbol","Symbol","for","name","props","selectedClass","emits","value","setup","slots","themeClasses","isSelected","select","next","prev","selected","default"],"mappings":";AAAA;AACA,0B,CAEA;;SACSA,c,EAAgBC,Q;SAChBC,Y;SACAC,c,EAAgBC,Q,uCAEzB;;SACSC,e;AAET,OAAO,MAAMC,gBAAgB,GAAGC,MAAM,CAACC,GAAP,CAAW,sBAAX,CAAzB;AAEP,eAAeH,eAAe,CAAC;AAC7BI,EAAAA,IAAI,EAAE,YADuB;AAG7BC,EAAAA,KAAK,EAAE,EACL,GAAGV,cAAc,CAAC;AAChBW,MAAAA,aAAa,EAAE;AADC,KAAD,CADZ;AAIL,OAAGT,YAAY,EAJV;AAKL,OAAGC,cAAc;AALZ,GAHsB;AAW7BS,EAAAA,KAAK,EAAE;AACL,yBAAsBC,KAAD,IAAgB;AADhC,GAXsB;;AAe7BC,EAAAA,KAAK,CAAEJ,KAAF,EAAS;AAAEK,IAAAA;AAAF,GAAT,EAAoB;AACvB,UAAM;AAAEC,MAAAA;AAAF,QAAmBZ,QAAQ,CAACM,KAAD,CAAjC;AACA,UAAM;AAAEO,MAAAA,UAAF;AAAcC,MAAAA,MAAd;AAAsBC,MAAAA,IAAtB;AAA4BC,MAAAA,IAA5B;AAAkCC,MAAAA;AAAlC,QAA+CpB,QAAQ,CAACS,KAAD,EAAQJ,gBAAR,CAA7D;AAEA,WAAO;AAAA;;AAAA;AAAA,iBAEI,CACL,cADK,EAELU,YAAY,CAACH,KAFR;AAFJ;AAAA,0CAODE,KAAK,CAACO,OAPL,qBAOD,oBAAAP,KAAK,EAAW;AAChBE,UAAAA,UADgB;AAEhBC,UAAAA,MAFgB;AAGhBC,UAAAA,IAHgB;AAIhBC,UAAAA,IAJgB;AAKhBC,UAAAA,QAAQ,EAAEA,QAAQ,CAACR;AALH,SAAX,CAPJ;AAAA;AAAA,KAAP;AAgBD;;AAnC4B,CAAD,CAA9B","sourcesContent":["// Styles\nimport './VItemGroup.sass'\n\n// Composables\nimport { makeGroupProps, useGroup } from '@/composables/group'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, useTheme } from '@/composables/theme'\n\n// Utilities\nimport { defineComponent } from '@/util'\n\nexport const VItemGroupSymbol = Symbol.for('vuetify:v-item-group')\n\nexport default defineComponent({\n  name: 'VItemGroup',\n\n  props: {\n    ...makeGroupProps({\n      selectedClass: 'v-item--selected',\n    }),\n    ...makeTagProps(),\n    ...makeThemeProps(),\n  },\n\n  emits: {\n    'update:modelValue': (value: any) => true,\n  },\n\n  setup (props, { slots }) {\n    const { themeClasses } = useTheme(props)\n    const { isSelected, select, next, prev, selected } = useGroup(props, VItemGroupSymbol)\n\n    return () => (\n      <props.tag\n        class={[\n          'v-item-group',\n          themeClasses.value,\n        ]}\n      >\n        { slots.default?.({\n          isSelected,\n          select,\n          next,\n          prev,\n          selected: selected.value,\n        }) }\n      </props.tag>\n    )\n  },\n})\n"],"file":"VItemGroup.mjs"}
+{"version":3,"sources":["../../../src/components/VItemGroup/VItemGroup.tsx"],"names":["makeGroupProps","useGroup","makeTagProps","makeThemeProps","provideTheme","defineComponent","VItemGroupSymbol","Symbol","for","VItemGroup","name","props","selectedClass","emits","value","setup","slots","themeClasses","isSelected","select","next","prev","selected","default"],"mappings":";AAAA;AACA,0B,CAEA;;SACSA,c,EAAgBC,Q;SAChBC,Y;SACAC,c,EAAgBC,Y,uCAEzB;;SACSC,e;AAET,OAAO,MAAMC,gBAAgB,GAAGC,MAAM,CAACC,GAAP,CAAW,sBAAX,CAAzB;AAEP,OAAO,MAAMC,UAAU,GAAGJ,eAAe,CAAC;AACxCK,EAAAA,IAAI,EAAE,YADkC;AAGxCC,EAAAA,KAAK,EAAE,EACL,GAAGX,cAAc,CAAC;AAChBY,MAAAA,aAAa,EAAE;AADC,KAAD,CADZ;AAIL,OAAGV,YAAY,EAJV;AAKL,OAAGC,cAAc;AALZ,GAHiC;AAWxCU,EAAAA,KAAK,EAAE;AACL,yBAAsBC,KAAD,IAAgB;AADhC,GAXiC;;AAexCC,EAAAA,KAAK,CAAEJ,KAAF,QAAoB;AAAA,QAAX;AAAEK,MAAAA;AAAF,KAAW;AACvB,UAAM;AAAEC,MAAAA;AAAF,QAAmBb,YAAY,CAACO,KAAD,CAArC;AACA,UAAM;AAAEO,MAAAA,UAAF;AAAcC,MAAAA,MAAd;AAAsBC,MAAAA,IAAtB;AAA4BC,MAAAA,IAA5B;AAAkCC,MAAAA;AAAlC,QAA+CrB,QAAQ,CAACU,KAAD,EAAQL,gBAAR,CAA7D;AAEA,WAAO;AAAA;;AAAA;AAAA,iBAEI,CACL,cADK,EAELW,YAAY,CAACH,KAFR;AAFJ;AAAA,0CAODE,KAAK,CAACO,OAPL,qBAOD,oBAAAP,KAAK,EAAW;AAChBE,UAAAA,UADgB;AAEhBC,UAAAA,MAFgB;AAGhBC,UAAAA,IAHgB;AAIhBC,UAAAA,IAJgB;AAKhBC,UAAAA,QAAQ,EAAEA,QAAQ,CAACR;AALH,SAAX,CAPJ;AAAA;AAAA,KAAP;AAgBD;;AAnCuC,CAAD,CAAlC","sourcesContent":["// Styles\nimport './VItemGroup.sass'\n\n// Composables\nimport { makeGroupProps, useGroup } from '@/composables/group'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\n\n// Utilities\nimport { defineComponent } from '@/util'\n\nexport const VItemGroupSymbol = Symbol.for('vuetify:v-item-group')\n\nexport const VItemGroup = defineComponent({\n  name: 'VItemGroup',\n\n  props: {\n    ...makeGroupProps({\n      selectedClass: 'v-item--selected',\n    }),\n    ...makeTagProps(),\n    ...makeThemeProps(),\n  },\n\n  emits: {\n    'update:modelValue': (value: any) => true,\n  },\n\n  setup (props, { slots }) {\n    const { themeClasses } = provideTheme(props)\n    const { isSelected, select, next, prev, selected } = useGroup(props, VItemGroupSymbol)\n\n    return () => (\n      <props.tag\n        class={[\n          'v-item-group',\n          themeClasses.value,\n        ]}\n      >\n        { slots.default?.({\n          isSelected,\n          select,\n          next,\n          prev,\n          selected: selected.value,\n        }) }\n      </props.tag>\n    )\n  },\n})\n\nexport type VItemGroup = InstanceType<typeof VItemGroup>\n"],"file":"VItemGroup.mjs"}

package/lib/components/VItemGroup/index.mjs

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VItemGroup/index.ts"],"names":["default","VItemGroup","VItem"],"mappings":"SAASA,OAAO,IAAIC,U;SACXD,OAAO,IAAIE,K","sourcesContent":["export { default as VItemGroup } from './VItemGroup'\nexport { default as VItem } from './VItem'\n"],"file":"index.mjs"}
+{"version":3,"sources":["../../../src/components/VItemGroup/index.ts"],"names":["VItemGroup","VItem"],"mappings":"SAASA,U;SACAC,K","sourcesContent":["export { VItemGroup } from './VItemGroup'\nexport { VItem } from './VItem'\n"],"file":"index.mjs"}

package/lib/components/VLabel/VLabel.css

@@ -0,0 +1,12 @@
+.v-label {
+  align-items: center;
+  cursor: pointer;
+  display: inline-flex;
+  font-size: 1rem;
+  letter-spacing: 0.009375em;
+  min-width: 0;
+  opacity: var(--v-medium-emphasis-opacity);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/lib/components/VLabel/VLabel.mjs

@@ -1,66 +1,28 @@
-// @ts-nocheck
-
-/* eslint-disable */
+import { createVNode as _createVNode } from "vue";
 // Styles
-import "./VLabel.css"; // Mixins
-
-import Colorable from "../../mixins/colorable/index.mjs";
-import Themeable, { functionalThemeClasses } from "../../mixins/themeable/index.mjs"; // Types
+import "./VLabel.css"; // Composables
 
-import mixins from "../../util/mixins.mjs"; // Helpers
+import { makeThemeProps } from "../../composables/theme.mjs"; // Utilities
 
-import { convertToUnit } from "../../util/helpers.mjs";
-/* @vue/component */
-
-export default mixins(Themeable).extend({
-  name: 'v-label',
-  functional: true,
+import { defineComponent } from "../../util/index.mjs";
+export const VLabel = defineComponent({
+  name: 'VLabel',
   props: {
-    absolute: Boolean,
-    color: {
-      type: String,
-      default: 'primary'
-    },
-    disabled: Boolean,
-    focused: Boolean,
-    for: String,
-    left: {
-      type: [Number, String],
-      default: 0
-    },
-    right: {
-      type: [Number, String],
-      default: 'auto'
-    },
-    value: Boolean
+    text: String,
+    ...makeThemeProps()
   },
 
-  render(h, ctx) {
-    const {
-      children,
-      listeners,
-      props
-    } = ctx;
-    const data = {
-      staticClass: 'v-label',
-      class: {
-        'v-label--active': props.value,
-        'v-label--is-disabled': props.disabled,
-        ...functionalThemeClasses(ctx)
-      },
-      attrs: {
-        for: props.for,
-        'aria-hidden': !props.for
-      },
-      on: listeners,
-      style: {
-        left: convertToUnit(props.left),
-        right: convertToUnit(props.right),
-        position: props.absolute ? 'absolute' : 'relative'
-      },
-      ref: 'label'
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    return () => {
+      var _slots$default;
+
+      return _createVNode("label", {
+        "class": "v-label"
+      }, [props.text, (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots)]);
     };
-    return h('label', Colorable.options.methods.setTextColor(props.focused && props.color, data), children);
   }
 
 });

package/lib/components/VLabel/VLabel.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VLabel/VLabel.ts"],"names":["Colorable","Themeable","functionalThemeClasses","mixins","convertToUnit","extend","name","functional","props","absolute","Boolean","color","type","String","default","disabled","focused","for","left","Number","right","value","render","h","ctx","children","listeners","data","staticClass","class","attrs","on","style","position","ref","options","methods","setTextColor"],"mappings":"AAAA;;AACA;AAEA;AACA,sB,CAEA;;OACOA,S;OACAC,S,IAAaC,sB,4CAEpB;;OAEOC,M,+BAEP;;SACSC,a;AAET;;AACA,eAAeD,MAAM,CAACF,SAAD,CAAN,CAAkBI,MAAlB,CAAyB;AACtCC,EAAAA,IAAI,EAAE,SADgC;AAGtCC,EAAAA,UAAU,EAAE,IAH0B;AAKtCC,EAAAA,KAAK,EAAE;AACLC,IAAAA,QAAQ,EAAEC,OADL;AAELC,IAAAA,KAAK,EAAE;AACLC,MAAAA,IAAI,EAAEC,MADD;AAELC,MAAAA,OAAO,EAAE;AAFJ,KAFF;AAMLC,IAAAA,QAAQ,EAAEL,OANL;AAOLM,IAAAA,OAAO,EAAEN,OAPJ;AAQLO,IAAAA,GAAG,EAAEJ,MARA;AASLK,IAAAA,IAAI,EAAE;AACJN,MAAAA,IAAI,EAAE,CAACO,MAAD,EAASN,MAAT,CADF;AAEJC,MAAAA,OAAO,EAAE;AAFL,KATD;AAaLM,IAAAA,KAAK,EAAE;AACLR,MAAAA,IAAI,EAAE,CAACO,MAAD,EAASN,MAAT,CADD;AAELC,MAAAA,OAAO,EAAE;AAFJ,KAbF;AAiBLO,IAAAA,KAAK,EAAEX;AAjBF,GAL+B;;AAyBtCY,EAAAA,MAAM,CAAEC,CAAF,EAAKC,GAAL,EAAiB;AACrB,UAAM;AAAEC,MAAAA,QAAF;AAAYC,MAAAA,SAAZ;AAAuBlB,MAAAA;AAAvB,QAAiCgB,GAAvC;AACA,UAAMG,IAAI,GAAG;AACXC,MAAAA,WAAW,EAAE,SADF;AAEXC,MAAAA,KAAK,EAAE;AACL,2BAAmBrB,KAAK,CAACa,KADpB;AAEL,gCAAwBb,KAAK,CAACO,QAFzB;AAGL,WAAGb,sBAAsB,CAACsB,GAAD;AAHpB,OAFI;AAOXM,MAAAA,KAAK,EAAE;AACLb,QAAAA,GAAG,EAAET,KAAK,CAACS,GADN;AAEL,uBAAe,CAACT,KAAK,CAACS;AAFjB,OAPI;AAWXc,MAAAA,EAAE,EAAEL,SAXO;AAYXM,MAAAA,KAAK,EAAE;AACLd,QAAAA,IAAI,EAAEd,aAAa,CAACI,KAAK,CAACU,IAAP,CADd;AAELE,QAAAA,KAAK,EAAEhB,aAAa,CAACI,KAAK,CAACY,KAAP,CAFf;AAGLa,QAAAA,QAAQ,EAAEzB,KAAK,CAACC,QAAN,GAAiB,UAAjB,GAA8B;AAHnC,OAZI;AAiBXyB,MAAAA,GAAG,EAAE;AAjBM,KAAb;AAoBA,WAAOX,CAAC,CAAC,OAAD,EAAUvB,SAAS,CAACmC,OAAV,CAAkBC,OAAlB,CAA0BC,YAA1B,CAAuC7B,KAAK,CAACQ,OAAN,IAAiBR,KAAK,CAACG,KAA9D,EAAqEgB,IAArE,CAAV,EAAsFF,QAAtF,CAAR;AACD;;AAhDqC,CAAzB,CAAf","sourcesContent":["// @ts-nocheck\n/* eslint-disable */\n\n// Styles\nimport './VLabel.sass'\n\n// Mixins\nimport Colorable from '../../mixins/colorable'\nimport Themeable, { functionalThemeClasses } from '../../mixins/themeable'\n\n// Types\nimport { VNode } from 'vue'\nimport mixins from '../../util/mixins'\n\n// Helpers\nimport { convertToUnit } from '../../util/helpers'\n\n/* @vue/component */\nexport default mixins(Themeable).extend({\n  name: 'v-label',\n\n  functional: true,\n\n  props: {\n    absolute: Boolean,\n    color: {\n      type: String,\n      default: 'primary',\n    },\n    disabled: Boolean,\n    focused: Boolean,\n    for: String,\n    left: {\n      type: [Number, String],\n      default: 0,\n    },\n    right: {\n      type: [Number, String],\n      default: 'auto',\n    },\n    value: Boolean,\n  },\n\n  render (h, ctx): VNode {\n    const { children, listeners, props } = ctx\n    const data = {\n      staticClass: 'v-label',\n      class: {\n        'v-label--active': props.value,\n        'v-label--is-disabled': props.disabled,\n        ...functionalThemeClasses(ctx),\n      },\n      attrs: {\n        for: props.for,\n        'aria-hidden': !props.for,\n      },\n      on: listeners,\n      style: {\n        left: convertToUnit(props.left),\n        right: convertToUnit(props.right),\n        position: props.absolute ? 'absolute' : 'relative',\n      },\n      ref: 'label',\n    }\n\n    return h('label', Colorable.options.methods.setTextColor(props.focused && props.color, data), children)\n  },\n})\n"],"file":"VLabel.mjs"}
+{"version":3,"sources":["../../../src/components/VLabel/VLabel.tsx"],"names":["makeThemeProps","defineComponent","VLabel","name","props","text","String","setup","slots","default"],"mappings":";AAAA;AACA,sB,CAEA;;SACSA,c,uCAET;;SACSC,e;AAET,OAAO,MAAMC,MAAM,GAAGD,eAAe,CAAC;AACpCE,EAAAA,IAAI,EAAE,QAD8B;AAGpCC,EAAAA,KAAK,EAAE;AACLC,IAAAA,IAAI,EAAEC,MADD;AAGL,OAAGN,cAAc;AAHZ,GAH6B;;AASpCO,EAAAA,KAAK,CAAEH,KAAF,QAAoB;AAAA,QAAX;AAAEI,MAAAA;AAAF,KAAW;AACvB,WAAO;AAAA;;AAAA;AAAA,iBACQ;AADR,UAEDJ,KAAK,CAACC,IAFL,oBAIDG,KAAK,CAACC,OAJL,qBAID,oBAAAD,KAAK,CAJJ;AAAA,KAAP;AAOD;;AAjBmC,CAAD,CAA9B","sourcesContent":["// Styles\nimport './VLabel.sass'\n\n// Composables\nimport { makeThemeProps } from '@/composables/theme'\n\n// Utilities\nimport { defineComponent } from '@/util'\n\nexport const VLabel = defineComponent({\n  name: 'VLabel',\n\n  props: {\n    text: String,\n\n    ...makeThemeProps(),\n  },\n\n  setup (props, { slots }) {\n    return () => (\n      <label class=\"v-label\">\n        { props.text }\n\n        { slots.default?.() }\n      </label>\n    )\n  },\n})\n\nexport type VLabel = InstanceType<typeof VLabel>\n"],"file":"VLabel.mjs"}

package/lib/components/VLabel/VLabel.sass

@@ -1,14 +1,16 @@
-@import './_variables.scss'
-
-// Theme
-+theme(v-label) using ($material)
-  color: map-deep-get($material, 'text', 'secondary')
-
-  &--is-disabled
-    color: map-deep-get($material, 'text', 'disabled')
+@forward './variables'
+@use '../../styles/settings'
+@use '../../styles/tools'
+@use './variables' as *
 
 .v-label
+  align-items: center
+  cursor: pointer
+  display: $label-display
   font-size: $label-font-size
-  line-height: $label-line-height
-  min-height: $label-min-height
-  transition: .3s map-get($transition, 'swing')
+  letter-spacing: $label-letter-spacing
+  min-width: 0
+  opacity: var(--v-medium-emphasis-opacity)
+  overflow: hidden
+  text-overflow: ellipsis
+  white-space: nowrap

package/lib/components/VLabel/_variables.scss

@@ -1,5 +1,8 @@
-@import '../../styles/styles.sass';
+@use '../../styles/settings';
 
-$label-font-size: 16px !default;
-$label-line-height: 1 !default;
-$label-min-height: 8px !default;
+$label-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default;
+$label-disabled-color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity)) !default;
+$label-display: inline-flex !default;
+$label-error-color: rgb(var(--v-theme-error)) !default;
+$label-font-size: 1rem !default;
+$label-letter-spacing: .009375em !default;

package/lib/components/VLabel/index.mjs

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

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

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

package/lib/components/VLayout/VLayout.css

@@ -3,6 +3,7 @@
   position: relative;
   display: flex;
   flex: 1 1 auto;
+  overflow: hidden;
 }
 .v-layout--full-height {
   --v-scrollbar-offset: inherit;

package/lib/components/VLayout/VLayout.mjs

@@ -5,24 +5,29 @@ import "./VLayout.css"; // Utilities
 import { defineComponent, useRender } from "../../util/index.mjs"; // Composables
 
 import { createLayout, makeLayoutProps } from "../../composables/layout.mjs";
-export default defineComponent({
+export const VLayout = defineComponent({
   name: 'VLayout',
   props: makeLayoutProps(),
 
-  setup(props, {
-    slots
-  }) {
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
     const {
       layoutClasses,
+      layoutStyles,
       getLayoutItem,
-      items
+      items,
+      layoutRef
     } = createLayout(props);
     useRender(() => {
       var _slots$default;
 
       return _createVNode("div", {
-        "class": layoutClasses.value
-      }, [(_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots)], 2);
+        "ref": layoutRef,
+        "class": layoutClasses.value,
+        "style": layoutStyles.value
+      }, [(_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots)]);
     });
     return {
       getLayoutItem,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VLayout/VLayout.tsx"],"names":["defineComponent","useRender","createLayout","makeLayoutProps","name","props","setup","slots","layoutClasses","getLayoutItem","items","value","default"],"mappings":";AAAA;AACA,uB,CAEA;;SACSA,e,EAAiBC,S,gCAE1B;;SACSC,Y,EAAcC,e;AAEvB,eAAeH,eAAe,CAAC;AAC7BI,EAAAA,IAAI,EAAE,SADuB;AAG7BC,EAAAA,KAAK,EAAEF,eAAe,EAHO;;AAK7BG,EAAAA,KAAK,CAAED,KAAF,EAAS;AAAEE,IAAAA;AAAF,GAAT,EAAoB;AACvB,UAAM;AAAEC,MAAAA,aAAF;AAAiBC,MAAAA,aAAjB;AAAgCC,MAAAA;AAAhC,QAA0CR,YAAY,CAACG,KAAD,CAA5D;AAEAJ,IAAAA,SAAS,CAAC;AAAA;;AAAA;AAAA,iBACKO,aAAa,CAACG;AADnB,4BAEJJ,KAAK,CAACK,OAFF,qBAEJ,oBAAAL,KAAK,CAFD;AAAA,KAAD,CAAT;AAMA,WAAO;AACLE,MAAAA,aADK;AAELC,MAAAA;AAFK,KAAP;AAID;;AAlB4B,CAAD,CAA9B","sourcesContent":["// Styles\nimport './VLayout.sass'\n\n// Utilities\nimport { defineComponent, useRender } from '@/util'\n\n// Composables\nimport { createLayout, makeLayoutProps } from '@/composables/layout'\n\nexport default defineComponent({\n  name: 'VLayout',\n\n  props: makeLayoutProps(),\n\n  setup (props, { slots }) {\n    const { layoutClasses, getLayoutItem, items } = createLayout(props)\n\n    useRender(() => (\n      <div class={ layoutClasses.value }>\n        { slots.default?.() }\n      </div>\n    ))\n\n    return {\n      getLayoutItem,\n      items,\n    }\n  },\n})\n"],"file":"VLayout.mjs"}
+{"version":3,"sources":["../../../src/components/VLayout/VLayout.tsx"],"names":["defineComponent","useRender","createLayout","makeLayoutProps","VLayout","name","props","setup","slots","layoutClasses","layoutStyles","getLayoutItem","items","layoutRef","value","default"],"mappings":";AAAA;AACA,uB,CAEA;;SACSA,e,EAAiBC,S,gCAE1B;;SACSC,Y,EAAcC,e;AAEvB,OAAO,MAAMC,OAAO,GAAGJ,eAAe,CAAC;AACrCK,EAAAA,IAAI,EAAE,SAD+B;AAGrCC,EAAAA,KAAK,EAAEH,eAAe,EAHe;;AAKrCI,EAAAA,KAAK,CAAED,KAAF,QAAoB;AAAA,QAAX;AAAEE,MAAAA;AAAF,KAAW;AACvB,UAAM;AAAEC,MAAAA,aAAF;AAAiBC,MAAAA,YAAjB;AAA+BC,MAAAA,aAA/B;AAA8CC,MAAAA,KAA9C;AAAqDC,MAAAA;AAArD,QAAmEX,YAAY,CAACI,KAAD,CAArF;AAEAL,IAAAA,SAAS,CAAC;AAAA;;AAAA;AAAA,eACGY,SADH;AAAA,iBACuBJ,aAAa,CAACK,KADrC;AAAA,iBACqDJ,YAAY,CAACI;AADlE,4BAEJN,KAAK,CAACO,OAFF,qBAEJ,oBAAAP,KAAK,CAFD;AAAA,KAAD,CAAT;AAMA,WAAO;AACLG,MAAAA,aADK;AAELC,MAAAA;AAFK,KAAP;AAID;;AAlBoC,CAAD,CAA/B","sourcesContent":["// Styles\nimport './VLayout.sass'\n\n// Utilities\nimport { defineComponent, useRender } from '@/util'\n\n// Composables\nimport { createLayout, makeLayoutProps } from '@/composables/layout'\n\nexport const VLayout = defineComponent({\n  name: 'VLayout',\n\n  props: makeLayoutProps(),\n\n  setup (props, { slots }) {\n    const { layoutClasses, layoutStyles, getLayoutItem, items, layoutRef } = createLayout(props)\n\n    useRender(() => (\n      <div ref={ layoutRef } class={ layoutClasses.value } style={ layoutStyles.value }>\n        { slots.default?.() }\n      </div>\n    ))\n\n    return {\n      getLayoutItem,\n      items,\n    }\n  },\n})\n\nexport type VLayout = InstanceType<typeof VLayout>\n"],"file":"VLayout.mjs"}