vuetify 3.9.5 → 3.9.7

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

@@ -1 +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","avatarSize","avatarSlot","_ref2","_createVNode","_createElementVNode","_normalizeClass","_normalizeStyle","transform","marginBottom","_mergeProps","center","$event","prepend","slotProps"],"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    total: number\n  }\n  'legend-text': {\n    item: PieItem\n    total: number\n  }\n  title: never\n  tooltip: {\n    item: PieItem\n    total: number\n  }\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      avatarSize?: number\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: typeof props.tooltip === 'object' ? props.tooltip.avatarSize : 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, total: total.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, total: total.value }) ?? 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 ? slotProps => slots.tooltip?.({ ...slotProps, total: total.value }) : undefined,\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":[]}
+{"version":3,"file":"VPie.js","names":["makeVPieSegmentProps","VPieSegment","VPieTooltip","VAvatar","VChip","VChipGroup","VDefaultsProvider","useColor","makeDensityProps","vClickOutside","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","directives","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","isVisible","total","reduce","sum","gaugeOffset","Math","cos","PI","min","rotateDeg","arcOffset","slice","acc","s","arcSize","v","undefined","paletteItem","toggle","x","tooltipItem","tooltipVisible","tooltipTarget","mouseLeaveTimeout","setItemActive","active","forEach","isActive","setTooltip","clearTimeout","setTimeout","frame","onSvgMousemove","_ref2","clientX","clientY","cancelAnimationFrame","requestAnimationFrame","onSvgTouchstart","_ref3","touches","onSvgClickOutside","segmentProps","defaultTooltipTransition","duration","tooltipProps","modelValue","titleFormat","subtitleFormat","transition","offset","target","legendDefaults","direction","tooltipDefaults","avatarSize","avatarSlot","_ref4","_createVNode","_createElementVNode","_normalizeClass","_normalizeStyle","transform","marginBottom","_withDirectives","_mergeProps","val","onTouchend","handler","center","$event","prepend","slotProps"],"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// Directives\nimport vClickOutside from '@/directives/click-outside'\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    total: number\n  }\n  'legend-text': {\n    item: PieItem\n    total: number\n  }\n  title: never\n  tooltip: {\n    item: PieItem\n    total: number\n  }\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      avatarSize?: number\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  directives: { vClickOutside },\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 isVisible(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 isVisible (item: PieItem) {\n      return visibleItemsKeys.value.includes(item.key)\n    }\n\n    function toggle (item: PieItem) {\n      if (isVisible(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    const tooltipTarget = shallowRef<[x: number, y: number]>([0, 0])\n\n    let mouseLeaveTimeout = null! as ReturnType<typeof setTimeout>\n\n    function setItemActive (item: PieItem, active: boolean) {\n      arcs.value.forEach(a => a.isActive = a.key === item.key && active)\n\n      if (props.tooltip) {\n        setTooltip(item, active)\n      }\n    }\n\n    function setTooltip (item: PieItem, active: boolean) {\n      clearTimeout(mouseLeaveTimeout)\n\n      if (active) {\n        tooltipVisible.value = true\n        tooltipItem.value = item\n      } else {\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\n    let frame = -1\n    function onSvgMousemove ({ clientX, clientY }: MouseEvent) {\n      cancelAnimationFrame(frame)\n      frame = requestAnimationFrame(() => {\n        tooltipTarget.value = [clientX, clientY]\n      })\n    }\n\n    function onSvgTouchstart ({ touches }: TouchEvent) {\n      if (!touches) return\n      const { clientX, clientY } = touches[0]\n      tooltipTarget.value = [clientX, clientY]\n    }\n\n    function onSvgClickOutside () {\n      arcs.value.forEach(a => a.isActive = false)\n      tooltipVisible.value = false\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        target: tooltipTarget.value,\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: typeof props.tooltip === 'object' ? props.tooltip.avatarSize : 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              class=\"v-pie__segments\"\n              onMousemove={ onSvgMousemove }\n              onTouchstart={ onSvgTouchstart }\n              v-click-outside={{ handler: onSvgClickOutside }}\n            >\n              { arcs.value.map((item, index) => (\n                <VPieSegment\n                  { ...segmentProps }\n                  key={ item.key }\n                  active={ item.isActive }\n                  color={ item.color }\n                  value={ isVisible(item) ? arcSize(item.value) : 0 }\n                  rotate={ arcOffset(index) }\n                  pattern={ item.pattern }\n                  onUpdate:active={ val => setItemActive(item, val) }\n                  onTouchend={ () => setItemActive(item, true) }\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: isVisible, toggle, items: arcs.value, total: total.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, total: total.value }) ?? 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 ? slotProps => slots.tooltip?.({ ...slotProps, total: total.value }) : undefined,\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

@@ -43,6 +43,9 @@
         .v-overlay__content
           pointer-events: none !important
 
+    &__segments
+      border-radius: 50%
+
     &__content-underlay
       border-radius: 50%
       position: absolute

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

@@ -2,6 +2,7 @@ import { easingPatterns } from "../../util/index.js";
 import type { PropType } from 'vue';
 export declare const makeVPieSegmentProps: <Defaults extends {
     reveal?: unknown;
+    active?: unknown;
     rotate?: unknown;
     value?: unknown;
     color?: unknown;
@@ -35,6 +36,10 @@ export declare const makeVPieSegmentProps: <Defaults extends {
             duration?: number;
         }> | Defaults["reveal"];
     };
+    active: unknown extends Defaults["active"] ? BooleanConstructor : {
+        type: PropType<unknown extends Defaults["active"] ? boolean : boolean | Defaults["active"]>;
+        default: unknown extends Defaults["active"] ? boolean : boolean | Defaults["active"];
+    };
     rotate: unknown extends Defaults["rotate"] ? (StringConstructor | NumberConstructor)[] : {
         type: PropType<unknown extends Defaults["rotate"] ? string | number : string | number | Defaults["rotate"]>;
         default: unknown extends Defaults["rotate"] ? string | number : NonNullable<string | number> | Defaults["rotate"];
@@ -114,6 +119,7 @@ export declare const makeVPieSegmentProps: <Defaults extends {
 };
 export declare const VPieSegment: {
     new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
+        active: boolean;
         animation: boolean | {
             duration?: number;
             easing?: keyof typeof easingPatterns;
@@ -142,7 +148,12 @@ export declare const VPieSegment: {
         } | undefined;
     } & {
         "v-slot:default"?: false | (() => 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, {
+    } & {
+        "onUpdate:active"?: ((val: boolean) => any) | undefined;
+    }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+        'update:active': (val: boolean) => true;
+    }, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, {
+        active: boolean;
         animation: boolean | {
             duration?: number;
             easing?: keyof typeof easingPatterns;
@@ -163,6 +174,7 @@ export declare const VPieSegment: {
         M: {};
         Defaults: {};
     }, {
+        active: boolean;
         animation: boolean | {
             duration?: number;
             easing?: keyof typeof easingPatterns;
@@ -191,7 +203,10 @@ export declare const VPieSegment: {
         } | undefined;
     } & {
         "v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
+    } & {
+        "onUpdate:active"?: ((val: boolean) => any) | undefined;
     }, () => JSX.Element, {}, {}, {}, {
+        active: boolean;
         animation: boolean | {
             duration?: number;
             easing?: keyof typeof easingPatterns;
@@ -207,6 +222,7 @@ export declare const VPieSegment: {
     __isTeleport?: never;
     __isSuspense?: never;
 } & import("vue").ComponentOptionsBase<{
+    active: boolean;
     animation: boolean | {
         duration?: number;
         easing?: keyof typeof easingPatterns;
@@ -235,7 +251,12 @@ export declare const VPieSegment: {
     } | undefined;
 } & {
     "v-slot:default"?: false | (() => import("vue").VNodeChild) | undefined;
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {
+} & {
+    "onUpdate:active"?: ((val: boolean) => any) | undefined;
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    'update:active': (val: boolean) => true;
+}, string, {
+    active: boolean;
     animation: boolean | {
         duration?: number;
         easing?: keyof typeof easingPatterns;
@@ -255,6 +276,7 @@ export declare const VPieSegment: {
         }>;
         default: boolean;
     };
+    active: BooleanConstructor;
     rotate: (StringConstructor | NumberConstructor)[];
     value: {
         type: NumberConstructor;
@@ -284,6 +306,7 @@ export declare const VPieSegment: {
         }>;
         default: boolean;
     };
+    active: BooleanConstructor;
     rotate: (StringConstructor | NumberConstructor)[];
     value: {
         type: NumberConstructor;

package/lib/labs/VPie/VPieSegment.js

@@ -1,10 +1,12 @@
 import { createElementVNode as _createElementVNode } from "vue";
 // Composables
+import { useProxiedModel } from "../../composables/proxiedModel.js";
 import { makeRevealProps, useReveal } from "../../composables/reveal.js"; // Utilities
-import { computed, shallowRef, toRef } from 'vue';
+import { computed, toRef } from 'vue';
 import { useInnerSlicePath, useOuterSlicePath, usePieArc } from "./utils.js";
 import { easingPatterns, genericComponent, propsFactory, useTransition } from "../../util/index.js"; // Types
 export const makeVPieSegmentProps = propsFactory({
+  active: Boolean,
   rotate: [Number, String],
   value: {
     type: Number,
@@ -29,8 +31,11 @@ export const makeVPieSegmentProps = propsFactory({
 export const VPieSegment = genericComponent()({
   name: 'VPieSegment',
   props: makeVPieSegmentProps(),
+  emits: {
+    'update:active': val => true
+  },
   setup(props) {
-    const isHovering = shallowRef(false);
+    const isActive = useProxiedModel(props, 'active');
     const {
       state: revealState,
       duration: revealDuration
@@ -51,12 +56,12 @@ export const VPieSegment = genericComponent()({
       outerX,
       outerY,
       arcWidth
-    } = usePieArc(props, isHovering);
+    } = usePieArc(props, isActive);
     const arcSize = toRef(() => revealState.value === 'initial' ? 0 : normalizedValue.value);
     const currentArcSize = useTransition(arcSize, transitionConfig);
     const angle = toRef(() => revealState.value === 'initial' ? 0 : Number(props.rotate ?? 0) + Number(props.gap ?? 0) / 2);
     const currentAngle = useTransition(angle, transitionConfig);
-    const arcRadius = toRef(() => 50 * (isHovering.value ? 1 : 1 - hoverZoomRatio.value));
+    const arcRadius = toRef(() => 50 * (isActive.value ? 1 : 1 - hoverZoomRatio.value));
     const currentArcRadius = useTransition(arcRadius, transitionConfig);
     const currentArcWidth = useTransition(arcWidth, transitionConfig);
     const outerSlicePath = useOuterSlicePath({
@@ -95,8 +100,8 @@ export const VPieSegment = genericComponent()({
       "transform": `rotate(${currentAngle.value} 50 50)`,
       "class": "v-pie-segment__overlay",
       "d": overlayPath.value,
-      "onMouseenter": () => isHovering.value = true,
-      "onMouseleave": () => isHovering.value = false
+      "onMouseenter": () => isActive.value = true,
+      "onMouseleave": () => isActive.value = false
     }, null)]);
   }
 });

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

@@ -1 +1 @@
-{"version":3,"file":"VPieSegment.js","names":["makeRevealProps","useReveal","computed","shallowRef","toRef","useInnerSlicePath","useOuterSlicePath","usePieArc","easingPatterns","genericComponent","propsFactory","useTransition","makeVPieSegmentProps","rotate","Number","String","value","type","default","color","innerCut","hoverScale","gap","rounded","animation","Boolean","Object","pattern","hideSlice","VPieSegment","name","props","setup","isHovering","state","revealState","duration","revealDuration","transitionConfig","defaultEasing","defaultDuration","easingName","easing","includes","transition","hoverZoomRatio","normalizedValue","normalizedInnerCut","outerX","outerY","arcWidth","arcSize","currentArcSize","angle","currentAngle","arcRadius","currentArcRadius","currentArcWidth","outerSlicePath","radius","size","width","innerSlicePath","overlayPath","_createElementVNode","onMouseenter","onMouseleave"],"sources":["../../../src/labs/VPie/VPieSegment.tsx"],"sourcesContent":["// Composables\nimport { makeRevealProps, useReveal } from '@/composables/reveal'\n\n// Utilities\nimport { computed, shallowRef, toRef } from 'vue'\nimport { useInnerSlicePath, useOuterSlicePath, usePieArc } from './utils'\nimport { easingPatterns, genericComponent, propsFactory, useTransition } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\n\nexport const makeVPieSegmentProps = propsFactory({\n  rotate: [Number, String],\n  value: {\n    type: Number,\n    default: 0,\n  },\n  color: String,\n  innerCut: [Number, String],\n  hoverScale: {\n    type: [Number, String],\n    default: 0.05,\n  },\n  gap: [Number, String],\n  rounded: [Number, String],\n  animation: {\n    type: [Boolean, Object] as PropType<boolean | {\n      duration?: number\n      easing?: keyof typeof easingPatterns\n    }>,\n    default: false,\n  },\n  pattern: String,\n  hideSlice: Boolean,\n  ...makeRevealProps(),\n}, 'VPieSegment')\n\nexport const VPieSegment = genericComponent()({\n  name: 'VPieSegment',\n\n  props: makeVPieSegmentProps(),\n\n  setup (props) {\n    const isHovering = shallowRef(false)\n\n    const { state: revealState, duration: revealDuration } = useReveal(props)\n\n    const transitionConfig = computed(() => {\n      const defaultEasing = 'easeInOutCubic'\n      const defaultDuration = 400\n\n      const easingName = typeof props.animation === 'object'\n        ? props.animation.easing ?? defaultEasing\n        : defaultEasing\n\n      return {\n        duration: ['initial', 'pending'].includes(revealState.value)\n          ? revealDuration.value\n          : typeof props.animation === 'object'\n            ? props.animation.duration\n            : (props.animation ? defaultDuration : 0),\n        transition: easingPatterns[easingName],\n      }\n    })\n\n    const {\n      hoverZoomRatio,\n      normalizedValue,\n      normalizedInnerCut,\n      outerX,\n      outerY,\n      arcWidth,\n    } = usePieArc(props, isHovering)\n\n    const arcSize = toRef(() => revealState.value === 'initial' ? 0 : normalizedValue.value)\n    const currentArcSize = useTransition(arcSize, transitionConfig)\n\n    const angle = toRef(() => revealState.value === 'initial' ? 0 : (Number(props.rotate ?? 0) + Number(props.gap ?? 0) / 2))\n    const currentAngle = useTransition(angle, transitionConfig)\n\n    const arcRadius = toRef(() => 50 * (isHovering.value ? 1 : (1 - hoverZoomRatio.value)))\n    const currentArcRadius = useTransition(arcRadius, transitionConfig)\n    const currentArcWidth = useTransition(arcWidth, transitionConfig)\n\n    const outerSlicePath = useOuterSlicePath({\n      angle: currentAngle,\n      radius: currentArcRadius,\n      size: currentArcSize,\n      width: currentArcWidth,\n      rounded: () => Number(props.rounded ?? 0),\n    })\n\n    const innerSlicePath = useInnerSlicePath({\n      angle: currentAngle,\n      radius: () => currentArcRadius.value - currentArcWidth.value,\n      size: currentArcSize,\n    })\n\n    const overlayPath = toRef(() => `M 50 0 A 50 50 0 ${normalizedValue.value > 50 ? 1 : 0} 1 ${outerX.value} ${outerY.value} L 50 50`)\n\n    return () => (\n      <g\n        class=\"v-pie-segment\"\n        style={{ color: props.color }}\n      >\n        <path\n          key=\"outer-slice\"\n          fill=\"currentColor\"\n          shape-rendering=\"geometricPrecision\"\n          d={ outerSlicePath.value }\n        />\n        { props.pattern && (\n          <path\n            key=\"pattern-overlay\"\n            shape-rendering=\"geometricPrecision\"\n            fill={ props.pattern }\n            d={ outerSlicePath.value }\n          />\n        )}\n        { !props.hideSlice && normalizedInnerCut.value > 0 && (\n          <path\n            key=\"inner-slice\"\n            fill=\"oklch(from currentColor l c h / calc(alpha / 2))\"\n            d={ innerSlicePath.value }\n          />\n        )}\n        {['disabled', 'done'].includes(revealState.value) && (\n          <path\n            transform={ `rotate(${currentAngle.value} 50 50)` }\n            class=\"v-pie-segment__overlay\"\n            d={ overlayPath.value }\n            onMouseenter={ () => isHovering.value = true }\n            onMouseleave={ () => isHovering.value = false }\n          />\n        )}\n      </g>\n    )\n  },\n})\n\nexport type VPieSegment = InstanceType<typeof VPieSegment>\n"],"mappings":";AAAA;AAAA,SACSA,eAAe,EAAEC,SAAS,uCAEnC;AACA,SAASC,QAAQ,EAAEC,UAAU,EAAEC,KAAK,QAAQ,KAAK;AAAA,SACxCC,iBAAiB,EAAEC,iBAAiB,EAAEC,SAAS;AAAA,SAC/CC,cAAc,EAAEC,gBAAgB,EAAEC,YAAY,EAAEC,aAAa,+BAEtE;AAGA,OAAO,MAAMC,oBAAoB,GAAGF,YAAY,CAAC;EAC/CG,MAAM,EAAE,CAACC,MAAM,EAAEC,MAAM,CAAC;EACxBC,KAAK,EAAE;IACLC,IAAI,EAAEH,MAAM;IACZI,OAAO,EAAE;EACX,CAAC;EACDC,KAAK,EAAEJ,MAAM;EACbK,QAAQ,EAAE,CAACN,MAAM,EAAEC,MAAM,CAAC;EAC1BM,UAAU,EAAE;IACVJ,IAAI,EAAE,CAACH,MAAM,EAAEC,MAAM,CAAC;IACtBG,OAAO,EAAE;EACX,CAAC;EACDI,GAAG,EAAE,CAACR,MAAM,EAAEC,MAAM,CAAC;EACrBQ,OAAO,EAAE,CAACT,MAAM,EAAEC,MAAM,CAAC;EACzBS,SAAS,EAAE;IACTP,IAAI,EAAE,CAACQ,OAAO,EAAEC,MAAM,CAGpB;IACFR,OAAO,EAAE;EACX,CAAC;EACDS,OAAO,EAAEZ,MAAM;EACfa,SAAS,EAAEH,OAAO;EAClB,GAAGzB,eAAe,CAAC;AACrB,CAAC,EAAE,aAAa,CAAC;AAEjB,OAAO,MAAM6B,WAAW,GAAGpB,gBAAgB,CAAC,CAAC,CAAC;EAC5CqB,IAAI,EAAE,aAAa;EAEnBC,KAAK,EAAEnB,oBAAoB,CAAC,CAAC;EAE7BoB,KAAKA,CAAED,KAAK,EAAE;IACZ,MAAME,UAAU,GAAG9B,UAAU,CAAC,KAAK,CAAC;IAEpC,MAAM;MAAE+B,KAAK,EAAEC,WAAW;MAAEC,QAAQ,EAAEC;IAAe,CAAC,GAAGpC,SAAS,CAAC8B,KAAK,CAAC;IAEzE,MAAMO,gBAAgB,GAAGpC,QAAQ,CAAC,MAAM;MACtC,MAAMqC,aAAa,GAAG,gBAAgB;MACtC,MAAMC,eAAe,GAAG,GAAG;MAE3B,MAAMC,UAAU,GAAG,OAAOV,KAAK,CAACP,SAAS,KAAK,QAAQ,GAClDO,KAAK,CAACP,SAAS,CAACkB,MAAM,IAAIH,aAAa,GACvCA,aAAa;MAEjB,OAAO;QACLH,QAAQ,EAAE,CAAC,SAAS,EAAE,SAAS,CAAC,CAACO,QAAQ,CAACR,WAAW,CAACnB,KAAK,CAAC,GACxDqB,cAAc,CAACrB,KAAK,GACpB,OAAOe,KAAK,CAACP,SAAS,KAAK,QAAQ,GACjCO,KAAK,CAACP,SAAS,CAACY,QAAQ,GACvBL,KAAK,CAACP,SAAS,GAAGgB,eAAe,GAAG,CAAE;QAC7CI,UAAU,EAAEpC,cAAc,CAACiC,UAAU;MACvC,CAAC;IACH,CAAC,CAAC;IAEF,MAAM;MACJI,cAAc;MACdC,eAAe;MACfC,kBAAkB;MAClBC,MAAM;MACNC,MAAM;MACNC;IACF,CAAC,GAAG3C,SAAS,CAACwB,KAAK,EAAEE,UAAU,CAAC;IAEhC,MAAMkB,OAAO,GAAG/C,KAAK,CAAC,MAAM+B,WAAW,CAACnB,KAAK,KAAK,SAAS,GAAG,CAAC,GAAG8B,eAAe,CAAC9B,KAAK,CAAC;IACxF,MAAMoC,cAAc,GAAGzC,aAAa,CAACwC,OAAO,EAAEb,gBAAgB,CAAC;IAE/D,MAAMe,KAAK,GAAGjD,KAAK,CAAC,MAAM+B,WAAW,CAACnB,KAAK,KAAK,SAAS,GAAG,CAAC,GAAIF,MAAM,CAACiB,KAAK,CAAClB,MAAM,IAAI,CAAC,CAAC,GAAGC,MAAM,CAACiB,KAAK,CAACT,GAAG,IAAI,CAAC,CAAC,GAAG,CAAE,CAAC;IACzH,MAAMgC,YAAY,GAAG3C,aAAa,CAAC0C,KAAK,EAAEf,gBAAgB,CAAC;IAE3D,MAAMiB,SAAS,GAAGnD,KAAK,CAAC,MAAM,EAAE,IAAI6B,UAAU,CAACjB,KAAK,GAAG,CAAC,GAAI,CAAC,GAAG6B,cAAc,CAAC7B,KAAM,CAAC,CAAC;IACvF,MAAMwC,gBAAgB,GAAG7C,aAAa,CAAC4C,SAAS,EAAEjB,gBAAgB,CAAC;IACnE,MAAMmB,eAAe,GAAG9C,aAAa,CAACuC,QAAQ,EAAEZ,gBAAgB,CAAC;IAEjE,MAAMoB,cAAc,GAAGpD,iBAAiB,CAAC;MACvC+C,KAAK,EAAEC,YAAY;MACnBK,MAAM,EAAEH,gBAAgB;MACxBI,IAAI,EAAER,cAAc;MACpBS,KAAK,EAAEJ,eAAe;MACtBlC,OAAO,EAAEA,CAAA,KAAMT,MAAM,CAACiB,KAAK,CAACR,OAAO,IAAI,CAAC;IAC1C,CAAC,CAAC;IAEF,MAAMuC,cAAc,GAAGzD,iBAAiB,CAAC;MACvCgD,KAAK,EAAEC,YAAY;MACnBK,MAAM,EAAEA,CAAA,KAAMH,gBAAgB,CAACxC,KAAK,GAAGyC,eAAe,CAACzC,KAAK;MAC5D4C,IAAI,EAAER;IACR,CAAC,CAAC;IAEF,MAAMW,WAAW,GAAG3D,KAAK,CAAC,MAAM,oBAAoB0C,eAAe,CAAC9B,KAAK,GAAG,EAAE,GAAG,CAAC,GAAG,CAAC,MAAMgC,MAAM,CAAChC,KAAK,IAAIiC,MAAM,CAACjC,KAAK,UAAU,CAAC;IAEnI,OAAO,MAAAgD,mBAAA;MAAA;MAAA,SAGI;QAAE7C,KAAK,EAAEY,KAAK,CAACZ;MAAM;IAAC,IAAA6C,mBAAA;MAAA;MAAA;MAAA;MAAA,KAMvBN,cAAc,CAAC1C;IAAK,UAExBe,KAAK,CAACJ,OAAO,IAAAqC,mBAAA;MAAA;MAAA;MAAA,QAIJjC,KAAK,CAACJ,OAAO;MAAA,KAChB+B,cAAc,CAAC1C;IAAK,QAE3B,EACC,CAACe,KAAK,CAACH,SAAS,IAAImB,kBAAkB,CAAC/B,KAAK,GAAG,CAAC,IAAAgD,mBAAA;MAAA;MAAA;MAAA,KAI1CF,cAAc,CAAC9C;IAAK,QAE3B,EACA,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC2B,QAAQ,CAACR,WAAW,CAACnB,KAAK,CAAC,IAAAgD,mBAAA;MAAA,aAEjC,UAAUV,YAAY,CAACtC,KAAK,SAAS;MAAA;MAAA,KAE7C+C,WAAW,CAAC/C,KAAK;MAAA,gBACNiD,CAAA,KAAMhC,UAAU,CAACjB,KAAK,GAAG,IAAI;MAAA,gBAC7BkD,CAAA,KAAMjC,UAAU,CAACjB,KAAK,GAAG;IAAK,QAEhD,EAEJ;EACH;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"file":"VPieSegment.js","names":["useProxiedModel","makeRevealProps","useReveal","computed","toRef","useInnerSlicePath","useOuterSlicePath","usePieArc","easingPatterns","genericComponent","propsFactory","useTransition","makeVPieSegmentProps","active","Boolean","rotate","Number","String","value","type","default","color","innerCut","hoverScale","gap","rounded","animation","Object","pattern","hideSlice","VPieSegment","name","props","emits","val","setup","isActive","state","revealState","duration","revealDuration","transitionConfig","defaultEasing","defaultDuration","easingName","easing","includes","transition","hoverZoomRatio","normalizedValue","normalizedInnerCut","outerX","outerY","arcWidth","arcSize","currentArcSize","angle","currentAngle","arcRadius","currentArcRadius","currentArcWidth","outerSlicePath","radius","size","width","innerSlicePath","overlayPath","_createElementVNode","onMouseenter","onMouseleave"],"sources":["../../../src/labs/VPie/VPieSegment.tsx"],"sourcesContent":["// Composables\nimport { useProxiedModel } from '@/composables/proxiedModel'\nimport { makeRevealProps, useReveal } from '@/composables/reveal'\n\n// Utilities\nimport { computed, toRef } from 'vue'\nimport { useInnerSlicePath, useOuterSlicePath, usePieArc } from './utils'\nimport { easingPatterns, genericComponent, propsFactory, useTransition } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\n\nexport const makeVPieSegmentProps = propsFactory({\n  active: Boolean,\n  rotate: [Number, String],\n  value: {\n    type: Number,\n    default: 0,\n  },\n  color: String,\n  innerCut: [Number, String],\n  hoverScale: {\n    type: [Number, String],\n    default: 0.05,\n  },\n  gap: [Number, String],\n  rounded: [Number, String],\n  animation: {\n    type: [Boolean, Object] as PropType<boolean | {\n      duration?: number\n      easing?: keyof typeof easingPatterns\n    }>,\n    default: false,\n  },\n  pattern: String,\n  hideSlice: Boolean,\n  ...makeRevealProps(),\n}, 'VPieSegment')\n\nexport const VPieSegment = genericComponent()({\n  name: 'VPieSegment',\n\n  props: makeVPieSegmentProps(),\n\n  emits: {\n    'update:active': (val: boolean) => true,\n  },\n\n  setup (props) {\n    const isActive = useProxiedModel(props, 'active')\n\n    const { state: revealState, duration: revealDuration } = useReveal(props)\n\n    const transitionConfig = computed(() => {\n      const defaultEasing = 'easeInOutCubic'\n      const defaultDuration = 400\n\n      const easingName = typeof props.animation === 'object'\n        ? props.animation.easing ?? defaultEasing\n        : defaultEasing\n\n      return {\n        duration: ['initial', 'pending'].includes(revealState.value)\n          ? revealDuration.value\n          : typeof props.animation === 'object'\n            ? props.animation.duration\n            : (props.animation ? defaultDuration : 0),\n        transition: easingPatterns[easingName],\n      }\n    })\n\n    const {\n      hoverZoomRatio,\n      normalizedValue,\n      normalizedInnerCut,\n      outerX,\n      outerY,\n      arcWidth,\n    } = usePieArc(props, isActive)\n\n    const arcSize = toRef(() => revealState.value === 'initial' ? 0 : normalizedValue.value)\n    const currentArcSize = useTransition(arcSize, transitionConfig)\n\n    const angle = toRef(() => revealState.value === 'initial' ? 0 : (Number(props.rotate ?? 0) + Number(props.gap ?? 0) / 2))\n    const currentAngle = useTransition(angle, transitionConfig)\n\n    const arcRadius = toRef(() => 50 * (isActive.value ? 1 : (1 - hoverZoomRatio.value)))\n    const currentArcRadius = useTransition(arcRadius, transitionConfig)\n    const currentArcWidth = useTransition(arcWidth, transitionConfig)\n\n    const outerSlicePath = useOuterSlicePath({\n      angle: currentAngle,\n      radius: currentArcRadius,\n      size: currentArcSize,\n      width: currentArcWidth,\n      rounded: () => Number(props.rounded ?? 0),\n    })\n\n    const innerSlicePath = useInnerSlicePath({\n      angle: currentAngle,\n      radius: () => currentArcRadius.value - currentArcWidth.value,\n      size: currentArcSize,\n    })\n\n    const overlayPath = toRef(() => `M 50 0 A 50 50 0 ${normalizedValue.value > 50 ? 1 : 0} 1 ${outerX.value} ${outerY.value} L 50 50`)\n\n    return () => (\n      <g\n        class=\"v-pie-segment\"\n        style={{ color: props.color }}\n      >\n        <path\n          key=\"outer-slice\"\n          fill=\"currentColor\"\n          shape-rendering=\"geometricPrecision\"\n          d={ outerSlicePath.value }\n        />\n        { props.pattern && (\n          <path\n            key=\"pattern-overlay\"\n            shape-rendering=\"geometricPrecision\"\n            fill={ props.pattern }\n            d={ outerSlicePath.value }\n          />\n        )}\n        { !props.hideSlice && normalizedInnerCut.value > 0 && (\n          <path\n            key=\"inner-slice\"\n            fill=\"oklch(from currentColor l c h / calc(alpha / 2))\"\n            d={ innerSlicePath.value }\n          />\n        )}\n        {['disabled', 'done'].includes(revealState.value) && (\n          <path\n            transform={ `rotate(${currentAngle.value} 50 50)` }\n            class=\"v-pie-segment__overlay\"\n            d={ overlayPath.value }\n            onMouseenter={ () => isActive.value = true }\n            onMouseleave={ () => isActive.value = false }\n          />\n        )}\n      </g>\n    )\n  },\n})\n\nexport type VPieSegment = InstanceType<typeof VPieSegment>\n"],"mappings":"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","ignoreList":[]}

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

@@ -12,6 +12,7 @@ export declare const makeVPieTooltipProps: <Defaults extends {
     offset?: unknown;
     transition?: unknown;
     modelValue?: unknown;
+    target?: unknown;
     item?: unknown;
     titleFormat?: unknown;
     subtitleFormat?: unknown;
@@ -44,6 +45,10 @@ export declare const makeVPieTooltipProps: <Defaults extends {
         type: PropType<unknown extends Defaults["modelValue"] ? boolean : boolean | Defaults["modelValue"]>;
         default: unknown extends Defaults["modelValue"] ? boolean : boolean | Defaults["modelValue"];
     };
+    target: unknown extends Defaults["target"] ? PropType<[x: number, y: number]> : {
+        type: PropType<unknown extends Defaults["target"] ? [x: number, y: number] : [x: number, y: number] | Defaults["target"]>;
+        default: unknown extends Defaults["target"] ? [x: number, y: number] : [x: number, y: number] | Defaults["target"];
+    };
     item: unknown extends Defaults["item"] ? {
         type: PropType<PieItem | null>;
         default: null;
@@ -86,6 +91,7 @@ export declare const VPieTooltip: {
         transition?: string | boolean | (import("vue").TransitionProps & {
             component?: import("vue").Component;
         }) | null | undefined;
+        target?: [x: number, y: number] | undefined;
     } & {
         $children?: import("vue").VNodeChild | {
             $stable?: boolean;
@@ -144,6 +150,7 @@ export declare const VPieTooltip: {
         transition?: string | boolean | (import("vue").TransitionProps & {
             component?: import("vue").Component;
         }) | null | undefined;
+        target?: [x: number, y: number] | undefined;
     } & {
         $children?: import("vue").VNodeChild | {
             $stable?: boolean;
@@ -192,6 +199,7 @@ export declare const VPieTooltip: {
     transition?: string | boolean | (import("vue").TransitionProps & {
         component?: import("vue").Component;
     }) | null | undefined;
+    target?: [x: number, y: number] | undefined;
 } & {
     $children?: import("vue").VNodeChild | {
         $stable?: boolean;
@@ -242,6 +250,7 @@ export declare const VPieTooltip: {
         component?: import("vue").Component;
     })>;
     modelValue: BooleanConstructor;
+    target: PropType<[x: number, y: number]>;
     item: {
         type: PropType<PieItem | null>;
         default: null;
@@ -263,6 +272,7 @@ export declare const VPieTooltip: {
         component?: import("vue").Component;
     })>;
     modelValue: BooleanConstructor;
+    target: PropType<[x: number, y: number]>;
     item: {
         type: PropType<PieItem | null>;
         default: null;

package/lib/labs/VPie/VPieTooltip.js

@@ -3,11 +3,12 @@ import { createVNode as _createVNode } from "vue";
 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 { toRef } from 'vue';
 import { formatTextTemplate } from "./utils.js";
-import { genericComponent, getCurrentInstance, pick, propsFactory } from "../../util/index.js"; // Types
+import { genericComponent, pick, propsFactory } from "../../util/index.js"; // Types
 export const makeVPieTooltipProps = propsFactory({
   modelValue: Boolean,
+  target: Object,
   item: {
     type: Object,
     default: null
@@ -30,25 +31,6 @@ export const VPieTooltip = genericComponent()({
     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);
     });
@@ -58,7 +40,7 @@ export const VPieTooltip = genericComponent()({
     return () => _createVNode(VTooltip, {
       "offset": props.offset,
       "modelValue": props.modelValue,
-      "target": target.value,
+      "target": props.target,
       "contentClass": "v-pie__tooltip-content"
     }, {
       default: () => [!!props.item && (slots.default?.({

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

@@ -1 +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":";AAAA;AAAA,SACSA,SAAS;AAAA,SACTC,iBAAiB,EAAEC,QAAQ,iDAEpC;AAAA,SACSC,mBAAmB,EAAEC,eAAe,2CAE7C;AACA,SAASC,eAAe,EAAEC,SAAS,EAAEC,UAAU,EAAEC,KAAK,QAAQ,KAAK;AAAA,SAC1DC,kBAAkB;AAAA,SAClBC,gBAAgB,EAAEC,kBAAkB,EAAEC,IAAI,EAAEC,YAAY,+BAEjE;AASA,OAAO,MAAMC,oBAAoB,GAAGD,YAAY,CAAC;EAC/CE,UAAU,EAAEC,OAAO;EACnBC,IAAI,EAAE;IACJC,IAAI,EAAEC,MAAkC;IACxCC,OAAO,EAAE;EACX,CAAC;EACDC,WAAW,EAAE;IACXH,IAAI,EAAE,CAACI,MAAM,EAAEC,QAAQ,CAA2B;IAClDH,OAAO,EAAE;EACX,CAAC;EACDI,cAAc,EAAE;IACdN,IAAI,EAAE,CAACI,MAAM,EAAEC,QAAQ,CAA2B;IAClDH,OAAO,EAAE;EACX,CAAC;EACD,GAAGjB,mBAAmB,CAAC,CAAC;EACxB,GAAGS,IAAI,CAACX,iBAAiB,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC;AACzC,CAAC,EAAE,aAAa,CAAC;AAEjB,OAAO,MAAMwB,WAAW,GAAGf,gBAAgB,CAAmB,CAAC,CAAC;EAC9DgB,IAAI,EAAE,aAAa;EAEnBC,KAAK,EAAEb,oBAAoB,CAAC,CAAC;EAE7Bc,KAAKA,CAAED,KAAK,EAAAE,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACrB,MAAME,MAAM,GAAGxB,UAAU,CAAyB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IACzD,MAAMyB,EAAE,GAAGrB,kBAAkB,CAAC,aAAa,CAAC;IAE5C,IAAIsB,KAAK,GAAG,CAAC,CAAC;IACd,SAASC,WAAWA,CAAAC,KAAA,EAAoC;MAAA,IAAlC;QAAEC,OAAO;QAAEC;MAAoB,CAAC,GAAAF,KAAA;MACpDG,oBAAoB,CAACL,KAAK,CAAC;MAC3BA,KAAK,GAAGM,qBAAqB,CAAC,MAAM;QAClCR,MAAM,CAACS,KAAK,GAAG,CAACJ,OAAO,EAAEC,OAAO,CAAC;MACnC,CAAC,CAAC;IACJ;IAEA/B,SAAS,CAAC,MAAM;MACd0B,EAAE,CAACS,KAAK,CAAEC,GAAG,CAACC,UAAU,CAACC,gBAAgB,CAAC,WAAW,EAAEV,WAAW,CAAC;IACrE,CAAC,CAAC;IAEF7B,eAAe,CAAC,MAAM;MACpB2B,EAAE,CAACS,KAAK,CAAEC,GAAG,CAACC,UAAU,CAACE,mBAAmB,CAAC,WAAW,EAAEX,WAAW,CAAC;IACxE,CAAC,CAAC;IAEF,MAAMY,0BAA0B,GAAGtC,KAAK,CAAC,MAAOuC,OAAgB,IAAK;MACnE,OAAO,OAAOpB,KAAK,CAACN,WAAW,KAAK,UAAU,GAC1CM,KAAK,CAACN,WAAW,CAAC0B,OAAO,CAAC,GAC1BtC,kBAAkB,CAACkB,KAAK,CAACN,WAAW,EAAE0B,OAAO,CAAC;IACpD,CAAC,CAAC;IAEF,MAAMC,6BAA6B,GAAGxC,KAAK,CAAC,MAAOuC,OAAgB,IAAK;MACtE,OAAO,OAAOpB,KAAK,CAACH,cAAc,KAAK,UAAU,GAC7CG,KAAK,CAACH,cAAc,CAACuB,OAAO,CAAC,GAC7BtC,kBAAkB,CAACkB,KAAK,CAACH,cAAc,EAAEuB,OAAO,CAAC;IACvD,CAAC,CAAC;IAEF,OAAO,MAAAE,YAAA,CAAA/C,QAAA;MAAA,UAEMyB,KAAK,CAACuB,MAAM;MAAA,cACRvB,KAAK,CAACZ,UAAU;MAAA,UACpBgB,MAAM,CAACS,KAAK;MAAA;IAAA;MAAApB,OAAA,EAAAA,CAAA,MAGnB,CAAC,CAACO,KAAK,CAACV,IAAI,KACZa,KAAK,CAACV,OAAO,GAAG;QAAEH,IAAI,EAAEU,KAAK,CAACV;MAAK,CAAC,CAAC,IAAAgC,YAAA,CAAA7C,eAAA;QAAA,cACLuB,KAAK,CAACwB,UAAU;QAAA;MAAA;QAAA/B,OAAA,EAAAA,CAAA,MAAA6B,YAAA,CAAAjD,SAAA;UAAA,OAEpC2B,KAAK,CAACV,IAAI,CAACmC,GAAG;UAAA;UAAA,SAEZN,0BAA0B,CAACN,KAAK,CAACb,KAAK,CAACV,IAAI,CAAC;UAAA,YACzC+B,6BAA6B,CAACR,KAAK,CAACb,KAAK,CAACV,IAAI;QAAC,GACjD;UACPoC,OAAO,EAAEvB,KAAK,CAACuB,OAAO,GAClB,MAAMvB,KAAK,CAACuB,OAAO,CAAE;YAAEpC,IAAI,EAAEU,KAAK,CAACV;UAAM,CAAC,CAAC,GAC3CqC;QACN,CAAC;MAAA,EAGN,CACF;IAAA,EAEJ;EACH;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"file":"VPieTooltip.js","names":["VListItem","makeVTooltipProps","VTooltip","makeTransitionProps","MaybeTransition","toRef","formatTextTemplate","genericComponent","pick","propsFactory","makeVPieTooltipProps","modelValue","Boolean","target","Object","item","type","default","titleFormat","String","Function","subtitleFormat","VPieTooltip","name","props","setup","_ref","slots","tooltipTitleFormatFunction","segment","tooltipSubtitleFormatFunction","_createVNode","offset","transition","key","value","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 { toRef } from 'vue'\nimport { formatTextTemplate } from './utils'\nimport { genericComponent, 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  target: Object as PropType<[x: number, y: number]>,\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 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={ props.target }\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":";AAAA;AAAA,SACSA,SAAS;AAAA,SACTC,iBAAiB,EAAEC,QAAQ,iDAEpC;AAAA,SACSC,mBAAmB,EAAEC,eAAe,2CAE7C;AACA,SAASC,KAAK,QAAQ,KAAK;AAAA,SAClBC,kBAAkB;AAAA,SAClBC,gBAAgB,EAAEC,IAAI,EAAEC,YAAY,+BAE7C;AASA,OAAO,MAAMC,oBAAoB,GAAGD,YAAY,CAAC;EAC/CE,UAAU,EAAEC,OAAO;EACnBC,MAAM,EAAEC,MAA0C;EAClDC,IAAI,EAAE;IACJC,IAAI,EAAEF,MAAkC;IACxCG,OAAO,EAAE;EACX,CAAC;EACDC,WAAW,EAAE;IACXF,IAAI,EAAE,CAACG,MAAM,EAAEC,QAAQ,CAA2B;IAClDH,OAAO,EAAE;EACX,CAAC;EACDI,cAAc,EAAE;IACdL,IAAI,EAAE,CAACG,MAAM,EAAEC,QAAQ,CAA2B;IAClDH,OAAO,EAAE;EACX,CAAC;EACD,GAAGd,mBAAmB,CAAC,CAAC;EACxB,GAAGK,IAAI,CAACP,iBAAiB,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC;AACzC,CAAC,EAAE,aAAa,CAAC;AAEjB,OAAO,MAAMqB,WAAW,GAAGf,gBAAgB,CAAmB,CAAC,CAAC;EAC9DgB,IAAI,EAAE,aAAa;EAEnBC,KAAK,EAAEd,oBAAoB,CAAC,CAAC;EAE7Be,KAAKA,CAAED,KAAK,EAAAE,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACrB,MAAME,0BAA0B,GAAGvB,KAAK,CAAC,MAAOwB,OAAgB,IAAK;MACnE,OAAO,OAAOL,KAAK,CAACN,WAAW,KAAK,UAAU,GAC1CM,KAAK,CAACN,WAAW,CAACW,OAAO,CAAC,GAC1BvB,kBAAkB,CAACkB,KAAK,CAACN,WAAW,EAAEW,OAAO,CAAC;IACpD,CAAC,CAAC;IAEF,MAAMC,6BAA6B,GAAGzB,KAAK,CAAC,MAAOwB,OAAgB,IAAK;MACtE,OAAO,OAAOL,KAAK,CAACH,cAAc,KAAK,UAAU,GAC7CG,KAAK,CAACH,cAAc,CAACQ,OAAO,CAAC,GAC7BvB,kBAAkB,CAACkB,KAAK,CAACH,cAAc,EAAEQ,OAAO,CAAC;IACvD,CAAC,CAAC;IAEF,OAAO,MAAAE,YAAA,CAAA7B,QAAA;MAAA,UAEMsB,KAAK,CAACQ,MAAM;MAAA,cACRR,KAAK,CAACb,UAAU;MAAA,UACpBa,KAAK,CAACX,MAAM;MAAA;IAAA;MAAAI,OAAA,EAAAA,CAAA,MAGnB,CAAC,CAACO,KAAK,CAACT,IAAI,KACZY,KAAK,CAACV,OAAO,GAAG;QAAEF,IAAI,EAAES,KAAK,CAACT;MAAK,CAAC,CAAC,IAAAgB,YAAA,CAAA3B,eAAA;QAAA,cACLoB,KAAK,CAACS,UAAU;QAAA;MAAA;QAAAhB,OAAA,EAAAA,CAAA,MAAAc,YAAA,CAAA/B,SAAA;UAAA,OAEpCwB,KAAK,CAACT,IAAI,CAACmB,GAAG;UAAA;UAAA,SAEZN,0BAA0B,CAACO,KAAK,CAACX,KAAK,CAACT,IAAI,CAAC;UAAA,YACzCe,6BAA6B,CAACK,KAAK,CAACX,KAAK,CAACT,IAAI;QAAC,GACjD;UACPqB,OAAO,EAAET,KAAK,CAACS,OAAO,GAClB,MAAMT,KAAK,CAACS,OAAO,CAAE;YAAErB,IAAI,EAAES,KAAK,CAACT;UAAM,CAAC,CAAC,GAC3CsB;QACN,CAAC;MAAA,EAGN,CACF;IAAA,EAEJ;EACH;AACF,CAAC,CAAC","ignoreList":[]}

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

@@ -4,6 +4,7 @@ export interface PieItem {
     value: number;
     title: string;
     pattern?: string;
+    isActive: boolean;
     raw?: Record<string, any>;
 }
 export interface PieSegmentProps {

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

@@ -1 +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":[]}
+{"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  isActive: boolean\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/VVideo/VVideo.css

@@ -50,15 +50,15 @@
 .v-video__content {
   box-shadow: 0px 2px 4px -1px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 4px 5px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 1px 10px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
 }
-.v-video:not(.v-video--idle) .v-video__content .v-overlay, .v-video:not(.v-video--idle) .v-video__content .v-overlay > * {
+.v-video:not(.v-video--idle) .v-video__content .v-video__overlay-fill, .v-video:not(.v-video--idle) .v-video__content .v-video__overlay-fill > * {
   pointer-events: none;
 }
 .v-video__overlay-fill {
+  position: absolute;
+  inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 100%;
-  height: 100%;
   border-radius: inherit;
 }
 .v-video__overlay-fill > .v-img {
@@ -155,8 +155,8 @@
 .v-video--variant-background {
   outline: none;
   position: absolute;
+  inset: 0;
   pointer-events: none;
-  height: 100%;
 }
 .v-video--variant-background > .v-video__content {
   width: 100%;