vuetify 3.5.4 → 3.5.5

package/lib/components/VDatePicker/VDatePickerYears.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VDatePickerYears.mjs","names":["VBtn","useDate","useProxiedModel","computed","nextTick","onMounted","ref","watchEffect","convertToUnit","createRange","genericComponent","propsFactory","useRender","makeVDatePickerYearsProps","color","String","height","Number","min","max","modelValue","VDatePickerYears","name","props","emits","year","setup","_ref","slots","adapter","model","years","getYear","date","startOfYear","setYear","map","i","text","format","value","yearRef","$el","scrollIntoView","block","_createVNode","btnProps","undefined","active","rounded","variant","onClick","_mergeProps"],"sources":["../../../src/components/VDatePicker/VDatePickerYears.tsx"],"sourcesContent":["// Styles\nimport './VDatePickerYears.sass'\n\n// Components\nimport { VBtn } from '@/components/VBtn'\n\n// Composables\nimport { useDate } from '@/composables/date'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utilities\nimport { computed, nextTick, onMounted, ref, watchEffect } from 'vue'\nimport { convertToUnit, createRange, genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\n\n// Types\nexport type VDatePickerYearsSlots = {\n  year: {\n    year: {\n      text: string\n      value: number\n    }\n    i: number\n    props: {\n      active: boolean\n      color?: string\n      rounded: boolean\n      text: string\n      variant: 'flat' | 'text'\n      onClick: () => void\n    }\n  }\n}\n\nexport const makeVDatePickerYearsProps = propsFactory({\n  color: String,\n  height: [String, Number],\n  min: null as any as PropType<unknown>,\n  max: null as any as PropType<unknown>,\n  modelValue: Number,\n}, 'VDatePickerYears')\n\nexport const VDatePickerYears = genericComponent<VDatePickerYearsSlots>()({\n  name: 'VDatePickerYears',\n\n  props: makeVDatePickerYearsProps(),\n\n  emits: {\n    'update:modelValue': (year: number) => true,\n  },\n\n  setup (props, { slots }) {\n    const adapter = useDate()\n    const model = useProxiedModel(props, 'modelValue')\n    const years = computed(() => {\n      const year = adapter.getYear(adapter.date())\n\n      let min = year - 100\n      let max = year + 52\n\n      if (props.min) {\n        min = adapter.getYear(adapter.date(props.min))\n      }\n\n      if (props.max) {\n        max = adapter.getYear(adapter.date(props.max))\n      }\n\n      let date = adapter.startOfYear(adapter.date())\n\n      date = adapter.setYear(date, min)\n\n      return createRange(max - min + 1, min).map(i => {\n        const text = adapter.format(date, 'year')\n        date = adapter.setYear(date, adapter.getYear(date) + 1)\n\n        return {\n          text,\n          value: i,\n        }\n      })\n    })\n\n    watchEffect(() => {\n      model.value = model.value ?? adapter.getYear(adapter.date())\n    })\n\n    const yearRef = ref<VBtn>()\n    onMounted(async () => {\n      await nextTick()\n      yearRef.value?.$el.scrollIntoView({ block: 'center' })\n    })\n\n    useRender(() => (\n      <div\n        class=\"v-date-picker-years\"\n        style={{\n          height: convertToUnit(props.height),\n        }}\n      >\n        <div class=\"v-date-picker-years__content\">\n          { years.value.map((year, i) => {\n            const btnProps = {\n              ref: model.value === year.value ? yearRef : undefined,\n              active: model.value === year.value,\n              color: model.value === year.value ? props.color : undefined,\n              rounded: true,\n              text: year.text,\n              variant: model.value === year.value ? 'flat' : 'text',\n              onClick: () => model.value = year.value,\n            } as const\n\n            return slots.year?.({\n              year,\n              i,\n              props: btnProps,\n            }) ?? (\n              <VBtn\n                key=\"month\"\n                { ...btnProps }\n              />\n            )\n          })}\n        </div>\n      </div>\n    ))\n\n    return {}\n  },\n})\n\nexport type VDatePickerYears = InstanceType<typeof VDatePickerYears>\n"],"mappings":"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"}
+{"version":3,"file":"VDatePickerYears.mjs","names":["VBtn","useDate","useProxiedModel","computed","nextTick","onMounted","ref","watchEffect","convertToUnit","createRange","genericComponent","propsFactory","useRender","makeVDatePickerYearsProps","color","String","height","Number","min","max","modelValue","VDatePickerYears","name","props","emits","year","setup","_ref","emit","slots","adapter","model","years","getYear","date","startOfYear","setYear","map","i","text","format","value","yearRef","$el","scrollIntoView","block","_createVNode","btnProps","undefined","active","rounded","variant","onClick","_mergeProps"],"sources":["../../../src/components/VDatePicker/VDatePickerYears.tsx"],"sourcesContent":["// Styles\nimport './VDatePickerYears.sass'\n\n// Components\nimport { VBtn } from '@/components/VBtn'\n\n// Composables\nimport { useDate } from '@/composables/date'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utilities\nimport { computed, nextTick, onMounted, ref, watchEffect } from 'vue'\nimport { convertToUnit, createRange, genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\n\n// Types\nexport type VDatePickerYearsSlots = {\n  year: {\n    year: {\n      text: string\n      value: number\n    }\n    i: number\n    props: {\n      active: boolean\n      color?: string\n      rounded: boolean\n      text: string\n      variant: 'flat' | 'text'\n      onClick: () => void\n    }\n  }\n}\n\nexport const makeVDatePickerYearsProps = propsFactory({\n  color: String,\n  height: [String, Number],\n  min: null as any as PropType<unknown>,\n  max: null as any as PropType<unknown>,\n  modelValue: Number,\n}, 'VDatePickerYears')\n\nexport const VDatePickerYears = genericComponent<VDatePickerYearsSlots>()({\n  name: 'VDatePickerYears',\n\n  props: makeVDatePickerYearsProps(),\n\n  emits: {\n    'update:modelValue': (year: number) => true,\n  },\n\n  setup (props, { emit, slots }) {\n    const adapter = useDate()\n    const model = useProxiedModel(props, 'modelValue')\n    const years = computed(() => {\n      const year = adapter.getYear(adapter.date())\n\n      let min = year - 100\n      let max = year + 52\n\n      if (props.min) {\n        min = adapter.getYear(adapter.date(props.min))\n      }\n\n      if (props.max) {\n        max = adapter.getYear(adapter.date(props.max))\n      }\n\n      let date = adapter.startOfYear(adapter.date())\n\n      date = adapter.setYear(date, min)\n\n      return createRange(max - min + 1, min).map(i => {\n        const text = adapter.format(date, 'year')\n        date = adapter.setYear(date, adapter.getYear(date) + 1)\n\n        return {\n          text,\n          value: i,\n        }\n      })\n    })\n\n    watchEffect(() => {\n      model.value = model.value ?? adapter.getYear(adapter.date())\n    })\n\n    const yearRef = ref<VBtn>()\n    onMounted(async () => {\n      await nextTick()\n      yearRef.value?.$el.scrollIntoView({ block: 'center' })\n    })\n\n    useRender(() => (\n      <div\n        class=\"v-date-picker-years\"\n        style={{\n          height: convertToUnit(props.height),\n        }}\n      >\n        <div class=\"v-date-picker-years__content\">\n          { years.value.map((year, i) => {\n            const btnProps = {\n              ref: model.value === year.value ? yearRef : undefined,\n              active: model.value === year.value,\n              color: model.value === year.value ? props.color : undefined,\n              rounded: true,\n              text: year.text,\n              variant: model.value === year.value ? 'flat' : 'text',\n              onClick: () => {\n                if (model.value === year.value) {\n                  emit('update:modelValue', model.value)\n                  return\n                }\n                model.value = year.value\n              },\n            } as const\n\n            return slots.year?.({\n              year,\n              i,\n              props: btnProps,\n            }) ?? (\n              <VBtn\n                key=\"month\"\n                { ...btnProps }\n              />\n            )\n          })}\n        </div>\n      </div>\n    ))\n\n    return {}\n  },\n})\n\nexport type VDatePickerYears = InstanceType<typeof VDatePickerYears>\n"],"mappings":"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"}

package/lib/components/VDatePicker/VDatePickerYears.sass

@@ -1,5 +1,7 @@
+@use './variables' as *
+
 .v-date-picker-years
-  height: 320px
+  height: $date-picker-years-height
   overflow-y: scroll
 
 .v-date-picker-years__content
@@ -8,7 +10,7 @@
   justify-content: space-around
   grid-template-columns: repeat(3, 1fr)
   gap: 8px 24px
-  padding-inline: 36px
+  padding-inline: $date-picker-years-padding-inline
 
   .v-btn
     padding-inline: 8px

package/lib/components/VDatePicker/_variables.scss

@@ -1,37 +1,17 @@
-$date-picker-years-font-size: 16px !default;
-$date-picker-years-font-weight: 400 !default;
-$date-picker-years-portrait-height: 290px !default;
-$date-picker-years-landscape-height: 290px !default;
-$date-picker-years-item-padding: 8px 0 !default;
-$date-picker-years-active-font-size: 26px !default;
-$date-picker-years-active-font-weight: 500 !default;
-$date-picker-years-active-padding: 10px 0 !default;
-$date-picker-years-item-hover-background: rgba(0, 0, 0, 0.12) !default;
-$date-picker-years-item-align: center !default;
+$date-picker-width: 328px !default;
+$date-picker-show-week-width: 368px !default;
 
-$date-picker-title-year-font-size: 14px !default;
-$date-picker-title-year-font-weight: 500 !default;
-$date-picker-title-year-bottom-margin: 8px !default;
-$date-picker-title-date-font-size: 34px !default;
-$date-picker-title-date-font-weight: 500 !default;
+$date-picker-header-height: 70px !default;
 
-$date-picker-header-padding: 4px 16px !default;
-$date-picker-header-button-font-weight: bold !default;
-$date-picker-header-button-padding: 0.5rem !default;
+$date-picker-month-btn-height: 24px !default;
+$date-picker-month-btn-size: 0.85rem !default;
+$date-picker-month-column-gap: 4px !default;
+$date-picker-month-day-size: 40px !default;
+$date-picker-month-font-size: 0.85rem !default;
+$date-picker-month-padding: 0 12px 8px !default;
 
-$date-picker-table-padding: 0 12px !default;
-$date-picker-table-height: 242px !default;
-$date-picker-table-font-size: 12px !default;
-$date-picker-table-date-button-width: 32px !default;
-$date-picker-table-date-button-height: 32px !default;
-$date-picker-table-month-height: 56px !default;
-$date-picker-table-month-min-width: 40px !default;
-$date-picker-table-month-max-width: 140px !default;
-$date-picker-table-date-padding: 8px 0 !default;
-$date-picker-table-date-font-weight: 600 !default;
-$date-picker-table-date-width: 45px !default;
-$date-picker-event-size: 8px !default;
-$date-picker-event-margin: 0 1px !default;
-$date-picker-event-border-radius: 50% !default;
-$date-picker-event-month-bottom: 6px !default;
-$date-picker-event-date-bottom: 8px !default;
+$date-picker-months-grid-gap: 0px 24px !default;
+$date-picker-months-height: 288px !default;
+
+$date-picker-years-height: 288px !default;
+$date-picker-years-padding-inline: 32px !default;

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

@@ -57,6 +57,7 @@ declare const VDatePicker: {
         disabled: boolean;
         tag: string;
         landscape: boolean;
+        tile: boolean;
         nextIcon: string;
         prevIcon: string;
         modeIcon: string;
@@ -106,6 +107,7 @@ declare const VDatePicker: {
         disabled: boolean;
         tag: string;
         landscape: boolean;
+        tile: boolean;
         nextIcon: string;
         prevIcon: string;
         modeIcon: string;
@@ -152,6 +154,7 @@ declare const VDatePicker: {
         tag: string;
         landscape: boolean;
         rounded: string | number | boolean;
+        tile: boolean;
         nextIcon: string;
         prevIcon: string;
         modeIcon: string;
@@ -191,6 +194,7 @@ declare const VDatePicker: {
         disabled: boolean;
         tag: string;
         landscape: boolean;
+        tile: boolean;
         nextIcon: string;
         prevIcon: string;
         modeIcon: string;
@@ -237,6 +241,7 @@ declare const VDatePicker: {
         tag: string;
         landscape: boolean;
         rounded: string | number | boolean;
+        tile: boolean;
         nextIcon: string;
         prevIcon: string;
         modeIcon: string;
@@ -257,6 +262,7 @@ declare const VDatePicker: {
     disabled: boolean;
     tag: string;
     landscape: boolean;
+    tile: boolean;
     nextIcon: string;
     prevIcon: string;
     modeIcon: string;
@@ -308,6 +314,7 @@ declare const VDatePicker: {
     tag: string;
     landscape: boolean;
     rounded: string | number | boolean;
+    tile: boolean;
     nextIcon: string;
     prevIcon: string;
     modeIcon: string;
@@ -352,6 +359,7 @@ declare const VDatePicker: {
         type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
         default: undefined;
     };
+    tile: BooleanConstructor;
     position: {
         type: vue.PropType<"fixed" | "absolute" | "static" | "sticky" | "relative">;
         validator: (v: any) => boolean;
@@ -445,6 +453,7 @@ declare const VDatePicker: {
         type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
         default: undefined;
     };
+    tile: BooleanConstructor;
     position: {
         type: vue.PropType<"fixed" | "absolute" | "static" | "sticky" | "relative">;
         validator: (v: any) => boolean;
@@ -1238,7 +1247,7 @@ declare const VDatePickerMonths: {
     } & {
         "onUpdate:modelValue"?: ((date: any) => any) | undefined;
     }, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
-        'update:modelValue': (date: any) => boolean;
+        'update:modelValue': (date: any) => true;
     }, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {} & {
         height?: string | number | undefined;
         color?: string | undefined;
@@ -1390,7 +1399,7 @@ declare const VDatePickerMonths: {
 } & {
     "onUpdate:modelValue"?: ((date: any) => any) | undefined;
 }, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
-    'update:modelValue': (date: any) => boolean;
+    'update:modelValue': (date: any) => true;
 }, string, {}, {}, string, vue.SlotsType<Partial<{
     month: (arg: {
         month: {
@@ -1476,7 +1485,7 @@ declare const VDatePickerYears: {
     } & {
         "onUpdate:modelValue"?: ((year: number) => any) | undefined;
     }, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
-        'update:modelValue': (year: number) => boolean;
+        'update:modelValue': (year: number) => true;
     }, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {} & {
         max?: unknown;
         height?: string | number | undefined;
@@ -1684,7 +1693,7 @@ declare const VDatePickerYears: {
 } & {
     "onUpdate:modelValue"?: ((year: number) => any) | undefined;
 }, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
-    'update:modelValue': (year: number) => boolean;
+    'update:modelValue': (year: number) => true;
 }, string, {}, {}, string, vue.SlotsType<Partial<{
     year: (arg: {
         year: {

package/lib/components/VExpansionPanel/VExpansionPanel.css

@@ -196,4 +196,18 @@
 }
 .v-expansion-panels--variant-inset > .v-expansion-panel--active {
   max-width: calc(100% - 32px);
+}
+
+.v-expansion-panels--flat > .v-expansion-panel::after {
+  border-top: none;
+}
+.v-expansion-panels--flat > .v-expansion-panel .v-expansion-panel__shadow {
+  display: none;
+}
+
+.v-expansion-panels--tile {
+  border-radius: 0;
+}
+.v-expansion-panels--tile > .v-expansion-panel {
+  border-radius: 0;
 }

package/lib/components/VExpansionPanel/VExpansionPanel.sass

@@ -173,3 +173,17 @@
 
     &--active
       max-width: $expansion-panel-inset-active-max-width
+
+.v-expansion-panels--flat
+  > .v-expansion-panel
+    &::after
+      border-top: none
+
+    .v-expansion-panel__shadow
+      display: none
+
+.v-expansion-panels--tile
+  border-radius: 0
+
+  > .v-expansion-panel
+    border-radius: 0

package/lib/components/VExpansionPanel/VExpansionPanels.mjs

@@ -14,7 +14,9 @@ export const VExpansionPanelSymbol = Symbol.for('vuetify:v-expansion-panel');
 const allowedVariants = ['default', 'accordion', 'inset', 'popout'];
 export const makeVExpansionPanelsProps = propsFactory({
   color: String,
+  flat: Boolean,
   static: Boolean,
+  tile: Boolean,
   variant: {
     type: String,
     default: 'default',
@@ -44,12 +46,17 @@ export const VExpansionPanels = genericComponent()({
     provideDefaults({
       VExpansionPanel: {
         color: toRef(props, 'color'),
-        readonly: toRef(props, 'readonly'),
+        readonly: toRef(props, 'readonly')
+      },
+      VExpansionPanelTitle: {
         static: toRef(props, 'static')
       }
     });
     useRender(() => _createVNode(props.tag, {
-      "class": ['v-expansion-panels', themeClasses.value, variantClass.value, props.class],
+      "class": ['v-expansion-panels', {
+        'v-expansion-panels--flat': props.flat,
+        'v-expansion-panels--tile': props.tile
+      }, themeClasses.value, variantClass.value, props.class],
       "style": props.style
     }, slots));
     return {};

package/lib/components/VExpansionPanel/VExpansionPanels.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VExpansionPanels.mjs","names":["makeComponentProps","provideDefaults","makeGroupProps","useGroup","makeTagProps","makeThemeProps","provideTheme","computed","toRef","genericComponent","propsFactory","useRender","VExpansionPanelSymbol","Symbol","for","allowedVariants","makeVExpansionPanelsProps","color","String","static","Boolean","variant","type","default","validator","v","includes","readonly","VExpansionPanels","name","props","emits","val","setup","_ref","slots","themeClasses","variantClass","VExpansionPanel","_createVNode","tag","value","class","style"],"sources":["../../../src/components/VExpansionPanel/VExpansionPanels.tsx"],"sourcesContent":["// Styles\nimport './VExpansionPanel.sass'\n\n// Composables\nimport { makeComponentProps } from '@/composables/component'\nimport { provideDefaults } from '@/composables/defaults'\nimport { makeGroupProps, useGroup } from '@/composables/group'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\n\n// Utilities\nimport { computed, toRef } from 'vue'\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { InjectionKey, PropType } from 'vue'\nimport type { GroupItemProvide } from '@/composables/group'\n\nexport const VExpansionPanelSymbol: InjectionKey<GroupItemProvide> = Symbol.for('vuetify:v-expansion-panel')\n\nconst allowedVariants = ['default', 'accordion', 'inset', 'popout'] as const\n\ntype Variant = typeof allowedVariants[number]\n\nexport const makeVExpansionPanelsProps = propsFactory({\n  color: String,\n  static: Boolean,\n  variant: {\n    type: String as PropType<Variant>,\n    default: 'default',\n    validator: (v: any) => allowedVariants.includes(v),\n  },\n  readonly: Boolean,\n\n  ...makeComponentProps(),\n  ...makeGroupProps(),\n  ...makeTagProps(),\n  ...makeThemeProps(),\n}, 'VExpansionPanels')\n\nexport const VExpansionPanels = genericComponent()({\n  name: 'VExpansionPanels',\n\n  props: makeVExpansionPanelsProps(),\n\n  emits: {\n    'update:modelValue': (val: unknown) => true,\n  },\n\n  setup (props, { slots }) {\n    useGroup(props, VExpansionPanelSymbol)\n\n    const { themeClasses } = provideTheme(props)\n\n    const variantClass = computed(() => props.variant && `v-expansion-panels--variant-${props.variant}`)\n\n    provideDefaults({\n      VExpansionPanel: {\n        color: toRef(props, 'color'),\n        readonly: toRef(props, 'readonly'),\n        static: toRef(props, 'static'),\n      },\n    })\n\n    useRender(() => (\n      <props.tag\n        class={[\n          'v-expansion-panels',\n          themeClasses.value,\n          variantClass.value,\n          props.class,\n        ]}\n        style={ props.style }\n        v-slots={ slots }\n      />\n    ))\n\n    return {}\n  },\n})\n\nexport type VExpansionPanels = InstanceType<typeof VExpansionPanels>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,kBAAkB;AAAA,SAClBC,eAAe;AAAA,SACfC,cAAc,EAAEC,QAAQ;AAAA,SACxBC,YAAY;AAAA,SACZC,cAAc,EAAEC,YAAY,uCAErC;AACA,SAASC,QAAQ,EAAEC,KAAK,QAAQ,KAAK;AAAA,SAC5BC,gBAAgB,EAAEC,YAAY,EAAEC,SAAS,gCAElD;AAIA,OAAO,MAAMC,qBAAqD,GAAGC,MAAM,CAACC,GAAG,CAAC,2BAA2B,CAAC;AAE5G,MAAMC,eAAe,GAAG,CAAC,SAAS,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,CAAU;AAI5E,OAAO,MAAMC,yBAAyB,GAAGN,YAAY,CAAC;EACpDO,KAAK,EAAEC,MAAM;EACbC,MAAM,EAAEC,OAAO;EACfC,OAAO,EAAE;IACPC,IAAI,EAAEJ,MAA2B;IACjCK,OAAO,EAAE,SAAS;IAClBC,SAAS,EAAGC,CAAM,IAAKV,eAAe,CAACW,QAAQ,CAACD,CAAC;EACnD,CAAC;EACDE,QAAQ,EAAEP,OAAO;EAEjB,GAAGpB,kBAAkB,CAAC,CAAC;EACvB,GAAGE,cAAc,CAAC,CAAC;EACnB,GAAGE,YAAY,CAAC,CAAC;EACjB,GAAGC,cAAc,CAAC;AACpB,CAAC,EAAE,kBAAkB,CAAC;AAEtB,OAAO,MAAMuB,gBAAgB,GAAGnB,gBAAgB,CAAC,CAAC,CAAC;EACjDoB,IAAI,EAAE,kBAAkB;EAExBC,KAAK,EAAEd,yBAAyB,CAAC,CAAC;EAElCe,KAAK,EAAE;IACL,mBAAmB,EAAGC,GAAY,IAAK;EACzC,CAAC;EAEDC,KAAKA,CAAEH,KAAK,EAAAI,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACrB/B,QAAQ,CAAC2B,KAAK,EAAElB,qBAAqB,CAAC;IAEtC,MAAM;MAAEwB;IAAa,CAAC,GAAG9B,YAAY,CAACwB,KAAK,CAAC;IAE5C,MAAMO,YAAY,GAAG9B,QAAQ,CAAC,MAAMuB,KAAK,CAACT,OAAO,IAAK,+BAA8BS,KAAK,CAACT,OAAQ,EAAC,CAAC;IAEpGpB,eAAe,CAAC;MACdqC,eAAe,EAAE;QACfrB,KAAK,EAAET,KAAK,CAACsB,KAAK,EAAE,OAAO,CAAC;QAC5BH,QAAQ,EAAEnB,KAAK,CAACsB,KAAK,EAAE,UAAU,CAAC;QAClCX,MAAM,EAAEX,KAAK,CAACsB,KAAK,EAAE,QAAQ;MAC/B;IACF,CAAC,CAAC;IAEFnB,SAAS,CAAC,MAAA4B,YAAA,CAAAT,KAAA,CAAAU,GAAA;MAAA,SAEC,CACL,oBAAoB,EACpBJ,YAAY,CAACK,KAAK,EAClBJ,YAAY,CAACI,KAAK,EAClBX,KAAK,CAACY,KAAK,CACZ;MAAA,SACOZ,KAAK,CAACa;IAAK,GACTR,KAAK,CAElB,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC"}
+{"version":3,"file":"VExpansionPanels.mjs","names":["makeComponentProps","provideDefaults","makeGroupProps","useGroup","makeTagProps","makeThemeProps","provideTheme","computed","toRef","genericComponent","propsFactory","useRender","VExpansionPanelSymbol","Symbol","for","allowedVariants","makeVExpansionPanelsProps","color","String","flat","Boolean","static","tile","variant","type","default","validator","v","includes","readonly","VExpansionPanels","name","props","emits","val","setup","_ref","slots","themeClasses","variantClass","VExpansionPanel","VExpansionPanelTitle","_createVNode","tag","value","class","style"],"sources":["../../../src/components/VExpansionPanel/VExpansionPanels.tsx"],"sourcesContent":["// Styles\nimport './VExpansionPanel.sass'\n\n// Composables\nimport { makeComponentProps } from '@/composables/component'\nimport { provideDefaults } from '@/composables/defaults'\nimport { makeGroupProps, useGroup } from '@/composables/group'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\n\n// Utilities\nimport { computed, toRef } from 'vue'\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { InjectionKey, PropType } from 'vue'\nimport type { GroupItemProvide } from '@/composables/group'\n\nexport const VExpansionPanelSymbol: InjectionKey<GroupItemProvide> = Symbol.for('vuetify:v-expansion-panel')\n\nconst allowedVariants = ['default', 'accordion', 'inset', 'popout'] as const\n\ntype Variant = typeof allowedVariants[number]\n\nexport const makeVExpansionPanelsProps = propsFactory({\n  color: String,\n  flat: Boolean,\n  static: Boolean,\n  tile: Boolean,\n  variant: {\n    type: String as PropType<Variant>,\n    default: 'default',\n    validator: (v: any) => allowedVariants.includes(v),\n  },\n  readonly: Boolean,\n\n  ...makeComponentProps(),\n  ...makeGroupProps(),\n  ...makeTagProps(),\n  ...makeThemeProps(),\n}, 'VExpansionPanels')\n\nexport const VExpansionPanels = genericComponent()({\n  name: 'VExpansionPanels',\n\n  props: makeVExpansionPanelsProps(),\n\n  emits: {\n    'update:modelValue': (val: unknown) => true,\n  },\n\n  setup (props, { slots }) {\n    useGroup(props, VExpansionPanelSymbol)\n\n    const { themeClasses } = provideTheme(props)\n\n    const variantClass = computed(() => props.variant && `v-expansion-panels--variant-${props.variant}`)\n\n    provideDefaults({\n      VExpansionPanel: {\n        color: toRef(props, 'color'),\n        readonly: toRef(props, 'readonly'),\n      },\n      VExpansionPanelTitle: {\n        static: toRef(props, 'static'),\n      },\n    })\n\n    useRender(() => (\n      <props.tag\n        class={[\n          'v-expansion-panels',\n          {\n            'v-expansion-panels--flat': props.flat,\n            'v-expansion-panels--tile': props.tile,\n          },\n          themeClasses.value,\n          variantClass.value,\n          props.class,\n        ]}\n        style={ props.style }\n        v-slots={ slots }\n      />\n    ))\n\n    return {}\n  },\n})\n\nexport type VExpansionPanels = InstanceType<typeof VExpansionPanels>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,kBAAkB;AAAA,SAClBC,eAAe;AAAA,SACfC,cAAc,EAAEC,QAAQ;AAAA,SACxBC,YAAY;AAAA,SACZC,cAAc,EAAEC,YAAY,uCAErC;AACA,SAASC,QAAQ,EAAEC,KAAK,QAAQ,KAAK;AAAA,SAC5BC,gBAAgB,EAAEC,YAAY,EAAEC,SAAS,gCAElD;AAIA,OAAO,MAAMC,qBAAqD,GAAGC,MAAM,CAACC,GAAG,CAAC,2BAA2B,CAAC;AAE5G,MAAMC,eAAe,GAAG,CAAC,SAAS,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,CAAU;AAI5E,OAAO,MAAMC,yBAAyB,GAAGN,YAAY,CAAC;EACpDO,KAAK,EAAEC,MAAM;EACbC,IAAI,EAAEC,OAAO;EACbC,MAAM,EAAED,OAAO;EACfE,IAAI,EAAEF,OAAO;EACbG,OAAO,EAAE;IACPC,IAAI,EAAEN,MAA2B;IACjCO,OAAO,EAAE,SAAS;IAClBC,SAAS,EAAGC,CAAM,IAAKZ,eAAe,CAACa,QAAQ,CAACD,CAAC;EACnD,CAAC;EACDE,QAAQ,EAAET,OAAO;EAEjB,GAAGpB,kBAAkB,CAAC,CAAC;EACvB,GAAGE,cAAc,CAAC,CAAC;EACnB,GAAGE,YAAY,CAAC,CAAC;EACjB,GAAGC,cAAc,CAAC;AACpB,CAAC,EAAE,kBAAkB,CAAC;AAEtB,OAAO,MAAMyB,gBAAgB,GAAGrB,gBAAgB,CAAC,CAAC,CAAC;EACjDsB,IAAI,EAAE,kBAAkB;EAExBC,KAAK,EAAEhB,yBAAyB,CAAC,CAAC;EAElCiB,KAAK,EAAE;IACL,mBAAmB,EAAGC,GAAY,IAAK;EACzC,CAAC;EAEDC,KAAKA,CAAEH,KAAK,EAAAI,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACrBjC,QAAQ,CAAC6B,KAAK,EAAEpB,qBAAqB,CAAC;IAEtC,MAAM;MAAE0B;IAAa,CAAC,GAAGhC,YAAY,CAAC0B,KAAK,CAAC;IAE5C,MAAMO,YAAY,GAAGhC,QAAQ,CAAC,MAAMyB,KAAK,CAACT,OAAO,IAAK,+BAA8BS,KAAK,CAACT,OAAQ,EAAC,CAAC;IAEpGtB,eAAe,CAAC;MACduC,eAAe,EAAE;QACfvB,KAAK,EAAET,KAAK,CAACwB,KAAK,EAAE,OAAO,CAAC;QAC5BH,QAAQ,EAAErB,KAAK,CAACwB,KAAK,EAAE,UAAU;MACnC,CAAC;MACDS,oBAAoB,EAAE;QACpBpB,MAAM,EAAEb,KAAK,CAACwB,KAAK,EAAE,QAAQ;MAC/B;IACF,CAAC,CAAC;IAEFrB,SAAS,CAAC,MAAA+B,YAAA,CAAAV,KAAA,CAAAW,GAAA;MAAA,SAEC,CACL,oBAAoB,EACpB;QACE,0BAA0B,EAAEX,KAAK,CAACb,IAAI;QACtC,0BAA0B,EAAEa,KAAK,CAACV;MACpC,CAAC,EACDgB,YAAY,CAACM,KAAK,EAClBL,YAAY,CAACK,KAAK,EAClBZ,KAAK,CAACa,KAAK,CACZ;MAAA,SACOb,KAAK,CAACc;IAAK,GACTT,KAAK,CAElB,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC"}

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

@@ -7,6 +7,7 @@ interface FilterPropsOptions<PropsOptions extends Readonly<ComponentPropsOptions
 
 declare const VExpansionPanels: {
     new (...args: any[]): vue.CreateComponentPublicInstance<{
+        flat: boolean;
         variant: "default" | "inset" | "accordion" | "popout";
         style: vue.StyleValue;
         disabled: boolean;
@@ -14,6 +15,7 @@ declare const VExpansionPanels: {
         readonly: boolean;
         static: boolean;
         tag: string;
+        tile: boolean;
     } & {
         max?: number | undefined;
         color?: string | undefined;
@@ -36,6 +38,7 @@ declare const VExpansionPanels: {
     }, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
         'update:modelValue': (val: unknown) => boolean;
     }, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
+        flat: boolean;
         variant: "default" | "inset" | "accordion" | "popout";
         style: vue.StyleValue;
         disabled: boolean;
@@ -43,6 +46,7 @@ declare const VExpansionPanels: {
         readonly: boolean;
         static: boolean;
         tag: string;
+        tile: boolean;
     } & {
         max?: number | undefined;
         color?: string | undefined;
@@ -63,6 +67,7 @@ declare const VExpansionPanels: {
     } & {
         "onUpdate:modelValue"?: ((val: unknown) => any) | undefined;
     }, {
+        flat: boolean;
         variant: "default" | "inset" | "accordion" | "popout";
         style: vue.StyleValue;
         disabled: boolean;
@@ -70,6 +75,7 @@ declare const VExpansionPanels: {
         readonly: boolean;
         static: boolean;
         tag: string;
+        tile: boolean;
         modelValue: any;
     }, true, {}, vue.SlotsType<Partial<{
         default: () => vue.VNode<vue.RendererNode, vue.RendererElement, {
@@ -83,6 +89,7 @@ declare const VExpansionPanels: {
         M: {};
         Defaults: {};
     }, {
+        flat: boolean;
         variant: "default" | "inset" | "accordion" | "popout";
         style: vue.StyleValue;
         disabled: boolean;
@@ -90,6 +97,7 @@ declare const VExpansionPanels: {
         readonly: boolean;
         static: boolean;
         tag: string;
+        tile: boolean;
     } & {
         max?: number | undefined;
         color?: string | undefined;
@@ -110,6 +118,7 @@ declare const VExpansionPanels: {
     } & {
         "onUpdate:modelValue"?: ((val: unknown) => any) | undefined;
     }, {}, {}, {}, {}, {
+        flat: boolean;
         variant: "default" | "inset" | "accordion" | "popout";
         style: vue.StyleValue;
         disabled: boolean;
@@ -117,12 +126,14 @@ declare const VExpansionPanels: {
         readonly: boolean;
         static: boolean;
         tag: string;
+        tile: boolean;
         modelValue: any;
     }>;
     __isFragment?: undefined;
     __isTeleport?: undefined;
     __isSuspense?: undefined;
 } & vue.ComponentOptionsBase<{
+    flat: boolean;
     variant: "default" | "inset" | "accordion" | "popout";
     style: vue.StyleValue;
     disabled: boolean;
@@ -130,6 +141,7 @@ declare const VExpansionPanels: {
     readonly: boolean;
     static: boolean;
     tag: string;
+    tile: boolean;
 } & {
     max?: number | undefined;
     color?: string | undefined;
@@ -152,6 +164,7 @@ declare const VExpansionPanels: {
 }, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
     'update:modelValue': (val: unknown) => boolean;
 }, string, {
+    flat: boolean;
     variant: "default" | "inset" | "accordion" | "popout";
     style: vue.StyleValue;
     disabled: boolean;
@@ -159,6 +172,7 @@ declare const VExpansionPanels: {
     readonly: boolean;
     static: boolean;
     tag: string;
+    tile: boolean;
     modelValue: any;
 }, {}, string, vue.SlotsType<Partial<{
     default: () => vue.VNode<vue.RendererNode, vue.RendererElement, {
@@ -185,7 +199,9 @@ declare const VExpansionPanels: {
         default: null;
     };
     color: StringConstructor;
+    flat: BooleanConstructor;
     static: BooleanConstructor;
+    tile: BooleanConstructor;
     variant: {
         type: PropType<"default" | "inset" | "accordion" | "popout">;
         default: string;
@@ -213,7 +229,9 @@ declare const VExpansionPanels: {
         default: null;
     };
     color: StringConstructor;
+    flat: BooleanConstructor;
     static: BooleanConstructor;
+    tile: BooleanConstructor;
     variant: {
         type: PropType<"default" | "inset" | "accordion" | "popout">;
         default: string;
@@ -234,6 +252,7 @@ declare const VExpansionPanel: {
         readonly: boolean;
         static: boolean;
         tag: string;
+        tile: boolean;
         ripple: boolean | {
             class: string;
         } | undefined;
@@ -280,6 +299,7 @@ declare const VExpansionPanel: {
         readonly: boolean;
         static: boolean;
         tag: string;
+        tile: boolean;
         ripple: boolean | {
             class: string;
         } | undefined;
@@ -323,6 +343,7 @@ declare const VExpansionPanel: {
         static: boolean;
         tag: string;
         rounded: string | number | boolean;
+        tile: boolean;
         ripple: boolean | {
             class: string;
         } | undefined;
@@ -353,6 +374,7 @@ declare const VExpansionPanel: {
         readonly: boolean;
         static: boolean;
         tag: string;
+        tile: boolean;
         ripple: boolean | {
             class: string;
         } | undefined;
@@ -396,6 +418,7 @@ declare const VExpansionPanel: {
         static: boolean;
         tag: string;
         rounded: string | number | boolean;
+        tile: boolean;
         ripple: boolean | {
             class: string;
         } | undefined;
@@ -413,6 +436,7 @@ declare const VExpansionPanel: {
     readonly: boolean;
     static: boolean;
     tag: string;
+    tile: boolean;
     ripple: boolean | {
         class: string;
     } | undefined;
@@ -460,6 +484,7 @@ declare const VExpansionPanel: {
     static: boolean;
     tag: string;
     rounded: string | number | boolean;
+    tile: boolean;
     ripple: boolean | {
         class: string;
     } | undefined;
@@ -508,6 +533,7 @@ declare const VExpansionPanel: {
         type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
         default: undefined;
     };
+    tile: BooleanConstructor;
     eager: BooleanConstructor;
     value: null;
     disabled: BooleanConstructor;
@@ -551,6 +577,7 @@ declare const VExpansionPanel: {
         type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
         default: undefined;
     };
+    tile: BooleanConstructor;
     eager: BooleanConstructor;
     value: null;
     disabled: BooleanConstructor;

package/lib/components/VField/VField.css

@@ -414,6 +414,15 @@ textarea.v-field__input::placeholder {
   flex-basis: calc(var(--v-input-control-height) / 2 + 2px);
 }
 
+.v-field--reverse.v-field--variant-outlined .v-field__outline__start {
+  border-start-start-radius: 0;
+  border-start-end-radius: inherit;
+  border-end-end-radius: inherit;
+  border-end-start-radius: 0;
+  border-inline-end-width: var(--v-field-border-width);
+  border-inline-start-width: 0;
+}
+
 .v-field--variant-outlined .v-field__outline__notch {
   flex: none;
   position: relative;
@@ -450,6 +459,14 @@ textarea.v-field__input::placeholder {
   border-end-end-radius: inherit;
   border-end-start-radius: 0;
 }
+.v-field--reverse.v-field--variant-outlined .v-field__outline__end {
+  border-start-start-radius: inherit;
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+  border-end-start-radius: inherit;
+  border-inline-end-width: 0;
+  border-inline-start-width: var(--v-field-border-width);
+}
 
 /* endregion */
 /* region LOADER */
@@ -530,7 +547,9 @@ textarea.v-field__input::placeholder {
 
 /* endregion */
 /* region MODIFIERS */
-.v-field--reverse .v-field__field, .v-field--reverse .v-field__input {
+.v-field--reverse .v-field__field,
+.v-field--reverse .v-field__input,
+.v-field--reverse .v-field__outline {
   flex-direction: row-reverse;
 }
 .v-field--reverse .v-field__input, .v-field--reverse input {

package/lib/components/VField/VField.sass

@@ -387,6 +387,14 @@
         #{selector.append('[class^="rounded-"]', &)},
         #{selector.append('[class*=" rounded-"]', &)}
           flex-basis: calc(var(--v-input-control-height) / 2 + 2px)
+      
+      @at-root #{selector.append('.v-field--reverse', &)}
+        border-start-start-radius: 0
+        border-start-end-radius: inherit
+        border-end-end-radius: inherit 
+        border-end-start-radius: 0
+        border-inline-end-width: var(--v-field-border-width)
+        border-inline-start-width: 0
 
     &__notch
       flex: none
@@ -421,6 +429,14 @@
       border-end-end-radius: inherit
       border-end-start-radius: 0
 
+      @at-root #{selector.append('.v-field--reverse', &)}
+        border-start-start-radius: inherit
+        border-start-end-radius: 0
+        border-end-end-radius: 0
+        border-end-start-radius: inherit 
+        border-inline-end-width: 0
+        border-inline-start-width: var(--v-field-border-width)
+
 /* endregion */
 /* region LOADER */
 .v-field__loader
@@ -493,7 +509,9 @@
 /* endregion */
 /* region MODIFIERS */
 .v-field--reverse
-  .v-field__field, .v-field__input
+  .v-field__field,
+  .v-field__input,
+  .v-field__outline
     flex-direction: row-reverse
 
   .v-field__input, input

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

@@ -68,6 +68,7 @@ declare const VField: {
         active: boolean;
         style: vue.StyleValue;
         disabled: boolean;
+        tile: boolean;
         clearIcon: IconValue;
         focused: boolean;
         clearable: boolean;
@@ -106,6 +107,7 @@ declare const VField: {
         active: boolean;
         style: vue.StyleValue;
         disabled: boolean;
+        tile: boolean;
         clearIcon: IconValue;
         focused: boolean;
         clearable: boolean;
@@ -140,6 +142,7 @@ declare const VField: {
         style: vue.StyleValue;
         disabled: boolean;
         rounded: string | number | boolean;
+        tile: boolean;
         clearIcon: IconValue;
         focused: boolean;
         centerAffix: boolean;
@@ -184,6 +187,7 @@ declare const VField: {
         active: boolean;
         style: vue.StyleValue;
         disabled: boolean;
+        tile: boolean;
         clearIcon: IconValue;
         focused: boolean;
         clearable: boolean;
@@ -220,6 +224,7 @@ declare const VField: {
         style: vue.StyleValue;
         disabled: boolean;
         rounded: string | number | boolean;
+        tile: boolean;
         clearIcon: IconValue;
         focused: boolean;
         centerAffix: boolean;
@@ -239,6 +244,7 @@ declare const VField: {
     active: boolean;
     style: vue.StyleValue;
     disabled: boolean;
+    tile: boolean;
     clearIcon: IconValue;
     focused: boolean;
     clearable: boolean;
@@ -278,6 +284,7 @@ declare const VField: {
     style: vue.StyleValue;
     disabled: boolean;
     rounded: string | number | boolean;
+    tile: boolean;
     clearIcon: IconValue;
     focused: boolean;
     centerAffix: boolean;
@@ -319,6 +326,7 @@ declare const VField: {
         type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
         default: undefined;
     };
+    tile: BooleanConstructor;
     loading: (StringConstructor | BooleanConstructor)[];
     class: PropType<any>;
     style: {
@@ -368,6 +376,7 @@ declare const VField: {
         type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
         default: undefined;
     };
+    tile: BooleanConstructor;
     loading: (StringConstructor | BooleanConstructor)[];
     class: PropType<any>;
     style: {

package/lib/components/VFileInput/VFileInput.mjs

@@ -103,7 +103,7 @@ export const VFileInput = genericComponent()({
       if (!isFocused.value) focus();
     }
     function onClickPrepend(e) {
-      onControlClick(e);
+      inputRef.value?.click();
     }
     function onControlMousedown(e) {
       emit('mousedown:control', e);