@nubisco/ui 5.25.2 → 5.26.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1 @@
1
+ const e=require(`./chunk-D-qHiVGv.cjs`),t=require(`./_plugin-vue_export-helper-tagjRzOz.cjs`),n=require(`./Size.d-GBIblj2D.cjs`),r=require(`./Icon-C8R_r_In.cjs`),i=require(`./composables/useSurfaceLayer.composable.cjs`),a=require(`./composables/usePhoneLayout.composable.cjs`),o=require(`./Button-C0UUTgEB.cjs`),s=require(`./Grid-D8c0StGs.cjs`),c=require(`./Checkbox-lWejJzIQ.cjs`);let l=require(`vue`),u=require(`@nubisco/ui/icons/arrow-up`);u=e.n(u);let d=require(`@nubisco/ui/icons/caret-right`);d=e.n(d);let f=require(`@nubisco/ui/icons/arrows-down-up`);f=e.n(f);let p=require(`@nubisco/ui/icons/arrow-down`);p=e.n(p);var ee=[`inert`,`aria-hidden`],te={key:0},ne={key:0,class:`nb-data-table__title`},re={key:1,class:`nb-data-table__description`},ie=[`inert`,`aria-hidden`],ae={key:1,class:`nb-data-table__batch`,role:`region`,"aria-label":`Table batch actions`},oe={class:`nb-data-table__batch-count`},se={class:`nb-data-table__batch-actions`},ce={class:`nb-data-table__scroll`},le=[`role`,`aria-label`,`aria-busy`],ue={key:0,class:`nb-data-table__col-expand`},de={key:1,class:`nb-data-table__col-select`},m={key:2,class:`nb-data-table__col-actions`},fe=[`role`],pe=[`role`],me={key:0,scope:`col`,class:`nb-data-table__th nb-data-table__expand-cell`},he={key:1,scope:`col`,class:`nb-data-table__th nb-data-table__select-cell`},ge=[`aria-sort`],_e=[`onClick`],ve={class:`nb-data-table__th-label`},ye={key:1,class:`nb-data-table__th-label`},be={key:2,scope:`col`,class:`nb-data-table__th nb-data-table__actions-cell`},xe=[`role`],Se={key:0,class:`nb-data-table__td`},Ce={key:1,class:`nb-data-table__td`},we={key:2,class:`nb-data-table__td`},Te={key:1,class:`nb-data-table__state-row`},Ee=[`colspan`],De={key:2,class:`nb-data-table__state-row`},Oe=[`colspan`],ke=[`role`,`aria-selected`,`tabindex`,`onClick`,`onKeydown`,`onKeyup`],Ae=[`role`],je=[`aria-expanded`,`aria-controls`,`aria-label`,`onClick`],Me=[`checked`,`aria-label`,`onChange`],Ne=[`role`,`data-label`],Pe=[`role`],Fe=[`colspan`,`role`],Ie=[`id`,`aria-label`],Le={key:1,class:`nb-data-table__footer`},h=(0,l.defineComponent)({__name:`DataTable`,props:{columns:{},rows:{},rowKey:{},size:{default:n.r.Medium},sortState:{default:null},selectable:{default:`none`},selected:{default:()=>[]},loading:{type:Boolean,default:!1},skeletonRows:{default:5},error:{default:void 0},emptyMessage:{default:void 0},stickyHeader:{type:Boolean,default:!0},zebra:{type:Boolean,default:!1},fill:{type:Boolean,default:!1},title:{default:void 0},description:{default:void 0},ariaLabel:{default:void 0},stackOnPhone:{type:Boolean,default:!1},expanded:{default:()=>[]}},emits:[`sort`,`update:selected`,`row-click`,`update:expanded`],setup(e,{emit:t}){let n=e,{layerProps:h}=i.useSurfaceLayer(),g=t,_=(0,l.useSlots)(),Re=`nb-data-table-select-${(0,l.useId)()}`,ze=(0,l.computed)(()=>n.size),v=(0,l.computed)(()=>n.columns.filter(e=>!e.hidden)),y=(0,l.computed)(()=>n.selectable!==`none`),b=(0,l.computed)(()=>!!_[`row-actions`]),x=(0,l.computed)(()=>!!_[`row-detail`]),S=(0,l.computed)(()=>v.value.length+(x.value?1:0)+(y.value?1:0)+(b.value?1:0)),{phone:Be}=a.usePhoneLayout(),C=(0,l.computed)(()=>n.stackOnPhone&&Be.value),w=(0,l.computed)(()=>(v.value.find(e=>e.primary)??v.value.find(e=>!e.phoneHidden&&!e.phoneMeta))?.key);function Ve(e){return e.phoneHidden?`nb-data-table__td--phone-hidden`:e.key===w.value?`nb-data-table__td--primary`:e.phoneMeta?`nb-data-table__td--meta`:`nb-data-table__td--field`}let He=(0,l.computed)(()=>!n.loading&&!n.error&&n.rows.length>0&&(n.selectable===`multiple`||v.value.some(e=>e.sortable&&!e.phoneHidden)));function Ue(e){if(e.width!=null)return{width:typeof e.width==`number`?`${e.width}px`:e.width}}function T(e,t){return t[e.key]}function E(e){return e==null?``:String(e)}let D=e=>e.column.render?.(e.row,T(e.column,e.row),e.rowIndex)??null;D.props=[`column`,`row`,`rowIndex`];function O(e){let t=n.rowKey;return typeof t==`function`?t(e):e[t]}let k=(0,l.computed)(()=>new Set(n.selected)),A=(0,l.computed)(()=>n.selected),j=(0,l.computed)(()=>n.selected.length);function M(e){return k.value.has(O(e))}let N=(0,l.computed)(()=>n.rows.map(e=>O(e))),P=(0,l.computed)(()=>N.value.length>0&&N.value.every(e=>k.value.has(e))),We=(0,l.computed)(()=>!P.value&&N.value.some(e=>k.value.has(e))),F=(0,l.ref)(null),I=!1;function L(e){I=e.shiftKey}(0,l.watch)(N,()=>{F.value=null});function Ge(e,t){let r=O(e),i=new Set(n.selected),a=!i.has(r),o=F.value,s=e=>{a?i.add(e):i.delete(e)};if(I&&o!==null&&o!==t){let e=Math.min(o,t),r=Math.max(o,t);for(let t=e;t<=r;t++){let e=n.rows[t];e&&s(O(e))}}else s(r),F.value=t;I=!1,g(`update:selected`,[...i])}function Ke(e){g(`update:selected`,[O(e)])}function qe(){let e=new Set(n.selected);P.value?N.value.forEach(t=>e.delete(t)):N.value.forEach(t=>e.add(t)),g(`update:selected`,[...e])}function R(){g(`update:selected`,[])}let z=(0,l.computed)(()=>n.selectable!==`none`&&!!_[`batch-actions`]),B=(0,l.computed)(()=>z.value&&j.value>0),Je=`nb-data-table-detail-${(0,l.useId)()}`,Ye=(0,l.computed)(()=>new Set(n.expanded));function V(e){return x.value&&Ye.value.has(O(e))}function Xe(e){let t=O(e),r=n.expanded.filter(e=>e!==t);r.length===n.expanded.length&&r.push(t),g(`update:expanded`,r)}function H(e){return`${Je}-${e}`}function U(e,t){let n=v.value.find(e=>e.key===w.value);return`Details for ${(n?E(T(n,e)).trim():``)||`row ${t+1}`}`}let Ze=(0,l.computed)(()=>!!n.title||!!n.description||!!_.toolbar||!!_.search||!!_[`toolbar-actions`]),Qe=(0,l.computed)(()=>Ze.value||z.value),W=(0,l.ref)(null),G=(0,l.ref)(null),K=(0,l.ref)(null),q=(0,l.ref)(!1);function J(){let e=G.value,t=K.value;q.value=!!e&&!!t&&t.offsetTop>=e.offsetTop+e.offsetHeight-1}let Y=null;(0,l.watch)([W,G,K],e=>{if(Y?.disconnect(),J(),!(typeof ResizeObserver>`u`)){Y??=new ResizeObserver(J);for(let t of e)t&&Y.observe(t)}},{flush:`post`}),(0,l.onBeforeUnmount)(()=>{Y?.disconnect(),Y=null});function X(e){return!!n.sortState&&n.sortState.key===e.key&&n.sortState.direction!==`none`}function $e(e){return X(e)?n.sortState.direction===`asc`?`ascending`:`descending`:`none`}function et(e){return X(e)?n.sortState.direction===`asc`?u:p:f}function tt(e){return e===`asc`?`desc`:e===`desc`?`none`:`asc`}function nt(e){let t=n.sortState&&n.sortState.key===e.key?n.sortState.direction:`none`;g(`sort`,{key:e.key,direction:tt(t)})}let rt=(0,l.getCurrentInstance)(),Z=(0,l.computed)(()=>!!rt?.vnode.props?.onRowClick);function Q(e,t){g(`row-click`,e,t)}function $(e){return Z.value&&e.target===e.currentTarget&&!e.altKey&&!e.ctrlKey&&!e.metaKey}function it(e,t,n){$(e)&&(e.key===`Enter`?(e.preventDefault(),e.repeat||Q(t,n)):e.key===` `&&e.preventDefault())}function at(e,t,n){!$(e)||e.key!==` `||(e.preventDefault(),Q(t,n))}return(t,n)=>((0,l.openBlock)(),(0,l.createElementBlock)(`div`,(0,l.mergeProps)({class:[`nb-data-table`,`nb-data-table--${e.size}`,{"nb-data-table--zebra":e.zebra},{"nb-data-table--sticky":e.stickyHeader},{"nb-data-table--fill":e.fill},{"nb-data-table--stacked":C.value},{"nb-data-table--stacked-headless":C.value&&!He.value},{"nb-data-table--expandable":x.value}]},(0,l.unref)(h)),[Qe.value?((0,l.openBlock)(),(0,l.createElementBlock)(`div`,{key:0,ref_key:`toolbarRef`,ref:W,class:(0,l.normalizeClass)([`nb-data-table__toolbar`,{"nb-data-table__toolbar--wrapped":q.value}])},[(0,l.createElementVNode)(`div`,{ref_key:`toolbarHeadingRef`,ref:G,class:`nb-data-table__toolbar-heading`,inert:B.value||void 0,"aria-hidden":B.value||void 0},[(0,l.renderSlot)(t.$slots,`toolbar`,{selectedCount:j.value},()=>[e.title||e.description?((0,l.openBlock)(),(0,l.createElementBlock)(`div`,te,[e.title?((0,l.openBlock)(),(0,l.createElementBlock)(`h2`,ne,(0,l.toDisplayString)(e.title),1)):(0,l.createCommentVNode)(``,!0),e.description?((0,l.openBlock)(),(0,l.createElementBlock)(`p`,re,(0,l.toDisplayString)(e.description),1)):(0,l.createCommentVNode)(``,!0)])):(0,l.createCommentVNode)(``,!0)],!0)],8,ee),t.$slots.search||t.$slots[`toolbar-actions`]?((0,l.openBlock)(),(0,l.createElementBlock)(`div`,{key:0,ref_key:`toolbarToolsRef`,ref:K,class:(0,l.normalizeClass)([`nb-data-table__toolbar-tools`,{"nb-data-table__toolbar-tools--grow-search":q.value&&!!t.$slots.search}]),inert:B.value||void 0,"aria-hidden":B.value||void 0},[(0,l.renderSlot)(t.$slots,`search`,{},void 0,!0),(0,l.renderSlot)(t.$slots,`toolbar-actions`,{},void 0,!0)],10,ie)):(0,l.createCommentVNode)(``,!0),B.value?((0,l.openBlock)(),(0,l.createElementBlock)(`div`,ae,[(0,l.createElementVNode)(`span`,oe,(0,l.toDisplayString)(j.value)+` selected `,1),(0,l.createElementVNode)(`div`,se,[(0,l.renderSlot)(t.$slots,`batch-actions`,{selectedKeys:A.value,clear:R},void 0,!0)]),(0,l.createVNode)(o.t,{class:`nb-data-table__batch-cancel`,variant:`ghost`,size:ze.value,onClick:R},{default:(0,l.withCtx)(()=>[...n[3]||=[(0,l.createTextVNode)(` Cancel `,-1)]]),_:1},8,[`size`])])):(0,l.createCommentVNode)(``,!0)],2)):(0,l.createCommentVNode)(``,!0),(0,l.createElementVNode)(`div`,ce,[(0,l.createElementVNode)(`table`,{class:`nb-data-table__table`,role:C.value?`table`:void 0,"aria-label":e.ariaLabel||e.title||void 0,"aria-busy":e.loading||void 0},[(0,l.createElementVNode)(`colgroup`,null,[x.value?((0,l.openBlock)(),(0,l.createElementBlock)(`col`,ue)):(0,l.createCommentVNode)(``,!0),y.value?((0,l.openBlock)(),(0,l.createElementBlock)(`col`,de)):(0,l.createCommentVNode)(``,!0),((0,l.openBlock)(!0),(0,l.createElementBlock)(l.Fragment,null,(0,l.renderList)(v.value,e=>((0,l.openBlock)(),(0,l.createElementBlock)(`col`,{key:`col-${e.key}`,style:(0,l.normalizeStyle)(Ue(e))},null,4))),128)),b.value?((0,l.openBlock)(),(0,l.createElementBlock)(`col`,m)):(0,l.createCommentVNode)(``,!0)]),(0,l.createElementVNode)(`thead`,{class:`nb-data-table__head`,role:C.value?`rowgroup`:void 0},[(0,l.createElementVNode)(`tr`,{role:C.value?`row`:void 0},[x.value?((0,l.openBlock)(),(0,l.createElementBlock)(`th`,me,[...n[4]||=[(0,l.createElementVNode)(`span`,{class:`nb-sr-only`},`Row details`,-1)]])):(0,l.createCommentVNode)(``,!0),y.value?((0,l.openBlock)(),(0,l.createElementBlock)(`th`,he,[e.selectable===`multiple`?((0,l.openBlock)(),(0,l.createBlock)(c.t,{key:0,"model-value":P.value,indeterminate:We.value,"aria-label":`Select all rows`,"onUpdate:modelValue":qe},null,8,[`model-value`,`indeterminate`])):(0,l.createCommentVNode)(``,!0)])):(0,l.createCommentVNode)(``,!0),((0,l.openBlock)(!0),(0,l.createElementBlock)(l.Fragment,null,(0,l.renderList)(v.value,e=>((0,l.openBlock)(),(0,l.createElementBlock)(`th`,{key:`th-${e.key}`,scope:`col`,class:(0,l.normalizeClass)([`nb-data-table__th`,`nb-data-table__th--${e.align||`left`}`,{"nb-data-table__th--sortable":e.sortable},{"nb-data-table__th--sorted":X(e)},C.value&&e.phoneHidden&&`nb-data-table__th--phone-hidden`]),"aria-sort":e.sortable?$e(e):void 0},[e.sortable?((0,l.openBlock)(),(0,l.createElementBlock)(`button`,{key:0,type:`button`,class:`nb-data-table__sort`,onClick:t=>nt(e)},[(0,l.createElementVNode)(`span`,ve,[(0,l.renderSlot)(t.$slots,`header-${e.key}`,{column:e},()=>[(0,l.createTextVNode)((0,l.toDisplayString)(e.header),1)],!0)]),(0,l.createVNode)(r.t,{name:et(e),class:`nb-data-table__sort-icon`,"aria-hidden":`true`},null,8,[`name`])],8,_e)):((0,l.openBlock)(),(0,l.createElementBlock)(`span`,ye,[(0,l.renderSlot)(t.$slots,`header-${e.key}`,{column:e},()=>[(0,l.createTextVNode)((0,l.toDisplayString)(e.header),1)],!0)]))],10,ge))),128)),b.value?((0,l.openBlock)(),(0,l.createElementBlock)(`th`,be,[...n[5]||=[(0,l.createElementVNode)(`span`,{class:`nb-sr-only`},`Row actions`,-1)]])):(0,l.createCommentVNode)(``,!0)],8,pe)],8,fe),(0,l.createElementVNode)(`tbody`,{class:`nb-data-table__body`,role:C.value?`rowgroup`:void 0},[e.loading?((0,l.openBlock)(!0),(0,l.createElementBlock)(l.Fragment,{key:0},(0,l.renderList)(e.skeletonRows,e=>((0,l.openBlock)(),(0,l.createElementBlock)(`tr`,{key:`skeleton-${e}`,class:`nb-data-table__row nb-data-table__row--skeleton`},[x.value?((0,l.openBlock)(),(0,l.createElementBlock)(`td`,Se)):(0,l.createCommentVNode)(``,!0),y.value?((0,l.openBlock)(),(0,l.createElementBlock)(`td`,Ce,[...n[6]||=[(0,l.createElementVNode)(`span`,{class:`nb-data-table__skeleton nb-data-table__skeleton--box`},null,-1)]])):(0,l.createCommentVNode)(``,!0),((0,l.openBlock)(!0),(0,l.createElementBlock)(l.Fragment,null,(0,l.renderList)(v.value,t=>((0,l.openBlock)(),(0,l.createElementBlock)(`td`,{key:`sk-${e}-${t.key}`,class:`nb-data-table__td`},[...n[7]||=[(0,l.createElementVNode)(`span`,{class:`nb-data-table__skeleton`},null,-1)]]))),128)),b.value?((0,l.openBlock)(),(0,l.createElementBlock)(`td`,we,[...n[8]||=[(0,l.createElementVNode)(`span`,{class:`nb-data-table__skeleton nb-data-table__skeleton--box`},null,-1)]])):(0,l.createCommentVNode)(``,!0)]))),128)):e.error?((0,l.openBlock)(),(0,l.createElementBlock)(`tr`,Te,[(0,l.createElementVNode)(`td`,{colspan:S.value,class:`nb-data-table__state nb-data-table__state--error`},[(0,l.renderSlot)(t.$slots,`error`,{error:e.error},()=>[(0,l.createVNode)(s.t,{is:`span`,align:`center`,justify:`center`,gap:`xs`,class:`nb-data-table__state-inner`},{default:(0,l.withCtx)(()=>[(0,l.createVNode)(r.t,{name:`warning-circle-fill`,"aria-hidden":`true`}),(0,l.createElementVNode)(`span`,null,(0,l.toDisplayString)(e.error),1)]),_:1})],!0)],8,Ee)])):e.rows.length?((0,l.openBlock)(!0),(0,l.createElementBlock)(l.Fragment,{key:3},(0,l.renderList)(e.rows,(i,a)=>((0,l.openBlock)(),(0,l.createElementBlock)(l.Fragment,{key:O(i)},[(0,l.createElementVNode)(`tr`,{class:(0,l.normalizeClass)([`nb-data-table__row`,{"nb-data-table__row--selected":M(i)},{"nb-data-table__row--clickable":Z.value},x.value&&{"nb-data-table__row--expanded":V(i),"nb-data-table__row--even":a%2==1}]),role:C.value?`row`:void 0,"aria-selected":e.selectable===`none`?void 0:M(i),tabindex:Z.value?0:void 0,onClick:e=>Q(i,a),onKeydown:e=>it(e,i,a),onKeyup:e=>at(e,i,a)},[x.value?((0,l.openBlock)(),(0,l.createElementBlock)(`td`,{key:0,class:`nb-data-table__td nb-data-table__expand-cell`,role:C.value?`cell`:void 0,onClick:n[0]||=(0,l.withModifiers)(()=>{},[`stop`])},[(0,l.createElementVNode)(`button`,{type:`button`,class:`nb-data-table__expand`,"aria-expanded":V(i),"aria-controls":V(i)?H(a):void 0,"aria-label":U(i,a),onClick:e=>Xe(i)},[(0,l.createVNode)(r.t,{name:d,class:`nb-data-table__expand-icon`,"aria-hidden":`true`})],8,je)],8,Ae)):(0,l.createCommentVNode)(``,!0),y.value?((0,l.openBlock)(),(0,l.createElementBlock)(`td`,{key:1,class:`nb-data-table__td nb-data-table__select-cell`,onClick:n[1]||=(0,l.withModifiers)(()=>{},[`stop`]),onMousedown:L,onKeydown:L},[e.selectable===`multiple`?((0,l.openBlock)(),(0,l.createBlock)(c.t,{key:0,"model-value":M(i),"aria-label":`Select row ${a+1}`,"onUpdate:modelValue":e=>Ge(i,a)},null,8,[`model-value`,`aria-label`,`onUpdate:modelValue`])):((0,l.openBlock)(),(0,l.createElementBlock)(`input`,{key:1,type:`radio`,class:`nb-data-table__radio`,name:Re,checked:M(i),"aria-label":`Select row ${a+1}`,onChange:e=>Ke(i)},null,40,Me))],32)):(0,l.createCommentVNode)(``,!0),((0,l.openBlock)(!0),(0,l.createElementBlock)(l.Fragment,null,(0,l.renderList)(v.value,n=>((0,l.openBlock)(),(0,l.createElementBlock)(`td`,{key:`td-${O(i)}-${n.key}`,class:(0,l.normalizeClass)([`nb-data-table__td`,`nb-data-table__td--${n.align||`left`}`,n.cellClass,C.value&&Ve(n)]),role:C.value?`cell`:void 0,"data-label":e.stackOnPhone?n.header:void 0},[(0,l.renderSlot)(t.$slots,`cell-${n.key}`,{row:i,value:T(n,i),column:n,rowIndex:a},()=>[n.render?((0,l.openBlock)(),(0,l.createBlock)(D,{key:0,column:n,row:i,"row-index":a},null,8,[`column`,`row`,`row-index`])):((0,l.openBlock)(),(0,l.createElementBlock)(l.Fragment,{key:1},[(0,l.createTextVNode)((0,l.toDisplayString)(E(T(n,i))),1)],64))],!0)],10,Ne))),128)),b.value?((0,l.openBlock)(),(0,l.createElementBlock)(`td`,{key:2,class:`nb-data-table__td nb-data-table__actions-cell`,onClick:n[2]||=(0,l.withModifiers)(()=>{},[`stop`])},[(0,l.renderSlot)(t.$slots,`row-actions`,{row:i,rowIndex:a},void 0,!0)])):(0,l.createCommentVNode)(``,!0)],42,ke),V(i)?((0,l.openBlock)(),(0,l.createElementBlock)(`tr`,{key:0,class:`nb-data-table__detail-row`,role:C.value?`row`:void 0},[(0,l.createElementVNode)(`td`,{colspan:S.value,class:`nb-data-table__detail-cell`,role:C.value?`cell`:void 0},[(0,l.createElementVNode)(`div`,{id:H(a),class:`nb-data-table__detail`,role:`region`,"aria-label":U(i,a)},[(0,l.renderSlot)(t.$slots,`row-detail`,{row:i,rowIndex:a},void 0,!0)],8,Ie)],8,Fe)],8,Pe)):(0,l.createCommentVNode)(``,!0)],64))),128)):((0,l.openBlock)(),(0,l.createElementBlock)(`tr`,De,[(0,l.createElementVNode)(`td`,{colspan:S.value,class:`nb-data-table__state nb-data-table__state--empty`},[(0,l.renderSlot)(t.$slots,`empty`,{},()=>[(0,l.createElementVNode)(`span`,null,(0,l.toDisplayString)(e.emptyMessage||`No data to display`),1)],!0)],8,Oe)]))],8,xe)],8,le)]),t.$slots.footer?((0,l.openBlock)(),(0,l.createElementBlock)(`div`,Le,[(0,l.renderSlot)(t.$slots,`footer`,{},void 0,!0)])):(0,l.createCommentVNode)(``,!0)],16))}}),g=t.t(h,[[`__scopeId`,`data-v-129b9c3a`]]);Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return g}});
@@ -0,0 +1,500 @@
1
+ import { t as e } from "./_plugin-vue_export-helper-O4QQSku4.js";
2
+ import { r as t } from "./Size.d-Bah6vMl3.js";
3
+ import { t as n } from "./Icon-rREAqsu0.js";
4
+ import { useSurfaceLayer as r } from "./composables/useSurfaceLayer.composable.mjs";
5
+ import { usePhoneLayout as i } from "./composables/usePhoneLayout.composable.mjs";
6
+ import { t as a } from "./Button-IcCXOoCT.js";
7
+ import { t as o } from "./Grid-XtnH-vr_.js";
8
+ import { t as s } from "./Checkbox-B3gBM6xy.js";
9
+ import { Fragment as c, computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createTextVNode as m, createVNode as h, defineComponent as g, getCurrentInstance as ee, mergeProps as te, normalizeClass as _, normalizeStyle as ne, onBeforeUnmount as re, openBlock as v, ref as y, renderList as b, renderSlot as x, toDisplayString as S, unref as ie, useId as C, useSlots as ae, watch as w, withCtx as oe, withModifiers as T } from "vue";
10
+ import * as se from "@nubisco/ui/icons/arrow-up";
11
+ import * as ce from "@nubisco/ui/icons/caret-right";
12
+ import * as le from "@nubisco/ui/icons/arrows-down-up";
13
+ import * as ue from "@nubisco/ui/icons/arrow-down";
14
+ //#region src/components/DataTable.vue?vue&type=script&setup=true&lang.ts
15
+ var de = ["inert", "aria-hidden"], fe = { key: 0 }, pe = {
16
+ key: 0,
17
+ class: "nb-data-table__title"
18
+ }, me = {
19
+ key: 1,
20
+ class: "nb-data-table__description"
21
+ }, he = ["inert", "aria-hidden"], ge = {
22
+ key: 1,
23
+ class: "nb-data-table__batch",
24
+ role: "region",
25
+ "aria-label": "Table batch actions"
26
+ }, _e = { class: "nb-data-table__batch-count" }, ve = { class: "nb-data-table__batch-actions" }, ye = { class: "nb-data-table__scroll" }, be = [
27
+ "role",
28
+ "aria-label",
29
+ "aria-busy"
30
+ ], xe = {
31
+ key: 0,
32
+ class: "nb-data-table__col-expand"
33
+ }, Se = {
34
+ key: 1,
35
+ class: "nb-data-table__col-select"
36
+ }, Ce = {
37
+ key: 2,
38
+ class: "nb-data-table__col-actions"
39
+ }, we = ["role"], Te = ["role"], Ee = {
40
+ key: 0,
41
+ scope: "col",
42
+ class: "nb-data-table__th nb-data-table__expand-cell"
43
+ }, De = {
44
+ key: 1,
45
+ scope: "col",
46
+ class: "nb-data-table__th nb-data-table__select-cell"
47
+ }, Oe = ["aria-sort"], ke = ["onClick"], Ae = { class: "nb-data-table__th-label" }, je = {
48
+ key: 1,
49
+ class: "nb-data-table__th-label"
50
+ }, Me = {
51
+ key: 2,
52
+ scope: "col",
53
+ class: "nb-data-table__th nb-data-table__actions-cell"
54
+ }, Ne = ["role"], Pe = {
55
+ key: 0,
56
+ class: "nb-data-table__td"
57
+ }, Fe = {
58
+ key: 1,
59
+ class: "nb-data-table__td"
60
+ }, Ie = {
61
+ key: 2,
62
+ class: "nb-data-table__td"
63
+ }, Le = {
64
+ key: 1,
65
+ class: "nb-data-table__state-row"
66
+ }, Re = ["colspan"], ze = {
67
+ key: 2,
68
+ class: "nb-data-table__state-row"
69
+ }, Be = ["colspan"], Ve = [
70
+ "role",
71
+ "aria-selected",
72
+ "tabindex",
73
+ "onClick",
74
+ "onKeydown",
75
+ "onKeyup"
76
+ ], He = ["role"], Ue = [
77
+ "aria-expanded",
78
+ "aria-controls",
79
+ "aria-label",
80
+ "onClick"
81
+ ], We = [
82
+ "checked",
83
+ "aria-label",
84
+ "onChange"
85
+ ], Ge = ["role", "data-label"], Ke = ["role"], qe = ["colspan", "role"], Je = ["id", "aria-label"], Ye = {
86
+ key: 1,
87
+ class: "nb-data-table__footer"
88
+ }, E = /* @__PURE__ */ e(/* @__PURE__ */ g({
89
+ __name: "DataTable",
90
+ props: {
91
+ columns: {},
92
+ rows: {},
93
+ rowKey: {},
94
+ size: { default: t.Medium },
95
+ sortState: { default: null },
96
+ selectable: { default: "none" },
97
+ selected: { default: () => [] },
98
+ loading: {
99
+ type: Boolean,
100
+ default: !1
101
+ },
102
+ skeletonRows: { default: 5 },
103
+ error: { default: void 0 },
104
+ emptyMessage: { default: void 0 },
105
+ stickyHeader: {
106
+ type: Boolean,
107
+ default: !0
108
+ },
109
+ zebra: {
110
+ type: Boolean,
111
+ default: !1
112
+ },
113
+ fill: {
114
+ type: Boolean,
115
+ default: !1
116
+ },
117
+ title: { default: void 0 },
118
+ description: { default: void 0 },
119
+ ariaLabel: { default: void 0 },
120
+ stackOnPhone: {
121
+ type: Boolean,
122
+ default: !1
123
+ },
124
+ expanded: { default: () => [] }
125
+ },
126
+ emits: [
127
+ "sort",
128
+ "update:selected",
129
+ "row-click",
130
+ "update:expanded"
131
+ ],
132
+ setup(e, { emit: t }) {
133
+ let g = e, { layerProps: E } = r(), D = t, O = ae(), Xe = `nb-data-table-select-${C()}`, Ze = l(() => g.size), k = l(() => g.columns.filter((e) => !e.hidden)), A = l(() => g.selectable !== "none"), j = l(() => !!O["row-actions"]), M = l(() => !!O["row-detail"]), N = l(() => k.value.length + (M.value ? 1 : 0) + (A.value ? 1 : 0) + (j.value ? 1 : 0)), { phone: Qe } = i(), P = l(() => g.stackOnPhone && Qe.value), $e = l(() => (k.value.find((e) => e.primary) ?? k.value.find((e) => !e.phoneHidden && !e.phoneMeta))?.key);
134
+ function et(e) {
135
+ return e.phoneHidden ? "nb-data-table__td--phone-hidden" : e.key === $e.value ? "nb-data-table__td--primary" : e.phoneMeta ? "nb-data-table__td--meta" : "nb-data-table__td--field";
136
+ }
137
+ let tt = l(() => !g.loading && !g.error && g.rows.length > 0 && (g.selectable === "multiple" || k.value.some((e) => e.sortable && !e.phoneHidden)));
138
+ function nt(e) {
139
+ if (e.width != null) return { width: typeof e.width == "number" ? `${e.width}px` : e.width };
140
+ }
141
+ function F(e, t) {
142
+ return t[e.key];
143
+ }
144
+ function rt(e) {
145
+ return e == null ? "" : String(e);
146
+ }
147
+ let it = (e) => e.column.render?.(e.row, F(e.column, e.row), e.rowIndex) ?? null;
148
+ it.props = [
149
+ "column",
150
+ "row",
151
+ "rowIndex"
152
+ ];
153
+ function I(e) {
154
+ let t = g.rowKey;
155
+ return typeof t == "function" ? t(e) : e[t];
156
+ }
157
+ let L = l(() => new Set(g.selected)), at = l(() => g.selected), R = l(() => g.selected.length);
158
+ function z(e) {
159
+ return L.value.has(I(e));
160
+ }
161
+ let B = l(() => g.rows.map((e) => I(e))), V = l(() => B.value.length > 0 && B.value.every((e) => L.value.has(e))), ot = l(() => !V.value && B.value.some((e) => L.value.has(e))), H = y(null), U = !1;
162
+ function st(e) {
163
+ U = e.shiftKey;
164
+ }
165
+ w(B, () => {
166
+ H.value = null;
167
+ });
168
+ function ct(e, t) {
169
+ let n = I(e), r = new Set(g.selected), i = !r.has(n), a = H.value, o = (e) => {
170
+ i ? r.add(e) : r.delete(e);
171
+ };
172
+ if (U && a !== null && a !== t) {
173
+ let e = Math.min(a, t), n = Math.max(a, t);
174
+ for (let t = e; t <= n; t++) {
175
+ let e = g.rows[t];
176
+ e && o(I(e));
177
+ }
178
+ } else o(n), H.value = t;
179
+ U = !1, D("update:selected", [...r]);
180
+ }
181
+ function lt(e) {
182
+ D("update:selected", [I(e)]);
183
+ }
184
+ function ut() {
185
+ let e = new Set(g.selected);
186
+ V.value ? B.value.forEach((t) => e.delete(t)) : B.value.forEach((t) => e.add(t)), D("update:selected", [...e]);
187
+ }
188
+ function dt() {
189
+ D("update:selected", []);
190
+ }
191
+ let ft = l(() => g.selectable !== "none" && !!O["batch-actions"]), W = l(() => ft.value && R.value > 0), pt = `nb-data-table-detail-${C()}`, mt = l(() => new Set(g.expanded));
192
+ function G(e) {
193
+ return M.value && mt.value.has(I(e));
194
+ }
195
+ function ht(e) {
196
+ let t = I(e), n = g.expanded.filter((e) => e !== t);
197
+ n.length === g.expanded.length && n.push(t), D("update:expanded", n);
198
+ }
199
+ function gt(e) {
200
+ return `${pt}-${e}`;
201
+ }
202
+ function _t(e, t) {
203
+ let n = k.value.find((e) => e.key === $e.value);
204
+ return `Details for ${(n ? rt(F(n, e)).trim() : "") || `row ${t + 1}`}`;
205
+ }
206
+ let vt = l(() => !!g.title || !!g.description || !!O.toolbar || !!O.search || !!O["toolbar-actions"]), yt = l(() => vt.value || ft.value), bt = y(null), K = y(null), q = y(null), J = y(!1);
207
+ function xt() {
208
+ let e = K.value, t = q.value;
209
+ J.value = !!e && !!t && t.offsetTop >= e.offsetTop + e.offsetHeight - 1;
210
+ }
211
+ let Y = null;
212
+ w([
213
+ bt,
214
+ K,
215
+ q
216
+ ], (e) => {
217
+ if (Y?.disconnect(), xt(), !(typeof ResizeObserver > "u")) {
218
+ Y ??= new ResizeObserver(xt);
219
+ for (let t of e) t && Y.observe(t);
220
+ }
221
+ }, { flush: "post" }), re(() => {
222
+ Y?.disconnect(), Y = null;
223
+ });
224
+ function X(e) {
225
+ return !!g.sortState && g.sortState.key === e.key && g.sortState.direction !== "none";
226
+ }
227
+ function St(e) {
228
+ return X(e) ? g.sortState.direction === "asc" ? "ascending" : "descending" : "none";
229
+ }
230
+ function Ct(e) {
231
+ return X(e) ? g.sortState.direction === "asc" ? se : ue : le;
232
+ }
233
+ function wt(e) {
234
+ return e === "asc" ? "desc" : e === "desc" ? "none" : "asc";
235
+ }
236
+ function Tt(e) {
237
+ let t = g.sortState && g.sortState.key === e.key ? g.sortState.direction : "none";
238
+ D("sort", {
239
+ key: e.key,
240
+ direction: wt(t)
241
+ });
242
+ }
243
+ let Et = ee(), Z = l(() => !!Et?.vnode.props?.onRowClick);
244
+ function Q(e, t) {
245
+ D("row-click", e, t);
246
+ }
247
+ function $(e) {
248
+ return Z.value && e.target === e.currentTarget && !e.altKey && !e.ctrlKey && !e.metaKey;
249
+ }
250
+ function Dt(e, t, n) {
251
+ $(e) && (e.key === "Enter" ? (e.preventDefault(), e.repeat || Q(t, n)) : e.key === " " && e.preventDefault());
252
+ }
253
+ function Ot(e, t, n) {
254
+ !$(e) || e.key !== " " || (e.preventDefault(), Q(t, n));
255
+ }
256
+ return (t, r) => (v(), f("div", te({ class: [
257
+ "nb-data-table",
258
+ `nb-data-table--${e.size}`,
259
+ { "nb-data-table--zebra": e.zebra },
260
+ { "nb-data-table--sticky": e.stickyHeader },
261
+ { "nb-data-table--fill": e.fill },
262
+ { "nb-data-table--stacked": P.value },
263
+ { "nb-data-table--stacked-headless": P.value && !tt.value },
264
+ { "nb-data-table--expandable": M.value }
265
+ ] }, ie(E)), [
266
+ yt.value ? (v(), f("div", {
267
+ key: 0,
268
+ ref_key: "toolbarRef",
269
+ ref: bt,
270
+ class: _(["nb-data-table__toolbar", { "nb-data-table__toolbar--wrapped": J.value }])
271
+ }, [
272
+ p("div", {
273
+ ref_key: "toolbarHeadingRef",
274
+ ref: K,
275
+ class: "nb-data-table__toolbar-heading",
276
+ inert: W.value || void 0,
277
+ "aria-hidden": W.value || void 0
278
+ }, [x(t.$slots, "toolbar", { selectedCount: R.value }, () => [e.title || e.description ? (v(), f("div", fe, [e.title ? (v(), f("h2", pe, S(e.title), 1)) : d("", !0), e.description ? (v(), f("p", me, S(e.description), 1)) : d("", !0)])) : d("", !0)], !0)], 8, de),
279
+ t.$slots.search || t.$slots["toolbar-actions"] ? (v(), f("div", {
280
+ key: 0,
281
+ ref_key: "toolbarToolsRef",
282
+ ref: q,
283
+ class: _(["nb-data-table__toolbar-tools", { "nb-data-table__toolbar-tools--grow-search": J.value && !!t.$slots.search }]),
284
+ inert: W.value || void 0,
285
+ "aria-hidden": W.value || void 0
286
+ }, [x(t.$slots, "search", {}, void 0, !0), x(t.$slots, "toolbar-actions", {}, void 0, !0)], 10, he)) : d("", !0),
287
+ W.value ? (v(), f("div", ge, [
288
+ p("span", _e, S(R.value) + " selected ", 1),
289
+ p("div", ve, [x(t.$slots, "batch-actions", {
290
+ selectedKeys: at.value,
291
+ clear: dt
292
+ }, void 0, !0)]),
293
+ h(a, {
294
+ class: "nb-data-table__batch-cancel",
295
+ variant: "ghost",
296
+ size: Ze.value,
297
+ onClick: dt
298
+ }, {
299
+ default: oe(() => [...r[3] ||= [m(" Cancel ", -1)]]),
300
+ _: 1
301
+ }, 8, ["size"])
302
+ ])) : d("", !0)
303
+ ], 2)) : d("", !0),
304
+ p("div", ye, [p("table", {
305
+ class: "nb-data-table__table",
306
+ role: P.value ? "table" : void 0,
307
+ "aria-label": e.ariaLabel || e.title || void 0,
308
+ "aria-busy": e.loading || void 0
309
+ }, [
310
+ p("colgroup", null, [
311
+ M.value ? (v(), f("col", xe)) : d("", !0),
312
+ A.value ? (v(), f("col", Se)) : d("", !0),
313
+ (v(!0), f(c, null, b(k.value, (e) => (v(), f("col", {
314
+ key: `col-${e.key}`,
315
+ style: ne(nt(e))
316
+ }, null, 4))), 128)),
317
+ j.value ? (v(), f("col", Ce)) : d("", !0)
318
+ ]),
319
+ p("thead", {
320
+ class: "nb-data-table__head",
321
+ role: P.value ? "rowgroup" : void 0
322
+ }, [p("tr", { role: P.value ? "row" : void 0 }, [
323
+ M.value ? (v(), f("th", Ee, [...r[4] ||= [p("span", { class: "nb-sr-only" }, "Row details", -1)]])) : d("", !0),
324
+ A.value ? (v(), f("th", De, [e.selectable === "multiple" ? (v(), u(s, {
325
+ key: 0,
326
+ "model-value": V.value,
327
+ indeterminate: ot.value,
328
+ "aria-label": "Select all rows",
329
+ "onUpdate:modelValue": ut
330
+ }, null, 8, ["model-value", "indeterminate"])) : d("", !0)])) : d("", !0),
331
+ (v(!0), f(c, null, b(k.value, (e) => (v(), f("th", {
332
+ key: `th-${e.key}`,
333
+ scope: "col",
334
+ class: _([
335
+ "nb-data-table__th",
336
+ `nb-data-table__th--${e.align || "left"}`,
337
+ { "nb-data-table__th--sortable": e.sortable },
338
+ { "nb-data-table__th--sorted": X(e) },
339
+ P.value && e.phoneHidden && "nb-data-table__th--phone-hidden"
340
+ ]),
341
+ "aria-sort": e.sortable ? St(e) : void 0
342
+ }, [e.sortable ? (v(), f("button", {
343
+ key: 0,
344
+ type: "button",
345
+ class: "nb-data-table__sort",
346
+ onClick: (t) => Tt(e)
347
+ }, [p("span", Ae, [x(t.$slots, `header-${e.key}`, { column: e }, () => [m(S(e.header), 1)], !0)]), h(n, {
348
+ name: Ct(e),
349
+ class: "nb-data-table__sort-icon",
350
+ "aria-hidden": "true"
351
+ }, null, 8, ["name"])], 8, ke)) : (v(), f("span", je, [x(t.$slots, `header-${e.key}`, { column: e }, () => [m(S(e.header), 1)], !0)]))], 10, Oe))), 128)),
352
+ j.value ? (v(), f("th", Me, [...r[5] ||= [p("span", { class: "nb-sr-only" }, "Row actions", -1)]])) : d("", !0)
353
+ ], 8, Te)], 8, we),
354
+ p("tbody", {
355
+ class: "nb-data-table__body",
356
+ role: P.value ? "rowgroup" : void 0
357
+ }, [e.loading ? (v(!0), f(c, { key: 0 }, b(e.skeletonRows, (e) => (v(), f("tr", {
358
+ key: `skeleton-${e}`,
359
+ class: "nb-data-table__row nb-data-table__row--skeleton"
360
+ }, [
361
+ M.value ? (v(), f("td", Pe)) : d("", !0),
362
+ A.value ? (v(), f("td", Fe, [...r[6] ||= [p("span", { class: "nb-data-table__skeleton nb-data-table__skeleton--box" }, null, -1)]])) : d("", !0),
363
+ (v(!0), f(c, null, b(k.value, (t) => (v(), f("td", {
364
+ key: `sk-${e}-${t.key}`,
365
+ class: "nb-data-table__td"
366
+ }, [...r[7] ||= [p("span", { class: "nb-data-table__skeleton" }, null, -1)]]))), 128)),
367
+ j.value ? (v(), f("td", Ie, [...r[8] ||= [p("span", { class: "nb-data-table__skeleton nb-data-table__skeleton--box" }, null, -1)]])) : d("", !0)
368
+ ]))), 128)) : e.error ? (v(), f("tr", Le, [p("td", {
369
+ colspan: N.value,
370
+ class: "nb-data-table__state nb-data-table__state--error"
371
+ }, [x(t.$slots, "error", { error: e.error }, () => [h(o, {
372
+ is: "span",
373
+ align: "center",
374
+ justify: "center",
375
+ gap: "xs",
376
+ class: "nb-data-table__state-inner"
377
+ }, {
378
+ default: oe(() => [h(n, {
379
+ name: "warning-circle-fill",
380
+ "aria-hidden": "true"
381
+ }), p("span", null, S(e.error), 1)]),
382
+ _: 1
383
+ })], !0)], 8, Re)])) : e.rows.length ? (v(!0), f(c, { key: 3 }, b(e.rows, (i, a) => (v(), f(c, { key: I(i) }, [p("tr", {
384
+ class: _([
385
+ "nb-data-table__row",
386
+ { "nb-data-table__row--selected": z(i) },
387
+ { "nb-data-table__row--clickable": Z.value },
388
+ M.value && {
389
+ "nb-data-table__row--expanded": G(i),
390
+ "nb-data-table__row--even": a % 2 == 1
391
+ }
392
+ ]),
393
+ role: P.value ? "row" : void 0,
394
+ "aria-selected": e.selectable === "none" ? void 0 : z(i),
395
+ tabindex: Z.value ? 0 : void 0,
396
+ onClick: (e) => Q(i, a),
397
+ onKeydown: (e) => Dt(e, i, a),
398
+ onKeyup: (e) => Ot(e, i, a)
399
+ }, [
400
+ M.value ? (v(), f("td", {
401
+ key: 0,
402
+ class: "nb-data-table__td nb-data-table__expand-cell",
403
+ role: P.value ? "cell" : void 0,
404
+ onClick: r[0] ||= T(() => {}, ["stop"])
405
+ }, [p("button", {
406
+ type: "button",
407
+ class: "nb-data-table__expand",
408
+ "aria-expanded": G(i),
409
+ "aria-controls": G(i) ? gt(a) : void 0,
410
+ "aria-label": _t(i, a),
411
+ onClick: (e) => ht(i)
412
+ }, [h(n, {
413
+ name: ce,
414
+ class: "nb-data-table__expand-icon",
415
+ "aria-hidden": "true"
416
+ })], 8, Ue)], 8, He)) : d("", !0),
417
+ A.value ? (v(), f("td", {
418
+ key: 1,
419
+ class: "nb-data-table__td nb-data-table__select-cell",
420
+ onClick: r[1] ||= T(() => {}, ["stop"]),
421
+ onMousedown: st,
422
+ onKeydown: st
423
+ }, [e.selectable === "multiple" ? (v(), u(s, {
424
+ key: 0,
425
+ "model-value": z(i),
426
+ "aria-label": `Select row ${a + 1}`,
427
+ "onUpdate:modelValue": (e) => ct(i, a)
428
+ }, null, 8, [
429
+ "model-value",
430
+ "aria-label",
431
+ "onUpdate:modelValue"
432
+ ])) : (v(), f("input", {
433
+ key: 1,
434
+ type: "radio",
435
+ class: "nb-data-table__radio",
436
+ name: Xe,
437
+ checked: z(i),
438
+ "aria-label": `Select row ${a + 1}`,
439
+ onChange: (e) => lt(i)
440
+ }, null, 40, We))], 32)) : d("", !0),
441
+ (v(!0), f(c, null, b(k.value, (n) => (v(), f("td", {
442
+ key: `td-${I(i)}-${n.key}`,
443
+ class: _([
444
+ "nb-data-table__td",
445
+ `nb-data-table__td--${n.align || "left"}`,
446
+ n.cellClass,
447
+ P.value && et(n)
448
+ ]),
449
+ role: P.value ? "cell" : void 0,
450
+ "data-label": e.stackOnPhone ? n.header : void 0
451
+ }, [x(t.$slots, `cell-${n.key}`, {
452
+ row: i,
453
+ value: F(n, i),
454
+ column: n,
455
+ rowIndex: a
456
+ }, () => [n.render ? (v(), u(it, {
457
+ key: 0,
458
+ column: n,
459
+ row: i,
460
+ "row-index": a
461
+ }, null, 8, [
462
+ "column",
463
+ "row",
464
+ "row-index"
465
+ ])) : (v(), f(c, { key: 1 }, [m(S(rt(F(n, i))), 1)], 64))], !0)], 10, Ge))), 128)),
466
+ j.value ? (v(), f("td", {
467
+ key: 2,
468
+ class: "nb-data-table__td nb-data-table__actions-cell",
469
+ onClick: r[2] ||= T(() => {}, ["stop"])
470
+ }, [x(t.$slots, "row-actions", {
471
+ row: i,
472
+ rowIndex: a
473
+ }, void 0, !0)])) : d("", !0)
474
+ ], 42, Ve), G(i) ? (v(), f("tr", {
475
+ key: 0,
476
+ class: "nb-data-table__detail-row",
477
+ role: P.value ? "row" : void 0
478
+ }, [p("td", {
479
+ colspan: N.value,
480
+ class: "nb-data-table__detail-cell",
481
+ role: P.value ? "cell" : void 0
482
+ }, [p("div", {
483
+ id: gt(a),
484
+ class: "nb-data-table__detail",
485
+ role: "region",
486
+ "aria-label": _t(i, a)
487
+ }, [x(t.$slots, "row-detail", {
488
+ row: i,
489
+ rowIndex: a
490
+ }, void 0, !0)], 8, Je)], 8, qe)], 8, Ke)) : d("", !0)], 64))), 128)) : (v(), f("tr", ze, [p("td", {
491
+ colspan: N.value,
492
+ class: "nb-data-table__state nb-data-table__state--empty"
493
+ }, [x(t.$slots, "empty", {}, () => [p("span", null, S(e.emptyMessage || "No data to display"), 1)], !0)], 8, Be)]))], 8, Ne)
494
+ ], 8, be)]),
495
+ t.$slots.footer ? (v(), f("div", Ye, [x(t.$slots, "footer", {}, void 0, !0)])) : d("", !0)
496
+ ], 16));
497
+ }
498
+ }), [["__scopeId", "data-v-129b9c3a"]]);
499
+ //#endregion
500
+ export { E as t };