resourcenest 1.2.0

package/dist/resourcenest.umd.cjs

@@ -0,0 +1,304 @@
+(function(m,w){typeof exports=="object"&&typeof module<"u"?w(exports):typeof define=="function"&&define.amd?define(["exports"],w):(m=typeof globalThis<"u"?globalThis:m||self,w(m.ResourceNest={}))})(this,(function(m){"use strict";function w(s){const t=s.getHours().toString().padStart(2,"0"),e=s.getMinutes().toString().padStart(2,"0");return`${t}:${e}`}function k(s,t="DD.MM.YYYY"){const e=s.getDate().toString().padStart(2,"0"),r=(s.getMonth()+1).toString().padStart(2,"0"),o=s.getFullYear();return t.replace("DD",e).replace("MM",r).replace("YYYY",o)}function C(s){return new Date(s.getFullYear(),s.getMonth(),s.getDate(),0,0,0,0)}function H(s,t){const e=new Date(s);return e.setDate(e.getDate()+t),e}function v(s,t){return s.getFullYear()===t.getFullYear()&&s.getMonth()===t.getMonth()&&s.getDate()===t.getDate()}function E(s,t=5){const e=6e4*t;return new Date(Math.round(s.getTime()/e)*e)}const M={startHour:8,endHour:22,events:[],resources:[],locale:"de-DE",dateFormat:"DD.MM.YYYY",todayLabel:"Today",loadingLabel:"Loading...",showNavigation:!0,showNowIndicator:!0,showViewSwitcher:!0,eventClickable:!0,timeClickable:!0,view:"day",viewLabels:{day:"Day","3days":"3 Days",week:"Week"},onEventClick:null,onTimeClick:null,onDateChange:null,onViewChange:null},T=`
+.rn-timeline-calendar {
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+  padding: 1rem;
+  box-sizing: border-box;
+}
+.rn-timeline-calendar *, .rn-timeline-calendar *::before, .rn-timeline-calendar *::after {
+  box-sizing: border-box;
+}
+.rn-calendar-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+.rn-date-display {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: #111827;
+}
+.rn-nav-controls {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+.rn-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 16px;
+  border-radius: 6px;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  border: 1px solid #d1d5db;
+  background: #fff;
+  color: #374151;
+  transition: background 0.15s, border-color 0.15s;
+}
+.rn-btn:hover {
+  background: #f9fafb;
+  border-color: #9ca3af;
+}
+.rn-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.rn-btn-icon {
+  padding: 8px;
+  min-width: 36px;
+}
+.rn-calendar-body {
+  display: flex;
+  position: relative;
+  border: 1px solid #e5e7eb;
+  border-radius: 4px;
+  min-height: 200px;
+  overflow: hidden;
+}
+.rn-loading-overlay {
+  position: absolute;
+  inset: 0;
+  background: rgba(255,255,255,0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 100;
+  font-weight: 600;
+  color: #6b7280;
+}
+.rn-resource-sidebar {
+  width: 140px;
+  flex-shrink: 0;
+  background: #f9fafb;
+  border-right: 1px solid #e5e7eb;
+  margin-top: 40px;
+}
+.rn-resource-row {
+  display: flex;
+  align-items: center;
+  height: 60px;
+  padding: 0 1rem;
+  border-bottom: 1px solid #e5e7eb;
+  font-size: 0.875rem;
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.rn-chart {
+  flex: 1;
+  overflow-x: auto;
+}
+.rn-hour-labels {
+  display: flex;
+  height: 40px;
+  background: #f3f4f6;
+  border-bottom: 1px solid #e5e7eb;
+}
+.rn-hour-cell {
+  flex: 1;
+  min-width: 80px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.75rem;
+  color: #4b5563;
+  border-right: 1px solid #e5e7eb;
+}
+.rn-hour-cell.is-current {
+  background: #dbeafe;
+  font-weight: 600;
+  color: #1d4ed8;
+}
+.rn-timeline {
+  position: relative;
+}
+.rn-timeline-row {
+  display: flex;
+  height: 60px;
+  position: relative;
+}
+.rn-timeline-cell {
+  flex: 1;
+  min-width: 80px;
+  border-right: 1px solid #e5e7eb;
+  border-bottom: 1px solid #e5e7eb;
+}
+.rn-timeline-cell.is-current {
+  background: #eff6ff;
+}
+.rn-event {
+  position: absolute;
+  top: 6px;
+  height: calc(100% - 12px);
+  background: #3b82f6;
+  color: #fff;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 0.75rem;
+  overflow: hidden;
+  cursor: pointer;
+  z-index: 10;
+  box-shadow: 0 1px 2px rgb(0 0 0 / 0.1);
+  transition: transform 0.1s;
+}
+.rn-event:hover {
+  transform: scale(1.02);
+  z-index: 20;
+}
+.rn-event.status-cancelled {
+  background: #ef4444;
+}
+.rn-event.status-confirmed {
+  background: #10b981;
+}
+.rn-event-time {
+  font-weight: 700;
+}
+.rn-event-label {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.rn-event-guests {
+  font-size: 0.7rem;
+  opacity: 0.9;
+}
+.rn-now-indicator {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  background: #ef4444;
+  z-index: 30;
+  pointer-events: none;
+}
+.rn-now-indicator::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -4px;
+  width: 10px;
+  height: 10px;
+  background: #ef4444;
+  border-radius: 50%;
+}
+.rn-view-switcher {
+  display: flex;
+  gap: 0;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  overflow: hidden;
+}
+.rn-view-btn {
+  padding: 6px 12px;
+  font-size: 0.8rem;
+  font-weight: 500;
+  cursor: pointer;
+  border: none;
+  background: #fff;
+  color: #374151;
+  transition: background 0.15s;
+  border-right: 1px solid #d1d5db;
+}
+.rn-view-btn:last-child {
+  border-right: none;
+}
+.rn-view-btn:hover {
+  background: #f3f4f6;
+}
+.rn-view-btn.is-active {
+  background: #3b82f6;
+  color: #fff;
+}
+.rn-day-header {
+  display: flex;
+  background: #f3f4f6;
+  border-bottom: 1px solid #e5e7eb;
+}
+.rn-day-column-header {
+  flex: 1;
+  text-align: center;
+  padding: 8px 4px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: #374151;
+  border-right: 1px solid #e5e7eb;
+}
+.rn-day-column-header:last-child {
+  border-right: none;
+}
+.rn-day-column-header.is-today {
+  background: #dbeafe;
+  color: #1d4ed8;
+}
+.rn-multi-day-timeline {
+  display: flex;
+}
+.rn-day-column {
+  flex: 1;
+  border-right: 1px solid #e5e7eb;
+}
+.rn-day-column:last-child {
+  border-right: none;
+}
+`;function L(){if(document.getElementById("rn-timeline-calendar-styles"))return;const s=document.createElement("style");s.id="rn-timeline-calendar-styles",s.textContent=T,document.head.appendChild(s)}class _{constructor(t,e={}){if(this.root=typeof t=="string"?document.querySelector(t):t,!this.root)throw new Error(`ResourceNest: Element "${t}" not found`);this.options={...M,...e},this.currentDate=C(new Date),this.events=this._normalizeEvents(this.options.events),this.resources=this.options.resources||[],this.loading=!1,this.view=this.options.view||"day",L(),this._render()}setEvents(t){return this.events=this._normalizeEvents(t),this._renderTimeline(),this}setResources(t){return this.resources=t||[],this._render(),this}setDate(t){return this.currentDate=C(new Date(t)),this._render(),this._emitDateChange(),this}goToToday(){return this.currentDate=C(new Date),this._render(),this._emitDateChange(),this}nextDay(){const t=this._getViewDays();return this.currentDate=H(this.currentDate,t),this._render(),this._emitDateChange(),this}prevDay(){const t=this._getViewDays();return this.currentDate=H(this.currentDate,-t),this._render(),this._emitDateChange(),this}setView(t){return["day","3days","week"].includes(t)&&(this.view=t,this._render(),this._emitViewChange()),this}getView(){return this.view}setLoading(t){this.loading=t;const e=this.root.querySelector(".rn-loading-overlay");return e&&(e.style.display=t?"flex":"none"),this}refresh(){return this._render(),this}scrollToNow(){const t=this.root.querySelector(".rn-chart"),e=new Date;if(!t)return this;const r=this._getVisibleDates(),o=r.findIndex(n=>v(n,e));if(o===-1)return this;const{startHour:i,endHour:c}=this.options,l=c-i,a=l*r.length,d=e.getHours()-i,g=(o*l+d)/a;return t.scrollLeft=t.scrollWidth*Math.max(0,Math.min(1,g))-t.clientWidth/2,this}getDate(){return new Date(this.currentDate)}destroy(){this.root.innerHTML="",this.root.classList.remove("rn-timeline-calendar")}onEventClick(t){return this.options.onEventClick=t,this}onTimeClick(t){return this.options.onTimeClick=t,this}onDateChange(t){return this.options.onDateChange=t,this}onViewChange(t){return this.options.onViewChange=t,this}_getViewDays(){switch(this.view){case"3days":return 3;case"week":return 7;default:return 1}}_getVisibleDates(){const t=this._getViewDays(),e=[];for(let r=0;r<t;r++)e.push(H(this.currentDate,r));return e}_normalizeEvents(t){return(t||[]).map(e=>({id:e.id,resourceId:e.resourceId||e.serviceResourceId,from:new Date(e.from),to:new Date(e.to),label:e.label||e.title||e.code||"",guestCount:e.guestCount||e.guests||0,status:e.status||null,data:e}))}_getHours(){const{startHour:t,endHour:e}=this.options,r=[],o=new Date;for(let i=t;i<e;i++)r.push({hour:i,label:`${i.toString().padStart(2,"0")}:00`,isCurrent:v(o,this.currentDate)&&o.getHours()===i});return r}_getDayRange(){const{startHour:t,endHour:e}=this.options,r=this._getViewDays(),o=new Date(this.currentDate);o.setHours(t,0,0,0);const i=new Date(this.currentDate);return i.setDate(i.getDate()+r-1),i.setHours(e,0,0,0),{from:o,to:i,rangeMs:i-o}}_getEventsForResource(t){const{from:e,to:r}=this._getDayRange();return this.events.filter(o=>o.resourceId!==t?!1:!(o.to<=e||o.from>=r))}_render(){const{showNavigation:t,showViewSwitcher:e,todayLabel:r,loadingLabel:o,dateFormat:i,viewLabels:c}=this.options,l=this._getHours(),a=this._getVisibleDates(),d=a.length>1;let f;if(d){const n=a[0],h=a[a.length-1];f=`${k(n,i)} - ${k(h,i)}`}else f=k(this.currentDate,i);const g=a.flatMap((n,h)=>l.map(b=>({...b,dayIndex:h,date:n,isCurrent:v(n,new Date)&&new Date().getHours()===b.hour})));this.root.classList.add("rn-timeline-calendar"),this.root.innerHTML=`
+      <div class="rn-calendar-header">
+        <div class="rn-date-display">${f}</div>
+        <div class="rn-nav-controls">
+          ${e?`
+            <div class="rn-view-switcher">
+              <button class="rn-view-btn ${this.view==="day"?"is-active":""}" data-view="day">${c.day}</button>
+              <button class="rn-view-btn ${this.view==="3days"?"is-active":""}" data-view="3days">${c["3days"]}</button>
+              <button class="rn-view-btn ${this.view==="week"?"is-active":""}" data-view="week">${c.week}</button>
+            </div>
+          `:""}
+          ${t?`
+            <button class="rn-btn" data-action="today">${r}</button>
+            <button class="rn-btn rn-btn-icon" data-action="prev">&#8249;</button>
+            <button class="rn-btn rn-btn-icon" data-action="next">&#8250;</button>
+          `:""}
+        </div>
+      </div>
+      <div class="rn-calendar-body">
+        <div class="rn-loading-overlay" style="display:${this.loading?"flex":"none"}">${o}</div>
+        <div class="rn-resource-sidebar">
+          ${d?'<div class="rn-resource-row" style="height:40px;"></div>':""}
+          ${this.resources.map(n=>`
+            <div class="rn-resource-row" data-resource-id="${n.id||n.Id}">${n.name||n.Name||n.title||"—"}</div>
+          `).join("")}
+        </div>
+        <div class="rn-chart">
+          ${d?this._renderMultiDayHeader(a,l.length):""}
+          <div class="rn-hour-labels">
+            ${g.map(n=>`
+              <div class="rn-hour-cell ${n.isCurrent?"is-current":""}">${n.label}</div>
+            `).join("")}
+          </div>
+          <div class="rn-timeline" data-days="${a.length}" data-hours="${l.length}">
+            ${this.resources.map(n=>`
+              <div class="rn-timeline-row" data-resource-id="${n.id||n.Id}">
+                ${g.map(h=>`
+                  <div class="rn-timeline-cell ${h.isCurrent?"is-current":""}" data-day="${h.dayIndex}"></div>
+                `).join("")}
+              </div>
+            `).join("")}
+          </div>
+        </div>
+      </div>
+    `,this._bindEvents(),this._renderTimeline(),this.scrollToNow()}_renderMultiDayHeader(t,e){const r=new Date,o=["So","Mo","Di","Mi","Do","Fr","Sa"];return`
+      <div class="rn-day-header">
+        ${t.map(i=>{const c=v(i,r),l=o[i.getDay()],a=i.getDate();return`<div class="rn-day-column-header ${c?"is-today":""}" style="flex: ${e};">${l} ${a}</div>`}).join("")}
+      </div>
+    `}_renderTimeline(){const t=this.root.querySelector(".rn-timeline");if(!t)return;t.querySelectorAll(".rn-event, .rn-now-indicator").forEach(a=>a.remove());const e=this._getVisibleDates(),{startHour:r,endHour:o}=this.options,i=o-r,c=i*e.length,l=t.scrollWidth;if(this.resources.forEach(a=>{const d=a.id||a.Id,f=t.querySelector(`.rn-timeline-row[data-resource-id="${d}"]`);if(!f)return;this._getEventsForResource(d).forEach(n=>{e.forEach((h,b)=>{const y=new Date(h);y.setHours(r,0,0,0);const u=new Date(h);if(u.setHours(o,0,0,0),n.to<=y||n.from>=u)return;const D=n.from<y?y:n.from,$=n.to>u?u:n.to,x=D.getHours()-r+D.getMinutes()/60,I=b*i+x,V=($-D)/(1e3*60*60),Y=l/c*I,N=Math.max(40,l/c*V),p=document.createElement("div");p.className="rn-event",(n.status==="Cancelled"||n.status==="cancelled")&&p.classList.add("status-cancelled"),(n.status==="Confirmed"||n.status==="confirmed")&&p.classList.add("status-confirmed"),p.style.left=`${Y}px`,p.style.width=`${N}px`,p.title=n.label,p.dataset.eventId=n.id,p.innerHTML=`
+            <div class="rn-event-time">${w(n.from)}</div>
+            <div class="rn-event-label">${n.label}</div>
+            ${n.guestCount?`<div class="rn-event-guests">${n.guestCount} people</div>`:""}
+          `,this.options.eventClickable&&p.addEventListener("click",z=>{z.stopPropagation(),typeof this.options.onEventClick=="function"&&this.options.onEventClick(n.data,n)}),f.appendChild(p)})})}),this.options.showNowIndicator){const a=new Date,d=this._getVisibleDates(),f=d.findIndex(g=>v(g,a));if(f!==-1&&a.getHours()>=this.options.startHour&&a.getHours()<this.options.endHour){const g=this.options.endHour-this.options.startHour,n=g*d.length,h=a.getHours()-this.options.startHour+a.getMinutes()/60,b=f*g+h,y=l/n*b,u=document.createElement("div");u.className="rn-now-indicator",u.style.left=`${y}px`,t.appendChild(u)}}}_bindEvents(){const t=this.root.querySelector('[data-action="today"]'),e=this.root.querySelector('[data-action="prev"]'),r=this.root.querySelector('[data-action="next"]');if(t&&t.addEventListener("click",()=>this.goToToday()),e&&e.addEventListener("click",()=>this.prevDay()),r&&r.addEventListener("click",()=>this.nextDay()),this.root.querySelectorAll("[data-view]").forEach(o=>{o.addEventListener("click",()=>{const i=o.dataset.view;this.setView(i)})}),this.options.timeClickable){const o=this.root.querySelector(".rn-timeline");o&&o.addEventListener("click",i=>this._handleTimelineClick(i))}}_handleTimelineClick(t){if(t.target.closest(".rn-event"))return;const e=t.currentTarget,r=e.getBoundingClientRect(),o=t.clientX-r.left+e.scrollLeft,i=t.clientY-r.top,c=this._getVisibleDates(),{startHour:l,endHour:a}=this.options,d=a-l,f=d*c.length,g=e.scrollWidth,n=o/g*f,h=Math.floor(n/d),b=n%d,y=c[h]||c[0];let u=new Date(y);u.setHours(l+Math.floor(b),b%1*60,0,0),u=E(u,5);const $=Math.floor(i/60),x=this.resources[$];x&&typeof this.options.onTimeClick=="function"&&this.options.onTimeClick({time:u.toISOString(),date:u,resource:x})}_emitDateChange(){if(typeof this.options.onDateChange=="function"){const t=this.currentDate.getFullYear(),e=String(this.currentDate.getMonth()+1).padStart(2,"0"),r=String(this.currentDate.getDate()).padStart(2,"0"),o=`${t}-${e}-${r}`;this.options.onDateChange(o,this.currentDate)}}_emitViewChange(){typeof this.options.onViewChange=="function"&&this.options.onViewChange(this.view)}}function S(s,t={}){return new _(s,t)}m.ResourceNest=_,m.createResourceNest=S,m.default=S,Object.defineProperties(m,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "resourcenest",
+  "version": "1.2.0",
+  "description": "ResourceNest - Professional Resource Calendar UI. Beautiful timeline interface for displaying and managing room bookings, staff schedules, equipment allocation & appointments. Vanilla JavaScript, framework-agnostic.",
+  "type": "module",
+  "private": false,
+  "main": "./dist/resourcenest.umd.cjs",
+  "module": "./dist/resourcenest.js",
+  "browser": "./dist/resourcenest.js",
+  "unpkg": "./dist/resourcenest.umd.cjs",
+  "exports": {
+    ".": {
+      "import": "./dist/resourcenest.js",
+      "require": "./dist/resourcenest.umd.cjs"
+    },
+    "./src": {
+      "import": "./src/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "prepare": "yarn build",
+    "changeset": "changeset",
+    "changeset:version": "changeset version",
+    "changeset:publish": "changeset publish"
+  },
+  "keywords": [
+    "resourcenest",
+    "resource-calendar",
+    "resource-scheduling",
+    "resource-management",
+    "room-booking",
+    "appointment-calendar",
+    "timeline-calendar",
+    "scheduler",
+    "scheduling",
+    "booking",
+    "team-scheduling",
+    "staff-scheduling",
+    "equipment-scheduling",
+    "meeting-room",
+    "resource-allocation",
+    "time-slot",
+    "calendar",
+    "vanilla-js",
+    "javascript",
+    "vue",
+    "react",
+    "angular",
+    "framework-agnostic"
+  ],
+  "author": "Dennis Thelosen <dennisthelosen20@gmail.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dennisthln/resourcenest"
+  },
+  "devDependencies": {
+    "@changesets/changelog-github": "0.5.2",
+    "@changesets/cli": "2.29.8",
+    "vite": "^6.0.11"
+  }
+}