@vuetify/nightly 3.9.2-master.2025-07-24 → 3.9.2-master.2025-07-26

package/lib/labs/VPie/VPieTooltip.d.ts

@@ -0,0 +1,279 @@
+import type { PropType } from 'vue';
+import type { PieItem, TextTemplate } from './types.js';
+export type VPieTooltipSlots = {
+    default: {
+        item: PieItem;
+    };
+    prepend: {
+        item: PieItem;
+    };
+};
+export declare const makeVPieTooltipProps: <Defaults extends {
+    offset?: unknown;
+    transition?: unknown;
+    modelValue?: unknown;
+    item?: unknown;
+    titleFormat?: unknown;
+    subtitleFormat?: unknown;
+} = {}>(defaults?: Defaults | undefined) => {
+    offset: unknown extends Defaults["offset"] ? {
+        type: PropType<string | number | number[] | undefined>;
+        default: NonNullable<string | number | number[] | undefined>;
+    } : Omit<{
+        type: PropType<string | number | number[] | undefined>;
+        default: NonNullable<string | number | number[] | undefined>;
+    }, "type" | "default"> & {
+        type: PropType<unknown extends Defaults["offset"] ? string | number | number[] | undefined : string | number | number[] | Defaults["offset"] | undefined>;
+        default: unknown extends Defaults["offset"] ? string | number | number[] | undefined : NonNullable<string | number | number[] | undefined> | Defaults["offset"];
+    };
+    transition: unknown extends Defaults["transition"] ? import("vue").Prop<string | boolean | (import("vue").TransitionProps & {
+        component?: import("vue").Component;
+    }) | null> : {
+        type: PropType<unknown extends Defaults["transition"] ? string | boolean | (import("vue").TransitionProps & {
+            component?: import("vue").Component;
+        }) | null : string | boolean | (import("vue").TransitionProps & {
+            component?: import("vue").Component;
+        }) | Defaults["transition"] | null>;
+        default: unknown extends Defaults["transition"] ? string | boolean | (import("vue").TransitionProps & {
+            component?: import("vue").Component;
+        }) | null : NonNullable<string | boolean | (import("vue").TransitionProps & {
+            component?: import("vue").Component;
+        }) | null> | Defaults["transition"];
+    };
+    modelValue: unknown extends Defaults["modelValue"] ? BooleanConstructor : {
+        type: PropType<unknown extends Defaults["modelValue"] ? boolean : boolean | Defaults["modelValue"]>;
+        default: unknown extends Defaults["modelValue"] ? boolean : boolean | Defaults["modelValue"];
+    };
+    item: unknown extends Defaults["item"] ? {
+        type: PropType<PieItem | null>;
+        default: null;
+    } : Omit<{
+        type: PropType<PieItem | null>;
+        default: null;
+    }, "type" | "default"> & {
+        type: PropType<unknown extends Defaults["item"] ? PieItem | null : PieItem | Defaults["item"] | null>;
+        default: unknown extends Defaults["item"] ? PieItem | null : PieItem | Defaults["item"];
+    };
+    titleFormat: unknown extends Defaults["titleFormat"] ? {
+        type: PropType<TextTemplate>;
+        default: string;
+    } : Omit<{
+        type: PropType<TextTemplate>;
+        default: string;
+    }, "type" | "default"> & {
+        type: PropType<unknown extends Defaults["titleFormat"] ? TextTemplate : TextTemplate | Defaults["titleFormat"]>;
+        default: unknown extends Defaults["titleFormat"] ? TextTemplate : Defaults["titleFormat"] | NonNullable<TextTemplate>;
+    };
+    subtitleFormat: unknown extends Defaults["subtitleFormat"] ? {
+        type: PropType<TextTemplate>;
+        default: string;
+    } : Omit<{
+        type: PropType<TextTemplate>;
+        default: string;
+    }, "type" | "default"> & {
+        type: PropType<unknown extends Defaults["subtitleFormat"] ? TextTemplate : TextTemplate | Defaults["subtitleFormat"]>;
+        default: unknown extends Defaults["subtitleFormat"] ? TextTemplate : NonNullable<TextTemplate> | Defaults["subtitleFormat"];
+    };
+};
+export declare const VPieTooltip: {
+    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
+        offset: string | number | number[] | undefined;
+        item: PieItem | null;
+        modelValue: boolean;
+        titleFormat: TextTemplate;
+        subtitleFormat: TextTemplate;
+    } & {
+        transition?: string | boolean | (import("vue").TransitionProps & {
+            component?: import("vue").Component;
+        }) | null | undefined;
+    } & {
+        $children?: import("vue").VNodeChild | {
+            $stable?: boolean;
+        } | ((arg: {
+            item: PieItem;
+        }) => import("vue").VNodeChild) | {
+            default?: ((arg: {
+                item: PieItem;
+            }) => import("vue").VNodeChild) | undefined;
+            prepend?: ((arg: {
+                item: PieItem;
+            }) => import("vue").VNodeChild) | undefined;
+        };
+        'v-slots'?: {
+            default?: false | ((arg: {
+                item: PieItem;
+            }) => import("vue").VNodeChild) | undefined;
+            prepend?: false | ((arg: {
+                item: PieItem;
+            }) => import("vue").VNodeChild) | undefined;
+        } | undefined;
+    } & {
+        "v-slot:default"?: false | ((arg: {
+            item: PieItem;
+        }) => import("vue").VNodeChild) | undefined;
+        "v-slot:prepend"?: false | ((arg: {
+            item: PieItem;
+        }) => import("vue").VNodeChild) | undefined;
+    }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, {
+        offset: string | number | number[] | undefined;
+        item: PieItem | null;
+        modelValue: boolean;
+        titleFormat: TextTemplate;
+        subtitleFormat: TextTemplate;
+    }, true, {}, import("vue").SlotsType<Partial<{
+        default: (arg: {
+            item: PieItem;
+        }) => import("vue").VNode[];
+        prepend: (arg: {
+            item: PieItem;
+        }) => import("vue").VNode[];
+    }>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, {
+        offset: string | number | number[] | undefined;
+        item: PieItem | null;
+        modelValue: boolean;
+        titleFormat: TextTemplate;
+        subtitleFormat: TextTemplate;
+    } & {
+        transition?: string | boolean | (import("vue").TransitionProps & {
+            component?: import("vue").Component;
+        }) | null | undefined;
+    } & {
+        $children?: import("vue").VNodeChild | {
+            $stable?: boolean;
+        } | ((arg: {
+            item: PieItem;
+        }) => import("vue").VNodeChild) | {
+            default?: ((arg: {
+                item: PieItem;
+            }) => import("vue").VNodeChild) | undefined;
+            prepend?: ((arg: {
+                item: PieItem;
+            }) => import("vue").VNodeChild) | undefined;
+        };
+        'v-slots'?: {
+            default?: false | ((arg: {
+                item: PieItem;
+            }) => import("vue").VNodeChild) | undefined;
+            prepend?: false | ((arg: {
+                item: PieItem;
+            }) => import("vue").VNodeChild) | undefined;
+        } | undefined;
+    } & {
+        "v-slot:default"?: false | ((arg: {
+            item: PieItem;
+        }) => import("vue").VNodeChild) | undefined;
+        "v-slot:prepend"?: false | ((arg: {
+            item: PieItem;
+        }) => import("vue").VNodeChild) | undefined;
+    }, () => JSX.Element, {}, {}, {}, {
+        offset: string | number | number[] | undefined;
+        item: PieItem | null;
+        modelValue: boolean;
+        titleFormat: TextTemplate;
+        subtitleFormat: TextTemplate;
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<{
+    offset: string | number | number[] | undefined;
+    item: PieItem | null;
+    modelValue: boolean;
+    titleFormat: TextTemplate;
+    subtitleFormat: TextTemplate;
+} & {
+    transition?: string | boolean | (import("vue").TransitionProps & {
+        component?: import("vue").Component;
+    }) | null | undefined;
+} & {
+    $children?: import("vue").VNodeChild | {
+        $stable?: boolean;
+    } | ((arg: {
+        item: PieItem;
+    }) => import("vue").VNodeChild) | {
+        default?: ((arg: {
+            item: PieItem;
+        }) => import("vue").VNodeChild) | undefined;
+        prepend?: ((arg: {
+            item: PieItem;
+        }) => import("vue").VNodeChild) | undefined;
+    };
+    'v-slots'?: {
+        default?: false | ((arg: {
+            item: PieItem;
+        }) => import("vue").VNodeChild) | undefined;
+        prepend?: false | ((arg: {
+            item: PieItem;
+        }) => import("vue").VNodeChild) | undefined;
+    } | undefined;
+} & {
+    "v-slot:default"?: false | ((arg: {
+        item: PieItem;
+    }) => import("vue").VNodeChild) | undefined;
+    "v-slot:prepend"?: false | ((arg: {
+        item: PieItem;
+    }) => import("vue").VNodeChild) | undefined;
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {
+    offset: string | number | number[] | undefined;
+    item: PieItem | null;
+    modelValue: boolean;
+    titleFormat: TextTemplate;
+    subtitleFormat: TextTemplate;
+}, {}, string, import("vue").SlotsType<Partial<{
+    default: (arg: {
+        item: PieItem;
+    }) => import("vue").VNode[];
+    prepend: (arg: {
+        item: PieItem;
+    }) => import("vue").VNode[];
+}>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("../../util/index.js").FilterPropsOptions<{
+    offset: {
+        type: PropType<string | number | number[] | undefined>;
+        default: NonNullable<string | number | number[] | undefined>;
+    };
+    transition: import("vue").Prop<null | string | boolean | (import("vue").TransitionProps & {
+        component?: import("vue").Component;
+    })>;
+    modelValue: BooleanConstructor;
+    item: {
+        type: PropType<PieItem | null>;
+        default: null;
+    };
+    titleFormat: {
+        type: PropType<TextTemplate>;
+        default: string;
+    };
+    subtitleFormat: {
+        type: PropType<TextTemplate>;
+        default: string;
+    };
+}, import("vue").ExtractPropTypes<{
+    offset: {
+        type: PropType<string | number | number[] | undefined>;
+        default: NonNullable<string | number | number[] | undefined>;
+    };
+    transition: import("vue").Prop<null | string | boolean | (import("vue").TransitionProps & {
+        component?: import("vue").Component;
+    })>;
+    modelValue: BooleanConstructor;
+    item: {
+        type: PropType<PieItem | null>;
+        default: null;
+    };
+    titleFormat: {
+        type: PropType<TextTemplate>;
+        default: string;
+    };
+    subtitleFormat: {
+        type: PropType<TextTemplate>;
+        default: string;
+    };
+}>>;
+export type VPieTooltip = InstanceType<typeof VPieTooltip>;

package/lib/labs/VPie/VPieTooltip.js

@@ -0,0 +1,84 @@
+import { createVNode as _createVNode } from "vue";
+// Components
+import { VListItem } from "../../components/VList/VListItem.js";
+import { makeVTooltipProps, VTooltip } from "../../components/VTooltip/VTooltip.js"; // Composables
+import { makeTransitionProps, MaybeTransition } from "../../composables/transition.js"; // Utilities
+import { onBeforeUnmount, onMounted, shallowRef, toRef } from 'vue';
+import { formatTextTemplate } from "./utils.js";
+import { genericComponent, getCurrentInstance, pick, propsFactory } from "../../util/index.js"; // Types
+export const makeVPieTooltipProps = propsFactory({
+  modelValue: Boolean,
+  item: {
+    type: Object,
+    default: null
+  },
+  titleFormat: {
+    type: [String, Function],
+    default: '[title]'
+  },
+  subtitleFormat: {
+    type: [String, Function],
+    default: '[value]'
+  },
+  ...makeTransitionProps(),
+  ...pick(makeVTooltipProps(), ['offset'])
+}, 'VPieTooltip');
+export const VPieTooltip = genericComponent()({
+  name: 'VPieTooltip',
+  props: makeVPieTooltipProps(),
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    const target = shallowRef([0, 0]);
+    const vm = getCurrentInstance('VPieTooltip');
+    let frame = -1;
+    function onMouseMove(_ref2) {
+      let {
+        clientX,
+        clientY
+      } = _ref2;
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(() => {
+        target.value = [clientX, clientY];
+      });
+    }
+    onMounted(() => {
+      vm.proxy.$el.parentNode.addEventListener('mousemove', onMouseMove);
+    });
+    onBeforeUnmount(() => {
+      vm.proxy.$el.parentNode.removeEventListener('mousemove', onMouseMove);
+    });
+    const tooltipTitleFormatFunction = toRef(() => segment => {
+      return typeof props.titleFormat === 'function' ? props.titleFormat(segment) : formatTextTemplate(props.titleFormat, segment);
+    });
+    const tooltipSubtitleFormatFunction = toRef(() => segment => {
+      return typeof props.subtitleFormat === 'function' ? props.subtitleFormat(segment) : formatTextTemplate(props.subtitleFormat, segment);
+    });
+    return () => _createVNode(VTooltip, {
+      "offset": props.offset,
+      "modelValue": props.modelValue,
+      "target": target.value,
+      "contentClass": "v-pie__tooltip-content"
+    }, {
+      default: () => [!!props.item && (slots.default?.({
+        item: props.item
+      }) ?? _createVNode(MaybeTransition, {
+        "transition": props.transition,
+        "mode": "out-in"
+      }, {
+        default: () => [_createVNode(VListItem, {
+          "key": props.item.key,
+          "density": "compact",
+          "title": tooltipTitleFormatFunction.value(props.item),
+          "subtitle": tooltipSubtitleFormatFunction.value(props.item)
+        }, {
+          prepend: slots.prepend ? () => slots.prepend({
+            item: props.item
+          }) : undefined
+        })]
+      }))]
+    });
+  }
+});
+//# sourceMappingURL=VPieTooltip.js.map

package/lib/labs/VPie/VPieTooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VPieTooltip.js","names":["VListItem","makeVTooltipProps","VTooltip","makeTransitionProps","MaybeTransition","onBeforeUnmount","onMounted","shallowRef","toRef","formatTextTemplate","genericComponent","getCurrentInstance","pick","propsFactory","makeVPieTooltipProps","modelValue","Boolean","item","type","Object","default","titleFormat","String","Function","subtitleFormat","VPieTooltip","name","props","setup","_ref","slots","target","vm","frame","onMouseMove","_ref2","clientX","clientY","cancelAnimationFrame","requestAnimationFrame","value","proxy","$el","parentNode","addEventListener","removeEventListener","tooltipTitleFormatFunction","segment","tooltipSubtitleFormatFunction","_createVNode","offset","transition","key","prepend","undefined"],"sources":["../../../src/labs/VPie/VPieTooltip.tsx"],"sourcesContent":["// Components\nimport { VListItem } from '@/components/VList/VListItem'\nimport { makeVTooltipProps, VTooltip } from '@/components/VTooltip/VTooltip'\n\n// Composables\nimport { makeTransitionProps, MaybeTransition } from '@/composables/transition'\n\n// Utilities\nimport { onBeforeUnmount, onMounted, shallowRef, toRef } from 'vue'\nimport { formatTextTemplate } from './utils'\nimport { genericComponent, getCurrentInstance, pick, propsFactory } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { PieItem, TextTemplate } from './types'\n\nexport type VPieTooltipSlots = {\n  default: { item: PieItem }\n  prepend: { item: PieItem }\n}\n\nexport const makeVPieTooltipProps = propsFactory({\n  modelValue: Boolean,\n  item: {\n    type: Object as PropType<PieItem | null>,\n    default: null,\n  },\n  titleFormat: {\n    type: [String, Function] as PropType<TextTemplate>,\n    default: '[title]',\n  },\n  subtitleFormat: {\n    type: [String, Function] as PropType<TextTemplate>,\n    default: '[value]',\n  },\n  ...makeTransitionProps(),\n  ...pick(makeVTooltipProps(), ['offset']),\n}, 'VPieTooltip')\n\nexport const VPieTooltip = genericComponent<VPieTooltipSlots>()({\n  name: 'VPieTooltip',\n\n  props: makeVPieTooltipProps(),\n\n  setup (props, { slots }) {\n    const target = shallowRef<[x: number, y: number]>([0, 0])\n    const vm = getCurrentInstance('VPieTooltip')\n\n    let frame = -1\n    function onMouseMove ({ clientX, clientY }: MouseEvent) {\n      cancelAnimationFrame(frame)\n      frame = requestAnimationFrame(() => {\n        target.value = [clientX, clientY]\n      })\n    }\n\n    onMounted(() => {\n      vm.proxy!.$el.parentNode.addEventListener('mousemove', onMouseMove)\n    })\n\n    onBeforeUnmount(() => {\n      vm.proxy!.$el.parentNode.removeEventListener('mousemove', onMouseMove)\n    })\n\n    const tooltipTitleFormatFunction = toRef(() => (segment: PieItem) => {\n      return typeof props.titleFormat === 'function'\n        ? props.titleFormat(segment)\n        : formatTextTemplate(props.titleFormat, segment)\n    })\n\n    const tooltipSubtitleFormatFunction = toRef(() => (segment: PieItem) => {\n      return typeof props.subtitleFormat === 'function'\n        ? props.subtitleFormat(segment)\n        : formatTextTemplate(props.subtitleFormat, segment)\n    })\n\n    return () => (\n      <VTooltip\n        offset={ props.offset }\n        modelValue={ props.modelValue }\n        target={ target.value }\n        contentClass=\"v-pie__tooltip-content\"\n      >\n        { !!props.item && (\n          slots.default?.({ item: props.item }) ?? (\n            <MaybeTransition transition={ props.transition } mode=\"out-in\">\n              <VListItem\n                key={ props.item.key }\n                density=\"compact\"\n                title={ tooltipTitleFormatFunction.value(props.item) }\n                subtitle={ tooltipSubtitleFormatFunction.value(props.item) }\n                v-slots={{\n                  prepend: slots.prepend\n                    ? () => slots.prepend!({ item: props.item! })\n                    : undefined,\n                }}\n              />\n            </MaybeTransition>\n          )\n        )}\n      </VTooltip>\n    )\n  },\n})\n\nexport type VPieTooltip = InstanceType<typeof VPieTooltip>\n"],"mappings":"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","ignoreList":[]}

package/lib/labs/VPie/_variables.scss

@@ -0,0 +1,11 @@
+@use '../../styles/settings';
+
+$pie-underlay-inset: -8px !default;
+$pie-title-padding-bottom: 12px !default;
+$pie-legend-padding-block: 12px !default;
+$pie-legend-chip-default-font-size: 0.8125rem !default;
+$pie-legend-chip-compact-font-size: 0.66rem !default;
+$pie-legend-chip-disabled-opacity: .4 !default;
+$pie-legend-avatar-border: thin solid rgba(var(--v-theme-on-surface), .2) !default;
+$pie-tooltip-min-width: 100px !default;
+$pie-tooltip-avatar-border: thin solid rgba(var(--v-theme-on-surface-variant), .2) !default;

package/lib/labs/VPie/index.d.ts

@@ -0,0 +1,3 @@
+export { VPie } from './VPie.js';
+export { VPieSegment } from './VPieSegment.js';
+export { VPieTooltip } from './VPieTooltip.js';

package/lib/labs/VPie/index.js

@@ -0,0 +1,4 @@
+export { VPie } from "./VPie.js";
+export { VPieSegment } from "./VPieSegment.js";
+export { VPieTooltip } from "./VPieTooltip.js";
+//# sourceMappingURL=index.js.map

package/lib/labs/VPie/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["VPie","VPieSegment","VPieTooltip"],"sources":["../../../src/labs/VPie/index.ts"],"sourcesContent":["export { VPie } from './VPie'\nexport { VPieSegment } from './VPieSegment'\nexport { VPieTooltip } from './VPieTooltip'\n"],"mappings":"SAASA,IAAI;AAAA,SACJC,WAAW;AAAA,SACXC,WAAW","ignoreList":[]}

package/lib/labs/VPie/types.d.ts

@@ -0,0 +1,16 @@
+export interface PieItem {
+    key: string | number | symbol;
+    color: string;
+    value: number;
+    title: string;
+    pattern?: string;
+    raw?: Record<string, any>;
+}
+export interface PieSegmentProps {
+    gap?: number | string;
+    hoverScale?: number | string;
+    innerCut?: number | string;
+    rounded?: number | string;
+    value: number;
+}
+export type TextTemplate = string | ((v: PieItem) => string);

package/lib/labs/VPie/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/lib/labs/VPie/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","names":[],"sources":["../../../src/labs/VPie/types.ts"],"sourcesContent":["export interface PieItem {\n  key: string | number | symbol\n  color: string\n  value: number\n  title: string\n  pattern?: string\n  raw?: Record<string, any>\n}\n\nexport interface PieSegmentProps {\n  gap?: number | string\n  hoverScale?: number | string\n  innerCut?: number | string\n  rounded?: number | string\n  value: number\n}\n\nexport type TextTemplate = string | ((v: PieItem) => string)\n"],"mappings":"","ignoreList":[]}

package/lib/labs/VPie/utils.d.ts

@@ -0,0 +1,23 @@
+import type { MaybeRefOrGetter, Ref } from 'vue';
+import type { PieItem, PieSegmentProps } from './types.js';
+export declare function formatTextTemplate(template: string, item?: PieItem): string | undefined;
+export declare function usePieArc(props: PieSegmentProps, isHovering: Ref<boolean>): {
+    hoverZoomRatio: Readonly<Ref<number, number>>;
+    normalizedValue: Readonly<Ref<number, number>>;
+    normalizedInnerCut: Readonly<Ref<number, number>>;
+    outerX: Readonly<Ref<number, number>>;
+    outerY: Readonly<Ref<number, number>>;
+    arcWidth: import("vue").ComputedRef<number>;
+};
+export declare function useOuterSlicePath({ angle, radius, size, width, rounded, }: {
+    angle: MaybeRefOrGetter<number>;
+    radius: MaybeRefOrGetter<number>;
+    size: MaybeRefOrGetter<number>;
+    width: MaybeRefOrGetter<number>;
+    rounded: MaybeRefOrGetter<number>;
+}): import("vue").ComputedRef<string>;
+export declare function useInnerSlicePath({ angle, radius, size, }: {
+    angle: MaybeRefOrGetter<number>;
+    radius: MaybeRefOrGetter<number>;
+    size: MaybeRefOrGetter<number>;
+}): import("vue").ComputedRef<string>;

package/lib/labs/VPie/utils.js

@@ -0,0 +1,49 @@
+// Utilities
+import { computed, toRef, toValue } from 'vue';
+import { clamp } from "../../util/index.js";
+import { roundedArc, simpleArc } from "../../util/svg-arc-corners.js"; // Types
+export function formatTextTemplate(template, item) {
+  return item ? template.replaceAll('[title]', item.title).replaceAll('[value]', String(item.value)) : undefined;
+}
+export function usePieArc(props, isHovering) {
+  const hoverZoomRatio = toRef(() => clamp(Number(props.hoverScale ?? 0), 0, 0.25));
+  const normalizedValue = toRef(() => clamp(props.value - 100 * Number(props.gap ?? 0) / 360, 0.01, 99.99));
+  const normalizedInnerCut = toRef(() => {
+    const min = Number(props.rounded ?? 0) > 0 ? 0.2 : 0;
+    return clamp(Number(props.innerCut ?? 0) / 100, min, 1);
+  });
+  const radians = computed(() => (360 * (-normalizedValue.value / 100) + 90) * (Math.PI / 180));
+  const arcWidth = computed(() => 50 * (1 - normalizedInnerCut.value) * (isHovering.value ? 1 : 1 - hoverZoomRatio.value));
+  const outerX = toRef(() => 50 + 50 * Math.cos(radians.value));
+  const outerY = toRef(() => 50 - 50 * Math.sin(radians.value));
+  return {
+    hoverZoomRatio,
+    normalizedValue,
+    normalizedInnerCut,
+    outerX,
+    outerY,
+    arcWidth
+  };
+}
+export function useOuterSlicePath(_ref) {
+  let {
+    angle,
+    radius,
+    size,
+    width,
+    rounded
+  } = _ref;
+  return computed(() => roundedArc([50, 50], toValue(radius), toValue(angle), toValue(angle) + 360 * toValue(size) / 100,
+  // angle end,
+  toValue(width), toValue(rounded)));
+}
+export function useInnerSlicePath(_ref2) {
+  let {
+    angle,
+    radius,
+    size
+  } = _ref2;
+  return computed(() => simpleArc([50, 50], toValue(radius), toValue(angle), toValue(angle) + 360 * toValue(size) / 100 // angle end,
+  ));
+}
+//# sourceMappingURL=utils.js.map

package/lib/labs/VPie/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","names":["computed","toRef","toValue","clamp","roundedArc","simpleArc","formatTextTemplate","template","item","replaceAll","title","String","value","undefined","usePieArc","props","isHovering","hoverZoomRatio","Number","hoverScale","normalizedValue","gap","normalizedInnerCut","min","rounded","innerCut","radians","Math","PI","arcWidth","outerX","cos","outerY","sin","useOuterSlicePath","_ref","angle","radius","size","width","useInnerSlicePath","_ref2"],"sources":["../../../src/labs/VPie/utils.ts"],"sourcesContent":["// Utilities\nimport { computed, toRef, toValue } from 'vue'\nimport { clamp } from '@/util'\nimport { roundedArc, simpleArc } from '@/util/svg-arc-corners'\n\n// Types\nimport type { MaybeRefOrGetter, Ref } from 'vue'\nimport type { PieItem, PieSegmentProps } from './types'\n\nexport function formatTextTemplate (template: string, item?: PieItem) {\n  return item\n    ? template\n      .replaceAll('[title]', item.title)\n      .replaceAll('[value]', String(item.value))\n    : undefined\n}\n\nexport function usePieArc (props: PieSegmentProps, isHovering: Ref<boolean>) {\n  const hoverZoomRatio = toRef(() => clamp(Number(props.hoverScale ?? 0), 0, 0.25))\n  const normalizedValue = toRef(() => clamp(props.value - 100 * Number(props.gap ?? 0) / 360, 0.01, 99.99))\n  const normalizedInnerCut = toRef(() => {\n    const min = Number(props.rounded ?? 0) > 0 ? 0.2 : 0\n    return clamp(Number(props.innerCut ?? 0) / 100, min, 1)\n  })\n\n  const radians = computed(() => (360 * (-normalizedValue.value / 100) + 90) * (Math.PI / 180))\n  const arcWidth = computed(() => 50 * (1 - normalizedInnerCut.value) * (isHovering.value ? 1 : (1 - hoverZoomRatio.value)))\n\n  const outerX = toRef(() => 50 + 50 * Math.cos(radians.value))\n  const outerY = toRef(() => 50 - 50 * Math.sin(radians.value))\n\n  return {\n    hoverZoomRatio,\n    normalizedValue,\n    normalizedInnerCut,\n    outerX,\n    outerY,\n    arcWidth,\n  }\n}\n\nexport function useOuterSlicePath ({\n  angle,\n  radius,\n  size,\n  width,\n  rounded,\n}: {\n  angle: MaybeRefOrGetter<number>\n  radius: MaybeRefOrGetter<number>\n  size: MaybeRefOrGetter<number>\n  width: MaybeRefOrGetter<number>\n  rounded: MaybeRefOrGetter<number>\n}) {\n  return computed(() =>\n    roundedArc(\n      [50, 50],\n      toValue(radius),\n      toValue(angle),\n      toValue(angle) + 360 * toValue(size) / 100, // angle end,\n      toValue(width),\n      toValue(rounded),\n    )\n  )\n}\n\nexport function useInnerSlicePath ({\n  angle,\n  radius,\n  size,\n}: {\n  angle: MaybeRefOrGetter<number>\n  radius: MaybeRefOrGetter<number>\n  size: MaybeRefOrGetter<number>\n}) {\n  return computed(() =>\n    simpleArc(\n      [50, 50],\n      toValue(radius),\n      toValue(angle),\n      toValue(angle) + 360 * toValue(size) / 100, // angle end,\n    )\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/lib/labs/VVideo/VVideo.css

@@ -136,6 +136,9 @@
   opacity: 0;
   transition-delay: 0.2s;
 }
+.v-video__track .v-slider-thumb__label {
+  color: rgb(var(--v-theme-on-surface-variant)) !important;
+}
 .v-video__time {
   font-size: 0.875rem;
   line-height: 1;

package/lib/labs/VVideo/VVideo.sass

@@ -124,6 +124,9 @@
           opacity: 0
           transition-delay: .2s
 
+      .v-slider-thumb__label
+        color: rgb(var(--v-theme-on-surface-variant)) !important
+
     &__time
       font-size: $video-time-font-size
       line-height: $video-time-line-height

package/lib/labs/VVideo/VVideoControls.js

@@ -1,4 +1,4 @@
-import { Fragment as _Fragment, resolveDirective as _resolveDirective, createVNode as _createVNode, withDirectives as _withDirectives, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, createTextVNode as _createTextVNode, mergeProps as _mergeProps, normalizeStyle as _normalizeStyle } from "vue";
+import { Fragment as _Fragment, createVNode as _createVNode, withDirectives as _withDirectives, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, createTextVNode as _createTextVNode, mergeProps as _mergeProps, normalizeStyle as _normalizeStyle } from "vue";
 /* eslint-disable complexity */
 // Components
 import { VVideoVolume } from "./VVideoVolume.js";
@@ -11,7 +11,8 @@ import { useBackgroundColor } from "../../composables/color.js";
 import { makeDensityProps, useDensity } from "../../composables/density.js";
 import { makeElevationProps, useElevation } from "../../composables/elevation.js";
 import { useProxiedModel } from "../../composables/proxiedModel.js";
-import { makeThemeProps, provideTheme } from "../../composables/theme.js"; // Utilities
+import { makeThemeProps, provideTheme } from "../../composables/theme.js"; // Directives
+import vTooltip from "../../directives/tooltip/index.js"; // Utilities
 import { computed, shallowRef } from 'vue';
 import { formatTime, genericComponent, propsFactory, useRender } from "../../util/index.js"; // Types
 const allowedVariants = ['hidden', 'default', 'tube', 'mini'];
@@ -49,6 +50,9 @@ export const makeVVideoControlsProps = propsFactory({
 }, 'VVideoControls');
 export const VVideoControls = genericComponent()({
   name: 'VVideoControls',
+  directives: {
+    vTooltip: vTooltip
+  },
   props: makeVVideoControlsProps(),
   emits: {
     'update:playing': val => true,
@@ -178,7 +182,7 @@ export const VVideoControls = genericComponent()({
           "size": playBtnSize,
           "aria-label": labels.value.playAction,
           "onClick": () => playing.value = !playing.value
-        }, null), [[_resolveDirective("tooltip"), labels.value.playAction, 'top']])]), slots.prepend && _createElementVNode("div", {
+        }, null), [[vTooltip, labels.value.playAction, 'top']])]), slots.prepend && _createElementVNode("div", {
           "class": _normalizeClass(pillClasses)
         }, [slots.prepend(slotProps)]), props.splitTime ? _createElementVNode("span", {
           "class": _normalizeClass([pillClasses, 'v-video__time'])
@@ -206,7 +210,7 @@ export const VVideoControls = genericComponent()({
           "size": playBtnSize,
           "aria-label": labels.value.playAction,
           "onClick": () => playing.value = !playing.value
-        }, null), [[_resolveDirective("tooltip"), labels.value.playAction, 'top']])])]), (!props.hideVolume || !props.hideFullscreen || slots.append) && _createElementVNode("div", {
+        }, null), [[vTooltip, labels.value.playAction, 'top']])])]), (!props.hideVolume || !props.hideFullscreen || slots.append) && _createElementVNode("div", {
           "class": _normalizeClass(pillClasses)
         }, [!props.hideVolume && _createVNode(VVideoVolume, _mergeProps({
           "key": "volume-control",
@@ -221,7 +225,7 @@ export const VVideoControls = genericComponent()({
           "icon": props.fullscreen ? '$fullscreenExit' : '$fullscreen',
           "aria-label": labels.value.fullscreenAction,
           "onClick": toggleFullscreen
-        }, null), [[_resolveDirective("tooltip"), labels.value.fullscreenAction, 'top']])]), props.variant === 'mini' && _createVNode(VSpacer, null, null)])]
+        }, null), [[vTooltip, labels.value.fullscreenAction, 'top']])]), props.variant === 'mini' && _createVNode(VSpacer, null, null)])]
       })]);
     });
     return {