@shifl-inc/ui 0.1.0

package/dist/shifl-ui.umd

@@ -0,0 +1 @@
+(function(d,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(d=typeof globalThis<"u"?globalThis:d||self,e(d.ShiflGrid={},d.Vue))})(this,function(d,e){"use strict";function F(t){const i=(t.columns||[]).map(r=>({...r,frozen:r.frozen??r.fixed??!1,visible:r.visible??!0}));return{...t,columns:i,rows:t.rows??[],search:t.search??[],filters:t.filters??[],paginationMeta:t.paginationMeta??{}}}function _(t){const i=[...t],r=e.ref([...t]);function u(o){r.value=r.value.map(n=>n.key===o?{...n,visible:!n.visible}:n)}function l(o){r.value=r.value.map(n=>({...n,visible:o}))}function m(o){const n=r.value.map(g=>g.key===o?{...g,frozen:!g.frozen}:g),p=n.filter(g=>g.frozen),b=n.filter(g=>!g.frozen);r.value=[...p,...b]}function y(o,n){if(o===n||n<0||n>=r.value.length)return;const p=r.value.findIndex(V=>!V.frozen),b=p===-1?r.value.length:p;if(o<b||n<b)return;const g=[...r.value],[E]=g.splice(o,1);g.splice(n,0,E),r.value=g}function k(){r.value=[...i]}const s=e.computed(()=>r.value.filter(o=>o.visible));return{columns:r,visibleColumns:s,toggleColumnVisibility:u,setAllVisible:l,toggleFrozen:m,moveColumn:y,resetColumns:k}}function C(t){const i=e.ref(t);function r(l){var m;i.value=((m=i.value)==null?void 0:m.key)===l&&i.value.order==="asc"?{key:l,order:"desc"}:{key:l,order:"asc"}}function u(l){if(!i.value)return l;const{key:m,order:y}=i.value;return[...l].sort((k,s)=>{const o=k[m],n=s[m];if(o===n)return 0;if(o==null)return 1;if(n==null)return-1;const p=String(o).localeCompare(String(n),void 0,{numeric:!0});return y==="asc"?p:-p})}return{sort:i,setSort:r,applySort:u}}function $(){const t=e.ref("");function i(u){t.value=u}function r(u,l){const m=t.value.trim().toLowerCase();return m?u.filter(y=>(l&&l.length?l.map(s=>y[s]):Object.values(y)).some(s=>String(s??"").toLowerCase().includes(m))):u}return{globalFilter:t,setGlobalFilter:i,applyGlobalFilter:r}}const T={class:"fixed inset-0 z-40 flex justify-end bg-black/20"},M={class:"flex h-full w-full max-w-md flex-col bg-white shadow-xl ring-1 ring-black/5",role:"dialog","aria-modal":"true"},j={class:"flex items-center justify-between border-b border-gray-200 px-6 py-4"},A={class:"min-w-0"},R={class:"text-xs font-medium text-gray-400"},v={class:"flex items-center justify-between border-b border-gray-200 px-6 py-3 text-xs"},L={class:"flex gap-3 font-medium text-gray-600"},O={class:"flex-1 overflow-y-auto px-4 py-4"},P={class:"space-y-2"},I=["draggable","onDragstart","onDragover","onDrop"],K={class:"flex items-center gap-3"},W=["aria-label"],J={class:"flex items-center gap-2"},U=["checked","onChange"],q={class:"text-gray-800"},H={class:"flex items-center gap-2 text-gray-400"},Y=["onClick"],Q={class:"flex justify-end gap-3 border-t border-gray-200 px-6 py-3"},X=e.defineComponent({__name:"GridColumnManager",props:{titlePrefix:{},columns:{}},emits:["close","toggle","move","toggleFrozen","selectAll","deselectAll","restoreDefault"],setup(t,{emit:i}){const r=t,u=i,l=e.ref(null);function m(s){var o;(o=r.columns[s])!=null&&o.frozen||(l.value=s)}function y(s){}function k(s){l.value===null||l.value===s||(u("move",l.value,s),l.value=null)}return(s,o)=>(e.openBlock(),e.createElementBlock("div",T,[e.createElementVNode("div",M,[e.createElementVNode("header",j,[e.createElementVNode("div",A,[e.createElementVNode("p",R,e.toDisplayString(t.titlePrefix),1),o[6]||(o[6]=e.createElementVNode("h2",{class:"truncate text-base font-semibold text-gray-900"}," Edit Columns ",-1))]),e.createElementVNode("button",{type:"button",class:"inline-flex h-8 w-8 items-center justify-center rounded-full text-gray-400 hover:bg-gray-100 hover:text-gray-600",onClick:o[0]||(o[0]=n=>s.$emit("close"))},[...o[7]||(o[7]=[e.createElementVNode("span",{class:"sr-only"},"Close",-1),e.createTextVNode(" ✕ ",-1)])])]),e.createElementVNode("div",v,[e.createElementVNode("div",L,[e.createElementVNode("button",{type:"button",class:"hover:text-blue-600",onClick:o[1]||(o[1]=n=>s.$emit("selectAll"))}," Select All "),e.createElementVNode("button",{type:"button",class:"hover:text-blue-600",onClick:o[2]||(o[2]=n=>s.$emit("deselectAll"))}," Deselect All ")]),e.createElementVNode("button",{type:"button",class:"text-xs font-medium text-blue-600 hover:text-blue-700",onClick:o[3]||(o[3]=n=>s.$emit("restoreDefault"))}," Restore Default ")]),e.createElementVNode("div",O,[e.createElementVNode("ul",P,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.columns,(n,p)=>(e.openBlock(),e.createElementBlock("li",{key:n.key,class:"flex items-center justify-between rounded-lg border border-gray-200 bg-gray-50 px-4 py-2 text-sm shadow-[0_1px_0_rgba(15,23,42,0.02)]",draggable:!n.frozen,onDragstart:b=>m(p),onDragover:e.withModifiers(b=>void 0,["prevent"]),onDrop:e.withModifiers(b=>k(p),["prevent"])},[e.createElementVNode("div",K,[e.createElementVNode("button",{type:"button",class:e.normalizeClass(["cursor-grab text-gray-300 hover:text-gray-500",{"opacity-40 cursor-not-allowed":n.frozen}]),"aria-label":`Move ${n.label}`}," ⋮⋮ ",10,W),e.createElementVNode("label",J,[e.createElementVNode("input",{type:"checkbox",class:"h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500",checked:n.visible,onChange:b=>s.$emit("toggle",n.key)},null,40,U),e.createElementVNode("span",q,e.toDisplayString(n.label),1)])]),e.createElementVNode("div",H,[e.createElementVNode("button",{type:"button",class:e.normalizeClass(["h-7 w-7 rounded-full border border-transparent text-xs font-medium text-gray-500 hover:border-blue-200 hover:bg-blue-50 hover:text-blue-600 disabled:opacity-40",{"bg-blue-50 text-blue-600 border-blue-200":n.frozen}]),onClick:b=>s.$emit("toggleFrozen",n.key)}," Pin ",10,Y)])],40,I))),128))])]),e.createElementVNode("footer",Q,[e.createElementVNode("button",{type:"button",class:"rounded-md border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50",onClick:o[4]||(o[4]=n=>s.$emit("close"))}," Cancel "),e.createElementVNode("button",{type:"button",class:"rounded-md bg-blue-600 px-4 py-2 text-sm font-semibold text-white hover:bg-blue-700",onClick:o[5]||(o[5]=n=>s.$emit("close"))}," Update ")])])]))}}),Z={class:"shifl-grid relative"},ee={class:"shifl-grid__controls"},te=["value"],ne={class:"shifl-grid__header flex items-center justify-between"},oe={class:"text-xs font-medium text-gray-500"},re={class:"shifl-grid__viewport"},le={class:"shifl-grid__table"},se=["onClick"],ie={key:0},ae={key:0},ce=["colspan"],z=e.defineComponent({__name:"ShiflGrid",props:{config:{}},setup(t){const i=t,r=e.computed(()=>F(i.config)),{columns:u,visibleColumns:l,toggleColumnVisibility:m,setAllVisible:y,toggleFrozen:k,moveColumn:s,resetColumns:o}=_(r.value.columns),{sort:n,setSort:p,applySort:b}=C(r.value.sort),{globalFilter:g,setGlobalFilter:E,applyGlobalFilter:V}=$(),w=e.ref(!1);e.watch(()=>r.value.columns,a=>{u.value=[...a]},{deep:!0}),e.watch(()=>r.value.sort,a=>{a&&(n.value=a)},{deep:!0});const xe=e.computed(()=>V(r.value.rows,r.value.search)),N=e.computed(()=>b(xe.value)),Ee=e.computed(()=>{let a=0;const c={};for(const f of l.value){f.frozen&&(c[f.key]=a);const h=parseInt(f.width??"160",10);Number.isNaN(h)||(a+=h)}return c});function Ve(a){const c=u.value.find(f=>f.key===a);c!=null&&c.sortable&&p(a)}function we(a){const c=a.target.value;E(c)}function Ne(a){return a==null?"":typeof a=="object"?JSON.stringify(a):String(a)}function D(a,c=!0){const f={width:a.width??"160px",minWidth:a.width??"160px"};if(!a.frozen)return f;const h=Ee.value[a.key]??0;return{...f,position:"sticky",left:`${h}px`,zIndex:c?30:10,background:"#ffffff"}}return(a,c)=>(e.openBlock(),e.createElementBlock("div",Z,[e.createElementVNode("div",ee,[e.createElementVNode("input",{class:"flex-1 rounded border border-gray-300 px-3 py-2 text-sm",type:"text",value:e.unref(g),onInput:we,placeholder:"Search anything..."},null,40,te),e.createElementVNode("button",{type:"button",class:"shifl-grid__pill-button whitespace-nowrap",onClick:c[0]||(c[0]=f=>w.value=!0)}," Edit Columns ")]),e.createElementVNode("div",ne,[e.createElementVNode("span",null,e.toDisplayString(t.config.name??"Shifl Grid"),1),e.createElementVNode("span",oe," Showing "+e.toDisplayString(N.value.length)+" of "+e.toDisplayString(r.value.rows.length),1)]),e.createElementVNode("div",re,[e.createElementVNode("table",le,[e.createElementVNode("thead",null,[e.createElementVNode("tr",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(l),f=>{var h;return e.openBlock(),e.createElementBlock("th",{key:f.key,style:e.normalizeStyle(D(f,!0)),onClick:()=>Ve(f.key)},[e.createElementVNode("span",null,e.toDisplayString(f.label),1),((h=e.unref(n))==null?void 0:h.key)===f.key?(e.openBlock(),e.createElementBlock("span",ie,e.toDisplayString(e.unref(n).order==="asc"?"▲":"▼"),1)):e.createCommentVNode("",!0)],12,se)}),128))])]),e.createElementVNode("tbody",null,[N.value.length?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("tr",ae,[e.createElementVNode("td",{colspan:e.unref(l).length,class:"text-center text-gray-500 py-6"}," No data ",8,ce)])),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(N.value,(f,h)=>(e.openBlock(),e.createElementBlock("tr",{key:h},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(l),S=>(e.openBlock(),e.createElementBlock("td",{key:S.key,style:e.normalizeStyle(D(S,!1))},e.toDisplayString(Ne(f[S.key])),5))),128))]))),128))])])]),c[4]||(c[4]=e.createElementVNode("div",{class:"shifl-grid__footer text-xs text-gray-600"}," Row per page 20 ▾ ",-1)),w.value?(e.openBlock(),e.createBlock(X,{key:0,"title-prefix":t.config.name,columns:e.unref(u),onClose:c[1]||(c[1]=f=>w.value=!1),onToggle:e.unref(m),onToggleFrozen:e.unref(k),onMove:e.unref(s),onSelectAll:c[2]||(c[2]=f=>e.unref(y)(!0)),onDeselectAll:c[3]||(c[3]=f=>e.unref(y)(!1)),onRestoreDefault:e.unref(o)},null,8,["title-prefix","columns","onToggle","onToggleFrozen","onMove","onRestoreDefault"])):e.createCommentVNode("",!0)]))}}),de={install(t){t.component("ShiflGrid",z)}};function fe(t){return{rows:t.rows}}function ue(){const t=e.ref(new Set);function i(r){const u=r.id??JSON.stringify(r),l=new Set(t.value);l.has(u)?l.delete(u):l.add(u),t.value=l}return{selectedKeys:t,toggleRow:i}}function me(){return{}}const G=Symbol("shifl-grid-theme"),B={surface:"var(--shifl-surface)",surfaceAlt:"var(--shifl-surface-alt)",border:"var(--shifl-border)",text:"var(--shifl-text)",textMuted:"var(--shifl-text-muted)",accent:"var(--shifl-accent)",accentStrong:"var(--shifl-accent-strong)",focus:"var(--shifl-focus)"};function ge(t){const i=e.ref({...B,...t});return e.provide(G,i),i}function pe(){const t=e.inject(G);return e.computed(()=>(t==null?void 0:t.value)??B)}const x={sm:640,lg:1024};function be(){const t=e.ref(typeof window<"u"?window.innerWidth:0);function i(){t.value=window.innerWidth}return e.onMounted(()=>{window.addEventListener("resize",i)}),e.onUnmounted(()=>{window.removeEventListener("resize",i)}),{width:t,isMobile:e.computed(()=>t.value<x.sm),isTablet:e.computed(()=>t.value>=x.sm&&t.value<x.lg)}}function ye(){return{}}function he(){return{}}function ke(){return{}}d.ShiflGrid=z,d.ShiflGridPlugin=de,d.provideGridTheme=ge,d.useBreakpoints=be,d.useGridColumns=_,d.useGridData=fe,d.useGridEditing=me,d.useGridFilter=$,d.useGridInfiniteScroll=ye,d.useGridSelection=ue,d.useGridSort=C,d.useGridTheme=pe,d.useGridTour=ke,d.useVirtualScroll=he,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"})});

package/dist/stores/gridStore.d.ts

@@ -0,0 +1,8 @@
+export declare const useGridStore: import('pinia').StoreDefinition<
+  'shifl-grid',
+  {
+    lastUpdated: number;
+  },
+  {},
+  {}
+>;