@nubisco/ui 4.1.1 → 4.1.2

package/src/plugins/vite/imports.ts

@@ -0,0 +1,192 @@
+import MagicString from 'magic-string'
+import { parse, babelParse } from 'vue/compiler-sfc'
+
+/**
+ * Makes a hand-written component import behave like an auto-imported one.
+ *
+ * The library ships one stylesheet per chunk, and the auto-import resolver
+ * declares each component's sheets as side effects so the bundler links them
+ * next to the component. That only happens for tags the resolver saw. An app
+ * that writes its imports by hand:
+ *
+ * ```ts
+ * import { NbButton, NbPanel } from '@nubisco/ui'
+ * ```
+ *
+ * never went through the resolver, so it got no stylesheets at all. With
+ * `styles: true` (the default) and the `@nubisco/ui/css` import dropped, as
+ * the upgrade guide said to, that shipped an app with no component CSS: every
+ * page rendered unstyled, and nothing failed. The CSS bundle still looked
+ * plausible, because the app's own styles and the design tokens were still in
+ * it.
+ *
+ * So this plugin gives the same treatment to imports the app wrote itself:
+ *
+ * 1. A named component imported from the barrel is rewritten to its own entry
+ *    point, which is what the resolver would have emitted, and which also
+ *    stops the barrel from pulling in every other component.
+ * 2. Either way, that component's stylesheets are imported alongside it.
+ *
+ * Names the manifest does not know (composables, types, `registerIcons`) stay
+ * on the barrel import untouched, and a namespace or default import is left
+ * alone entirely, since there is no way to tell from it which components the
+ * file actually uses.
+ */
+
+interface INubiscoImportOptions {
+  /** `Nb*` name to entry file, from the component manifest. */
+  manifest: Map<string, string>
+  /** Which stylesheets each component entry needs. */
+  styleManifest: Record<string, string[]>
+  /** Inject stylesheets. When false this plugin only rewrites imports. */
+  styles: boolean
+  packageName: string
+  /** Called with the number of components resolved in a file. */
+  onResolve: (count: number) => void
+}
+
+interface IScriptBlock {
+  content: string
+  offset: number
+}
+
+/** The script of a `.vue` file, or the whole module for a plain script. */
+function scriptBlocks(code: string, file: string): IScriptBlock[] {
+  if (!file.endsWith('.vue')) return [{ content: code, offset: 0 }]
+  const { descriptor, errors } = parse(code, { filename: file })
+  if (errors.length) return []
+  return [descriptor.script, descriptor.scriptSetup]
+    .filter((block): block is NonNullable<typeof block> => Boolean(block))
+    .map((block) => ({
+      content: block.content,
+      offset: block.loc.start.offset,
+    }))
+}
+
+interface ISpecifier {
+  imported: string
+  local: string
+}
+
+export function nubiscoImports(options: INubiscoImportOptions) {
+  const { manifest, styleManifest, styles, packageName, onResolve } = options
+  const componentPrefix = `${packageName}/components/`
+
+  return {
+    name: 'nubisco-ui:imports',
+    enforce: 'pre' as const,
+
+    transform(code: string, id: string) {
+      const file = id.split('?')[0]
+      if (file.includes('/node_modules/')) return
+      if (!/\.(vue|[cm]?[jt]sx?)$/.test(file)) return
+      if (!code.includes(packageName)) return
+
+      const magic = new MagicString(code)
+      const sheetsSeen = new Set<string>()
+      let resolved = 0
+      let changed = false
+
+      // Stylesheets are appended after the import they belong to, so they
+      // land in the consumer's module graph in the order the resolver would
+      // have produced.
+      const sheetsFor = (entry: string) => {
+        if (!styles) return ''
+        const sheets = (styleManifest[entry] ?? []).filter(
+          (sheet) => !sheetsSeen.has(sheet),
+        )
+        sheets.forEach((sheet) => sheetsSeen.add(sheet))
+        return sheets
+          .map((sheet) => `\nimport '${packageName}/dist/${sheet}'`)
+          .join('')
+      }
+
+      for (const block of scriptBlocks(code, file)) {
+        let program
+        try {
+          program = babelParse(block.content, {
+            sourceType: 'module',
+            plugins: ['typescript', 'jsx'],
+          }).program
+        } catch {
+          // Not parseable on its own: the Vue plugin will report it.
+          continue
+        }
+
+        for (const node of program.body as any[]) {
+          if (node.type !== 'ImportDeclaration') continue
+          // `import type { … }` links nothing at runtime, so it needs no
+          // stylesheet and must not be rewritten into a value import.
+          if (node.importKind === 'type') continue
+          const source: string = node.source.value
+          const start = block.offset + node.start
+          const end = block.offset + node.end
+
+          /* An entry point the app already named: it only needs its styles. */
+          if (source.startsWith(componentPrefix)) {
+            const entry = source.slice(componentPrefix.length)
+            const sheets = sheetsFor(entry)
+            resolved += 1
+            if (sheets) {
+              magic.appendRight(end, sheets)
+              changed = true
+            }
+            continue
+          }
+
+          if (source !== packageName) continue
+
+          const components: ISpecifier[] = []
+          const rest: string[] = []
+          let splittable = true
+
+          for (const specifier of node.specifiers as any[]) {
+            if (specifier.type !== 'ImportSpecifier') {
+              // A default or namespace import says nothing about which
+              // components the file uses, so it stays as it is.
+              splittable = false
+              break
+            }
+            const imported: string =
+              specifier.imported.name ?? specifier.imported.value
+            const local: string = specifier.local.name
+            if (specifier.importKind === 'type' || !manifest.has(imported)) {
+              rest.push(
+                block.content.slice(specifier.start, specifier.end).trim(),
+              )
+              continue
+            }
+            components.push({ imported, local })
+          }
+
+          if (!splittable || !components.length) continue
+
+          const lines = components.map(({ imported, local }) => {
+            const entry = manifest.get(imported) as string
+            const binding =
+              imported === local ? imported : `${imported} as ${local}`
+            return (
+              `import { ${binding} } from '${componentPrefix}${entry}'` +
+              sheetsFor(entry)
+            )
+          })
+          if (rest.length) {
+            lines.push(`import { ${rest.join(', ')} } from '${source}'`)
+          }
+
+          resolved += components.length
+          magic.overwrite(start, end, lines.join('\n'))
+          changed = true
+        }
+      }
+
+      onResolve(resolved)
+      if (!changed) return
+
+      return {
+        code: magic.toString(),
+        map: magic.generateMap({ hires: true, source: file }),
+      }
+    },
+  }
+}

package/src/plugins/vite/index.ts

@@ -5,6 +5,7 @@ import type { Plugin } from 'vite'
 import Components from 'unplugin-vue-components/vite'
 import { COMPONENT_MANIFEST } from '../../components/manifest.js'
 import { nubiscoGlyphs, type IGlyphOptions } from './glyphs.js'
+import { nubiscoImports } from './imports.js'
 
 /**
  * Compile-time resolution for `@nubisco/ui`.
@@ -35,6 +36,10 @@ import { nubiscoGlyphs, type IGlyphOptions } from './glyphs.js'
  * what it renders and nothing else. Consumers who do not run this plugin
  * import `@nubisco/ui/css`, the whole sheet, as before.
  *
+ * A third plugin gives hand-written imports the same treatment, because an app
+ * that writes `import { NbButton } from '@nubisco/ui'` never reaches the
+ * resolver and so used to get no stylesheets at all.
+ *
  * Nothing is deferred to runtime, so SSR, prerendering and hydration behave
  * exactly as they would with hand-written imports.
  */
@@ -90,6 +95,7 @@ export function nubiscoUI(options: INubiscoUIOptions = {}): Plugin[] {
   const { components = true, glyphs = true, styles = true } = options
   const componentOptions = typeof components === 'object' ? components : {}
   const plugins: Plugin[] = []
+  let resolvedComponents = 0
 
   if (glyphs !== false) {
     plugins.push(nubiscoGlyphs(typeof glyphs === 'object' ? glyphs : {}))
@@ -101,6 +107,18 @@ export function nubiscoUI(options: INubiscoUIOptions = {}): Plugin[] {
       ? loadStyleManifest(options.distRoot ?? defaultDistRoot())
       : {}
 
+    plugins.push(
+      nubiscoImports({
+        manifest: lookup,
+        styleManifest,
+        styles,
+        packageName: '@nubisco/ui',
+        onResolve: (count) => {
+          resolvedComponents += count
+        },
+      }) as Plugin,
+    )
+
     plugins.push(
       Components({
         dirs: componentOptions.dirs ?? [],
@@ -109,6 +127,7 @@ export function nubiscoUI(options: INubiscoUIOptions = {}): Plugin[] {
           (name: string) => {
             const file = lookup.get(name)
             if (!file) return
+            resolvedComponents += 1
             const sheets = styleManifest[file] ?? []
             return {
               name,
@@ -119,6 +138,31 @@ export function nubiscoUI(options: INubiscoUIOptions = {}): Plugin[] {
         ],
       }),
     )
+
+    // A build that linked no component at all cannot have linked any component
+    // CSS either, and `styles: true` says the app is relying on this plugin
+    // for it. That combination ships an unstyled app and fails nothing, so it
+    // is worth a line. It is reachable when every usage goes through a
+    // namespace import (`import * as UI from '@nubisco/ui'`), or a dynamic
+    // one, neither of which names the components it uses.
+    if (styles) {
+      plugins.push({
+        name: 'nubisco-ui:styles-check',
+        apply: 'build',
+        closeBundle() {
+          if (resolvedComponents) return
+          console.warn(
+            `[nubisco-ui] no components were linked in this build, so none of ` +
+              `the component stylesheets were either. If this app renders ` +
+              `Nubisco components, it will render unstyled. Import them by ` +
+              `name (\`import { NbButton } from '@nubisco/ui'\`) or use the ` +
+              `tags directly so they can be resolved; or pass ` +
+              `\`nubiscoUI({ styles: false })\` and import ` +
+              `'@nubisco/ui/css' yourself.`,
+          )
+        },
+      })
+    }
   }
 
   return plugins

package/dist/InfoHint-BH3UEadb.cjs

@@ -1 +0,0 @@
-require(`./chunk-D-qHiVGv.cjs`);const e=require(`./_plugin-vue_export-helper-tagjRzOz.cjs`),t=require(`./Icon-C8R_r_In.cjs`),n=require(`./composables/useStableId.composable.cjs`),r=require(`./composables/useSurfaceLayer.composable.cjs`),i=require(`./utils/anchorPosition.helper.cjs`);let a=require(`vue`);var o=[`data-term`],s=[`aria-label`,`aria-expanded`,`aria-describedby`,`disabled`],c={key:0,class:`nb-info-hint--title`},l={class:`nb-info-hint--body`},u=(0,a.defineComponent)({__name:`InfoHint`,props:{text:{default:void 0},title:{default:void 0},term:{default:void 0},placement:{default:`top`},size:{default:14},icon:{default:`info`},label:{default:void 0},openDelay:{default:120},closeDelay:{default:140},teleportTo:{default:`body`},disabled:{type:Boolean,default:!1}},emits:[`open`,`close`,`activate`],setup(e,{expose:u,emit:d}){let f=e,p=d,m=`${n.useStableId({})}-popover`,{layerProps:h}=r.useSurfaceLayer({overlay:!0}),g=(0,a.ref)(null),_=(0,a.ref)(null),v=(0,a.ref)(!1),y=(0,a.ref)(!1),b=(0,a.ref)(f.placement),x=(0,a.ref)({top:0,left:0,arrowOffset:50}),S,C,w=(0,a.computed)(()=>({top:`${x.value.top}px`,left:`${x.value.left}px`,"--nb-info-hint-arrow-offset":`${x.value.arrowOffset}%`}));function T(){clearTimeout(S),clearTimeout(C),S=void 0,C=void 0}function E(){let e=g.value,t=_.value;if(!e||!t)return;let n=e.getBoundingClientRect(),r=t.getBoundingClientRect(),a=i.placeAnchored(n,{width:r.width,height:r.height},{side:f.placement,viewport:i.viewportSize()});b.value=a.side,x.value={top:a.top,left:a.left,arrowOffset:a.arrowOffset}}function D(){f.disabled||v.value||(T(),v.value=!0,p(`open`),(0,a.nextTick)(()=>{E(),requestAnimationFrame(E)}))}function O(){v.value&&(T(),v.value=!1,y.value=!1,p(`close`))}function k(){f.disabled||(clearTimeout(C),C=void 0,!v.value&&(S=setTimeout(D,f.openDelay)))}function A(){clearTimeout(S),S=void 0,!y.value&&(C=setTimeout(O,f.closeDelay))}function j(){if(!f.disabled){if(y.value){O();return}y.value=!0,D(),p(`activate`,f.term)}}function M(e){if(e.key===`Escape`){v.value&&(e.preventDefault(),O());return}}function N(){f.disabled||(clearTimeout(C),C=void 0,D())}function P(e){if(y.value)return;let t=e.relatedTarget;t&&_.value?.contains(t)||O()}function F(e){let t=e.target;t&&(g.value?.contains(t)||_.value?.contains(t)||O())}function I(e){e.key===`Escape`&&O()}return(0,a.watch)(v,e=>{typeof document>`u`||(e?(document.addEventListener(`pointerdown`,F,!0),document.addEventListener(`keydown`,I),window.addEventListener(`resize`,E),window.addEventListener(`scroll`,E,!0)):(document.removeEventListener(`pointerdown`,F,!0),document.removeEventListener(`keydown`,I),window.removeEventListener(`resize`,E),window.removeEventListener(`scroll`,E,!0)))}),(0,a.watch)(()=>f.disabled,e=>{e&&O()}),(0,a.onBeforeUnmount)(()=>{T(),!(typeof document>`u`)&&(document.removeEventListener(`pointerdown`,F,!0),document.removeEventListener(`keydown`,I),window.removeEventListener(`resize`,E),window.removeEventListener(`scroll`,E,!0))}),u({open:D,close:O,isOpen:v}),(n,r)=>((0,a.openBlock)(),(0,a.createElementBlock)(`span`,{class:`nb-info-hint`,"data-term":e.term||void 0},[(0,a.createElementVNode)(`button`,{ref_key:`triggerRef`,ref:g,type:`button`,class:(0,a.normalizeClass)([`nb-info-hint--trigger`,{"nb-info-hint--trigger-open":v.value}]),"aria-label":e.label??`More information`,"aria-expanded":v.value,"aria-describedby":v.value?m:void 0,disabled:e.disabled,onClick:(0,a.withModifiers)(j,[`stop`]),onMousedown:r[0]||=(0,a.withModifiers)(()=>{},[`stop`]),onPointerdown:r[1]||=(0,a.withModifiers)(()=>{},[`stop`]),onKeydown:(0,a.withModifiers)(M,[`stop`]),onMouseenter:k,onMouseleave:A,onFocus:N,onBlur:P},[(0,a.createVNode)(t.t,{name:e.icon,size:e.size,weight:`regular`},null,8,[`name`,`size`])],42,s),((0,a.openBlock)(),(0,a.createBlock)(a.Teleport,{to:e.teleportTo},[v.value?((0,a.openBlock)(),(0,a.createElementBlock)(`div`,(0,a.mergeProps)({key:0,id:m,ref_key:`popoverRef`,ref:_,class:[`nb-info-hint--popover`,`nb-info-hint--popover-${b.value}`]},(0,a.unref)(h),{role:`tooltip`,style:w.value,onClick:r[2]||=(0,a.withModifiers)(()=>{},[`stop`]),onMousedown:r[3]||=(0,a.withModifiers)(()=>{},[`stop`]),onPointerdown:r[4]||=(0,a.withModifiers)(()=>{},[`stop`]),onMouseenter:k,onMouseleave:A}),[e.title?((0,a.openBlock)(),(0,a.createElementBlock)(`p`,c,(0,a.toDisplayString)(e.title),1)):(0,a.createCommentVNode)(``,!0),(0,a.createElementVNode)(`div`,l,[(0,a.renderSlot)(n.$slots,`default`,{},()=>[(0,a.createTextVNode)((0,a.toDisplayString)(e.text),1)],!0)])],16)):(0,a.createCommentVNode)(``,!0)],8,[`to`]))],8,o))}}),d=e.t(u,[[`__scopeId`,`data-v-f6f2eaf3`]]);Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return d}});

package/dist/InfoHint-Cj0Us0mD.js

@@ -1,164 +0,0 @@
-import { t as e } from "./_plugin-vue_export-helper-O4QQSku4.js";
-import { t } from "./Icon-rREAqsu0.js";
-import { useStableId as n } from "./composables/useStableId.composable.mjs";
-import { useSurfaceLayer as r } from "./composables/useSurfaceLayer.composable.mjs";
-import { placeAnchored as i, viewportSize as a } from "./utils/anchorPosition.helper.mjs";
-import { Teleport as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createTextVNode as f, createVNode as p, defineComponent as m, mergeProps as h, nextTick as g, normalizeClass as _, onBeforeUnmount as v, openBlock as y, ref as b, renderSlot as x, toDisplayString as S, unref as ee, watch as C, withModifiers as w } from "vue";
-//#region src/components/InfoHint.vue?vue&type=script&setup=true&lang.ts
-var T = ["data-term"], E = [
-	"aria-label",
-	"aria-expanded",
-	"aria-describedby",
-	"disabled"
-], D = {
-	key: 0,
-	class: "nb-info-hint--title"
-}, O = { class: "nb-info-hint--body" }, k = /* @__PURE__ */ e(/* @__PURE__ */ m({
-	__name: "InfoHint",
-	props: {
-		text: { default: void 0 },
-		title: { default: void 0 },
-		term: { default: void 0 },
-		placement: { default: "top" },
-		size: { default: 14 },
-		icon: { default: "info" },
-		label: { default: void 0 },
-		openDelay: { default: 120 },
-		closeDelay: { default: 140 },
-		teleportTo: { default: "body" },
-		disabled: {
-			type: Boolean,
-			default: !1
-		}
-	},
-	emits: [
-		"open",
-		"close",
-		"activate"
-	],
-	setup(e, { expose: m, emit: k }) {
-		let A = e, j = k, M = `${n({})}-popover`, { layerProps: N } = r({ overlay: !0 }), P = b(null), F = b(null), I = b(!1), L = b(!1), R = b(A.placement), z = b({
-			top: 0,
-			left: 0,
-			arrowOffset: 50
-		}), B, V, H = s(() => ({
-			top: `${z.value.top}px`,
-			left: `${z.value.left}px`,
-			"--nb-info-hint-arrow-offset": `${z.value.arrowOffset}%`
-		}));
-		function U() {
-			clearTimeout(B), clearTimeout(V), B = void 0, V = void 0;
-		}
-		function W() {
-			let e = P.value, t = F.value;
-			if (!e || !t) return;
-			let n = e.getBoundingClientRect(), r = t.getBoundingClientRect(), o = i(n, {
-				width: r.width,
-				height: r.height
-			}, {
-				side: A.placement,
-				viewport: a()
-			});
-			R.value = o.side, z.value = {
-				top: o.top,
-				left: o.left,
-				arrowOffset: o.arrowOffset
-			};
-		}
-		function G() {
-			A.disabled || I.value || (U(), I.value = !0, j("open"), g(() => {
-				W(), requestAnimationFrame(W);
-			}));
-		}
-		function K() {
-			I.value && (U(), I.value = !1, L.value = !1, j("close"));
-		}
-		function q() {
-			A.disabled || (clearTimeout(V), V = void 0, !I.value && (B = setTimeout(G, A.openDelay)));
-		}
-		function J() {
-			clearTimeout(B), B = void 0, !L.value && (V = setTimeout(K, A.closeDelay));
-		}
-		function Y() {
-			if (!A.disabled) {
-				if (L.value) {
-					K();
-					return;
-				}
-				L.value = !0, G(), j("activate", A.term);
-			}
-		}
-		function X(e) {
-			if (e.key === "Escape") {
-				I.value && (e.preventDefault(), K());
-				return;
-			}
-		}
-		function Z() {
-			A.disabled || (clearTimeout(V), V = void 0, G());
-		}
-		function te(e) {
-			if (L.value) return;
-			let t = e.relatedTarget;
-			t && F.value?.contains(t) || K();
-		}
-		function Q(e) {
-			let t = e.target;
-			t && (P.value?.contains(t) || F.value?.contains(t) || K());
-		}
-		function $(e) {
-			e.key === "Escape" && K();
-		}
-		return C(I, (e) => {
-			typeof document > "u" || (e ? (document.addEventListener("pointerdown", Q, !0), document.addEventListener("keydown", $), window.addEventListener("resize", W), window.addEventListener("scroll", W, !0)) : (document.removeEventListener("pointerdown", Q, !0), document.removeEventListener("keydown", $), window.removeEventListener("resize", W), window.removeEventListener("scroll", W, !0)));
-		}), C(() => A.disabled, (e) => {
-			e && K();
-		}), v(() => {
-			U(), !(typeof document > "u") && (document.removeEventListener("pointerdown", Q, !0), document.removeEventListener("keydown", $), window.removeEventListener("resize", W), window.removeEventListener("scroll", W, !0));
-		}), m({
-			open: G,
-			close: K,
-			isOpen: I
-		}), (n, r) => (y(), u("span", {
-			class: "nb-info-hint",
-			"data-term": e.term || void 0
-		}, [d("button", {
-			ref_key: "triggerRef",
-			ref: P,
-			type: "button",
-			class: _(["nb-info-hint--trigger", { "nb-info-hint--trigger-open": I.value }]),
-			"aria-label": e.label ?? "More information",
-			"aria-expanded": I.value,
-			"aria-describedby": I.value ? M : void 0,
-			disabled: e.disabled,
-			onClick: w(Y, ["stop"]),
-			onMousedown: r[0] ||= w(() => {}, ["stop"]),
-			onPointerdown: r[1] ||= w(() => {}, ["stop"]),
-			onKeydown: w(X, ["stop"]),
-			onMouseenter: q,
-			onMouseleave: J,
-			onFocus: Z,
-			onBlur: te
-		}, [p(t, {
-			name: e.icon,
-			size: e.size,
-			weight: "regular"
-		}, null, 8, ["name", "size"])], 42, E), (y(), c(o, { to: e.teleportTo }, [I.value ? (y(), u("div", h({
-			key: 0,
-			id: M,
-			ref_key: "popoverRef",
-			ref: F,
-			class: ["nb-info-hint--popover", `nb-info-hint--popover-${R.value}`]
-		}, ee(N), {
-			role: "tooltip",
-			style: H.value,
-			onClick: r[2] ||= w(() => {}, ["stop"]),
-			onMousedown: r[3] ||= w(() => {}, ["stop"]),
-			onPointerdown: r[4] ||= w(() => {}, ["stop"]),
-			onMouseenter: q,
-			onMouseleave: J
-		}), [e.title ? (y(), u("p", D, S(e.title), 1)) : l("", !0), d("div", O, [x(n.$slots, "default", {}, () => [f(S(e.text), 1)], !0)])], 16)) : l("", !0)], 8, ["to"]))], 8, T));
-	}
-}), [["__scopeId", "data-v-f6f2eaf3"]]);
-//#endregion
-export { k as t };

package/dist/NotificationCenter-CrCoVe8p.cjs

@@ -1 +0,0 @@
-require(`./chunk-D-qHiVGv.cjs`);const e=require(`./Icon-C8R_r_In.cjs`),t=require(`./EmptyState-henL7JH6.cjs`),n=require(`./Button-Dqtcr4i0.cjs`),r=require(`./Spinner-CqSN2vaR.cjs`),i=require(`./Skeleton-D8CHd_4p.cjs`),a=require(`./NotificationCenterItem-Clhhma6H.cjs`);let o=require(`vue`),s=require(`@nubisco/ui/icons/warning-circle`);var c={key:0,class:`nb-notification-center__badge`,"aria-hidden":`true`},l=[`aria-describedby`,`aria-busy`],u={class:`nb-notification-center__header`},d={class:`nb-notification-center__sr`,role:`status`},f={class:`nb-notification-center__stale-text`},ee={class:`nb-notification-center__sr`},te=[`tabindex`],ne={key:4,class:`nb-notification-center__empty`},re={key:5,class:`nb-notification-center__footer`},p=new Set,m=8,h=8,g=96,_=88,v=200;function ie(e,{align:t,width:n,maxHeight:r,viewport:i}){let a=t===`start`?e.left:e.left+e.width-n,o=Math.min(Math.max(a,h),Math.max(h,i.width-n-h)),s=e.top+e.height,c=i.height-s-m-h,l=e.top-m-h,u=c<v&&l>c?`top`:`bottom`,d=Math.max(_,u===`top`?l:c),f=Math.max(_,Math.min(r,d-g)),ee=Math.min(r+g,d);return{top:u===`top`?Math.max(h,e.top-m-ee):s+m,left:o,side:u,maxListHeight:f}}function ae(e,t){return e.left<=t.width&&e.left+e.width>=0&&e.top<=t.height&&e.top+e.height>=0}var y=(0,o.defineComponent)({__name:`NotificationCenter`,props:{items:{default:()=>[]},unreadCount:{default:void 0},itemCount:{default:void 0},open:{type:Boolean,default:void 0},label:{default:`Notifications`},markAllLabel:{default:`Mark all as read`},markAllPendingLabel:{default:`Marking all as read`},markAllPending:{type:Boolean,default:!1},emptyTitle:{default:`No notifications`},emptyDescription:{default:`New activity shows up here.`},loadingLabel:{default:`Loading notifications`},loading:{type:Boolean,default:!1},error:{type:Boolean,default:!1},errorTitle:{default:`Could not load notifications`},errorDescription:{default:`The request failed. Nothing has been lost.`},errorStaleLabel:{default:`These may be out of date.`},retryLabel:{default:`Try again`},showRetry:{type:Boolean,default:!0},maxCount:{default:99},width:{default:360},maxHeight:{default:384},align:{default:`end`},showMarkAll:{type:Boolean,default:!0},interactive:{type:Boolean,default:!0},closeOnSelect:{type:Boolean,default:!0},closeOnNavigate:{type:Boolean,default:!0},disabled:{type:Boolean,default:!1},icon:{default:`bell`},locale:{default:void 0},unreadLabel:{default:`Unread`},readLabel:{default:`Read`},formatUnread:{type:Function,default:e=>e===1?`1 unread`:`${e} unread`}},emits:[`update:open`,`open`,`close`,`select`,`mark-all-read`,`retry`],setup(m,{expose:h,emit:g}){let _=m,v=g,y=(0,o.useSlots)(),b=`nb-notification-center-${(0,o.useId)()}`,oe=`${b}-title`,se=`${b}-trigger`,x=`${b}-error`,S=(0,o.ref)(null),C=(0,o.ref)(null),w=(0,o.ref)(null),T=(0,o.ref)(null),E=(0,o.ref)(!1),D=(0,o.computed)(()=>_.open===void 0?E.value:_.open),O=(0,o.computed)(()=>typeof _.unreadCount==`number`?Math.max(0,_.unreadCount):_.items.filter(e=>!e.read).length),ce=(0,o.computed)(()=>O.value>_.maxCount?`${_.maxCount}+`:String(O.value)),le=(0,o.computed)(()=>O.value>0?`${_.label}, ${_.formatUnread(O.value)}`:_.label),ue=(0,o.computed)(()=>{if(typeof _.itemCount==`number`)return Math.max(0,_.itemCount);if(!y.default)return _.items.length}),de=(0,o.computed)(()=>(ue.value??0)>0),k=(0,o.computed)(()=>{if(_.loading)return`loading`;let e=ue.value;return _.error&&(e===void 0||e===0)?`error`:e===void 0||e>0?`list`:`empty`}),fe=(0,o.computed)(()=>_.error&&!_.loading&&k.value===`list`&&de.value);(0,o.ref)(!1),(0,o.watch)(()=>[D.value,!!y.default,_.itemCount],([e,t,n])=>{},{immediate:!0});function A(){v(`retry`)}let j=(0,o.computed)(()=>({id:se,"aria-haspopup":`dialog`,"aria-expanded":D.value?`true`:`false`,"aria-controls":D.value?b:void 0,"aria-label":le.value,disabled:_.disabled||void 0})),M=(0,o.computed)(()=>({type:`button`,disabled:O.value===0&&!_.markAllPending,"aria-disabled":_.markAllPending?`true`:void 0,"aria-busy":_.markAllPending?`true`:void 0,onClick:De})),pe=(0,o.computed)(()=>fe.value||k.value===`error`?x:void 0);function N(e){if(!e){w.value=null;return}let t=e instanceof HTMLElement?e:e.$el;w.value=t instanceof HTMLElement?t:null}let P=(0,o.ref)({top:0,left:0,side:`bottom`,maxListHeight:_.maxHeight});function F(){return{width:window.innerWidth,height:window.innerHeight}}function I(){let e=S.value?.getBoundingClientRect();e&&(P.value=ie(e,{align:_.align,width:_.width,maxHeight:_.maxHeight,viewport:F()}))}let me=(0,o.computed)(()=>({top:`${Math.round(P.value.top)}px`,left:`${Math.round(P.value.left)}px`,width:`${_.width}px`})),L=(0,o.computed)(()=>({maxHeight:`${Math.round(P.value.maxListHeight)}px`})),he=(0,o.computed)(()=>({"nb-notification-center__panel--start":_.align===`start`,"nb-notification-center__panel--above":P.value.side===`top`}));function R(e){_.open===void 0&&(E.value=e),v(`update:open`,e)}function z(){_.disabled||D.value||(I(),R(!0),v(`open`))}function B(e={}){if(!D.value)return;let t=T.value?.contains(document.activeElement);R(!1),v(`close`),(e.restoreFocus??t)&&(0,o.nextTick)(V)}function V(){let e=w.value;if(e?.isConnected){e.focus();return}(S.value?.querySelector(J))?.focus()}function H(){D.value?B({restoreFocus:!0}):z()}let U=(0,o.ref)(0),ge=new Set([`button`,`link`,`menuitem`,`option`]);function W(e){if(e.tagName===`BUTTON`)return!e.hasAttribute(`disabled`);if(e.tagName===`A`)return e.hasAttribute(`href`);let t=e.getAttribute(`role`);return t!==null&&ge.has(t)}function G(){return T.value?Array.from(T.value.querySelectorAll(`[data-nb-notification-item]`)).filter(e=>!!W(e)):[]}let _e=(0,o.ref)(void 0);function ve(e){let t=C.value;_e.value=t&&t.childElementCount>0&&e.length===0?0:void 0}function K(e){let t=G();ve(t),t.length&&(U.value=Math.min(Math.max(e,0),t.length-1),t.forEach((e,t)=>{e.setAttribute(`tabindex`,t===U.value?`0`:`-1`)}))}function q(e){let t=G();if(!t.length)return!1;let n=Math.min(Math.max(e,0),t.length-1);return K(n),t[n]?.focus(),!0}function ye(e){let t=e.target?.closest(`[data-nb-notification-item]`);if(!t)return;let n=G().indexOf(t);n>=0&&K(n)}let J=`a[href]:not([tabindex="-1"]), button:not([disabled]):not([tabindex="-1"]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex="0"]`;function be(e){return!!e?.closest?.(`input, textarea, select, [contenteditable=""], [contenteditable="true"]`)}function xe(e){let t=G(),n=e.target?.closest(`[data-nb-notification-item]`),r=n?t.indexOf(n):-1;if(e.key===`Escape`){if(!Se(e))return;e.preventDefault(),e.stopPropagation(),B({restoreFocus:!0});return}if(e.key===`Tab`){Ce(e);return}if(!be(e.target))switch(e.key){case`ArrowDown`:q(r<0?0:r+1)&&e.preventDefault();break;case`ArrowUp`:q(r<0?t.length-1:r-1)&&e.preventDefault();break;case`Home`:r>=0&&(e.preventDefault(),q(0));break;case`End`:r>=0&&(e.preventDefault(),q(t.length-1));break;default:break}}function Se(e){if(e.defaultPrevented)return!1;let t=(e.target??document.activeElement)?.closest?.(`[aria-modal="true"]`);return!(t&&t!==T.value)}function Ce(e){let t=T.value;if(!t)return;let n=Array.from(t.querySelectorAll(J)),r=document.activeElement,i=n[0],a=n[n.length-1],s=!n.length||r===i||!t.contains(r),c=!n.length||r===a;if(e.shiftKey?!s:!c)return;e.preventDefault();let l=e.shiftKey?w.value:we();B({restoreFocus:!1}),(0,o.nextTick)(()=>{l?.isConnected?l.focus():V()})}function we(){let e=w.value;if(!e)return null;let t=Array.from(document.querySelectorAll(J)).filter(e=>!T.value?.contains(e)).filter(e=>e.tabIndex>=0),n=t.indexOf(e);return n<0?null:t[n+1]??null}function Te(e,t){v(`select`,e,t),_.closeOnSelect&&B({restoreFocus:!1})}function Ee(e){if(!y.default)return;let t=e.target?.closest(`[data-nb-notification-item]`);if(t&&W(t)){if(e.type===`keydown`){let n=e.key;if(n!==`Enter`&&n!==` `||t.tagName===`BUTTON`||t.tagName===`A`)return;e.preventDefault()}v(`select`,null,e),_.closeOnSelect&&B({restoreFocus:!1})}}function De(){_.markAllPending||v(`mark-all-read`)}function Y(e){let t=e.target;S.value?.contains(t)||T.value?.contains(t)||B({restoreFocus:!1})}function Oe(e){e.key===`Escape`&&(T.value?.contains(document.activeElement)||Se(e)&&B({restoreFocus:S.value?.contains(document.activeElement)??!1}))}let X=0;function Z(){!D.value||X||(X=requestAnimationFrame(()=>{X=0,Ae()}))}function ke(){X&&=(cancelAnimationFrame(X),0)}function Ae(){if(!D.value)return;let e=S.value?.getBoundingClientRect();if(e&&!ae(e,F())){B({restoreFocus:!1});return}I()}function Q(){_.closeOnNavigate&&B({restoreFocus:!1})}function je(){return window.navigation}function Me(){document.addEventListener(`mousedown`,Y),document.addEventListener(`keydown`,Oe),window.addEventListener(`resize`,Z),window.addEventListener(`scroll`,Z,!0),window.addEventListener(`popstate`,Q),window.addEventListener(`hashchange`,Q),je()?.addEventListener(`navigate`,Q)}function Ne(){ke(),document.removeEventListener(`mousedown`,Y),document.removeEventListener(`keydown`,Oe),window.removeEventListener(`resize`,Z),window.removeEventListener(`scroll`,Z,!0),window.removeEventListener(`popstate`,Q),window.removeEventListener(`hashchange`,Q),je()?.removeEventListener(`navigate`,Q)}let $=()=>B({restoreFocus:!1});return(0,o.watch)(D,e=>{if(e){for(let e of[...p])e!==$&&e();p.add($),Me(),(0,o.nextTick)(()=>{I(),K(0),q(0)||T.value?.focus()})}else p.delete($),Ne(),U.value=0}),(0,o.watch)(()=>[_.items.length,k.value],()=>{D.value&&(0,o.nextTick)(()=>K(U.value))}),(0,o.onBeforeUnmount)(()=>{Ne(),p.delete($);let e=T.value;e?.isConnected&&e.remove()}),h({show:z,close:B,toggle:H,isOpen:D,unreadCount:O}),(p,h)=>((0,o.openBlock)(),(0,o.createElementBlock)(`div`,{ref_key:`rootRef`,ref:S,class:`nb-notification-center`},[(0,o.renderSlot)(p.$slots,`trigger`,{open:D.value,toggle:H,show:z,close:B,unreadCount:O.value,badge:ce.value,panelId:b,triggerProps:j.value,setTriggerRef:N},()=>[(0,o.createElementVNode)(`button`,(0,o.mergeProps)({ref:N,type:`button`,class:[`nb-notification-center__trigger`,{"nb-notification-center__trigger--active":D.value}]},j.value,{onClick:H}),[(0,o.createVNode)(e.t,{name:m.icon,size:18},null,8,[`name`]),O.value>0?((0,o.openBlock)(),(0,o.createElementBlock)(`span`,c,(0,o.toDisplayString)(ce.value),1)):(0,o.createCommentVNode)(``,!0)],16)]),((0,o.openBlock)(),(0,o.createBlock)(o.Teleport,{to:`body`},[(0,o.createVNode)(o.Transition,{name:`nb-notification-center-pop`},{default:(0,o.withCtx)(()=>[D.value?((0,o.openBlock)(),(0,o.createElementBlock)(`div`,{key:0,id:b,ref_key:`panelRef`,ref:T,class:(0,o.normalizeClass)([`nb-notification-center__panel`,he.value]),style:(0,o.normalizeStyle)(me.value),role:`dialog`,tabindex:`-1`,"aria-labelledby":oe,"aria-describedby":pe.value,"aria-busy":m.loading?`true`:void 0,onKeydown:xe,onFocusin:ye},[(0,o.createElementVNode)(`div`,u,[(0,o.createElementVNode)(`h2`,{id:oe,class:`nb-notification-center__title`},(0,o.toDisplayString)(m.label),1),(0,o.renderSlot)(p.$slots,`header-start`,{close:B,unreadCount:O.value}),(0,o.renderSlot)(p.$slots,`header-actions`,{close:B,unreadCount:O.value,markAllRead:De,markAllPending:m.markAllPending,markAllProps:M.value,markAllText:m.markAllPending?m.markAllPendingLabel:m.markAllLabel},()=>[m.showMarkAll?((0,o.openBlock)(),(0,o.createElementBlock)(`button`,(0,o.mergeProps)({key:0,class:`nb-notification-center__mark-all`},M.value),[m.markAllPending?((0,o.openBlock)(),(0,o.createBlock)(r.t,{key:0,size:`xs`,tone:`inherit`,decorative:``})):(0,o.createCommentVNode)(``,!0),(0,o.createTextVNode)(` `+(0,o.toDisplayString)(m.markAllPending?m.markAllPendingLabel:m.markAllLabel),1)],16)):(0,o.createCommentVNode)(``,!0)])]),(0,o.createElementVNode)(`span`,d,(0,o.toDisplayString)(m.markAllPending?m.markAllPendingLabel:``),1),fe.value?((0,o.openBlock)(),(0,o.createElementBlock)(`div`,{key:0,id:x,class:`nb-notification-center__stale`,role:`status`},[(0,o.createVNode)(e.t,{name:(0,o.unref)(s.regular),size:14,"aria-hidden":`true`},null,8,[`name`]),(0,o.createElementVNode)(`span`,f,(0,o.toDisplayString)(m.errorStaleLabel),1),m.showRetry?((0,o.openBlock)(),(0,o.createElementBlock)(`button`,{key:0,type:`button`,class:`nb-notification-center__retry`,onClick:A},(0,o.toDisplayString)(m.retryLabel),1)):(0,o.createCommentVNode)(``,!0)])):(0,o.createCommentVNode)(``,!0),k.value===`loading`?((0,o.openBlock)(),(0,o.createElementBlock)(`div`,{key:1,class:`nb-notification-center__loading`,role:`status`,style:(0,o.normalizeStyle)(L.value)},[(0,o.createElementVNode)(`span`,ee,(0,o.toDisplayString)(m.loadingLabel),1),((0,o.openBlock)(),(0,o.createElementBlock)(o.Fragment,null,(0,o.renderList)(3,e=>(0,o.createVNode)(i.t,{key:e,variant:`text`,type:`body-sm`,lines:2,"last-line-width":`60%`})),64))],4)):k.value===`error`?((0,o.openBlock)(),(0,o.createElementBlock)(`div`,{key:2,id:x,class:`nb-notification-center__error`,role:`alert`},[(0,o.renderSlot)(p.$slots,`error`,{retry:A},()=>[(0,o.createVNode)(t.t,{size:`sm`,kind:`error`,title:m.errorTitle,description:m.errorDescription},(0,o.createSlots)({_:2},[m.showRetry?{name:`actions`,fn:(0,o.withCtx)(()=>[(0,o.createVNode)(n.t,{size:`sm`,variant:`secondary`,onClick:A},{default:(0,o.withCtx)(()=>[(0,o.createTextVNode)((0,o.toDisplayString)(m.retryLabel),1)]),_:1})]),key:`0`}:void 0]),1032,[`title`,`description`])])])):k.value===`list`?((0,o.openBlock)(),(0,o.createElementBlock)(`ul`,{key:3,ref_key:`listRef`,ref:C,class:`nb-notification-center__list`,role:`list`,tabindex:_e.value,style:(0,o.normalizeStyle)(L.value),onClick:Ee,onKeydown:Ee},[(0,o.renderSlot)(p.$slots,`default`,{close:B,items:m.items},()=>[((0,o.openBlock)(!0),(0,o.createElementBlock)(o.Fragment,null,(0,o.renderList)(m.items,e=>((0,o.openBlock)(),(0,o.createBlock)(a.t,{key:e.id,title:e.title,body:e.body,time:e.time,"time-label":e.timeLabel,read:e.read,variant:e.variant??`neutral`,icon:e.icon,href:e.href,interactive:e.interactive??m.interactive,locale:m.locale,"unread-label":m.unreadLabel,"read-label":m.readLabel,onSelect:t=>Te(e,t)},null,8,[`title`,`body`,`time`,`time-label`,`read`,`variant`,`icon`,`href`,`interactive`,`locale`,`unread-label`,`read-label`,`onSelect`]))),128))])],44,te)):k.value===`empty`?((0,o.openBlock)(),(0,o.createElementBlock)(`div`,ne,[(0,o.renderSlot)(p.$slots,`empty`,{},()=>[(0,o.createVNode)(t.t,{size:`sm`,icon:m.icon,title:m.emptyTitle,description:m.emptyDescription},null,8,[`icon`,`title`,`description`])])])):(0,o.createCommentVNode)(``,!0),p.$slots.footer?((0,o.openBlock)(),(0,o.createElementBlock)(`div`,re,[(0,o.renderSlot)(p.$slots,`footer`,{close:B})])):(0,o.createCommentVNode)(``,!0)],46,l)):(0,o.createCommentVNode)(``,!0)]),_:3})]))],512))}});Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return y}});