@nubisco/ui 4.0.2 → 4.1.1

package/src/plugins/vite/glyphs.ts

@@ -3,7 +3,7 @@ import { existsSync } from 'node:fs'
 import path from 'node:path'
 import { fileURLToPath } from 'node:url'
 import MagicString from 'magic-string'
-import { parse } from 'vue/compiler-sfc'
+import { parse, babelParse } from 'vue/compiler-sfc'
 
 /**
  * Resolves icon and flag artwork at compile time.
@@ -63,6 +63,15 @@ export interface IGlyphOptions {
   packageName?: string
   /** Log every rewrite. Useful when auditing what a page actually links. */
   verbose?: boolean
+  /**
+   * Warn when a glyph forwarded through another component (`<NbButton
+   * :icon="…">`) is a value this plugin cannot see through, so no artwork was
+   * linked for it. On by default, once per file, because the alternative is
+   * the silence that lets an icon reach `NbIcon` with nothing to resolve it
+   * against. Turn it off in a codebase where those bindings are deliberate
+   * pass-through props, resolved by whoever passes them in.
+   */
+  warnUnresolved?: boolean
 }
 
 type TKind = 'icon' | 'flag'
@@ -136,6 +145,99 @@ function staticWeight(element: any): string | undefined {
   return 'regular'
 }
 
+/**
+ * Parse one template expression on its own. `babelParse` wants a program, so
+ * the expression is wrapped; a binding Vue accepts but Babel cannot read is
+ * simply unknown, which the caller treats as unresolved.
+ */
+function parseExpression(expression: string): any {
+  try {
+    const { program } = babelParse(`(${expression})`, {
+      sourceType: 'module',
+      plugins: ['typescript'],
+    })
+    const statement: any = program.body[0]
+    return statement?.type === 'ExpressionStatement'
+      ? statement.expression
+      : undefined
+  } catch {
+    return undefined
+  }
+}
+
+/**
+ * Whether every value this expression can hand to the component is artwork the
+ * bundle already links: a literal this plugin just rewrote, or a glyph module
+ * the file imported itself.
+ *
+ * The point is what it refuses. `open ? 'caret-up' : 'caret-down'` produces one
+ * of two rewritten literals and nothing else, so it is resolved. `block?.icon
+ * || 'cube'` also contains a rewritten literal, but it can just as easily
+ * produce `block.icon`, which is a runtime value and needs the catalogue.
+ * Judging by "a rewritten literal appears and no quoted string survives" called
+ * that second one resolved, which meant adding a literal fallback silently
+ * removed the coverage the same expression had without one.
+ */
+function producesOnlyLinkedGlyphs(
+  node: any,
+  isLinked: (name: string) => boolean,
+): boolean {
+  if (!node) return false
+  const recurse = (child: any) => producesOnlyLinkedGlyphs(child, isLinked)
+  switch (node.type) {
+    case 'Identifier':
+      return isLinked(node.name)
+    // The test is not a value the prop receives; the two arms are.
+    case 'ConditionalExpression':
+      return recurse(node.consequent) && recurse(node.alternate)
+    // `a || b`, `a ?? b` and `a && b` can all produce either side.
+    case 'LogicalExpression':
+      return recurse(node.left) && recurse(node.right)
+    case 'SequenceExpression':
+      return recurse(node.expressions[node.expressions.length - 1])
+    case 'TSAsExpression':
+    case 'TSNonNullExpression':
+    case 'TSSatisfiesExpression':
+    case 'ParenthesizedExpression':
+      return recurse(node.expression)
+    default:
+      return false
+  }
+}
+
+/**
+ * Local names bound to glyph modules by the file's own imports, so that
+ * `<NbIcon :name="GithubLogo" />` is understood as already-linked artwork
+ * rather than as a runtime name needing the whole catalogue.
+ */
+function glyphImportLocals(script: string, packageName: string): Set<string> {
+  const locals = new Set<string>()
+  const from = packageName.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+  const pattern = new RegExp(
+    `import\\s+([^;'"\n]+?)\\s+from\\s*['"]${from}/(?:icons|flags)/[^'"]+['"]`,
+    'g',
+  )
+  for (const match of script.matchAll(pattern)) {
+    const clause = match[1]
+    const namespace = clause.match(/\*\s+as\s+(\w+)/)
+    if (namespace) locals.add(namespace[1])
+    const defaultImport = clause.match(/^\s*(\w+)/)
+    if (defaultImport) locals.add(defaultImport[1])
+    const named = clause.match(/\{([^}]*)\}/)
+    if (named) {
+      for (const part of named[1].split(',')) {
+        const local = part
+          .trim()
+          .split(/\s+as\s+/)
+          .pop()
+          ?.trim()
+        if (local) locals.add(local)
+      }
+    }
+  }
+  return locals
+}
+
 function staticPropKind(
   name: string,
   isIcon: boolean,
@@ -157,6 +259,7 @@ export function nubiscoGlyphs(options: IGlyphOptions = {}) {
     flags = true,
     packageName = '@nubisco/ui',
     verbose = false,
+    warnUnresolved = true,
   } = options
 
   const glyphRoot = options.glyphRoot ?? defaultGlyphRoot()
@@ -186,6 +289,16 @@ export function nubiscoGlyphs(options: IGlyphOptions = {}) {
       const edits: IEdit[] = []
       const used = new Map<string, IGlyphImport>()
       const catalogsNeeded = new Set<TKind>()
+      const unresolvedForwards: { tag: string; prop: string; exp: string }[] =
+        []
+
+      // Artwork the file already imports by hand counts as linked: binding an
+      // imported module is the documented no-plugin path, and pulling a
+      // catalogue in on top of it would be pure waste.
+      const glyphLocals = glyphImportLocals(
+        `${descriptor.scriptSetup?.content ?? ''}\n${descriptor.script?.content ?? ''}`,
+        packageName,
+      )
 
       const use = (glyph: IGlyphImport) => {
         const variable = identifierFor(glyph)
@@ -229,17 +342,18 @@ export function nubiscoGlyphs(options: IGlyphOptions = {}) {
             continue
           }
 
-          /* ---- bound: :name="…" on NbIcon / NbFlag --------------------- */
+          /* ---- bound: :name="…", :icon="…", :flag="…" ------------------ */
           if (
             prop.type === NODE_DIRECTIVE &&
             prop.name === 'bind' &&
             prop.arg?.type === EXPR_SIMPLE &&
-            prop.exp?.type === EXPR_SIMPLE &&
-            (isIcon || isFlag)
+            prop.exp?.type === EXPR_SIMPLE
           ) {
-            const kind: TKind = isIcon ? 'icon' : 'flag'
-            if (!enabled(kind)) continue
-            if (!['name', 'icon', 'flag'].includes(prop.arg.content)) continue
+            // Same rule as the static branch, so `:icon="a ? 'check' : 'copy'"`
+            // links the two icons whether it is written on NbIcon or forwarded
+            // through NbButton. Only the tag decides the kind.
+            const kind = staticPropKind(prop.arg.content, isIcon, isFlag)
+            if (!kind || !enabled(kind)) continue
 
             const expression: string = prop.exp.content
             const rewritten = expression.replace(
@@ -262,16 +376,52 @@ export function nubiscoGlyphs(options: IGlyphOptions = {}) {
               })
             }
 
-            // Considered resolved when every value the expression can produce
-            // is one of the modules just imported: at least one appears, and
-            // no string literal survived that could not be accounted for.
-            const resolved =
-              rewritten.includes('__nb_') && !/['"]/.test(rewritten)
-            if (!resolved) catalogsNeeded.add(kind)
+            const resolved = producesOnlyLinkedGlyphs(
+              parseExpression(rewritten),
+              (identifier) =>
+                used.has(identifier) || glyphLocals.has(identifier),
+            )
+            if (resolved) continue
+
+            // On NbIcon or NbFlag an unresolvable name is fatal at first
+            // render, so the catalogue is the only thing that can save it. On
+            // a forwarding component the same expression may just as well be
+            // a module arriving as a prop, and linking 1,500 icons on that
+            // guess would make the common wrapper the most expensive file in
+            // the bundle. So that case is reported rather than paid for.
+            if (isIcon || isFlag) catalogsNeeded.add(kind)
+            else
+              unresolvedForwards.push({
+                tag,
+                prop: prop.arg.content,
+                exp: expression,
+              })
           }
         }
       })
 
+      // One line per file, however many bindings it has: this is a note about
+      // the file, and repeating the same advice per expression would train
+      // people to skip it.
+      if (warnUnresolved && unresolvedForwards.length) {
+        const kinds = new Set(unresolvedForwards.map((f) => f.prop))
+        const register = kinds.has('flag')
+          ? 'registerFlags()'
+          : 'registerIcons()'
+        const catalogue = `${packageName}/${kinds.has('flag') ? 'flags' : 'icons'}/all`
+        console.warn(
+          `[nubisco-ui] ${path.relative(process.cwd(), file)}: no artwork ` +
+            `linked for ` +
+            unresolvedForwards
+              .map((f) => `<${f.tag} :${f.prop}="${f.exp}">`)
+              .join(', ') +
+            `. The value is only known at runtime, so it will throw on first ` +
+            `render unless something resolves it: ${register} for a known ` +
+            `set, or import '${catalogue}' in this file. Nothing to do if ` +
+            `these are pass-through props (set warnUnresolved: false).`,
+        )
+      }
+
       if (!used.size && !catalogsNeeded.size) return
 
       const imports: string[] = []

package/dist/BarChart-B3WKey-r.cjs

@@ -1 +0,0 @@
-require(`./chunk-D-qHiVGv.cjs`);const e=require(`./_plugin-vue_export-helper-tagjRzOz.cjs`),t=require(`./palette-73dy8s3C.cjs`),n=require(`./ChartLegend-CkL6V-U_.cjs`),r=require(`./scales-Bzt05iAE.cjs`),i=require(`./useChartSize-xKPzLmex.cjs`);let a=require(`vue`);var o=[`width`,`height`,`aria-label`],s={key:0},c=[`x1`,`x2`,`y1`,`y2`],l={class:`nb-chart__axis`},u=[`x`,`y`],d={class:`nb-chart__axis`},f=[`x`,`y`],p=[`x1`,`x2`,`y1`,`y2`],m=[`x`,`y`,`width`,`height`,`fill`],h={class:`nb-chart__hover-layer`},g=[`x`,`y`,`width`,`height`,`onMouseenter`,`onMousemove`],_=(0,a.defineComponent)({__name:`BarChart`,props:{series:{default:()=>[]},orientation:{default:`vertical`},stacked:{type:Boolean,default:!1},title:{default:void 0},subtitle:{default:void 0},height:{default:280},showLegend:{type:Boolean,default:!0},showTooltip:{type:Boolean,default:!0},showGrid:{type:Boolean,default:!0},colors:{default:()=>t.n}},setup(e){let _=e,v={top:12,right:16,bottom:28,left:44},y=(0,a.ref)(null),b=i.t(y,{width:480,height:240}),x=(0,a.computed)(()=>_.series.map((e,n)=>({name:e.name,data:e.data,color:e.color??t.i(n,_.colors)}))),S=(0,a.computed)(()=>(_.series[0]?.data??[]).map(e=>e.x)),C=(0,a.computed)(()=>{let e=_.series.flatMap(e=>e.data.map(e=>e.y));return e.length?r.i(Math.min(0,...e),Math.max(0,...e),.05):[0,1]}),w=(0,a.computed)(()=>r.t(S.value.map(e=>String(e)),[v.left,Math.max(v.left,b.value.width-v.right)],.2)),T=(0,a.computed)(()=>r.r(C.value,[Math.max(v.top,b.value.height-v.bottom),v.top])),E=(0,a.computed)(()=>T.value.ticks(5)),D=(0,a.computed)(()=>x.value.length?w.value.bandwidth/x.value.length:w.value.bandwidth),O=e=>e>=0?T.value(e):T.value(0),k=e=>e>=0?Math.max(0,T.value(0)-T.value(e)):Math.max(0,T.value(e)-T.value(0)),A=e=>Math.abs(e)>=1e3?`${(e/1e3).toFixed(1)}k`:String(e),j=(0,a.ref)(null),M=(0,a.ref)({x:0,y:0}),N=(e,t)=>{let n=e.currentTarget.ownerSVGElement;if(!n)return;let r=n.getBoundingClientRect();M.value={x:e.clientX-r.left+12,y:e.clientY-r.top+12},j.value=t},P=(0,a.computed)(()=>j.value===null?[]:x.value.map(e=>({label:e.name,value:A(e.data[j.value]?.y??0),color:e.color})));return(r,i)=>((0,a.openBlock)(),(0,a.createBlock)(t.u,{title:e.title,subtitle:e.subtitle,height:e.height,"show-legend":e.showLegend&&x.value.length>0},{legend:(0,a.withCtx)(()=>[(0,a.createVNode)(n.t,{items:x.value.map(e=>({label:e.name,color:e.color}))},null,8,[`items`])]),default:(0,a.withCtx)(()=>[(0,a.createElementVNode)(`div`,{ref_key:`root`,ref:y,class:`nb-bar-chart`},[((0,a.openBlock)(),(0,a.createElementBlock)(`svg`,{width:(0,a.unref)(b).width,height:(0,a.unref)(b).height,class:`nb-chart__svg`,role:`img`,"aria-label":e.title||`Bar chart`,onMouseleave:i[0]||=e=>j.value=null},[e.showGrid&&(0,a.unref)(b).width>0?((0,a.openBlock)(),(0,a.createElementBlock)(`g`,s,[((0,a.openBlock)(!0),(0,a.createElementBlock)(a.Fragment,null,(0,a.renderList)(E.value,e=>((0,a.openBlock)(),(0,a.createElementBlock)(`line`,{key:`grid-${e}`,class:`nb-chart__gridline`,x1:v.left,x2:(0,a.unref)(b).width-v.right,y1:T.value(e),y2:T.value(e)},null,8,c))),128))])):(0,a.createCommentVNode)(``,!0),(0,a.createElementVNode)(`g`,l,[((0,a.openBlock)(!0),(0,a.createElementBlock)(a.Fragment,null,(0,a.renderList)(E.value,e=>((0,a.openBlock)(),(0,a.createElementBlock)(`text`,{key:`yt-${e}`,x:v.left-6,y:T.value(e),"text-anchor":`end`,"dominant-baseline":`middle`},(0,a.toDisplayString)(A(e)),9,u))),128))]),(0,a.createElementVNode)(`g`,d,[((0,a.openBlock)(!0),(0,a.createElementBlock)(a.Fragment,null,(0,a.renderList)(S.value,(e,t)=>((0,a.openBlock)(),(0,a.createElementBlock)(`text`,{key:`xt-${t}`,x:w.value(String(e))+w.value.bandwidth/2,y:(0,a.unref)(b).height-v.bottom+14,"text-anchor":`middle`},(0,a.toDisplayString)(e),9,f))),128))]),(0,a.createElementVNode)(`line`,{class:`nb-chart__axis-line`,x1:v.left,x2:(0,a.unref)(b).width-v.right,y1:T.value(0),y2:T.value(0)},null,8,p),((0,a.openBlock)(!0),(0,a.createElementBlock)(a.Fragment,null,(0,a.renderList)(S.value,(e,t)=>((0,a.openBlock)(),(0,a.createElementBlock)(`g`,{key:`g-${t}`},[((0,a.openBlock)(!0),(0,a.createElementBlock)(a.Fragment,null,(0,a.renderList)(x.value,(n,r)=>((0,a.openBlock)(),(0,a.createElementBlock)(`rect`,{key:`${t}-${r}`,class:(0,a.normalizeClass)([`nb-chart__bar`,{"is-dim":j.value!==null&&j.value!==t}]),x:w.value(String(e))+r*D.value,y:O(n.data[t]?.y??0),width:Math.max(0,D.value-2),height:k(n.data[t]?.y??0),fill:n.color},null,10,m))),128))]))),128)),(0,a.createElementVNode)(`g`,h,[((0,a.openBlock)(!0),(0,a.createElementBlock)(a.Fragment,null,(0,a.renderList)(S.value,(e,t)=>((0,a.openBlock)(),(0,a.createElementBlock)(`rect`,{key:`hover-${t}`,x:w.value(String(e)),y:v.top,width:w.value.bandwidth,height:Math.max(0,(0,a.unref)(b).height-v.top-v.bottom),fill:`transparent`,onMouseenter:e=>j.value=t,onMousemove:e=>N(e,t)},null,40,g))),128))])],40,o)),(0,a.createVNode)(t.l,{visible:e.showTooltip&&j.value!==null,x:M.value.x,y:M.value.y,title:j.value===null?``:String(S.value[j.value]),rows:P.value},null,8,[`visible`,`x`,`y`,`title`,`rows`])],512)]),_:1},8,[`title`,`subtitle`,`height`,`show-legend`]))}}),v=e.t(_,[[`__scopeId`,`data-v-452a9823`]]);Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return v}});

package/dist/BarChart-DYgJdP0G.js

@@ -1,185 +0,0 @@
-import { t as e } from "./_plugin-vue_export-helper-O4QQSku4.js";
-import { i as t, l as n, n as r, u as i } from "./palette-DpTb1uUD.js";
-import { t as a } from "./ChartLegend-DvjSe_3l.js";
-import { i as o, r as s, t as c } from "./scales-DzXsYt4Z.js";
-import { t as l } from "./useChartSize-B6TdJSnI.js";
-import { Fragment as u, computed as d, createBlock as f, createCommentVNode as p, createElementBlock as m, createElementVNode as h, createVNode as g, defineComponent as _, normalizeClass as v, openBlock as y, ref as b, renderList as x, toDisplayString as S, unref as C, withCtx as w } from "vue";
-//#region src/components/Charts/BarChart.vue?vue&type=script&setup=true&lang.ts
-var T = [
-	"width",
-	"height",
-	"aria-label"
-], E = { key: 0 }, D = [
-	"x1",
-	"x2",
-	"y1",
-	"y2"
-], O = { class: "nb-chart__axis" }, k = ["x", "y"], A = { class: "nb-chart__axis" }, j = ["x", "y"], M = [
-	"x1",
-	"x2",
-	"y1",
-	"y2"
-], N = [
-	"x",
-	"y",
-	"width",
-	"height",
-	"fill"
-], P = { class: "nb-chart__hover-layer" }, F = [
-	"x",
-	"y",
-	"width",
-	"height",
-	"onMouseenter",
-	"onMousemove"
-], I = /* @__PURE__ */ e(/* @__PURE__ */ _({
-	__name: "BarChart",
-	props: {
-		series: { default: () => [] },
-		orientation: { default: "vertical" },
-		stacked: {
-			type: Boolean,
-			default: !1
-		},
-		title: { default: void 0 },
-		subtitle: { default: void 0 },
-		height: { default: 280 },
-		showLegend: {
-			type: Boolean,
-			default: !0
-		},
-		showTooltip: {
-			type: Boolean,
-			default: !0
-		},
-		showGrid: {
-			type: Boolean,
-			default: !0
-		},
-		colors: { default: () => r }
-	},
-	setup(e) {
-		let r = e, _ = {
-			top: 12,
-			right: 16,
-			bottom: 28,
-			left: 44
-		}, I = b(null), L = l(I, {
-			width: 480,
-			height: 240
-		}), R = d(() => r.series.map((e, n) => ({
-			name: e.name,
-			data: e.data,
-			color: e.color ?? t(n, r.colors)
-		}))), z = d(() => (r.series[0]?.data ?? []).map((e) => e.x)), B = d(() => {
-			let e = r.series.flatMap((e) => e.data.map((e) => e.y));
-			return e.length ? o(Math.min(0, ...e), Math.max(0, ...e), .05) : [0, 1];
-		}), V = d(() => c(z.value.map((e) => String(e)), [_.left, Math.max(_.left, L.value.width - _.right)], .2)), H = d(() => s(B.value, [Math.max(_.top, L.value.height - _.bottom), _.top])), U = d(() => H.value.ticks(5)), W = d(() => R.value.length ? V.value.bandwidth / R.value.length : V.value.bandwidth), G = (e) => e >= 0 ? H.value(e) : H.value(0), K = (e) => e >= 0 ? Math.max(0, H.value(0) - H.value(e)) : Math.max(0, H.value(e) - H.value(0)), q = (e) => Math.abs(e) >= 1e3 ? `${(e / 1e3).toFixed(1)}k` : String(e), J = b(null), Y = b({
-			x: 0,
-			y: 0
-		}), X = (e, t) => {
-			let n = e.currentTarget.ownerSVGElement;
-			if (!n) return;
-			let r = n.getBoundingClientRect();
-			Y.value = {
-				x: e.clientX - r.left + 12,
-				y: e.clientY - r.top + 12
-			}, J.value = t;
-		}, Z = d(() => J.value === null ? [] : R.value.map((e) => ({
-			label: e.name,
-			value: q(e.data[J.value]?.y ?? 0),
-			color: e.color
-		})));
-		return (t, r) => (y(), f(i, {
-			title: e.title,
-			subtitle: e.subtitle,
-			height: e.height,
-			"show-legend": e.showLegend && R.value.length > 0
-		}, {
-			legend: w(() => [g(a, { items: R.value.map((e) => ({
-				label: e.name,
-				color: e.color
-			})) }, null, 8, ["items"])]),
-			default: w(() => [h("div", {
-				ref_key: "root",
-				ref: I,
-				class: "nb-bar-chart"
-			}, [(y(), m("svg", {
-				width: C(L).width,
-				height: C(L).height,
-				class: "nb-chart__svg",
-				role: "img",
-				"aria-label": e.title || "Bar chart",
-				onMouseleave: r[0] ||= (e) => J.value = null
-			}, [
-				e.showGrid && C(L).width > 0 ? (y(), m("g", E, [(y(!0), m(u, null, x(U.value, (e) => (y(), m("line", {
-					key: `grid-${e}`,
-					class: "nb-chart__gridline",
-					x1: _.left,
-					x2: C(L).width - _.right,
-					y1: H.value(e),
-					y2: H.value(e)
-				}, null, 8, D))), 128))])) : p("", !0),
-				h("g", O, [(y(!0), m(u, null, x(U.value, (e) => (y(), m("text", {
-					key: `yt-${e}`,
-					x: _.left - 6,
-					y: H.value(e),
-					"text-anchor": "end",
-					"dominant-baseline": "middle"
-				}, S(q(e)), 9, k))), 128))]),
-				h("g", A, [(y(!0), m(u, null, x(z.value, (e, t) => (y(), m("text", {
-					key: `xt-${t}`,
-					x: V.value(String(e)) + V.value.bandwidth / 2,
-					y: C(L).height - _.bottom + 14,
-					"text-anchor": "middle"
-				}, S(e), 9, j))), 128))]),
-				h("line", {
-					class: "nb-chart__axis-line",
-					x1: _.left,
-					x2: C(L).width - _.right,
-					y1: H.value(0),
-					y2: H.value(0)
-				}, null, 8, M),
-				(y(!0), m(u, null, x(z.value, (e, t) => (y(), m("g", { key: `g-${t}` }, [(y(!0), m(u, null, x(R.value, (n, r) => (y(), m("rect", {
-					key: `${t}-${r}`,
-					class: v(["nb-chart__bar", { "is-dim": J.value !== null && J.value !== t }]),
-					x: V.value(String(e)) + r * W.value,
-					y: G(n.data[t]?.y ?? 0),
-					width: Math.max(0, W.value - 2),
-					height: K(n.data[t]?.y ?? 0),
-					fill: n.color
-				}, null, 10, N))), 128))]))), 128)),
-				h("g", P, [(y(!0), m(u, null, x(z.value, (e, t) => (y(), m("rect", {
-					key: `hover-${t}`,
-					x: V.value(String(e)),
-					y: _.top,
-					width: V.value.bandwidth,
-					height: Math.max(0, C(L).height - _.top - _.bottom),
-					fill: "transparent",
-					onMouseenter: (e) => J.value = t,
-					onMousemove: (e) => X(e, t)
-				}, null, 40, F))), 128))])
-			], 40, T)), g(n, {
-				visible: e.showTooltip && J.value !== null,
-				x: Y.value.x,
-				y: Y.value.y,
-				title: J.value === null ? "" : String(z.value[J.value]),
-				rows: Z.value
-			}, null, 8, [
-				"visible",
-				"x",
-				"y",
-				"title",
-				"rows"
-			])], 512)]),
-			_: 1
-		}, 8, [
-			"title",
-			"subtitle",
-			"height",
-			"show-legend"
-		]));
-	}
-}), [["__scopeId", "data-v-452a9823"]]);
-//#endregion
-export { I as t };

package/dist/PieChart-Ddw9Ixu2.cjs

@@ -1 +0,0 @@
-require(`./chunk-D-qHiVGv.cjs`);const e=require(`./_plugin-vue_export-helper-tagjRzOz.cjs`),t=require(`./palette-73dy8s3C.cjs`),n=require(`./ChartLegend-CkL6V-U_.cjs`),r=require(`./useChartSize-xKPzLmex.cjs`);let i=require(`vue`);var a=[`width`,`height`,`aria-label`],o=[`transform`],s=[`d`,`fill`,`onMouseenter`],c=[`x`,`y`],l=(0,i.defineComponent)({__name:`PieChart`,props:{data:{default:()=>[]},innerRadius:{default:0},labels:{default:`percent`},title:{default:void 0},subtitle:{default:void 0},height:{default:280},showLegend:{type:Boolean,default:!0},showTooltip:{type:Boolean,default:!0},colors:{default:()=>t.n}},setup(e){let l=e,u=(0,i.ref)(null),d=r.t(u,{width:280,height:240}),f=(0,i.computed)(()=>l.data.map((e,n)=>({label:e.label,value:e.value,color:e.color??t.i(n,l.colors)}))),p=(0,i.computed)(()=>f.value.reduce((e,t)=>e+Math.max(0,t.value),0)),m=(0,i.computed)(()=>d.value.width/2),h=(0,i.computed)(()=>d.value.height/2),g=(0,i.computed)(()=>Math.max(0,Math.min(d.value.width,d.value.height)/2-8)),_=(0,i.computed)(()=>Math.max(0,Math.min(.95,l.innerRadius))*g.value),v=(0,i.computed)(()=>{if(!p.value)return[];let e=-Math.PI/2,t=[];for(let n=0;n<f.value.length;n++){let r=f.value[n],i=Math.max(0,r.value)/p.value,a=e,o=e+i*Math.PI*2;e=o;let s=y(a,o,_.value,g.value),c=(a+o)/2,u=_.value>0?(_.value+g.value)/2:g.value*.65,d=Math.cos(c)*u,m=Math.sin(c)*u,h=l.labels===`percent`?`${Math.round(i*100)}%`:l.labels===`value`?String(r.value):``;t.push({path:s,color:r.color,labelX:d,labelY:m,labelText:h,labelColor:`var(--nb-c-white)`,startAngle:a,endAngle:o,value:r.value,label:r.label})}return t}),y=(e,t,n,r)=>{if(Math.abs(t-e)>=Math.PI*2-1e-6){let e=`M ${r} 0 A ${r} ${r} 0 1 1 ${-r} 0 A ${r} ${r} 0 1 1 ${r} 0 Z`;return n<=0?e:`${e} ${`M ${n} 0 A ${n} ${n} 0 1 0 ${-n} 0 A ${n} ${n} 0 1 0 ${n} 0 Z`}`}let i=Math.cos(e)*r,a=Math.sin(e)*r,o=Math.cos(t)*r,s=Math.sin(t)*r,c=t-e>Math.PI?1:0;if(n<=0)return`M 0 0 L ${i} ${a} A ${r} ${r} 0 ${c} 1 ${o} ${s} Z`;let l=Math.cos(t)*n,u=Math.sin(t)*n,d=Math.cos(e)*n,f=Math.sin(e)*n;return[`M ${i} ${a}`,`A ${r} ${r} 0 ${c} 1 ${o} ${s}`,`L ${l} ${u}`,`A ${n} ${n} 0 ${c} 0 ${d} ${f}`,`Z`].join(` `)},b=(0,i.ref)(null),x=(0,i.ref)({x:0,y:0}),S=e=>{let t=e.currentTarget.ownerSVGElement;if(!t)return;let n=t.getBoundingClientRect();x.value={x:e.clientX-n.left+12,y:e.clientY-n.top+12}},C=(0,i.computed)(()=>{if(b.value===null)return[];let e=v.value[b.value];if(!e)return[];let t=p.value?Math.round(e.value/p.value*100):0;return[{label:e.label,value:`${e.value} (${t}%)`,color:e.color}]});return(r,l)=>((0,i.openBlock)(),(0,i.createBlock)(t.u,{title:e.title,subtitle:e.subtitle,height:e.height,"show-legend":e.showLegend&&f.value.length>0},{legend:(0,i.withCtx)(()=>[(0,i.createVNode)(n.t,{items:f.value.map(e=>({label:e.label,color:e.color}))},null,8,[`items`])]),default:(0,i.withCtx)(()=>[(0,i.createElementVNode)(`div`,{ref_key:`root`,ref:u,class:`nb-pie-chart`},[((0,i.openBlock)(),(0,i.createElementBlock)(`svg`,{width:(0,i.unref)(d).width,height:(0,i.unref)(d).height,class:`nb-chart__svg`,role:`img`,"aria-label":e.title||`Pie chart`,onMouseleave:l[1]||=e=>b.value=null},[(0,i.createElementVNode)(`g`,{transform:`translate(${m.value}, ${h.value})`},[((0,i.openBlock)(!0),(0,i.createElementBlock)(i.Fragment,null,(0,i.renderList)(v.value,(e,t)=>((0,i.openBlock)(),(0,i.createElementBlock)(`path`,{key:`slice-${t}`,class:(0,i.normalizeClass)([`nb-chart__slice`,{"is-dim":b.value!==null&&b.value!==t}]),d:e.path,fill:e.color,onMouseenter:e=>b.value=t,onMousemove:l[0]||=e=>S(e)},null,42,s))),128)),e.labels===`none`?(0,i.createCommentVNode)(``,!0):((0,i.openBlock)(!0),(0,i.createElementBlock)(i.Fragment,{key:0},(0,i.renderList)(v.value,(e,t)=>((0,i.openBlock)(),(0,i.createElementBlock)(`text`,{key:`lab-${t}`,class:`nb-chart__slice-label`,x:e.labelX,y:e.labelY,"text-anchor":`middle`,"dominant-baseline":`middle`,style:(0,i.normalizeStyle)({fill:e.labelColor})},(0,i.toDisplayString)(e.labelText),13,c))),128))],8,o)],40,a)),(0,i.createVNode)(t.l,{visible:e.showTooltip&&b.value!==null,x:x.value.x,y:x.value.y,rows:C.value},null,8,[`visible`,`x`,`y`,`rows`])],512)]),_:1},8,[`title`,`subtitle`,`height`,`show-legend`]))}}),u=e.t(l,[[`__scopeId`,`data-v-26bfcb67`]]);Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return u}});

package/dist/PieChart-E0Q6WOuT.js

@@ -1,157 +0,0 @@
-import { t as e } from "./_plugin-vue_export-helper-O4QQSku4.js";
-import { i as t, l as n, n as r, u as i } from "./palette-DpTb1uUD.js";
-import { t as a } from "./ChartLegend-DvjSe_3l.js";
-import { t as o } from "./useChartSize-B6TdJSnI.js";
-import { Fragment as s, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createVNode as p, defineComponent as m, normalizeClass as h, normalizeStyle as g, openBlock as _, ref as v, renderList as y, toDisplayString as b, unref as x, withCtx as S } from "vue";
-//#region src/components/Charts/PieChart.vue?vue&type=script&setup=true&lang.ts
-var C = [
-	"width",
-	"height",
-	"aria-label"
-], w = ["transform"], T = [
-	"d",
-	"fill",
-	"onMouseenter"
-], E = ["x", "y"], D = /* @__PURE__ */ e(/* @__PURE__ */ m({
-	__name: "PieChart",
-	props: {
-		data: { default: () => [] },
-		innerRadius: { default: 0 },
-		labels: { default: "percent" },
-		title: { default: void 0 },
-		subtitle: { default: void 0 },
-		height: { default: 280 },
-		showLegend: {
-			type: Boolean,
-			default: !0
-		},
-		showTooltip: {
-			type: Boolean,
-			default: !0
-		},
-		colors: { default: () => r }
-	},
-	setup(e) {
-		let r = e, m = v(null), D = o(m, {
-			width: 280,
-			height: 240
-		}), O = c(() => r.data.map((e, n) => ({
-			label: e.label,
-			value: e.value,
-			color: e.color ?? t(n, r.colors)
-		}))), k = c(() => O.value.reduce((e, t) => e + Math.max(0, t.value), 0)), A = c(() => D.value.width / 2), j = c(() => D.value.height / 2), M = c(() => Math.max(0, Math.min(D.value.width, D.value.height) / 2 - 8)), N = c(() => Math.max(0, Math.min(.95, r.innerRadius)) * M.value), P = c(() => {
-			if (!k.value) return [];
-			let e = -Math.PI / 2, t = [];
-			for (let n = 0; n < O.value.length; n++) {
-				let i = O.value[n], a = Math.max(0, i.value) / k.value, o = e, s = e + a * Math.PI * 2;
-				e = s;
-				let c = F(o, s, N.value, M.value), l = (o + s) / 2, u = N.value > 0 ? (N.value + M.value) / 2 : M.value * .65, d = Math.cos(l) * u, f = Math.sin(l) * u, p = r.labels === "percent" ? `${Math.round(a * 100)}%` : r.labels === "value" ? String(i.value) : "";
-				t.push({
-					path: c,
-					color: i.color,
-					labelX: d,
-					labelY: f,
-					labelText: p,
-					labelColor: "var(--nb-c-white)",
-					startAngle: o,
-					endAngle: s,
-					value: i.value,
-					label: i.label
-				});
-			}
-			return t;
-		}), F = (e, t, n, r) => {
-			if (Math.abs(t - e) >= Math.PI * 2 - 1e-6) {
-				let e = `M ${r} 0 A ${r} ${r} 0 1 1 ${-r} 0 A ${r} ${r} 0 1 1 ${r} 0 Z`;
-				return n <= 0 ? e : `${e} ${`M ${n} 0 A ${n} ${n} 0 1 0 ${-n} 0 A ${n} ${n} 0 1 0 ${n} 0 Z`}`;
-			}
-			let i = Math.cos(e) * r, a = Math.sin(e) * r, o = Math.cos(t) * r, s = Math.sin(t) * r, c = t - e > Math.PI ? 1 : 0;
-			if (n <= 0) return `M 0 0 L ${i} ${a} A ${r} ${r} 0 ${c} 1 ${o} ${s} Z`;
-			let l = Math.cos(t) * n, u = Math.sin(t) * n, d = Math.cos(e) * n, f = Math.sin(e) * n;
-			return [
-				`M ${i} ${a}`,
-				`A ${r} ${r} 0 ${c} 1 ${o} ${s}`,
-				`L ${l} ${u}`,
-				`A ${n} ${n} 0 ${c} 0 ${d} ${f}`,
-				"Z"
-			].join(" ");
-		}, I = v(null), L = v({
-			x: 0,
-			y: 0
-		}), R = (e) => {
-			let t = e.currentTarget.ownerSVGElement;
-			if (!t) return;
-			let n = t.getBoundingClientRect();
-			L.value = {
-				x: e.clientX - n.left + 12,
-				y: e.clientY - n.top + 12
-			};
-		}, z = c(() => {
-			if (I.value === null) return [];
-			let e = P.value[I.value];
-			if (!e) return [];
-			let t = k.value ? Math.round(e.value / k.value * 100) : 0;
-			return [{
-				label: e.label,
-				value: `${e.value} (${t}%)`,
-				color: e.color
-			}];
-		});
-		return (t, r) => (_(), l(i, {
-			title: e.title,
-			subtitle: e.subtitle,
-			height: e.height,
-			"show-legend": e.showLegend && O.value.length > 0
-		}, {
-			legend: S(() => [p(a, { items: O.value.map((e) => ({
-				label: e.label,
-				color: e.color
-			})) }, null, 8, ["items"])]),
-			default: S(() => [f("div", {
-				ref_key: "root",
-				ref: m,
-				class: "nb-pie-chart"
-			}, [(_(), d("svg", {
-				width: x(D).width,
-				height: x(D).height,
-				class: "nb-chart__svg",
-				role: "img",
-				"aria-label": e.title || "Pie chart",
-				onMouseleave: r[1] ||= (e) => I.value = null
-			}, [f("g", { transform: `translate(${A.value}, ${j.value})` }, [(_(!0), d(s, null, y(P.value, (e, t) => (_(), d("path", {
-				key: `slice-${t}`,
-				class: h(["nb-chart__slice", { "is-dim": I.value !== null && I.value !== t }]),
-				d: e.path,
-				fill: e.color,
-				onMouseenter: (e) => I.value = t,
-				onMousemove: r[0] ||= (e) => R(e)
-			}, null, 42, T))), 128)), e.labels === "none" ? u("", !0) : (_(!0), d(s, { key: 0 }, y(P.value, (e, t) => (_(), d("text", {
-				key: `lab-${t}`,
-				class: "nb-chart__slice-label",
-				x: e.labelX,
-				y: e.labelY,
-				"text-anchor": "middle",
-				"dominant-baseline": "middle",
-				style: g({ fill: e.labelColor })
-			}, b(e.labelText), 13, E))), 128))], 8, w)], 40, C)), p(n, {
-				visible: e.showTooltip && I.value !== null,
-				x: L.value.x,
-				y: L.value.y,
-				rows: z.value
-			}, null, 8, [
-				"visible",
-				"x",
-				"y",
-				"rows"
-			])], 512)]),
-			_: 1
-		}, 8, [
-			"title",
-			"subtitle",
-			"height",
-			"show-legend"
-		]));
-	}
-}), [["__scopeId", "data-v-26bfcb67"]]);
-//#endregion
-export { D as t };