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

package/lib/labs/VPie/VPie.js

@@ -0,0 +1,291 @@
+import { createElementVNode as _createElementVNode, createVNode as _createVNode, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, mergeProps as _mergeProps } from "vue";
+// Styles
+import "./VPie.css";
+
+// Components
+import { makeVPieSegmentProps, VPieSegment } from "./VPieSegment.js";
+import { VPieTooltip } from "./VPieTooltip.js";
+import { VAvatar } from "../../components/VAvatar/index.js";
+import { VChip } from "../../components/VChip/index.js";
+import { VChipGroup } from "../../components/VChipGroup/index.js";
+import { VDefaultsProvider } from "../../components/VDefaultsProvider/index.js"; // Composables
+import { useColor } from "../../composables/color.js";
+import { makeDensityProps } from "../../composables/density.js"; // Utilities
+import { computed, shallowRef, toRef, watch } from 'vue';
+import { formatTextTemplate } from "./utils.js";
+import { convertToUnit, genericComponent, pick, propsFactory } from "../../util/index.js"; // Types
+export const makeVPieProps = propsFactory({
+  title: String,
+  bgColor: String,
+  items: {
+    type: Array,
+    default: () => []
+  },
+  palette: {
+    type: Array,
+    default: () => []
+  },
+  itemKey: {
+    type: String,
+    default: 'key'
+  },
+  itemValue: {
+    type: String,
+    default: 'value'
+  },
+  itemTitle: {
+    type: String,
+    default: 'title'
+  },
+  size: {
+    type: [Number, String],
+    default: 250
+  },
+  rotate: [Number, String],
+  gaugeCut: [Number, String],
+  legend: {
+    type: [Boolean, Object],
+    default: false
+  },
+  tooltip: {
+    type: [Boolean, Object],
+    default: false
+  },
+  ...makeDensityProps(),
+  ...pick(makeVPieSegmentProps(), ['animation', 'gap', 'rounded', 'innerCut', 'hoverScale', 'hideSlice', 'reveal'])
+}, 'VPie');
+export const VPie = genericComponent()({
+  name: 'VPie',
+  props: makeVPieProps(),
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    const legendConfig = computed(() => ({
+      visible: !!props.legend,
+      position: 'bottom',
+      textFormat: '[title]',
+      ...(typeof props.legend === 'object' ? props.legend : {})
+    }));
+    const {
+      colorClasses,
+      colorStyles
+    } = useColor(() => ({
+      background: props.bgColor
+    }));
+    const textColorStyles = toRef(() => pick(colorStyles.value, ['color', 'caretColor']));
+    const legendAvatarSize = toRef(() => ({
+      default: 20,
+      comfortable: 18,
+      compact: 16
+    })[props.density ?? 'default']);
+    const legendDirection = toRef(() => ['left', 'right'].includes(legendConfig.value.position) ? 'vertical' : 'horizontal');
+    const legendMode = toRef(() => !legendConfig.value.visible ? 'hidden' : legendConfig.value.position);
+    const legendTextFormatFunction = toRef(() => item => {
+      return typeof legendConfig.value.textFormat === 'function' ? legendConfig.value.textFormat(item) : formatTextTemplate(legendConfig.value.textFormat, item);
+    });
+    const arcs = computed(() => {
+      // hidden items get (value: 0) to trigger disappearing animation
+      return props.items.filter(Boolean).map((item, index) => {
+        return {
+          key: item[props.itemKey],
+          color: item.color ?? colorFromPalette(index),
+          value: item[props.itemValue],
+          title: String(item[props.itemTitle]),
+          pattern: item.pattern ?? patternFromPalette(index),
+          raw: item
+        };
+      });
+    });
+    const visibleItemsKeys = shallowRef([]);
+    watch(() => arcs.value.length, () => {
+      // reset when number of items changes
+      visibleItemsKeys.value = arcs.value.map(a => a.key);
+    }, {
+      immediate: true
+    });
+    const visibleItems = computed(() => {
+      // hidden items get (value: 0) to trigger disappearing animation
+      return arcs.value.map(item => {
+        return isActive(item) ? item : {
+          ...item,
+          value: 0
+        };
+      });
+    });
+    const total = computed(() => visibleItems.value.reduce((sum, item) => sum + item.value, 0));
+    const gaugeCut = toRef(() => Number(props.gaugeCut ?? 0));
+    const gaugeOffset = computed(() => (1 - Math.cos(Math.PI * Math.min(90, gaugeCut.value / 2) / 180)) / 2);
+    const rotateDeg = computed(() => `${gaugeCut.value ? 180 + gaugeCut.value / 2 : props.rotate ?? 0}deg`);
+    function arcOffset(index) {
+      return visibleItems.value.slice(0, index).reduce((acc, s) => acc + (total.value > 0 ? s.value / total.value : 0) * (360 - gaugeCut.value), 0);
+    }
+    function arcSize(v) {
+      return v / total.value * (100 - gaugeCut.value / 3.6);
+    }
+    function colorFromPalette(index) {
+      if (props.palette.length === 0) return undefined;
+      const paletteItem = props.palette[index % props.palette.length];
+      return typeof paletteItem === 'object' ? paletteItem.color : paletteItem;
+    }
+    function patternFromPalette(index) {
+      if (props.palette.length === 0) return undefined;
+      const paletteItem = props.palette[index % props.palette.length];
+      return typeof paletteItem === 'object' ? paletteItem.pattern : undefined;
+    }
+    function isActive(item) {
+      return visibleItemsKeys.value.includes(item.key);
+    }
+    function toggle(item) {
+      if (isActive(item)) {
+        visibleItemsKeys.value = visibleItemsKeys.value.filter(x => x !== item.key);
+      } else {
+        visibleItemsKeys.value = [...visibleItemsKeys.value, item.key];
+      }
+    }
+    const tooltipItem = shallowRef(null);
+    const tooltipVisible = shallowRef(false);
+    let mouseLeaveTimeout = null;
+    function onMouseenter(item) {
+      if (!props.tooltip) return;
+      clearTimeout(mouseLeaveTimeout);
+      tooltipVisible.value = true;
+      tooltipItem.value = item;
+    }
+    function onMouseleave() {
+      if (!props.tooltip) return;
+      clearTimeout(mouseLeaveTimeout);
+      mouseLeaveTimeout = setTimeout(() => {
+        tooltipVisible.value = false;
+
+        // intentionally reusing timeout here
+        mouseLeaveTimeout = setTimeout(() => {
+          tooltipItem.value = null;
+        }, 500);
+      }, 100);
+    }
+    return () => {
+      const segmentProps = pick(props, ['animation', 'gap', 'rounded', 'hideSlice', 'reveal', 'innerCut', 'hoverScale']);
+      const defaultTooltipTransition = {
+        name: 'fade-transition',
+        duration: 150
+      };
+      const tooltipProps = {
+        item: tooltipItem.value,
+        modelValue: tooltipVisible.value,
+        titleFormat: typeof props.tooltip === 'object' ? props.tooltip.titleFormat : '[title]',
+        subtitleFormat: typeof props.tooltip === 'object' ? props.tooltip.subtitleFormat : '[value]',
+        transition: typeof props.tooltip === 'object' ? props.tooltip.transition : defaultTooltipTransition,
+        offset: typeof props.tooltip === 'object' ? props.tooltip.offset : 16
+      };
+      const legendDefaults = {
+        VChipGroup: {
+          direction: legendDirection.value
+        },
+        VChip: {
+          density: props.density
+        },
+        VAvatar: {
+          size: legendAvatarSize.value
+        }
+      };
+      const tooltipDefaults = {
+        VAvatar: {
+          size: 28
+        }
+      };
+      const avatarSlot = _ref2 => {
+        let {
+          item
+        } = _ref2;
+        return _createVNode(VAvatar, {
+          "color": item.color,
+          "start": true
+        }, {
+          default: () => [item.pattern && _createElementVNode("svg", {
+            "height": "40",
+            "width": "40"
+          }, [_createElementVNode("rect", {
+            "width": "40",
+            "height": "40",
+            "fill": item.pattern
+          }, null)])]
+        });
+      };
+      return _createElementVNode("div", {
+        "class": _normalizeClass(['v-pie', `v-pie--legend-${legendMode.value}`]),
+        "style": {
+          '--v-pie-size': convertToUnit(props.size)
+        }
+      }, [slots.title?.() ?? (props.title && _createElementVNode("div", {
+        "class": "v-pie__title"
+      }, [props.title])), _createElementVNode("div", {
+        "class": _normalizeClass(['v-pie__content', colorClasses.value]),
+        "style": _normalizeStyle([{
+          transform: `rotate(${rotateDeg.value})`,
+          marginBottom: `calc(-1 * ${convertToUnit(props.size)} * ${gaugeOffset.value})`
+        }, textColorStyles.value])
+      }, [_createElementVNode("div", {
+        "class": _normalizeClass(['v-pie__content-underlay', colorClasses.value]),
+        "style": _normalizeStyle(colorStyles.value)
+      }, null), _createElementVNode("svg", {
+        "xmlns": "http://www.w3.org/2000/svg",
+        "viewBox": "0 0 100 100"
+      }, [arcs.value.map((item, index) => _createVNode(VPieSegment, _mergeProps(segmentProps, {
+        "key": item.key,
+        "color": item.color,
+        "value": isActive(item) ? arcSize(item.value) : 0,
+        "rotate": arcOffset(index),
+        "pattern": item.pattern,
+        "onMouseenter": () => onMouseenter(item),
+        "onMouseleave": () => onMouseleave()
+      }), null))]), _createElementVNode("div", {
+        "class": "v-pie__center-content",
+        "style": {
+          transform: `translate(-50%, -50%)
+                  rotate(-${rotateDeg.value})
+                  translateY(calc(-100% * ${gaugeOffset.value}))`
+        }
+      }, [_createElementVNode("div", null, [slots.center?.({
+        total: total.value
+      })])])]), legendConfig.value.visible && _createVNode(VDefaultsProvider, {
+        "key": "legend",
+        "defaults": legendDefaults
+      }, {
+        default: () => [_createElementVNode("div", {
+          "class": "v-pie__legend"
+        }, [slots.legend?.({
+          isActive,
+          toggle,
+          items: arcs.value
+        }) ?? _createVNode(VChipGroup, {
+          "column": true,
+          "multiple": true,
+          "modelValue": visibleItemsKeys.value,
+          "onUpdate:modelValue": $event => visibleItemsKeys.value = $event
+        }, {
+          default: () => [arcs.value.map(item => _createVNode(VChip, {
+            "value": item.key
+          }, {
+            prepend: () => avatarSlot({
+              item
+            }),
+            default: () => _createElementVNode("div", {
+              "class": "v-pie__legend__text"
+            }, [slots['legend-text']?.({
+              item
+            }) ?? legendTextFormatFunction.value(item)])
+          }))]
+        })])]
+      }), !!props.tooltip && _createVNode(VDefaultsProvider, {
+        "defaults": tooltipDefaults
+      }, {
+        default: () => [_createVNode(VPieTooltip, tooltipProps, {
+          default: slots.tooltip,
+          prepend: avatarSlot
+        })]
+      })]);
+    };
+  }
+});
+//# sourceMappingURL=VPie.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VPie.js","names":["makeVPieSegmentProps","VPieSegment","VPieTooltip","VAvatar","VChip","VChipGroup","VDefaultsProvider","useColor","makeDensityProps","computed","shallowRef","toRef","watch","formatTextTemplate","convertToUnit","genericComponent","pick","propsFactory","makeVPieProps","title","String","bgColor","items","type","Array","default","palette","itemKey","itemValue","itemTitle","size","Number","rotate","gaugeCut","legend","Boolean","Object","tooltip","VPie","name","props","setup","_ref","slots","legendConfig","visible","position","textFormat","colorClasses","colorStyles","background","textColorStyles","value","legendAvatarSize","comfortable","compact","density","legendDirection","includes","legendMode","legendTextFormatFunction","item","arcs","filter","map","index","key","color","colorFromPalette","pattern","patternFromPalette","raw","visibleItemsKeys","length","a","immediate","visibleItems","isActive","total","reduce","sum","gaugeOffset","Math","cos","PI","min","rotateDeg","arcOffset","slice","acc","s","arcSize","v","undefined","paletteItem","toggle","x","tooltipItem","tooltipVisible","mouseLeaveTimeout","onMouseenter","clearTimeout","onMouseleave","setTimeout","segmentProps","defaultTooltipTransition","duration","tooltipProps","modelValue","titleFormat","subtitleFormat","transition","offset","legendDefaults","direction","tooltipDefaults","avatarSlot","_ref2","_createVNode","_createElementVNode","_normalizeClass","_normalizeStyle","transform","marginBottom","_mergeProps","center","$event","prepend"],"sources":["../../../src/labs/VPie/VPie.tsx"],"sourcesContent":["// Styles\nimport './VPie.sass'\n\n// Components\nimport { makeVPieSegmentProps, VPieSegment } from './VPieSegment'\nimport { VPieTooltip } from './VPieTooltip'\nimport { VAvatar } from '@/components/VAvatar'\nimport { VChip } from '@/components/VChip'\nimport { VChipGroup } from '@/components/VChipGroup'\nimport { VDefaultsProvider } from '@/components/VDefaultsProvider'\n\n// Composables\nimport { useColor } from '@/composables/color'\nimport { makeDensityProps } from '@/composables/density'\n\n// Utilities\nimport { computed, shallowRef, toRef, watch } from 'vue'\nimport { formatTextTemplate } from './utils'\nimport { convertToUnit, genericComponent, pick, propsFactory } from '@/util'\n\n// Types\nimport type { PropType, TransitionProps } from 'vue'\nimport type { PieItem, TextTemplate } from './types'\n\nexport type VPieSlots = {\n  center: { total: number }\n  legend: {\n    isActive: (item: PieItem) => boolean\n    toggle: (item: PieItem) => void\n    items: PieItem[]\n  }\n  'legend-text': { item: PieItem }\n  title: never\n  tooltip: { item: PieItem }\n}\n\nexport const makeVPieProps = propsFactory({\n  title: String,\n  bgColor: String,\n  items: {\n    type: Array as PropType<Record<string, any> | { color?: string, pattern?: string }[]>,\n    default: () => [],\n  },\n  palette: {\n    type: Array as PropType<({ color?: string, pattern?: string } | string)[]>,\n    default: () => [],\n  },\n  itemKey: {\n    type: String,\n    default: 'key',\n  },\n  itemValue: {\n    type: String,\n    default: 'value',\n  },\n  itemTitle: {\n    type: String,\n    default: 'title',\n  },\n  size: {\n    type: [Number, String],\n    default: 250,\n  },\n  rotate: [Number, String],\n  gaugeCut: [Number, String],\n  legend: {\n    type: [Boolean, Object] as PropType<boolean | {\n      position?: 'left' | 'top' | 'right' | 'bottom'\n      textFormat?: TextTemplate\n    }>,\n    default: false,\n  },\n  tooltip: {\n    type: [Boolean, Object] as PropType<boolean | {\n      titleFormat?: TextTemplate\n      subtitleFormat?: TextTemplate\n      transition?: string | boolean | TransitionProps\n      offset?: number\n    }>,\n    default: false,\n  },\n\n  ...makeDensityProps(),\n  ...pick(makeVPieSegmentProps(), [\n    'animation',\n    'gap',\n    'rounded',\n    'innerCut',\n    'hoverScale',\n    'hideSlice',\n    'reveal',\n  ]),\n}, 'VPie')\n\nexport const VPie = genericComponent<VPieSlots>()({\n  name: 'VPie',\n\n  props: makeVPieProps(),\n\n  setup (props, { slots }) {\n    const legendConfig = computed(() => ({\n      visible: !!props.legend,\n      position: 'bottom',\n      textFormat: '[title]',\n      ...(typeof props.legend === 'object' ? props.legend : {}),\n    }))\n\n    const { colorClasses, colorStyles } = useColor(() => ({ background: props.bgColor }))\n    const textColorStyles = toRef(() => pick(colorStyles.value, ['color', 'caretColor']))\n\n    const legendAvatarSize = toRef(() => ({ default: 20, comfortable: 18, compact: 16 }[props.density ?? 'default']))\n    const legendDirection = toRef(() => ['left', 'right'].includes(legendConfig.value.position) ? 'vertical' : 'horizontal')\n\n    const legendMode = toRef(() => !legendConfig.value.visible ? 'hidden' : legendConfig.value.position)\n\n    const legendTextFormatFunction = toRef(() => (item: PieItem) => {\n      return typeof legendConfig.value.textFormat === 'function'\n        ? legendConfig.value.textFormat(item)\n        : formatTextTemplate(legendConfig.value.textFormat, item)\n    })\n\n    const arcs = computed<PieItem[]>(() => {\n      // hidden items get (value: 0) to trigger disappearing animation\n      return props.items\n        .filter(Boolean)\n        .map((item: any, index: number) => {\n          return {\n            key: item[props.itemKey],\n            color: item.color ?? colorFromPalette(index),\n            value: item[props.itemValue],\n            title: String(item[props.itemTitle]),\n            pattern: item.pattern ?? patternFromPalette(index),\n            raw: item,\n          } as PieItem\n        })\n    })\n\n    const visibleItemsKeys = shallowRef<PieItem['key'][]>([])\n\n    watch(() => arcs.value.length, () => {\n      // reset when number of items changes\n      visibleItemsKeys.value = arcs.value.map(a => a.key)\n    }, { immediate: true })\n\n    const visibleItems = computed(() => {\n      // hidden items get (value: 0) to trigger disappearing animation\n      return arcs.value.map(item => {\n        return isActive(item)\n          ? item\n          : { ...item, value: 0 }\n      })\n    })\n\n    const total = computed(() => visibleItems.value.reduce((sum, item) => sum + item.value, 0))\n\n    const gaugeCut = toRef(() => Number(props.gaugeCut ?? 0))\n    const gaugeOffset = computed(() => (1 - Math.cos(Math.PI * Math.min(90, gaugeCut.value / 2) / 180)) / 2)\n    const rotateDeg = computed(() => `${gaugeCut.value ? (180 + gaugeCut.value / 2) : (props.rotate ?? 0)}deg`)\n\n    function arcOffset (index: number) {\n      return visibleItems.value\n        .slice(0, index)\n        .reduce((acc, s) => acc + (total.value > 0 ? s.value / total.value : 0) * (360 - gaugeCut.value), 0)\n    }\n\n    function arcSize (v: number) { return v / total.value * (100 - gaugeCut.value / 3.6) }\n\n    function colorFromPalette (index: number) {\n      if (props.palette.length === 0) return undefined\n      const paletteItem = props.palette[index % props.palette.length]\n      return typeof paletteItem === 'object' ? paletteItem.color : paletteItem\n    }\n\n    function patternFromPalette (index: number) {\n      if (props.palette.length === 0) return undefined\n      const paletteItem = props.palette[index % props.palette.length]\n      return typeof paletteItem === 'object' ? paletteItem.pattern : undefined\n    }\n\n    function isActive (item: PieItem) {\n      return visibleItemsKeys.value.includes(item.key)\n    }\n\n    function toggle (item: PieItem) {\n      if (isActive(item)) {\n        visibleItemsKeys.value = visibleItemsKeys.value.filter(x => x !== item.key)\n      } else {\n        visibleItemsKeys.value = [...visibleItemsKeys.value, item.key]\n      }\n    }\n\n    const tooltipItem = shallowRef<PieItem | null>(null)\n    const tooltipVisible = shallowRef(false)\n\n    let mouseLeaveTimeout = null! as ReturnType<typeof setTimeout>\n\n    function onMouseenter (item: PieItem) {\n      if (!props.tooltip) return\n\n      clearTimeout(mouseLeaveTimeout)\n      tooltipVisible.value = true\n      tooltipItem.value = item\n    }\n\n    function onMouseleave () {\n      if (!props.tooltip) return\n\n      clearTimeout(mouseLeaveTimeout)\n      mouseLeaveTimeout = setTimeout(() => {\n        tooltipVisible.value = false\n\n        // intentionally reusing timeout here\n        mouseLeaveTimeout = setTimeout(() => {\n          tooltipItem.value = null\n        }, 500)\n      }, 100)\n    }\n\n    return () => {\n      const segmentProps = pick(props, [\n        'animation',\n        'gap',\n        'rounded',\n        'hideSlice',\n        'reveal',\n        'innerCut',\n        'hoverScale',\n      ])\n\n      const defaultTooltipTransition = {\n        name: 'fade-transition',\n        duration: 150,\n      }\n\n      const tooltipProps = {\n        item: tooltipItem.value,\n        modelValue: tooltipVisible.value,\n        titleFormat: typeof props.tooltip === 'object' ? props.tooltip.titleFormat : '[title]',\n        subtitleFormat: typeof props.tooltip === 'object' ? props.tooltip.subtitleFormat : '[value]',\n        transition: typeof props.tooltip === 'object' ? props.tooltip.transition : defaultTooltipTransition,\n        offset: typeof props.tooltip === 'object' ? props.tooltip.offset : 16,\n      }\n\n      const legendDefaults = {\n        VChipGroup: {\n          direction: legendDirection.value,\n        },\n        VChip: {\n          density: props.density,\n        },\n        VAvatar: {\n          size: legendAvatarSize.value,\n        },\n      }\n\n      const tooltipDefaults = {\n        VAvatar: {\n          size: 28,\n        },\n      }\n\n      const avatarSlot = ({ item }: { item: PieItem }) => (\n        <VAvatar color={ item.color } start>\n          { item.pattern && (\n            <svg height=\"40\" width=\"40\">\n              <rect width=\"40\" height=\"40\" fill={ item.pattern } />\n            </svg>\n          )}\n        </VAvatar>\n      )\n\n      return (\n        <div\n          class={[\n            'v-pie',\n            `v-pie--legend-${legendMode.value}`,\n          ]}\n          style={{\n            '--v-pie-size': convertToUnit(props.size),\n          }}\n        >\n          { slots.title?.() ?? (props.title && (<div class=\"v-pie__title\">{ props.title }</div>)) }\n          <div\n            class={[\n              'v-pie__content',\n              colorClasses.value,\n            ]}\n            style={[\n              {\n                transform: `rotate(${rotateDeg.value})`,\n                marginBottom: `calc(-1 * ${convertToUnit(props.size)} * ${gaugeOffset.value})`,\n              },\n              textColorStyles.value,\n            ]}\n          >\n            <div\n              class={[\n                'v-pie__content-underlay',\n                colorClasses.value,\n              ]}\n              style={ colorStyles.value }\n            />\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 100 100\"\n            >\n              { arcs.value.map((item, index) => (\n                <VPieSegment\n                  { ...segmentProps }\n                  key={ item.key }\n                  color={ item.color }\n                  value={ isActive(item) ? arcSize(item.value) : 0 }\n                  rotate={ arcOffset(index) }\n                  pattern={ item.pattern }\n                  onMouseenter={ () => onMouseenter(item) }\n                  onMouseleave={ () => onMouseleave() }\n                />\n              ))}\n            </svg>\n\n            <div\n              class=\"v-pie__center-content\"\n              style={{\n                transform: `translate(-50%, -50%)\n                  rotate(-${rotateDeg.value})\n                  translateY(calc(-100% * ${gaugeOffset.value}))`,\n              }}\n            >\n              <div>\n                { slots.center?.({ total: total.value }) }\n              </div>\n            </div>\n          </div>\n\n          { legendConfig.value.visible && (\n            <VDefaultsProvider key=\"legend\" defaults={ legendDefaults }>\n              <div class=\"v-pie__legend\">\n                { slots.legend?.({ isActive, toggle, items: arcs.value }) ?? (\n                  <VChipGroup\n                    column\n                    multiple\n                    v-model={ visibleItemsKeys.value }\n                  >\n                    { arcs.value.map(item => (\n                      <VChip\n                        value={ item.key }\n                        v-slots={{\n                          prepend: () => avatarSlot({ item }),\n                          default: () => (\n                            <div class=\"v-pie__legend__text\">\n                              { slots['legend-text']?.({ item }) ?? legendTextFormatFunction.value(item) }\n                            </div>\n                          ),\n                        }}\n                      />\n                    ))}\n                  </VChipGroup>\n                )}\n              </div>\n            </VDefaultsProvider>\n          )}\n          { !!props.tooltip && (\n            <VDefaultsProvider defaults={ tooltipDefaults }>\n              <VPieTooltip\n                { ...tooltipProps }\n                v-slots={{\n                  default: slots.tooltip,\n                  prepend: avatarSlot,\n                }}\n              />\n            </VDefaultsProvider>\n          )}\n        </div>\n      )\n    }\n  },\n})\n\nexport type VPie = InstanceType<typeof VPie>\n"],"mappings":"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","ignoreList":[]}

package/lib/labs/VPie/VPie.sass

@@ -0,0 +1,109 @@
+@use '../../styles/tools'
+@use './variables' as *
+
+@include tools.layer('components')
+  .v-pie
+    display: grid
+    align-items: center
+    column-gap: 24px
+    --v-pie-size: 250px
+
+    &--legend
+      &-top
+        grid-template-areas: 'title' 'legend' 'content'
+        grid-template-columns: var(--v-pie-size)
+      &-bottom
+        grid-template-areas: 'title' 'content' 'legend'
+        grid-template-columns: var(--v-pie-size)
+      &-right
+        grid-template-areas: 'title .' 'content legend'
+      &-left
+        grid-template-areas: '. title' 'legend content'
+      &-hidden
+        grid-template-areas: 'title' 'content'
+
+    &__title
+      grid-area: title
+      text-align: center
+      padding-bottom: $pie-title-padding-bottom
+
+    &__content
+      grid-area: content
+      position: relative
+      width: var(--v-pie-size)
+      height: var(--v-pie-size)
+
+      &:is(&)
+        // expected to get bg-* class for text color
+        // actual background is applied to underlay
+        background: none !important
+
+      .v-overlay
+        .v-overlay__scrim,
+        .v-overlay__content
+          pointer-events: none !important
+
+    &__content-underlay
+      border-radius: 50%
+      position: absolute
+      inset: $pie-underlay-inset
+      pointer-events: none
+      z-index: -1
+
+    &__center-content
+      position: absolute
+      top: 50%
+      left: 50%
+      transform: translate(-50%, -50%)
+      pointer-events: none
+
+      > div
+        pointer-events: auto
+
+    &__legend
+      grid-area: legend
+      padding-block: $pie-legend-padding-block
+
+      .v-avatar
+        border: $pie-legend-avatar-border
+
+      .v-chip__content
+        width: 100%
+
+      .v-chip:not(.v-chip--selected)
+        opacity: $pie-legend-chip-disabled-opacity
+
+      &__text
+        font-size: $pie-legend-chip-default-font-size
+        white-space: nowrap
+        width: 100%
+
+        .v-chip--density-compact &
+          font-size: $pie-legend-chip-compact-font-size
+
+    .v-chip.v-chip--density-comfortable .v-avatar--start
+      margin-inline-start: -6px
+
+    .v-chip.v-chip--density-default .v-avatar--start
+      margin-inline-start: -4px
+
+    &-segment
+      pointer-events: none
+      position: absolute
+      inset: 0
+
+      .v-pie-segment__overlay
+        pointer-events: auto
+        opacity: 0
+
+    &__tooltip-content
+      .v-list-item
+        padding-inline: 0
+        min-width: $pie-tooltip-min-width
+        zoom: 0.88
+
+      .v-list-item-subtitle
+        opacity: 1
+
+      .v-avatar
+        border: $pie-tooltip-avatar-border