vuetify 3.6.0-alpha.2 → 3.6.0

package/lib/labs/VSnackbarQueue/index.mjs

@@ -0,0 +1,2 @@
+export { VSnackbarQueue } from "./VSnackbarQueue.mjs";
+//# sourceMappingURL=index.mjs.map

package/lib/labs/VSnackbarQueue/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":["VSnackbarQueue"],"sources":["../../../src/labs/VSnackbarQueue/index.ts"],"sourcesContent":["export { VSnackbarQueue } from './VSnackbarQueue'\n"],"mappings":"SAASA,cAAc","ignoreList":[]}

package/lib/labs/VSpeedDial/VSpeedDial.mjs

@@ -6,6 +6,7 @@ import "./VSpeedDial.css";
 import { VDefaultsProvider } from "../../components/VDefaultsProvider/index.mjs";
 import { makeVMenuProps, VMenu } from "../../components/VMenu/VMenu.mjs"; // Composables
 import { makeComponentProps } from "../../composables/component.mjs";
+import { useProxiedModel } from "../../composables/proxiedModel.mjs";
 import { MaybeTransition } from "../../composables/transition.mjs"; // Utilities
 import { computed, ref } from 'vue';
 import { genericComponent, propsFactory, useRender } from "../../util/index.mjs"; // Types
@@ -23,10 +24,14 @@ export const makeVSpeedDialProps = propsFactory({
 export const VSpeedDial = genericComponent()({
   name: 'VSpeedDial',
   props: makeVSpeedDialProps(),
+  emits: {
+    'update:modelValue': value => true
+  },
   setup(props, _ref) {
     let {
       slots
     } = _ref;
+    const model = useProxiedModel(props, 'modelValue');
     const menuRef = ref();
     const location = computed(() => {
       const [y, x = 'center'] = props.location.split(' ');
@@ -38,6 +43,8 @@ export const VSpeedDial = genericComponent()({
     useRender(() => {
       const menuProps = VMenu.filterProps(props);
       return _createVNode(VMenu, _mergeProps(menuProps, {
+        "modelValue": model.value,
+        "onUpdate:modelValue": $event => model.value = $event,
         "class": props.class,
         "style": props.style,
         "contentClass": ['v-speed-dial__content', locationClasses.value],
@@ -56,8 +63,7 @@ export const VSpeedDial = genericComponent()({
           default: () => [_createVNode(MaybeTransition, {
             "appear": true,
             "group": true,
-            "transition": props.transition,
-            "mode": "out-in"
+            "transition": props.transition
           }, {
             default: () => [slots.default?.(slotProps)]
           })]

package/lib/labs/VSpeedDial/VSpeedDial.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VSpeedDial.mjs","names":["VDefaultsProvider","makeVMenuProps","VMenu","makeComponentProps","MaybeTransition","computed","ref","genericComponent","propsFactory","useRender","makeVSpeedDialProps","offset","minWidth","openDelay","closeDelay","location","transition","VSpeedDial","name","props","setup","_ref","slots","menuRef","y","x","split","locationClasses","value","replace","menuProps","filterProps","_createVNode","_mergeProps","class","style","default","slotProps","VBtn","size"],"sources":["../../../src/labs/VSpeedDial/VSpeedDial.tsx"],"sourcesContent":["// Styles\nimport './VSpeedDial.sass'\n\n// Components\nimport { VDefaultsProvider } from '@/components/VDefaultsProvider'\nimport { makeVMenuProps, VMenu } from '@/components/VMenu/VMenu'\n\n// Composables\nimport { makeComponentProps } from '@/composables/component'\nimport { MaybeTransition } from '@/composables/transition'\n\n// Utilities\nimport { computed, ref } from 'vue'\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { ComputedRef } from 'vue'\nimport type { OverlaySlots } from '@/components/VOverlay/VOverlay'\nimport type { Anchor } from '@/util'\n\nexport const makeVSpeedDialProps = propsFactory({\n  ...makeComponentProps(),\n  ...makeVMenuProps({\n    offset: 8,\n    minWidth: 0,\n    openDelay: 0,\n    closeDelay: 100,\n    location: 'top center' as const,\n    transition: 'scale-transition',\n  }),\n}, 'VSpeedDial')\n\nexport const VSpeedDial = genericComponent<OverlaySlots>()({\n  name: 'VSpeedDial',\n\n  props: makeVSpeedDialProps(),\n\n  setup (props, { slots }) {\n    const menuRef = ref<VMenu>()\n\n    const location = computed(() => {\n      const [y, x = 'center'] = props.location.split(' ')\n\n      return `${y} ${x}`\n    }) as ComputedRef<Anchor>\n\n    const locationClasses = computed(() => ({\n      [`v-speed-dial__content--${location.value.replace(' ', '-')}`]: true,\n    }))\n\n    useRender(() => {\n      const menuProps = VMenu.filterProps(props)\n\n      return (\n        <VMenu\n          { ...menuProps }\n          class={ props.class }\n          style={ props.style }\n          contentClass={[\n            'v-speed-dial__content',\n            locationClasses.value,\n          ]}\n          location={ location.value }\n          ref={ menuRef }\n          transition=\"fade-transition\"\n        >\n          {{\n            ...slots,\n            default: slotProps => (\n              <VDefaultsProvider\n                defaults={{\n                  VBtn: {\n                    size: 'small',\n                  },\n                }}\n              >\n                <MaybeTransition\n                  appear\n                  group\n                  transition={ props.transition }\n                  mode=\"out-in\"\n                >\n                  { slots.default?.(slotProps) }\n                </MaybeTransition>\n              </VDefaultsProvider>\n            ),\n          }}\n        </VMenu>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VSpeedDial = InstanceType<typeof VSpeedDial>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,iBAAiB;AAAA,SACjBC,cAAc,EAAEC,KAAK,4CAE9B;AAAA,SACSC,kBAAkB;AAAA,SAClBC,eAAe,4CAExB;AACA,SAASC,QAAQ,EAAEC,GAAG,QAAQ,KAAK;AAAA,SAC1BC,gBAAgB,EAAEC,YAAY,EAAEC,SAAS,gCAElD;AAKA,OAAO,MAAMC,mBAAmB,GAAGF,YAAY,CAAC;EAC9C,GAAGL,kBAAkB,CAAC,CAAC;EACvB,GAAGF,cAAc,CAAC;IAChBU,MAAM,EAAE,CAAC;IACTC,QAAQ,EAAE,CAAC;IACXC,SAAS,EAAE,CAAC;IACZC,UAAU,EAAE,GAAG;IACfC,QAAQ,EAAE,YAAqB;IAC/BC,UAAU,EAAE;EACd,CAAC;AACH,CAAC,EAAE,YAAY,CAAC;AAEhB,OAAO,MAAMC,UAAU,GAAGV,gBAAgB,CAAe,CAAC,CAAC;EACzDW,IAAI,EAAE,YAAY;EAElBC,KAAK,EAAET,mBAAmB,CAAC,CAAC;EAE5BU,KAAKA,CAAED,KAAK,EAAAE,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACrB,MAAME,OAAO,GAAGjB,GAAG,CAAQ,CAAC;IAE5B,MAAMS,QAAQ,GAAGV,QAAQ,CAAC,MAAM;MAC9B,MAAM,CAACmB,CAAC,EAAEC,CAAC,GAAG,QAAQ,CAAC,GAAGN,KAAK,CAACJ,QAAQ,CAACW,KAAK,CAAC,GAAG,CAAC;MAEnD,OAAQ,GAAEF,CAAE,IAAGC,CAAE,EAAC;IACpB,CAAC,CAAwB;IAEzB,MAAME,eAAe,GAAGtB,QAAQ,CAAC,OAAO;MACtC,CAAE,0BAAyBU,QAAQ,CAACa,KAAK,CAACC,OAAO,CAAC,GAAG,EAAE,GAAG,CAAE,EAAC,GAAG;IAClE,CAAC,CAAC,CAAC;IAEHpB,SAAS,CAAC,MAAM;MACd,MAAMqB,SAAS,GAAG5B,KAAK,CAAC6B,WAAW,CAACZ,KAAK,CAAC;MAE1C,OAAAa,YAAA,CAAA9B,KAAA,EAAA+B,WAAA,CAESH,SAAS;QAAA,SACNX,KAAK,CAACe,KAAK;QAAA,SACXf,KAAK,CAACgB,KAAK;QAAA,gBACL,CACZ,uBAAuB,EACvBR,eAAe,CAACC,KAAK,CACtB;QAAA,YACUb,QAAQ,CAACa,KAAK;QAAA,OACnBL,OAAO;QAAA;MAAA;QAIX,GAAGD,KAAK;QACRc,OAAO,EAAEC,SAAS,IAAAL,YAAA,CAAAhC,iBAAA;UAAA,YAEJ;YACRsC,IAAI,EAAE;cACJC,IAAI,EAAE;YACR;UACF;QAAC;UAAAH,OAAA,EAAAA,CAAA,MAAAJ,YAAA,CAAA5B,eAAA;YAAA;YAAA;YAAA,cAKce,KAAK,CAACH,UAAU;YAAA;UAAA;YAAAoB,OAAA,EAAAA,CAAA,MAG3Bd,KAAK,CAACc,OAAO,GAAGC,SAAS,CAAC;UAAA;QAAA;MAGjC;IAIT,CAAC,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"file":"VSpeedDial.mjs","names":["VDefaultsProvider","makeVMenuProps","VMenu","makeComponentProps","useProxiedModel","MaybeTransition","computed","ref","genericComponent","propsFactory","useRender","makeVSpeedDialProps","offset","minWidth","openDelay","closeDelay","location","transition","VSpeedDial","name","props","emits","value","setup","_ref","slots","model","menuRef","y","x","split","locationClasses","replace","menuProps","filterProps","_createVNode","_mergeProps","$event","class","style","default","slotProps","VBtn","size"],"sources":["../../../src/labs/VSpeedDial/VSpeedDial.tsx"],"sourcesContent":["// Styles\nimport './VSpeedDial.sass'\n\n// Components\nimport { VDefaultsProvider } from '@/components/VDefaultsProvider'\nimport { makeVMenuProps, VMenu } from '@/components/VMenu/VMenu'\n\n// Composables\nimport { makeComponentProps } from '@/composables/component'\nimport { useProxiedModel } from '@/composables/proxiedModel'\nimport { MaybeTransition } from '@/composables/transition'\n\n// Utilities\nimport { computed, ref } from 'vue'\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { ComputedRef } from 'vue'\nimport type { OverlaySlots } from '@/components/VOverlay/VOverlay'\nimport type { Anchor } from '@/util'\n\nexport const makeVSpeedDialProps = propsFactory({\n  ...makeComponentProps(),\n  ...makeVMenuProps({\n    offset: 8,\n    minWidth: 0,\n    openDelay: 0,\n    closeDelay: 100,\n    location: 'top center' as const,\n    transition: 'scale-transition',\n  }),\n}, 'VSpeedDial')\n\nexport const VSpeedDial = genericComponent<OverlaySlots>()({\n  name: 'VSpeedDial',\n\n  props: makeVSpeedDialProps(),\n\n  emits: {\n    'update:modelValue': (value: boolean) => true,\n  },\n\n  setup (props, { slots }) {\n    const model = useProxiedModel(props, 'modelValue')\n\n    const menuRef = ref<VMenu>()\n\n    const location = computed(() => {\n      const [y, x = 'center'] = props.location.split(' ')\n\n      return `${y} ${x}`\n    }) as ComputedRef<Anchor>\n\n    const locationClasses = computed(() => ({\n      [`v-speed-dial__content--${location.value.replace(' ', '-')}`]: true,\n    }))\n\n    useRender(() => {\n      const menuProps = VMenu.filterProps(props)\n\n      return (\n        <VMenu\n          { ...menuProps }\n          v-model={ model.value }\n          class={ props.class }\n          style={ props.style }\n          contentClass={[\n            'v-speed-dial__content',\n            locationClasses.value,\n          ]}\n          location={ location.value }\n          ref={ menuRef }\n          transition=\"fade-transition\"\n        >\n          {{\n            ...slots,\n            default: slotProps => (\n              <VDefaultsProvider\n                defaults={{\n                  VBtn: {\n                    size: 'small',\n                  },\n                }}\n              >\n                <MaybeTransition\n                  appear\n                  group\n                  transition={ props.transition }\n                >\n                  { slots.default?.(slotProps) }\n                </MaybeTransition>\n              </VDefaultsProvider>\n            ),\n          }}\n        </VMenu>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VSpeedDial = InstanceType<typeof VSpeedDial>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,iBAAiB;AAAA,SACjBC,cAAc,EAAEC,KAAK,4CAE9B;AAAA,SACSC,kBAAkB;AAAA,SAClBC,eAAe;AAAA,SACfC,eAAe,4CAExB;AACA,SAASC,QAAQ,EAAEC,GAAG,QAAQ,KAAK;AAAA,SAC1BC,gBAAgB,EAAEC,YAAY,EAAEC,SAAS,gCAElD;AAKA,OAAO,MAAMC,mBAAmB,GAAGF,YAAY,CAAC;EAC9C,GAAGN,kBAAkB,CAAC,CAAC;EACvB,GAAGF,cAAc,CAAC;IAChBW,MAAM,EAAE,CAAC;IACTC,QAAQ,EAAE,CAAC;IACXC,SAAS,EAAE,CAAC;IACZC,UAAU,EAAE,GAAG;IACfC,QAAQ,EAAE,YAAqB;IAC/BC,UAAU,EAAE;EACd,CAAC;AACH,CAAC,EAAE,YAAY,CAAC;AAEhB,OAAO,MAAMC,UAAU,GAAGV,gBAAgB,CAAe,CAAC,CAAC;EACzDW,IAAI,EAAE,YAAY;EAElBC,KAAK,EAAET,mBAAmB,CAAC,CAAC;EAE5BU,KAAK,EAAE;IACL,mBAAmB,EAAGC,KAAc,IAAK;EAC3C,CAAC;EAEDC,KAAKA,CAAEH,KAAK,EAAAI,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACrB,MAAME,KAAK,GAAGtB,eAAe,CAACgB,KAAK,EAAE,YAAY,CAAC;IAElD,MAAMO,OAAO,GAAGpB,GAAG,CAAQ,CAAC;IAE5B,MAAMS,QAAQ,GAAGV,QAAQ,CAAC,MAAM;MAC9B,MAAM,CAACsB,CAAC,EAAEC,CAAC,GAAG,QAAQ,CAAC,GAAGT,KAAK,CAACJ,QAAQ,CAACc,KAAK,CAAC,GAAG,CAAC;MAEnD,OAAQ,GAAEF,CAAE,IAAGC,CAAE,EAAC;IACpB,CAAC,CAAwB;IAEzB,MAAME,eAAe,GAAGzB,QAAQ,CAAC,OAAO;MACtC,CAAE,0BAAyBU,QAAQ,CAACM,KAAK,CAACU,OAAO,CAAC,GAAG,EAAE,GAAG,CAAE,EAAC,GAAG;IAClE,CAAC,CAAC,CAAC;IAEHtB,SAAS,CAAC,MAAM;MACd,MAAMuB,SAAS,GAAG/B,KAAK,CAACgC,WAAW,CAACd,KAAK,CAAC;MAE1C,OAAAe,YAAA,CAAAjC,KAAA,EAAAkC,WAAA,CAESH,SAAS;QAAA,cACJP,KAAK,CAACJ,KAAK;QAAA,uBAAAe,MAAA,IAAXX,KAAK,CAACJ,KAAK,GAAAe,MAAA;QAAA,SACbjB,KAAK,CAACkB,KAAK;QAAA,SACXlB,KAAK,CAACmB,KAAK;QAAA,gBACL,CACZ,uBAAuB,EACvBR,eAAe,CAACT,KAAK,CACtB;QAAA,YACUN,QAAQ,CAACM,KAAK;QAAA,OACnBK,OAAO;QAAA;MAAA;QAIX,GAAGF,KAAK;QACRe,OAAO,EAAEC,SAAS,IAAAN,YAAA,CAAAnC,iBAAA;UAAA,YAEJ;YACR0C,IAAI,EAAE;cACJC,IAAI,EAAE;YACR;UACF;QAAC;UAAAH,OAAA,EAAAA,CAAA,MAAAL,YAAA,CAAA9B,eAAA;YAAA;YAAA;YAAA,cAKce,KAAK,CAACH;UAAU;YAAAuB,OAAA,EAAAA,CAAA,MAE3Bf,KAAK,CAACe,OAAO,GAAGC,SAAS,CAAC;UAAA;QAAA;MAGjC;IAIT,CAAC,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/labs/VSpeedDial/VSpeedDial.sass

@@ -1,24 +1,27 @@
-.v-speed-dial__content
-  gap: 8px
+@use '../../styles/tools'
 
-  &.v-overlay__content
-    &.v-speed-dial__content--end,
-    &.v-speed-dial__content--end-center,
-    &.v-speed-dial__content--right,
-    &.v-speed-dial__content--right-center
-      flex-direction: row
+@include tools.layer('components')
+  .v-speed-dial__content
+    gap: 8px
 
-    &.v-speed-dial__content--left,
-    &.v-speed-dial__content--left-center,
-    &.v-speed-dial__content--start,
-    &.v-speed-dial__content--start-center
-      flex-direction: row-reverse
+    &.v-overlay__content
+      &.v-speed-dial__content--end,
+      &.v-speed-dial__content--end-center,
+      &.v-speed-dial__content--right,
+      &.v-speed-dial__content--right-center
+        flex-direction: row
 
-    &.v-speed-dial__content--top,
-    &.v-speed-dial__content--top-center
-      flex-direction: column-reverse
+      &.v-speed-dial__content--left,
+      &.v-speed-dial__content--left-center,
+      &.v-speed-dial__content--start,
+      &.v-speed-dial__content--start-center
+        flex-direction: row-reverse
 
-  > *
-    @for $i from 1 through 10
-      &:nth-child(#{$i})
-        transition-delay: 0.05s * ($i - 1)
+      &.v-speed-dial__content--top,
+      &.v-speed-dial__content--top-center
+        flex-direction: column-reverse
+
+    > *
+      @for $i from 1 through 10
+        &:nth-child(#{$i})
+          transition-delay: 0.05s * ($i - 1)

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

@@ -139,6 +139,7 @@ declare const VSpeedDial: {
             activator?: ((arg: {
                 isActive: boolean;
                 props: Record<string, any>;
+                targetRef: vue.Ref<any>;
             }) => vue.VNodeChild) | undefined;
         } | ((arg: {
             isActive: vue.Ref<boolean>;
@@ -150,6 +151,7 @@ declare const VSpeedDial: {
             activator?: false | ((arg: {
                 isActive: boolean;
                 props: Record<string, any>;
+                targetRef: vue.Ref<any>;
             }) => vue.VNodeChild) | undefined;
         } | undefined;
     } & {
@@ -159,8 +161,13 @@ declare const VSpeedDial: {
         "v-slot:activator"?: false | ((arg: {
             isActive: boolean;
             props: Record<string, any>;
+            targetRef: vue.Ref<any>;
         }) => vue.VNodeChild) | undefined;
-    }, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
+    } & {
+        "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+    }, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+        'update:modelValue': (value: boolean) => boolean;
+    }, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
         style: vue.StyleValue;
         disabled: boolean;
         offset: NonNullable<string | number | number[] | undefined>;
@@ -214,6 +221,7 @@ declare const VSpeedDial: {
             activator?: ((arg: {
                 isActive: boolean;
                 props: Record<string, any>;
+                targetRef: vue.Ref<any>;
             }) => vue.VNodeChild) | undefined;
         } | ((arg: {
             isActive: vue.Ref<boolean>;
@@ -225,6 +233,7 @@ declare const VSpeedDial: {
             activator?: false | ((arg: {
                 isActive: boolean;
                 props: Record<string, any>;
+                targetRef: vue.Ref<any>;
             }) => vue.VNodeChild) | undefined;
         } | undefined;
     } & {
@@ -234,7 +243,10 @@ declare const VSpeedDial: {
         "v-slot:activator"?: false | ((arg: {
             isActive: boolean;
             props: Record<string, any>;
+            targetRef: vue.Ref<any>;
         }) => vue.VNodeChild) | undefined;
+    } & {
+        "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
     }, {
         style: vue.StyleValue;
         disabled: boolean;
@@ -275,6 +287,7 @@ declare const VSpeedDial: {
         activator: (arg: {
             isActive: boolean;
             props: Record<string, any>;
+            targetRef: vue.Ref<any>;
         }) => vue.VNode<vue.RendererNode, vue.RendererElement, {
             [key: string]: any;
         }>[];
@@ -339,6 +352,7 @@ declare const VSpeedDial: {
             activator?: ((arg: {
                 isActive: boolean;
                 props: Record<string, any>;
+                targetRef: vue.Ref<any>;
             }) => vue.VNodeChild) | undefined;
         } | ((arg: {
             isActive: vue.Ref<boolean>;
@@ -350,6 +364,7 @@ declare const VSpeedDial: {
             activator?: false | ((arg: {
                 isActive: boolean;
                 props: Record<string, any>;
+                targetRef: vue.Ref<any>;
             }) => vue.VNodeChild) | undefined;
         } | undefined;
     } & {
@@ -359,7 +374,10 @@ declare const VSpeedDial: {
         "v-slot:activator"?: false | ((arg: {
             isActive: boolean;
             props: Record<string, any>;
+            targetRef: vue.Ref<any>;
         }) => vue.VNodeChild) | undefined;
+    } & {
+        "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
     }, {}, {}, {}, {}, {
         style: vue.StyleValue;
         disabled: boolean;
@@ -449,6 +467,7 @@ declare const VSpeedDial: {
         activator?: ((arg: {
             isActive: boolean;
             props: Record<string, any>;
+            targetRef: vue.Ref<any>;
         }) => vue.VNodeChild) | undefined;
     } | ((arg: {
         isActive: vue.Ref<boolean>;
@@ -460,6 +479,7 @@ declare const VSpeedDial: {
         activator?: false | ((arg: {
             isActive: boolean;
             props: Record<string, any>;
+            targetRef: vue.Ref<any>;
         }) => vue.VNodeChild) | undefined;
     } | undefined;
 } & {
@@ -469,8 +489,13 @@ declare const VSpeedDial: {
     "v-slot:activator"?: false | ((arg: {
         isActive: boolean;
         props: Record<string, any>;
+        targetRef: vue.Ref<any>;
     }) => vue.VNodeChild) | undefined;
-}, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, string, {
+} & {
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+    'update:modelValue': (value: boolean) => boolean;
+}, string, {
     style: vue.StyleValue;
     disabled: boolean;
     offset: NonNullable<string | number | number[] | undefined>;
@@ -510,6 +535,7 @@ declare const VSpeedDial: {
     activator: (arg: {
         isActive: boolean;
         props: Record<string, any>;
+        targetRef: vue.Ref<any>;
     }) => vue.VNode<vue.RendererNode, vue.RendererElement, {
         [key: string]: any;
     }>[];

package/lib/labs/VTimePicker/VTimePicker.sass

@@ -1,10 +1,11 @@
-@import './_variables.scss'
-@import '../VPicker/_variables.scss'
+@use '../../styles/tools'
+@use './variables' as *
 
-.v-time-picker.v-picker
-  padding: $time-picker-padding
-  width: $time-picker-width
+@include tools.layer('components')
+  .v-time-picker.v-picker
+    padding: $time-picker-padding
+    width: $time-picker-width
 
-  .v-picker-title
-    padding: 0
-    margin-bottom: 20px
+    .v-picker-title
+      padding: 0
+      margin-bottom: 20px

package/lib/labs/VTimePicker/VTimePickerClock.mjs

@@ -12,9 +12,7 @@ export const makeVTimePickerClockProps = propsFactory({
   ampm: Boolean,
   color: String,
   disabled: Boolean,
-  displayedValue: {
-    default: null
-  },
+  displayedValue: null,
   double: Boolean,
   format: {
     type: Function,

package/lib/labs/VTimePicker/VTimePickerClock.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VTimePickerClock.mjs","names":["useBackgroundColor","useTextColor","computed","ref","toRef","watch","genericComponent","propsFactory","useRender","makeVTimePickerClockProps","allowedValues","Function","ampm","Boolean","color","String","disabled","displayedValue","default","double","format","type","val","max","Number","required","min","scrollable","readonly","rotate","step","modelValue","VTimePickerClock","name","props","emits","change","input","setup","_ref","emit","clockRef","innerClockRef","inputValue","undefined","isDragging","valueOnMouseDown","valueOnMouseUp","textColorClasses","textColorStyles","backgroundColorClasses","backgroundColorStyles","count","roundCount","value","degreesPerUnit","degrees","Math","PI","innerRadiusScale","genChildren","children","push","update","isAllowed","wheel","e","preventDefault","delta","sign","deltaY","isInner","handScale","getPosition","rotateRadians","x","sin","y","cos","angleToValue","angle","insideClick","round","getTransform","i","left","top","euclidean","p0","p1","dx","dy","sqrt","center","atan2","abs","setMouseDownValue","onDragMove","width","getBoundingClientRect","innerWidth","clientX","clientY","touches","coords","handAngle","checksCount","ceil","onMouseDown","window","addEventListener","onMouseUp","stopPropagation","removeEventListener","_createVNode","transform","map","isActive"],"sources":["../../../src/labs/VTimePicker/VTimePickerClock.tsx"],"sourcesContent":["// StylesthisValue\n// Styles\nimport './VTimePickerClock.sass'\n\n// Composables\nimport { useBackgroundColor, useTextColor } from '@/composables/color'\n\n// Utilities\nimport { computed, ref, toRef, watch } from 'vue'\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\ninterface Point {\n  x: number\n  y: number\n}\n\nexport const makeVTimePickerClockProps = propsFactory({\n  allowedValues: Function as PropType<(value: number) => boolean>,\n  ampm: Boolean,\n  color: String,\n  disabled: Boolean,\n  displayedValue: {\n    default: null,\n  },\n  double: Boolean,\n  format: {\n    type: Function,\n    default: (val: string | number) => val,\n  },\n  max: {\n    type: Number,\n    required: true,\n  },\n  min: {\n    type: Number,\n    required: true,\n  },\n  scrollable: Boolean,\n  readonly: Boolean,\n  rotate: {\n    type: Number,\n    default: 0,\n  },\n  step: {\n    type: Number,\n    default: 1,\n  },\n  modelValue: {\n    type: Number,\n  },\n}, 'VTimePickerClock')\n\nexport const VTimePickerClock = genericComponent()({\n  name: 'VTimePickerClock',\n\n  props: makeVTimePickerClockProps(),\n\n  emits: {\n    change: (val: number) => val,\n    input: (val: number) => val,\n  },\n\n  setup (props, { emit }) {\n    const clockRef = ref<HTMLElement | null>(null)\n    const innerClockRef = ref<HTMLElement | null>(null)\n    const inputValue = ref<number | undefined>(undefined)\n    const isDragging = ref(false)\n    const valueOnMouseDown = ref(null as number | null)\n    const valueOnMouseUp = ref(null as number | null)\n\n    const { textColorClasses, textColorStyles } = useTextColor(toRef(props, 'color'))\n    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'color'))\n\n    const count = computed(() => props.max - props.min + 1)\n    const roundCount = computed(() => props.double ? (count.value / 2) : count.value)\n    const degreesPerUnit = computed(() => 360 / roundCount.value)\n    const degrees = computed(() => degreesPerUnit.value * Math.PI / 180)\n    const displayedValue = computed(() => props.modelValue == null ? props.min : props.modelValue)\n    const innerRadiusScale = computed(() => 0.62)\n\n    const genChildren = computed(() => {\n      const children = []\n      for (let value = props.min; value <= props.max; value = value + props.step) {\n        children.push(value)\n      }\n      return children\n    })\n\n    watch(() => props.modelValue, val => {\n      inputValue.value = val\n    })\n\n    function update (value: number) {\n      if (inputValue.value !== value) {\n        inputValue.value = value\n      }\n      emit('input', value)\n    }\n\n    function isAllowed (value: number) {\n      return !props.allowedValues || props.allowedValues(value)\n    }\n\n    function wheel (e: WheelEvent) {\n      e.preventDefault()\n\n      const delta = Math.sign(-e.deltaY || 1)\n      let value = displayedValue.value\n      do {\n        value = value + delta\n        value = (value - props.min + count.value) % count.value + props.min\n      } while (!isAllowed(value) && value !== displayedValue.value)\n\n      if (value !== props.displayedValue) {\n        update(value)\n      }\n    }\n\n    function isInner (value: number) {\n      return props.double && (value - props.min >= roundCount.value)\n    }\n\n    function handScale (value: number) {\n      return isInner(value) ? innerRadiusScale.value : 1\n    }\n\n    function getPosition (value: number) {\n      const rotateRadians = props.rotate * Math.PI / 180\n      return {\n        x: Math.sin((value - props.min) * degrees.value + rotateRadians) * handScale(value),\n        y: -Math.cos((value - props.min) * degrees.value + rotateRadians) * handScale(value),\n      }\n    }\n\n    function angleToValue (angle: number, insideClick: boolean): number {\n      const value = (\n        Math.round(angle / degreesPerUnit.value) +\n        (insideClick ? roundCount.value : 0)\n      ) % count.value + props.min\n\n      // Necessary to fix edge case when selecting left part of the value(s) at 12 o'clock\n      if (angle < (360 - degreesPerUnit.value / 2)) return value\n\n      return insideClick ? props.max - roundCount.value + 1 : props.min\n    }\n\n    function getTransform (i: number) {\n      const { x, y } = getPosition(i)\n      return {\n        left: `${50 + x * 50}%`,\n        top: `${50 + y * 50}%`,\n      }\n    }\n\n    function euclidean (p0: Point, p1: Point) {\n      const dx = p1.x - p0.x\n      const dy = p1.y - p0.y\n\n      return Math.sqrt(dx * dx + dy * dy)\n    }\n\n    function angle (center: Point, p1: Point) {\n      const value = 2 * Math.atan2(p1.y - center.y - euclidean(center, p1), p1.x - center.x)\n      return Math.abs(value * 180 / Math.PI)\n    }\n\n    function setMouseDownValue (value: number) {\n      if (valueOnMouseDown.value === null) {\n        valueOnMouseDown.value = value\n      }\n\n      valueOnMouseUp.value = value\n      update(value)\n    }\n\n    function onDragMove (e: MouseEvent | TouchEvent) {\n      e.preventDefault()\n      if ((!isDragging.value && e.type !== 'click') || !clockRef.value) return\n      const { width, top, left } = clockRef.value?.getBoundingClientRect()\n      const { width: innerWidth }: DOMRect = innerClockRef.value?.getBoundingClientRect() ?? { width: 0 } as DOMRect\n      const { clientX, clientY } = 'touches' in e ? e.touches[0] : e\n      const center = { x: width / 2, y: -width / 2 }\n      const coords = { x: clientX - left, y: top - clientY }\n      const handAngle = Math.round(angle(center, coords) - props.rotate + 360) % 360\n      const insideClick = props.double && euclidean(center, coords) < (innerWidth as number + innerWidth * innerRadiusScale.value) / 4\n      const checksCount = Math.ceil(15 / degreesPerUnit.value)\n      let value\n\n      for (let i = 0; i < checksCount; i++) {\n        value = angleToValue(handAngle + i * degreesPerUnit.value, insideClick)\n        if (isAllowed(value)) return setMouseDownValue(value)\n\n        value = angleToValue(handAngle - i * degreesPerUnit.value, insideClick)\n        if (isAllowed(value)) return setMouseDownValue(value)\n      }\n    }\n\n    function onMouseDown (e: MouseEvent | TouchEvent) {\n      e.preventDefault()\n\n      window.addEventListener('mousemove', onDragMove)\n      window.addEventListener('touchmove', onDragMove)\n      window.addEventListener('mouseup', onMouseUp)\n      window.addEventListener('touchend', onMouseUp)\n      valueOnMouseDown.value = null\n      valueOnMouseUp.value = null\n      isDragging.value = true\n      onDragMove(e)\n    }\n\n    function onMouseUp (e: MouseEvent | TouchEvent) {\n      e.stopPropagation()\n      window.removeEventListener('mousemove', onDragMove)\n      window.removeEventListener('touchmove', onDragMove)\n      window.removeEventListener('mouseup', onMouseUp)\n      window.removeEventListener('touchend', onMouseUp)\n\n      isDragging.value = false\n      if (valueOnMouseUp.value !== null && isAllowed(valueOnMouseUp.value)) {\n        emit('change', valueOnMouseUp.value)\n      }\n    }\n\n    useRender(() => {\n      return (\n        <div\n          class={[\n            {\n              'v-time-picker-clock': true,\n              'v-time-picker-clock--indeterminate': props.modelValue == null,\n              'v-time-picker-clock--readonly': props.readonly,\n            },\n          ]}\n          onMousedown={ onMouseDown }\n          onTouchstart={ onMouseDown }\n          onWheel={ (e: WheelEvent) => (props.scrollable && wheel(e)) }\n          ref={ clockRef }\n        >\n          <div class=\"v-time-picker-clock__inner\" ref={ innerClockRef }>\n            <div\n              class={[\n                {\n                  'v-time-picker-clock__hand': true,\n                  'v-time-picker-clock__hand--inner': isInner(props.modelValue as number),\n                },\n                textColorClasses.value,\n              ]}\n              style={[\n                {\n                  transform: `rotate(${props.rotate + degreesPerUnit.value * (displayedValue.value - props.min)}deg) scaleY(${handScale(displayedValue.value)})`,\n                },\n                textColorStyles.value,\n              ]}\n            />\n\n            {\n              genChildren.value.map(value => {\n                const isActive = value === displayedValue.value\n\n                return (\n                  <div\n                    class={[\n                      {\n                        'v-time-picker-clock__item': true,\n                        'v-time-picker-clock__item--active': isActive,\n                        'v-time-picker-clock__item--disabled': props.disabled || !isAllowed(value),\n                      },\n                      isActive && backgroundColorClasses.value,\n                    ]}\n                    style={[\n                      getTransform(value),\n                      isActive && backgroundColorStyles.value,\n                    ]}\n                  >\n                    <span>{ props.format(value) }</span>\n                  </div>\n                )\n              })\n            }\n          </div>\n        </div>\n      )\n    })\n  },\n})\n\nexport type VTimePickerClock = InstanceType<typeof VTimePickerClock>\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"VTimePickerClock.mjs","names":["useBackgroundColor","useTextColor","computed","ref","toRef","watch","genericComponent","propsFactory","useRender","makeVTimePickerClockProps","allowedValues","Function","ampm","Boolean","color","String","disabled","displayedValue","double","format","type","default","val","max","Number","required","min","scrollable","readonly","rotate","step","modelValue","VTimePickerClock","name","props","emits","change","input","setup","_ref","emit","clockRef","innerClockRef","inputValue","undefined","isDragging","valueOnMouseDown","valueOnMouseUp","textColorClasses","textColorStyles","backgroundColorClasses","backgroundColorStyles","count","roundCount","value","degreesPerUnit","degrees","Math","PI","innerRadiusScale","genChildren","children","push","update","isAllowed","wheel","e","preventDefault","delta","sign","deltaY","isInner","handScale","getPosition","rotateRadians","x","sin","y","cos","angleToValue","angle","insideClick","round","getTransform","i","left","top","euclidean","p0","p1","dx","dy","sqrt","center","atan2","abs","setMouseDownValue","onDragMove","width","getBoundingClientRect","innerWidth","clientX","clientY","touches","coords","handAngle","checksCount","ceil","onMouseDown","window","addEventListener","onMouseUp","stopPropagation","removeEventListener","_createVNode","transform","map","isActive"],"sources":["../../../src/labs/VTimePicker/VTimePickerClock.tsx"],"sourcesContent":["// StylesthisValue\n// Styles\nimport './VTimePickerClock.sass'\n\n// Composables\nimport { useBackgroundColor, useTextColor } from '@/composables/color'\n\n// Utilities\nimport { computed, ref, toRef, watch } from 'vue'\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\ninterface Point {\n  x: number\n  y: number\n}\n\nexport const makeVTimePickerClockProps = propsFactory({\n  allowedValues: Function as PropType<(value: number) => boolean>,\n  ampm: Boolean,\n  color: String,\n  disabled: Boolean,\n  displayedValue: null,\n  double: Boolean,\n  format: {\n    type: Function,\n    default: (val: string | number) => val,\n  },\n  max: {\n    type: Number,\n    required: true,\n  },\n  min: {\n    type: Number,\n    required: true,\n  },\n  scrollable: Boolean,\n  readonly: Boolean,\n  rotate: {\n    type: Number,\n    default: 0,\n  },\n  step: {\n    type: Number,\n    default: 1,\n  },\n  modelValue: {\n    type: Number,\n  },\n}, 'VTimePickerClock')\n\nexport const VTimePickerClock = genericComponent()({\n  name: 'VTimePickerClock',\n\n  props: makeVTimePickerClockProps(),\n\n  emits: {\n    change: (val: number) => val,\n    input: (val: number) => val,\n  },\n\n  setup (props, { emit }) {\n    const clockRef = ref<HTMLElement | null>(null)\n    const innerClockRef = ref<HTMLElement | null>(null)\n    const inputValue = ref<number | undefined>(undefined)\n    const isDragging = ref(false)\n    const valueOnMouseDown = ref(null as number | null)\n    const valueOnMouseUp = ref(null as number | null)\n\n    const { textColorClasses, textColorStyles } = useTextColor(toRef(props, 'color'))\n    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'color'))\n\n    const count = computed(() => props.max - props.min + 1)\n    const roundCount = computed(() => props.double ? (count.value / 2) : count.value)\n    const degreesPerUnit = computed(() => 360 / roundCount.value)\n    const degrees = computed(() => degreesPerUnit.value * Math.PI / 180)\n    const displayedValue = computed(() => props.modelValue == null ? props.min : props.modelValue)\n    const innerRadiusScale = computed(() => 0.62)\n\n    const genChildren = computed(() => {\n      const children = []\n      for (let value = props.min; value <= props.max; value = value + props.step) {\n        children.push(value)\n      }\n      return children\n    })\n\n    watch(() => props.modelValue, val => {\n      inputValue.value = val\n    })\n\n    function update (value: number) {\n      if (inputValue.value !== value) {\n        inputValue.value = value\n      }\n      emit('input', value)\n    }\n\n    function isAllowed (value: number) {\n      return !props.allowedValues || props.allowedValues(value)\n    }\n\n    function wheel (e: WheelEvent) {\n      e.preventDefault()\n\n      const delta = Math.sign(-e.deltaY || 1)\n      let value = displayedValue.value\n      do {\n        value = value + delta\n        value = (value - props.min + count.value) % count.value + props.min\n      } while (!isAllowed(value) && value !== displayedValue.value)\n\n      if (value !== props.displayedValue) {\n        update(value)\n      }\n    }\n\n    function isInner (value: number) {\n      return props.double && (value - props.min >= roundCount.value)\n    }\n\n    function handScale (value: number) {\n      return isInner(value) ? innerRadiusScale.value : 1\n    }\n\n    function getPosition (value: number) {\n      const rotateRadians = props.rotate * Math.PI / 180\n      return {\n        x: Math.sin((value - props.min) * degrees.value + rotateRadians) * handScale(value),\n        y: -Math.cos((value - props.min) * degrees.value + rotateRadians) * handScale(value),\n      }\n    }\n\n    function angleToValue (angle: number, insideClick: boolean): number {\n      const value = (\n        Math.round(angle / degreesPerUnit.value) +\n        (insideClick ? roundCount.value : 0)\n      ) % count.value + props.min\n\n      // Necessary to fix edge case when selecting left part of the value(s) at 12 o'clock\n      if (angle < (360 - degreesPerUnit.value / 2)) return value\n\n      return insideClick ? props.max - roundCount.value + 1 : props.min\n    }\n\n    function getTransform (i: number) {\n      const { x, y } = getPosition(i)\n      return {\n        left: `${50 + x * 50}%`,\n        top: `${50 + y * 50}%`,\n      }\n    }\n\n    function euclidean (p0: Point, p1: Point) {\n      const dx = p1.x - p0.x\n      const dy = p1.y - p0.y\n\n      return Math.sqrt(dx * dx + dy * dy)\n    }\n\n    function angle (center: Point, p1: Point) {\n      const value = 2 * Math.atan2(p1.y - center.y - euclidean(center, p1), p1.x - center.x)\n      return Math.abs(value * 180 / Math.PI)\n    }\n\n    function setMouseDownValue (value: number) {\n      if (valueOnMouseDown.value === null) {\n        valueOnMouseDown.value = value\n      }\n\n      valueOnMouseUp.value = value\n      update(value)\n    }\n\n    function onDragMove (e: MouseEvent | TouchEvent) {\n      e.preventDefault()\n      if ((!isDragging.value && e.type !== 'click') || !clockRef.value) return\n      const { width, top, left } = clockRef.value?.getBoundingClientRect()\n      const { width: innerWidth }: DOMRect = innerClockRef.value?.getBoundingClientRect() ?? { width: 0 } as DOMRect\n      const { clientX, clientY } = 'touches' in e ? e.touches[0] : e\n      const center = { x: width / 2, y: -width / 2 }\n      const coords = { x: clientX - left, y: top - clientY }\n      const handAngle = Math.round(angle(center, coords) - props.rotate + 360) % 360\n      const insideClick = props.double && euclidean(center, coords) < (innerWidth as number + innerWidth * innerRadiusScale.value) / 4\n      const checksCount = Math.ceil(15 / degreesPerUnit.value)\n      let value\n\n      for (let i = 0; i < checksCount; i++) {\n        value = angleToValue(handAngle + i * degreesPerUnit.value, insideClick)\n        if (isAllowed(value)) return setMouseDownValue(value)\n\n        value = angleToValue(handAngle - i * degreesPerUnit.value, insideClick)\n        if (isAllowed(value)) return setMouseDownValue(value)\n      }\n    }\n\n    function onMouseDown (e: MouseEvent | TouchEvent) {\n      e.preventDefault()\n\n      window.addEventListener('mousemove', onDragMove)\n      window.addEventListener('touchmove', onDragMove)\n      window.addEventListener('mouseup', onMouseUp)\n      window.addEventListener('touchend', onMouseUp)\n      valueOnMouseDown.value = null\n      valueOnMouseUp.value = null\n      isDragging.value = true\n      onDragMove(e)\n    }\n\n    function onMouseUp (e: MouseEvent | TouchEvent) {\n      e.stopPropagation()\n      window.removeEventListener('mousemove', onDragMove)\n      window.removeEventListener('touchmove', onDragMove)\n      window.removeEventListener('mouseup', onMouseUp)\n      window.removeEventListener('touchend', onMouseUp)\n\n      isDragging.value = false\n      if (valueOnMouseUp.value !== null && isAllowed(valueOnMouseUp.value)) {\n        emit('change', valueOnMouseUp.value)\n      }\n    }\n\n    useRender(() => {\n      return (\n        <div\n          class={[\n            {\n              'v-time-picker-clock': true,\n              'v-time-picker-clock--indeterminate': props.modelValue == null,\n              'v-time-picker-clock--readonly': props.readonly,\n            },\n          ]}\n          onMousedown={ onMouseDown }\n          onTouchstart={ onMouseDown }\n          onWheel={ (e: WheelEvent) => (props.scrollable && wheel(e)) }\n          ref={ clockRef }\n        >\n          <div class=\"v-time-picker-clock__inner\" ref={ innerClockRef }>\n            <div\n              class={[\n                {\n                  'v-time-picker-clock__hand': true,\n                  'v-time-picker-clock__hand--inner': isInner(props.modelValue as number),\n                },\n                textColorClasses.value,\n              ]}\n              style={[\n                {\n                  transform: `rotate(${props.rotate + degreesPerUnit.value * (displayedValue.value - props.min)}deg) scaleY(${handScale(displayedValue.value)})`,\n                },\n                textColorStyles.value,\n              ]}\n            />\n\n            {\n              genChildren.value.map(value => {\n                const isActive = value === displayedValue.value\n\n                return (\n                  <div\n                    class={[\n                      {\n                        'v-time-picker-clock__item': true,\n                        'v-time-picker-clock__item--active': isActive,\n                        'v-time-picker-clock__item--disabled': props.disabled || !isAllowed(value),\n                      },\n                      isActive && backgroundColorClasses.value,\n                    ]}\n                    style={[\n                      getTransform(value),\n                      isActive && backgroundColorStyles.value,\n                    ]}\n                  >\n                    <span>{ props.format(value) }</span>\n                  </div>\n                )\n              })\n            }\n          </div>\n        </div>\n      )\n    })\n  },\n})\n\nexport type VTimePickerClock = InstanceType<typeof VTimePickerClock>\n"],"mappings":"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","ignoreList":[]}

package/lib/labs/VTimePicker/VTimePickerClock.sass

@@ -1,131 +1,132 @@
-@import './_variables.scss'
+@use '../../styles/tools'
+@use './variables' as *
 
-// Theme
-.v-time-picker-clock
-  background: rgb(var(--v-theme-background))
-  color: rgb(var(--v-theme-on-background))
+@include tools.layer('components')
+  // Theme
+  .v-time-picker-clock
+    background: rgb(var(--v-theme-background))
+    color: rgb(var(--v-theme-on-background))
+
+    &:after
+      color: rgb(var(--v-theme-primary))
 
+    .v-time-picker-clock__item--active
+      background-color: rgb(var(--v-theme-surface-variant))
+      color: rgb(var(--v-theme-on-surface-variant))
 
-  &:after
-    color: rgb(var(--v-theme-primary))
+  .v-time-picker-clock
+    margin: 0 auto
+    background: rgb(var(--v-theme-surface-light))
+    border-radius: 50%
+    position: relative
+    transition: none
+    user-select: none
+    height: 256px
+    width: 256px
+    flex: 1 0 auto
 
-  .v-time-picker-clock__item--active
-    background-color: rgb(var(--v-theme-surface-variant))
-    color: rgb(var(--v-theme-on-surface-variant))
+    &__container
+      display: flex
+      flex-direction: column
+      flex-basis: 290px
+      justify-content: center
+      padding: $time-picker-clock-padding
 
-.v-time-picker-clock
-  margin: 0 auto
-  background: rgb(var(--v-theme-surface-light))
-  border-radius: 50%
-  position: relative
-  transition: none
-  user-select: none
-  height: 256px
-  width: 256px
-  flex: 1 0 auto
+    &__hand
+      background-color: currentColor
+      height: $time-picker-clock-hand-height
+      width: $time-picker-clock-hand-width
+      bottom: 50%
+      left: $time-picker-clock-hand-left
+      transform-origin: center bottom
+      position: absolute
+      will-change: transform
+      z-index: 1
+
+      &:before
+        background: transparent
+        border-width: $time-picker-clock-end-border-width
+        border-style: $time-picker-clock-end-border-style
+        border-color: $time-picker-clock-end-border-color
+        border-radius: 100%
+        width: $time-picker-clock-end-size
+        height: $time-picker-clock-end-size
+        content: ''
+        position: absolute
+        top: $time-picker-clock-end-top
+        left: 50%
+        transform: translate(-50%, -50%)
+
+      &:after
+        content: ''
+        position: absolute
+        height: $time-picker-clock-center-size
+        width: $time-picker-clock-center-size
+        top: 100%
+        left: 50%
+        border-radius: 100%
+        background-color: currentColor
+        transform: translate(-50%, -50%)
+
+      &--inner:after
+        height: $time-picker-clock-inner-hand-height
+
+    &--readonly
+      pointer-events: none
+
+    .v-time-picker-clock__item--disabled
+      opacity: var(--v-disabled-opacity)
+
+  .v-picker--full-width
+    .v-time-picker-clock__container
+      max-width: $time-picker-clock-max-width
+
+  .v-time-picker-clock__inner
+    position: absolute
+    bottom: $time-picker-clock-inner-offset
+    left: $time-picker-clock-inner-offset
+    right: $time-picker-clock-inner-offset
+    top: $time-picker-clock-inner-offset
 
-  &__container
+  .v-time-picker-clock__item
+    align-items: center
+    border-radius: 100%
+    cursor: default
     display: flex
-    flex-direction: column
-    flex-basis: 290px
+    font-size: $time-picker-number-font-size
     justify-content: center
-    padding: $time-picker-clock-padding
-
-  &__hand
-    background-color: currentColor
-    height: $time-picker-clock-hand-height
-    width: $time-picker-clock-hand-width
-    bottom: 50%
-    left: $time-picker-clock-hand-left
-    transform-origin: center bottom
+    height: $time-picker-indicator-size
     position: absolute
-    will-change: transform
-    z-index: 1
-
-    &:before
-      background: transparent
-      border-width: $time-picker-clock-end-border-width
-      border-style: $time-picker-clock-end-border-style
-      border-color: $time-picker-clock-end-border-color
-      border-radius: 100%
-      width: $time-picker-clock-end-size
-      height: $time-picker-clock-end-size
-      content: ''
-      position: absolute
-      top: $time-picker-clock-end-top
-      left: 50%
-      transform: translate(-50%, -50%)
+    text-align: center
+    width: $time-picker-indicator-size
+    user-select: none
+    transform: translate(-50%, -50%)
 
-    &:after
+    > span
+      z-index: 1
+
+    &:before, &:after
       content: ''
+      border-radius: 100%
       position: absolute
-      height: $time-picker-clock-center-size
-      width: $time-picker-clock-center-size
-      top: 100%
+      top: 50%
       left: 50%
-      border-radius: 100%
-      background-color: currentColor
+      height: 14px
+      width: 14px
       transform: translate(-50%, -50%)
 
-    &--inner:after
-      height: $time-picker-clock-inner-hand-height
-
-  &--readonly
-    pointer-events: none
-
-  .v-time-picker-clock__item--disabled
-    opacity: var(--v-disabled-opacity)
-
-.v-picker--full-width
-  .v-time-picker-clock__container
-    max-width: $time-picker-clock-max-width
-
-.v-time-picker-clock__inner
-  position: absolute
-  bottom: $time-picker-clock-inner-offset
-  left: $time-picker-clock-inner-offset
-  right: $time-picker-clock-inner-offset
-  top: $time-picker-clock-inner-offset
-
-.v-time-picker-clock__item
-  align-items: center
-  border-radius: 100%
-  cursor: default
-  display: flex
-  font-size: $time-picker-number-font-size
-  justify-content: center
-  height: $time-picker-indicator-size
-  position: absolute
-  text-align: center
-  width: $time-picker-indicator-size
-  user-select: none
-  transform: translate(-50%, -50%)
-
-  > span
-    z-index: 1
-
-  &:before, &:after
-    content: ''
-    border-radius: 100%
-    position: absolute
-    top: 50%
-    left: 50%
-    height: 14px
-    width: 14px
-    transform: translate(-50%, -50%)
-
-  &:after, &:before
-    height: $time-picker-indicator-size
-    width: $time-picker-indicator-size
+    &:after, &:before
+      height: $time-picker-indicator-size
+      width: $time-picker-indicator-size
 
-  &--active
-    cursor: default
-    z-index: 2
+    &--active
+      cursor: default
+      z-index: 2
 
-  &--disabled
-    pointer-events: none
+    &--disabled
+      pointer-events: none
 
-.v-picker--landscape
-  .v-time-picker-clock
-    &__container
-      flex-direction: row
+  .v-picker--landscape
+    .v-time-picker-clock
+      &__container
+        flex-direction: row