@base-framework/organisms
Version:
This will add default organisms to the base framework.
3 lines (2 loc) • 16.7 kB
JavaScript
import{Div as Z}from"@base-framework/atoms";import{Atom as tt}from"@base-framework/base";var m=class{constructor(t=0,s=20){this.lastCursor=null,this.currentOffset=t,this.limit=s,this.hasMoreData=!0,this.loading=!1,this.newestId=null,this.hasNewerData=!1,this.loadingNewer=!1}canLoadMore(){return this.hasMoreData}canLoadNewer(){return this.hasNewerData&&this.newestId!==null}update(t,s=null){t<this.limit&&(this.hasMoreData=!1),this.lastCursor=s,this.currentOffset+=t}updateNewest(t){this.newestId=t,this.hasNewerData=t!==null}reset(){this.lastCursor=null,this.currentOffset=0,this.hasMoreData=!0,this.loading=!1,this.newestId=null,this.hasNewerData=!1,this.loadingNewer=!1}};var L=100;function x(e){if(!e||e.length===0)return null;let t=e[0],s=e[e.length-1];return t?.id&&s?.id?t.id>s.id?t.id:s.id:t?.id?t.id:s?.id?s.id:null}function I(e){let t=e===globalThis?globalThis.pageYOffset:e.scrollTop,s=e===globalThis?globalThis.innerHeight:e.clientHeight,i=e===globalThis?globalThis.document.documentElement.scrollHeight:e.scrollHeight;return{scrollTop:t,clientHeight:s,scrollHeight:i}}function z(e,t=L){return e.scrollTop+e.clientHeight>=e.scrollHeight-t}function G(e,t=L){return e.scrollTop<=t}var V=(e,t)=>z(e)&&t.canLoadMore(),Q=(e,t)=>G(e)&&t.canLoadMore(),A=(e,t,s,i=null)=>{e&&e.length>0?(s.append(e),t.update(e.length,i)):t.hasMoreData=!1},X=(e,t,s,i=null,r=null)=>{if(e&&e.length>0){let a=0,l=0;if(r){let n=I(r);a=n.scrollHeight,l=n.scrollTop}if(s.prepend(e),t.update(e.length,i),e.length<t.limit&&(t.hasMoreData=!1,s.addTrailingDivider&&s.addTrailingDivider()),r){let h=I(r).scrollHeight-a;r===globalThis?globalThis.scrollTo(0,l+h):r.scrollTop=l+h}}else t.hasMoreData=!1,s.addTrailingDivider&&s.addTrailingDivider()};var g=e=>(t,s)=>{let i=r=>{let a=[],l=null;r&&(a=r.rows||r.items||[],l=r.lastCursor||null),s(a,l)};e.xhr.all("",i,t.currentOffset,t.limit,t.lastCursor)},F=e=>(t,s)=>{let i=r=>{let a=[],l=null;r&&(a=r.rows||r.items||[],l=x(a)),s(a,l)};e.xhr.all("",i,0,t.limit,null,t.newestId)};var y=(e,t,s)=>{t.reset(),e(t,(i,r)=>{s.reset(),A(i,t,s,r);let a=x(i);a!==null&&t.updateNewest(a)})};var O=(e,t,s,i="down",r="list")=>{let a=i==="up"?Q:V,l=i==="up";return(n,h,o)=>{let c=h[r],d=I(e);if(a(d,t)){if(t.loading)return;t.loading=!0,s(t,(u,f)=>{o&&o();let Y=t.currentOffset===0;if(l){if(X(u,t,c,f,e),Y){let P=x(u);P!==null&&t.updateNewest(P)}}else A(u,t,c,f);t.loading=!1})}}},$=(e,t,s)=>(i,r,a)=>{let l=I(e);if(V(l,t)){if(t.loading)return;t.loading=!0,s(t,(n,h)=>{a&&a(),A(n,t,r,h),t.loading=!1})}};var et=(e,t,s)=>()=>{y(e,t,s)},st=(e,t,s,i)=>{s[i].refresh=et(e,t,s[i])},K=tt((e,t)=>{let s=new m(e.offset,e.limit),i=e.scrollContainer||globalThis,r=e.scrollDirection||"down",a=e.loadMoreItems||g(e.data),l=e.loadNewerItems||F(e.data),n=O(i,s,a,r,e.listCache);return Z({class:e.containerClass??"",onCreated(h,o){st(a,s,o,e.listCache),n(null,o,()=>{let d=o[e.listCache];if(d.reset(),r==="up"){let u=d.data?.items||d.data?.rows||[];if(s.newestId===null){let f=x(u);f!==null&&s.updateNewest(f)}setTimeout(()=>{if(i===globalThis){let f=globalThis.document.documentElement.scrollHeight;globalThis.scrollTo(0,f)}else i.scrollTop=i.scrollHeight},0)}});let c=o[e.listCache];c.fetchNew=(d=!1)=>{s.loadingNewer||(s.loadingNewer=!0,l(s,(u,f)=>{u&&u.length>0&&(r==="up"?c.append(u):c.prepend(u),f!==null&&s.updateNewest(f)),s.loadingNewer=!1,d&&r==="up"&&c.scrollToBottom()}))},c.scrollToBottom=()=>{if(i===globalThis){let d=globalThis.document.documentElement.scrollHeight;globalThis.scrollTo(0,d)}else i.scrollTop=i.scrollHeight}},addEvent:["scroll",i,n,{passive:!0}]},t)}),W=K;import{Atom as ut}from"@base-framework/base";import{Div as it}from"@base-framework/atoms";import{Atom as rt}from"@base-framework/base";var at=(e,t,s)=>()=>{y(e,t,s)},lt=(e,t,s,i)=>{s[i].refresh=at(e,t,s[i])},nt=rt((e,t)=>{let s=new m(e.offset,e.limit),i=e.loadMoreItems||g(e.data);return it({class:e.containerClass??"",onCreated(r,a){lt(i,s,a,e.listCache),a[e.listCache].refresh()}},t)}),q=nt;import{Div as N,On as ot}from"@base-framework/atoms";import{Component as ht,Data as ct,Jot as dt}from"@base-framework/base";import{Builder as H,Html as J}from"@base-framework/base";var p=class{static first(t){return this.get(t,0)}static last(t){let s=t.childNodes.length-1;return this.get(t,s)}static get(t,s){return t?.childNodes[s]??null}static next(t){return t?.nextSibling??null}static previous(t){return t?.previousSibling??null}static index(t){if(!t||!t.parentNode)return-1;let s=t.parentNode.children;return Array.from(s).indexOf(t)}static getPreviousIndex(t){let s=this.index(t);return s>0?s-1:0}static replace(t,s,i){if(!s)return;J.removeElementData(s);let r=H.build(t,null,i);s.replaceWith(r)}static remove(t){t&&J.removeChild(t)}static append(t,s,i){t&&H.build(t,s,i)}static prepend(t,s,i){if(!t)return;let r=H.build(t,null,i);s.insertBefore(r,s.firstChild)}};var k=(e,t,s)=>({index:e,item:t,status:s}),b=class e{static diff(t,s,i){let r=this.arrayToMap(t,i),a=[],l=[];return s.forEach((n,h)=>{let o=n[i];if(!r.has(o)){a.push(k(h,n,"added"));return}let{item:c}=r.get(o);if(!this.deepEqual(c,n)){a.push(k(h,n,"updated"));return}a.push(k(h,n,"unchanged")),r.delete(o)}),r.forEach(({item:n})=>{l.push(n)}),{changes:a,deletedItems:l}}static modify(t,s,i,r=!1){let a=[],l=e.arrayToMap(s,i),n=t.length;for(let h=0;h<n;h++){let o=t[h],c=o[i]??null;if(!l.has(o[c])){if(!r)continue;a.push(k(h,o,"added"));continue}o={...l.get(o[c]).item,...o},a.push(k(h,o,"updated"))}return a}static arrayToMap(t,s){let i=new Map;return t.forEach((r,a)=>{i.set(r[s],{item:r,index:a})}),i}static deepEqual(t,s){if(t===s)return!0;if(typeof t!="object"||t===null||typeof s!="object"||s===null)return!1;let i=Object.keys(t),r=Object.keys(s);if(i.length!==r.length)return!1;for(let a of i)if(!r.includes(a)||!this.deepEqual(t[a],s[a]))return!1;return!0}};var S=class{constructor({layout:t,itemProperty:s,customCompare:i,skipFirst:r=!1}){this.layout=t,this.itemProperty=s,this.customCompare=i,this.skipFirst=r,this.lastAppend=null,this.lastPrepend=null,this.lastDividerValue=null,this.prependBoundary=null}reset(){this.lastAppend=null,this.lastPrepend=null,this.lastDividerValue=null,this.prependBoundary=null}setPrependBoundary(t){if(t){let s=this.getValue(t);this.lastPrepend=s,this.prependBoundary=s,this.lastDividerValue=null}else this.prependBoundary=null}setFirstValues(t){let s=this.lastAppend;return s||(this.lastAppend=t,this.lastPrepend=t),!s}append(t,s){this.prependBoundary=null;let i=this.getValue(t),r=this.setFirstValues(i);if(r&&!this.skipFirst){this.addDivider(i,s);return}r||this.compare(this.lastAppend,i)&&(this.addDivider(i,s),this.lastAppend=i)}getValue(t){return t[this.itemProperty]??null}prepend(t,s){let i=this.getValue(t),r=this.setFirstValues(i);if(r&&!this.skipFirst){this.addDivider(i,s);return}r||this.compare(this.lastPrepend,i)&&(this.addDivider(i,s),this.lastPrepend=i)}compare(t,s){return this.customCompare?this.customCompare(t,s):t!==s}addDivider(t,s){if(!this.layout||!s||this.lastDividerValue!==null&&this.compare(this.lastDividerValue,t)===!1||this.prependBoundary!==null&&this.compare(this.prependBoundary,t)===!1)return;let i=this.layout(t);i&&typeof i=="object"&&(i["data-divider"]="true"),s.push(i),this.lastDividerValue=t}};var T=e=>JSON.parse(JSON.stringify(e)),w=dt({onCreated(){this.divider&&(this.rowDivider=new S({...this.divider}))},setData(){let e=this.items?T(this.items):[];return new ct({items:e,hasItems:null})},before(){this.linkParentData()},linkParentData(){let e=!1,t=this.parent?.data??this.parent?.context?.data??null;t&&this.linkParent!==!1?(e=t.get("hasItems"),this.data.link(t,"hasItems")):this.isDynamic===!0&&(e=void 0);let s=e||null;if(e!==void 0){let i=this.items||[];s=Array.isArray(i)&&i.length>0,this.data.set("hasItems",s)}this.defaultHasItemValue=s},destroy(){this.data.hasItems=this.defaultHasItemValue},render(){let e=this.row.bind(this);return N({class:"flex flex-auto flex-col"},[ot("hasItems",t=>t===!1&&this.emptyState?this.emptyState():null),N({cache:"listContainer",class:`list ${this.class||""}`,onSet:["hasItems",{hidden:!1}],for:["items",e]})])},row(e,t,s,i){if(typeof this.rowItem!="function")return null;this.rowDivider&&i&&this.rowDivider.append(e,i);let r=this.rowItem(e,t);if(r&&this.key&&e[this.key]!==void 0){let a=String(e[this.key]);if(r instanceof ht||!r.tag)return N({"data-row-key":a},[r]);r["data-row-key"]=a}return r},delete(e){let t=this.findIndexByKey(e);if(t===-1)return;this.data.delete(`items[${t}]`);let s=p.get(this.listContainer,t);s&&p.remove(s),this.updateHasItems()},replace(e,t=!0){if(e.status==="unchanged")return;let s=e.item;if(e.status==="added"){if(t){this.append(s);return}this.prepend(s);return}let i=s[this.key],r=this.findIndexByKey(i);if(r===-1)return;this.data.set(`items[${r}]`,s);let a=this.findRowElementByKey(i),l=this.row(s,r);a&&l&&p.replace(l,a,this)},remove(e){Array.isArray(e)&&(e.forEach(t=>{this.delete(t[this.key])}),this.updateHasItems())},isEmpty(){return this.data.get("items")?.length===0},setRows(e){let t=Array.isArray(e)?e:[];this.data.set("items",t),this.updateHasItems()},getRows(){return this.data.get("items")||[]},reset(){this.data.set("items",[]),this.data.set("hasItems",!1),this.rowDivider&&this.rowDivider.reset()},append(e){if(!e)return;Array.isArray(e)||(e=[e]),e=T(e);let t=[],s=this.data.items.length-1;e.forEach(i=>{this.rowDivider&&this.rowDivider.append(i,t);let r=this.row(i,s+1);r&&t.push(r),this.data.set(`items[${++s}]`,i)}),this.updateHasItems(),t.length>0&&p.append(t,this.listContainer,this)},mingle(e,t=!1){if(!Array.isArray(e))return;e=T(e);let s=this.data.get("items")||[],i=b.diff(s,e,this.key);t&&i.deletedItems.length>0&&this.remove(i.deletedItems),i.changes.forEach(r=>{this.replace(r)}),this.updateHasItems()},merge(e,t=!0,s=!1){if(!Array.isArray(e))return;e=T(e);let i=this.data.get("items")||[];b.diff(i,e,this.key).changes.forEach(a=>{s&&(this.remove([a.item]),a.status="added"),this.replace(a,t)}),this.updateHasItems()},modify(e,t=!1){if(!Array.isArray(e))return;let s=T(e),i=this.data.get("items")||[];b.modify(s,i,this.key,t).forEach(a=>{this.replace(a)}),this.updateHasItems()},prepend(e){if(!e)return;if(Array.isArray(e)||(e=[e]),e=T(e),this.rowDivider){let a=this.data.get("items")||[];a.length>0&&this.rowDivider.setPrependBoundary(a[0])}let t=[],s=e.reverse();s.forEach(a=>{this.rowDivider&&this.rowDivider.prepend(a,t);let l=this.row(a,0);l&&t.push(l)});let i=this.data.get("items")||[],r=s.concat(i);this.data.attributes.items=r,this.data.stage.items=r,this.updateHasItems(),t.length>0&&p.prepend(t,this.listContainer,this)},addTrailingDivider(){if(!this.rowDivider)return;let e=this.data.get("items")||[];if(e.length===0)return;let t=e[0],s=this.rowDivider.getValue(t),i=this.rowDivider.layout(s);i&&p.prepend([i],this.listContainer,this)},updateHasItems(){let e=this.data.get("items")||[],t=Array.isArray(e)&&e.length>0;this.data.set("hasItems",t)},findIndexByKey(e){return(this.data.get("items")||[]).findIndex(s=>s&&s[this.key]===e)},findRowElementByKey(e){if(!this.listContainer)return null;let t=Array.from(this.listContainer.children),s=String(e);for(let i of t)if(!(i.hasAttribute&&i.hasAttribute("data-divider"))&&i.hasAttribute&&i.getAttribute("data-row-key")===s)return i;return null}});var ft=ut(e=>{let t=e.cache??"list";return q({listCache:t,loadMoreItems:e.loadMoreItems,offset:e.offset,limit:e.limit,containerClass:e.containerClass??"",data:e.data},[new w({cache:t,key:e.key,items:e.items||[],divider:e.divider,role:"list",class:e.class,rowItem:e.rowItem})])});import{Atom as mt}from"@base-framework/base";var pt=mt(e=>{let t=e.cache??"list";return W({listCache:t,scrollDirection:e.scrollDirection||"down",scrollContainer:e.scrollContainer,loadMoreItems:e.loadMoreItems,offset:e.offset,limit:e.limit,containerClass:e.containerClass??"flex flex-auto flex-col",data:e.data},[new w({cache:t,key:e.key,items:e.items||[],divider:e.divider,role:"list",class:e.class,emptyState:e.emptyState||null,rowItem:e.rowItem,linkParent:e.linkParent??!1,isDynamic:!0})])});import{Component as gt,router as yt}from"@base-framework/base";var U=(e,t)=>({attr:e,value:t}),wt=(e,t)=>new RegExp("^"+e+"($|#|/|\\.).*").test(t),B=class extends gt{beforeSetup(){this.selectedClass=this.activeClass||"active"}render(){let t=this.href,s=this.text,i=this.setupWatchers(t,s);return{tag:"a",class:this.class||this.className||null,onState:["selected",{[this.selectedClass]:!0}],href:this.getString(t),text:this.getString(s),nest:this.nest||this.children,dataSet:this.dataSet,watch:i}}getLinkPath(){return this?.panel?.pathname||null}getString(t){let s=typeof t;return s!=="object"&&s!=="undefined"?t:null}setupWatchers(t,s){let i=this.exact===!0,r=yt.data,a=[];return t&&typeof t=="object"&&a.push(U("href",t)),s&&typeof s=="object"&&a.push(U("text",s)),a.push({value:["[[path]]",r],callBack:(l,n)=>{let h=n.pathname+n.hash,o=i?l===h:wt(n.pathname,l);this.update(o)}}),a}setupStates(){return{selected:!1}}update(t){this.state.selected=t}};import{Tbody as Dt}from"@base-framework/atoms";import{Tbody as xt}from"@base-framework/atoms";import{Data as kt}from"@base-framework/base";import{Div as Ct,Td as bt,Tr as Tt}from"@base-framework/atoms";var _=({columnCount:e=3,customCell:t,key:s})=>{let i=r=>{if(t&&typeof t=="function")return t(r);let a=["w-3/4","w-1/2","w-full","w-2/3","w-5/6"],l=a[r%a.length];return bt({class:"px-6 py-4"},[Ct({class:`${l} h-4 bg-muted animate-pulse rounded-md`})])};return Tt({class:"border-b",key:s},Array.from({length:e},(r,a)=>i(a)))};var C=class extends w{setData(){let t=this.items&&this.items.length>0;return this.skeleton&&!t?new kt({items:this.generateSkeletonRows(),hasItems:!0,showSkeleton:!0}):super.setData()}generateSkeletonRows(){let t=this.skeleton,s=5,i=null;typeof t=="object"&&(s=t.number||5,i=t.row||null);let r=this.columnCount||3;return Array.from({length:s},(a,l)=>i&&typeof i=="function"?i(l,r):_({columnCount:r,key:`skeleton-${l}`}))}removeSkeleton(){this.data.get("showSkeleton")&&(this.data.set("showSkeleton",!1),this.data.set("items",this.items||[]))}setRows(t){this.removeSkeleton(),super.setRows(t)}append(t){this.removeSkeleton(),super.append(t)}prepend(t){this.removeSkeleton(),super.prepend(t)}row(t,s,i,r){return this.data&&this.data.get("showSkeleton")?t:super.row(t,s,i,r)}render(){let t=this.row.bind(this);return xt({onCreated:s=>{this.listContainer=s},class:`tbody ${this.class||""}`,for:["items",t]})}destroy(){super.destroy()}};var E=class extends C{declareProps(){this.tracker=null,this.fetchCallback=null}setupPageTracker(){return this.tracker=new m(this.offset,this.limit)}setupFetchCallback(){this.setupPageTracker(),this.fetchCallback=this.loadMoreItems||g(this.tableData)}refresh(){y(this.fetchCallback,this.tracker,this)}render(){let t=this.row.bind(this);return this.setupFetchCallback(),Dt({class:`tbody ${this.class||""}`,onCreated:(s,i)=>{this.listContainer=s,this.refresh()},for:["items",t]})}};import{Tbody as vt}from"@base-framework/atoms";var M=class extends C{declareProps(){this.tracker=null,this.scrollContainer=null,this.fetchCallback=null}setupPageTracker(){return this.tracker=new m(this.offset,this.limit)}setupScrollHandler(t){let s=this.setupPageTracker();return this.fetchCallback=this.loadMoreItems||g(this.tableData),$(t,s,this.fetchCallback)}refresh(){y(this.fetchCallback,this.tracker,this)}render(){let t=this.row.bind(this),s=this.scrollContainer||globalThis,i=this.setupScrollHandler(s);return vt({class:`tbody ${this.class||""}`,onCreated:(r,a)=>{this.listContainer=r,i(null,a,()=>{this.reset()})},addEvent:["scroll",s,i,{passive:!0}],for:["items",t]})}};import{Span as It}from"@base-framework/atoms";import{Component as St,SimpleData as At}from"@base-framework/base";var D=class{constructor(t,s){this.timer=null,this.callBack=s,this.duration=t||1e3}createTimer(t){this.timer=globalThis.setTimeout(t,this.duration)}start(){this.stop();let t=this.returnCallBack.bind(this);this.createTimer(t)}stop(){globalThis.clearTimeout(this.timer)}returnCallBack(){let t=this.callBack;typeof t=="function"&&t.call()}};var v=class extends D{createTimer(t){this.timer=globalThis.setInterval(t,this.duration)}stop(){globalThis.clearInterval(this.timer)}};var j=new At({date:0}),Ht=6e4,Nt=new v(Ht,()=>{j.increment("date")});Nt.start();var R=class extends St{setData(){return j}render(){return It({class:this.class,text:this.getTime(),onSet:["date",()=>this.getTime()]})}getTime(){let t=this.dateTime;return this.filter?this.filter(t):t}};export{K as BiDirectionalContainer,ft as DataList,E as DataTableBody,R as DynamicTime,v as IntervalTimer,w as List,B as NavLink,pt as ScrollableList,M as ScrollableTableBody,C as TableBody,D as Timer};
//# sourceMappingURL=organisms.js.map