vuetify 3.6.0-alpha.2 → 3.6.0

package/lib/labs/VTimePicker/VTimePickerControls.sass

@@ -1,102 +1,102 @@
-@import './_variables.scss'
-@import '../VPicker/_variables.scss'
+@use '../../styles/tools'
+@use './variables' as *
 
-
-.v-time-picker-controls
-  display: flex
-  align-items: center
-  justify-content: center
-  font-size: .875rem
-  padding-top: 4px
-  padding-bottom: 4px
-  // padding-inline-start: 6px
-  // padding-inline-end: 12px
-  margin-bottom: 36px
-
-  &__text
-    padding-bottom: 12px
-
-  &__time
+@include tools.layer('components')
+  .v-time-picker-controls
     display: flex
-    white-space: nowrap
-    direction: ltr
+    align-items: center
     justify-content: center
-
-    &__btn.v-btn--density-default.v-btn
-      width: $time-picker-contols-btn-width
-      height: $time-picker-contols-btn-height
-      font-size: $time-picker-contols-btn-font
-
-      &__active
-        background: rgb(var(--v-theme-primary))
-      &.v-time-picker-controls__time--with-ampm__btn
-        width: $time-picker-contols-ampm-btn-width
-        height: $time-picker-contols-ampm-btn-height
-      &.v-time-picker-controls__time--with-seconds__btn
-        // overridden
-        width: $time-picker-contols-seconds-btn-width
+    font-size: .875rem
+    padding-top: 4px
+    padding-bottom: 4px
+    // padding-inline-start: 6px
+    // padding-inline-end: 12px
+    margin-bottom: 36px
+
+    &__text
+      padding-bottom: 12px
+
+    &__time
+      display: flex
+      white-space: nowrap
+      direction: ltr
+      justify-content: center
+
+      &__btn.v-btn--density-default.v-btn
+        width: $time-picker-contols-btn-width
+        height: $time-picker-contols-btn-height
+        font-size: $time-picker-contols-btn-font
+
+        &__active
+          background: rgb(var(--v-theme-primary))
+        &.v-time-picker-controls__time--with-ampm__btn
+          width: $time-picker-contols-ampm-btn-width
+          height: $time-picker-contols-ampm-btn-height
+        &.v-time-picker-controls__time--with-seconds__btn
+          // overridden
+          width: $time-picker-contols-seconds-btn-width
+          height: $time-picker-contols-seconds-btn-height
+          font-size: $time-picker-contols-seconds-btn-font
+      &__separator
+        font-size: $time-picker-contols-btn-font
+        height: $time-picker-contols-btn-height
+        width: $time-picker-contols-separator-width
+        text-align: center
+      &__separator.v-time-picker-controls--with-seconds__time__separator
         height: $time-picker-contols-seconds-btn-height
-        font-size: $time-picker-contols-seconds-btn-font
-    &__separator
-      font-size: $time-picker-contols-btn-font
-      height: $time-picker-contols-btn-height
-      width: $time-picker-contols-separator-width
-      text-align: center
-    &__separator.v-time-picker-controls--with-seconds__time__separator
-      height: $time-picker-contols-seconds-btn-height
-      font-size: $time-picker-contols-btn-font
-
-.v-time-picker-controls__ampm
-  margin-left: 12px
-  align-self: flex-end
-  display: flex
-  flex-direction: column
-  font-size: $time-picker-ampm-title-font-size
-  text-transform: uppercase
-
-  &--readonly
-    pointer-events: none
-
-  &--readonly
-    .v-picker__title__btn.v-picker__title__btn--active
-      opacity: $picker-inactive-btn-opacity
+        font-size: $time-picker-contols-btn-font
 
-  &__btn.v-btn.v-btn--density-default
+  .v-time-picker-controls__ampm
+    margin-left: 12px
+    align-self: flex-end
+    display: flex
+    flex-direction: column
     font-size: $time-picker-ampm-title-font-size
-    padding: 0 8px
-    min-width: 52px
-    height: $time-picker-contols-ampm-height
-    &.v-time-picker-controls__ampm__am
-      border-radius: $time-picker-contols-ampm-am-border-radius
-      border: 1px solid
-    &.v-time-picker-controls__ampm__pm
-      border-radius: $time-picker-contols-ampm-pm-border-radius
-      border: 1px solid
-      border-top: none
-    &__active
-      background: rgb(var(--v-theme-primary))
+    text-transform: uppercase
+
+    &--readonly
+      pointer-events: none
+
+    &--readonly
+      .v-picker__title__btn.v-picker__title__btn--active
+        opacity: $picker-inactive-btn-opacity
+
+    &__btn.v-btn.v-btn--density-default
+      font-size: $time-picker-ampm-title-font-size
+      padding: 0 8px
+      min-width: 52px
+      height: $time-picker-contols-ampm-height
+      &.v-time-picker-controls__ampm__am
+        border-radius: $time-picker-contols-ampm-am-border-radius
+        border: 1px solid
+      &.v-time-picker-controls__ampm__pm
+        border-radius: $time-picker-contols-ampm-pm-border-radius
+        border: 1px solid
+        border-top: none
+      &__active
+        background: rgb(var(--v-theme-primary))
 
-.v-picker__title--landscape
-  .v-time-picker-controls
-    flex-direction: column
-    justify-content: center
-    height: 100%
+  .v-picker__title--landscape
+    .v-time-picker-controls
+      flex-direction: column
+      justify-content: center
+      height: 100%
 
-  .v-time-picker-controls__time
-    text-align: right
+    .v-time-picker-controls__time
+      text-align: right
 
-    .v-picker__title__btn,
-    span
-      height: $time-picker-landscape-title-btn-height
-      font-size: $time-picker-landscape-title-btn-height
+      .v-picker__title__btn,
+      span
+        height: $time-picker-landscape-title-btn-height
+        font-size: $time-picker-landscape-title-btn-height
 
-  .v-time-picker-controls__ampm
-    margin: $time-picker-landscape-ampm-title-margin
-    align-self: initial
-    text-align: center
+    .v-time-picker-controls__ampm
+      margin: $time-picker-landscape-ampm-title-margin
+      align-self: initial
+      text-align: center
 
-.v-picker--time .v-picker__title--landscape
-  padding: 0
+  .v-picker--time .v-picker__title--landscape
+    padding: 0
 
-  .v-time-picker-controls__time
-    text-align: center
+    .v-time-picker-controls__time
+      text-align: center

package/lib/labs/VTimePicker/_variables.scss

@@ -1,4 +1,4 @@
-// @import '../../styles/styles.sass';
+@forward '../VPicker/variables';
 
 $time-picker-padding: 24px !default;
 $time-picker-contols-btn-font: 56px !default;

package/lib/labs/VTimePicker/index.d.mts

@@ -440,10 +440,10 @@ declare const VTimePickerClock: {
         step: number;
         scrollable: boolean;
         ampm: boolean;
-        displayedValue: null;
     } & {
         color?: string | undefined;
         modelValue?: number | undefined;
+        displayedValue?: any;
         allowedValues?: ((value: number) => boolean) | undefined;
     } & {
         $children?: vue.VNodeChild | {
@@ -471,10 +471,10 @@ declare const VTimePickerClock: {
         step: number;
         scrollable: boolean;
         ampm: boolean;
-        displayedValue: null;
     } & {
         color?: string | undefined;
         modelValue?: number | undefined;
+        displayedValue?: any;
         allowedValues?: ((value: number) => boolean) | undefined;
     } & {
         $children?: vue.VNodeChild | {
@@ -497,7 +497,6 @@ declare const VTimePickerClock: {
         step: number;
         scrollable: boolean;
         ampm: boolean;
-        displayedValue: null;
     }, true, {}, vue.SlotsType<Partial<{
         default: () => vue.VNode<vue.RendererNode, vue.RendererElement, {
             [key: string]: any;
@@ -520,10 +519,10 @@ declare const VTimePickerClock: {
         step: number;
         scrollable: boolean;
         ampm: boolean;
-        displayedValue: null;
     } & {
         color?: string | undefined;
         modelValue?: number | undefined;
+        displayedValue?: any;
         allowedValues?: ((value: number) => boolean) | undefined;
     } & {
         $children?: vue.VNodeChild | {
@@ -546,7 +545,6 @@ declare const VTimePickerClock: {
         step: number;
         scrollable: boolean;
         ampm: boolean;
-        displayedValue: null;
     }>;
     __isFragment?: undefined;
     __isTeleport?: undefined;
@@ -562,10 +560,10 @@ declare const VTimePickerClock: {
     step: number;
     scrollable: boolean;
     ampm: boolean;
-    displayedValue: null;
 } & {
     color?: string | undefined;
     modelValue?: number | undefined;
+    displayedValue?: any;
     allowedValues?: ((value: number) => boolean) | undefined;
 } & {
     $children?: vue.VNodeChild | {
@@ -591,7 +589,6 @@ declare const VTimePickerClock: {
     step: number;
     scrollable: boolean;
     ampm: boolean;
-    displayedValue: null;
 }, {}, string, vue.SlotsType<Partial<{
     default: () => vue.VNode<vue.RendererNode, vue.RendererElement, {
         [key: string]: any;
@@ -601,9 +598,7 @@ declare const VTimePickerClock: {
     ampm: BooleanConstructor;
     color: StringConstructor;
     disabled: BooleanConstructor;
-    displayedValue: {
-        default: null;
-    };
+    displayedValue: null;
     double: BooleanConstructor;
     format: {
         type: FunctionConstructor;
@@ -635,9 +630,7 @@ declare const VTimePickerClock: {
     ampm: BooleanConstructor;
     color: StringConstructor;
     disabled: BooleanConstructor;
-    displayedValue: {
-        default: null;
-    };
+    displayedValue: null;
     double: BooleanConstructor;
     format: {
         type: FunctionConstructor;

package/lib/labs/VTreeview/VTreeviewItem.sass

@@ -1,19 +1,21 @@
+@use '../../styles/tools'
 @use './variables' as *
 
-.v-treeview-item--filtered
-    display: none
+@include tools.layer('components')
+  .v-treeview-item--filtered
+      display: none
 
-.v-treeview
-  --indent-padding: 0px
+  .v-treeview
+    --indent-padding: 0px
 
-.v-treeview-group.v-list-group
-  --list-indent-size: #{$treeview-group-list-indent-size}
+  .v-treeview-group.v-list-group
+    --list-indent-size: #{$treeview-group-list-indent-size}
 
-  .v-list--slim &
-    --prepend-width: #{$treeview-group-list-prepend-width}
+    .v-list--slim &
+      --prepend-width: #{$treeview-group-list-prepend-width}
 
-  .v-list-group__items .v-list-item
-    padding-inline-start: calc(#{$treeview-item-padding-inline-start} + var(--indent-padding)) !important
+    .v-list-group__items .v-list-item
+      padding-inline-start: calc(#{$treeview-item-padding-inline-start} + var(--indent-padding)) !important
 
-  .v-list-group__items .v-list-item--prepend
-    // padding-inline-start: calc(#{$treeview-item-prepend-padding-inline-start} + var(--indent-padding)) !important
+    .v-list-group__items .v-list-item--prepend
+      // padding-inline-start: calc(#{$treeview-item-prepend-padding-inline-start} + var(--indent-padding)) !important

package/lib/labs/VTreeview/{variables.scss → _variables.scss}

@@ -1,6 +1,4 @@
 @use 'sass:map';
-@use '../../styles/settings';
-@use '../../styles/tools';
 
 $treeview-group-list-indent-size: 16px !default;
 $treeview-group-list-prepend-width: 16px !default;