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