@alaarab/ogrid-vue-vuetify 2.5.9 → 2.6.1
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,67 @@
|
|
|
1
|
+
/* OGrid Vue Vuetify - DataGridTable styles */
|
|
2
|
+
|
|
3
|
+
/* Shared theme variables (light/dark mode, CSS custom properties) */
|
|
4
|
+
@import '@alaarab/ogrid-vue/styles/ogrid-theme.css';
|
|
5
|
+
|
|
6
|
+
/* Shared layout styles (table structure, header, cells, pinning, fill handle, etc.) */
|
|
7
|
+
@import '@alaarab/ogrid-vue/styles/ogrid-layout.css';
|
|
8
|
+
|
|
9
|
+
/* === Vuetify-specific: Accessibility focus styles === */
|
|
10
|
+
|
|
11
|
+
.v-table th:focus-visible,
|
|
12
|
+
.v-table td:focus-visible {
|
|
13
|
+
outline: 2px solid rgb(var(--v-theme-primary));
|
|
14
|
+
outline-offset: -2px;
|
|
15
|
+
z-index: 11;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.v-btn:focus-visible {
|
|
19
|
+
outline: 2px solid rgb(var(--v-theme-primary));
|
|
20
|
+
outline-offset: 2px;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.v-checkbox:focus-visible {
|
|
24
|
+
outline: 2px solid rgb(var(--v-theme-primary));
|
|
25
|
+
outline-offset: 2px;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.ogrid-cell-content:focus-visible {
|
|
29
|
+
outline: 2px solid rgb(var(--v-theme-primary));
|
|
30
|
+
outline-offset: -2px;
|
|
31
|
+
z-index: 3;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.ogrid-cell-content,
|
|
35
|
+
.ogrid-header-cell,
|
|
36
|
+
.ogrid-data-cell {
|
|
37
|
+
overflow: visible;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.ogrid-cell-content {
|
|
41
|
+
position: relative;
|
|
42
|
+
display: block;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.ogrid-header-cell,
|
|
46
|
+
.ogrid-data-cell,
|
|
47
|
+
.ogrid-cell,
|
|
48
|
+
.v-table th,
|
|
49
|
+
.v-table td {
|
|
50
|
+
position: relative;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.ogrid-cell-content .ogrid-fill-handle,
|
|
54
|
+
.ogrid-fill-handle {
|
|
55
|
+
right: 1px;
|
|
56
|
+
bottom: 1px;
|
|
57
|
+
width: 8px;
|
|
58
|
+
height: 8px;
|
|
59
|
+
z-index: 6;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.ogrid-header-cell .ogrid-resize-handle,
|
|
63
|
+
.ogrid-resize-handle {
|
|
64
|
+
right: 0;
|
|
65
|
+
width: 8px;
|
|
66
|
+
z-index: 6;
|
|
67
|
+
}
|
package/dist/esm/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@import"@alaarab/ogrid-vue/styles/ogrid-theme.css";@import"@alaarab/ogrid-vue/styles/ogrid-layout.css";.v-table th:focus-visible,.v-table td:focus-visible{outline:2px solid rgb(var(--v-theme-primary));outline-offset:-2px;z-index:11}.v-btn:focus-visible{outline:2px solid rgb(var(--v-theme-primary));outline-offset:2px}.v-checkbox:focus-visible{outline:2px solid rgb(var(--v-theme-primary));outline-offset:2px}.ogrid-cell-content:focus-visible{outline:2px solid rgb(var(--v-theme-primary));outline-offset:-2px;z-index:3}
|
|
1
|
+
@import"@alaarab/ogrid-vue/styles/ogrid-theme.css";@import"@alaarab/ogrid-vue/styles/ogrid-layout.css";.v-table th:focus-visible,.v-table td:focus-visible{outline:2px solid rgb(var(--v-theme-primary));outline-offset:-2px;z-index:11}.v-btn:focus-visible{outline:2px solid rgb(var(--v-theme-primary));outline-offset:2px}.v-checkbox:focus-visible{outline:2px solid rgb(var(--v-theme-primary));outline-offset:2px}.ogrid-cell-content:focus-visible{outline:2px solid rgb(var(--v-theme-primary));outline-offset:-2px;z-index:3}.ogrid-cell-content,.ogrid-header-cell,.ogrid-data-cell{overflow:visible}.ogrid-cell-content{position:relative;display:block}.ogrid-header-cell,.ogrid-data-cell,.ogrid-cell,.v-table th,.v-table td{position:relative}.ogrid-cell-content .ogrid-fill-handle,.ogrid-fill-handle{right:1px;bottom:1px;width:8px;height:8px;z-index:6}.ogrid-header-cell .ogrid-resize-handle,.ogrid-resize-handle{right:0;width:8px;z-index:6}
|
package/dist/esm/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import {useColumnHeaderFilterState,getColumnHeaderMenuItems,createInlineCellEditor,getContextMenuHandlers,GRID_CONTEXT_MENU_ITEMS,formatShortcut,createDataGridTable,useColumnChooserState,getPaginationViewModel,createOGrid}from'@alaarab/ogrid-vue';export{AUTOSIZE_EXTRA_PX,AUTOSIZE_MAX_PX,CELL_PADDING,CHECKBOX_COLUMN_WIDTH,COLUMN_HEADER_MENU_ITEMS,DEFAULT_DEBOUNCE_MS,DEFAULT_MIN_COLUMN_WIDTH,GRID_BORDER_RADIUS,GRID_CONTEXT_MENU_ITEMS,MAX_PAGE_BUTTONS,MarchingAntsOverlay,PAGE_SIZE_OPTIONS,PEOPLE_SEARCH_DEBOUNCE_MS,ROW_NUMBER_COLUMN_WIDTH,SIDEBAR_TRANSITION_MS,StatusBar,UndoRedoStack,Z_INDEX,applyCellDeletion,applyCutClear,applyFillValues,applyPastedValues,applyRangeRowSelection,areGridRowPropsEqual,booleanParser,buildCsvHeader,buildCsvRows,buildHeaderRows,buildInlineEditorProps,buildPopoverEditorProps,calculateDropTarget,clampSelectionToBounds,computeAggregations,computeArrowNavigation,computeAutoScrollSpeed,computeNextSortState,computeRowSelectionState,computeTabNavigation,computeTotalHeight,computeVisibleRange,createDataGridTable,createInlineCellEditor,createOGrid,currencyParser,dateParser,debounce,deriveFilterOptionsFromData,emailParser,escapeCsvValue,exportToCsv,findCtrlArrowTarget,flattenColumns,formatCellValueForTsv,formatSelectionAsTsv,formatShortcut,getCellInteractionProps,getCellRenderDescriptor,getCellValue,getColumnHeaderMenuItems,getContextMenuHandlers,getDataGridStatusBarConfig,getFilterField,getHeaderFilterConfig,getMultiSelectFilterFields,getPaginationViewModel,getPinStateForColumn,getScrollTopForRow,getStatusBarParts,injectGlobalStyles,isFilterConfig,isInSelectionRange,isRowInRange,measureColumnContentWidth,measureRange,mergeFilter,normalizeSelectionRange,numberParser,parseTsvClipboard,parseValue,processClientSideData,rangesEqual,reorderColumnArray,resolveCellDisplayContent,resolveCellStyle,toUserLike,triggerCsvDownload,useActiveCell,useCellEditing,useCellSelection,useClipboard,useColumnChooserState,useColumnHeaderFilterState,useColumnHeaderMenuState,useColumnPinning,useColumnReorder,useColumnResize,useContextMenu,useDataGridState,useDataGridTableSetup,useDateFilterState,useDebounce,useDebouncedCallback,useFillHandle,useFilterOptions,useInlineCellEditorState,useKeyboardNavigation,useMultiSelectFilterState,useOGrid,usePeopleFilterState,useRichSelectState,useRowSelection,useSideBarState,useTableLayout,useTextFilterState,useUndoRedo,useVirtualScroll,validateColumns,validateRowIds}from'@alaarab/ogrid-vue';import {defineComponent,h,computed}from'vue';import {VTextField,VBtn,VProgressCircular,VCheckbox,VDivider,VAvatar,VIcon,VTooltip,VMenu,VCard,VList,VListItem,VSelect}from'vuetify/components';var V=VBtn,_=VTextField,R=defineComponent({name:"TextFilterPopover",props:{value:{type:String,required:true},onValueChange:{type:Function,required:true},onApply:{type:Function,required:true},onClear:{type:Function,required:true}},setup(e){return ()=>h("div",{style:{width:"260px"}},[h("div",{style:{padding:"12px"}},h(_,{modelValue:e.value,"onUpdate:modelValue":t=>e.onValueChange(t),placeholder:"Enter search term...",density:"compact",variant:"outlined",hideDetails:true,autocomplete:"off",prependInnerIcon:"mdi-magnify",onKeydown:t=>{t.stopPropagation(),t.key==="Enter"&&(t.preventDefault(),e.onApply());}})),h("div",{style:{display:"flex",justifyContent:"flex-end",gap:"8px",padding:"0 12px 12px"}},[h(V,{size:"small",variant:"text",disabled:!e.value,onClick:e.onClear},()=>"Clear"),h(V,{size:"small",variant:"flat",color:"primary",onClick:e.onApply},()=>"Apply")])])}});var C=VBtn,X=VTextField,Z=VCheckbox,Y=VProgressCircular,J=VDivider,D=defineComponent({name:"MultiSelectFilterPopover",props:{searchText:{type:String,required:true},onSearchChange:{type:Function,required:true},options:{type:Array,required:true},filteredOptions:{type:Array,required:true},selected:{type:Object,required:true},onOptionToggle:{type:Function,required:true},onSelectAll:{type:Function,required:true},onClearSelection:{type:Function,required:true},onApply:{type:Function,required:true},isLoading:{type:Boolean,default:false}},setup(e){return ()=>h("div",{style:{width:"280px"}},[h("div",{style:{padding:"12px 12px 4px"}},[h(X,{modelValue:e.searchText,"onUpdate:modelValue":t=>e.onSearchChange(t),placeholder:"Search...",density:"compact",variant:"outlined",hideDetails:true,autocomplete:"off",prependInnerIcon:"mdi-magnify",onKeydown:t=>t.stopPropagation()}),h("span",{style:{display:"block",marginTop:"4px",fontSize:"0.75rem",color:"rgba(0,0,0,0.6)"}},`${e.filteredOptions.length} of ${e.options.length} options`)]),h("div",{style:{display:"flex",justifyContent:"space-between",padding:"4px 12px"}},[h(C,{size:"small",variant:"text",onClick:e.onSelectAll},()=>`Select All (${e.filteredOptions.length})`),h(C,{size:"small",variant:"text",onClick:e.onClearSelection},()=>"Clear")]),h("div",{style:{maxHeight:"240px",overflowY:"auto",padding:"0 4px"}},e.isLoading?h("div",{style:{display:"flex",justifyContent:"center",padding:"16px 0"}},h(Y,{size:24,indeterminate:true})):e.filteredOptions.length===0?h("div",{style:{padding:"16px 0",textAlign:"center",fontSize:"0.875rem",color:"rgba(0,0,0,0.6)"}},"No options found"):e.filteredOptions.map(t=>h("div",{key:t,style:{display:"flex",alignItems:"center",minHeight:"32px"}},h(Z,{modelValue:e.selected.has(t),label:t,density:"compact",hideDetails:true,"onUpdate:modelValue":a=>e.onOptionToggle(t,a)})))),h(J),h("div",{style:{display:"flex",justifyContent:"flex-end",gap:"8px",padding:"8px 12px"}},[h(C,{size:"small",variant:"text",onClick:e.onClearSelection},()=>"Clear"),h(C,{size:"small",variant:"flat",color:"primary",onClick:e.onApply},()=>"Apply")])])}});var E=VBtn,ie=VTextField,le=VProgressCircular,A=VAvatar,se=VIcon,de=VDivider,O=defineComponent({name:"PeopleFilterPopover",props:{selectedUser:{type:Object,default:void 0},searchText:{type:String,required:true},onSearchChange:{type:Function,required:true},suggestions:{type:Array,required:true},isLoading:{type:Boolean,default:false},onUserSelect:{type:Function,required:true},onClearUser:{type:Function,required:true}},setup(e){return ()=>h("div",{style:{width:"300px"}},[...e.selectedUser?[h("div",{style:{padding:"12px 12px 8px",borderBottom:"1px solid rgba(0,0,0,0.12)"}},[h("span",{style:{fontSize:"0.75rem",color:"rgba(0,0,0,0.6)"}},"Currently filtered by:"),h("div",{style:{display:"flex",alignItems:"center",gap:"8px",marginTop:"4px"}},[h(A,{size:32,image:e.selectedUser.photo},()=>e.selectedUser?.displayName?.[0]??""),h("div",{style:{flex:"1",minWidth:"0"}},[h("div",{style:{fontSize:"0.875rem",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}},e.selectedUser?.displayName),h("div",{style:{fontSize:"0.75rem",color:"rgba(0,0,0,0.6)",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}},e.selectedUser?.email)]),h(E,{icon:true,size:"x-small",variant:"text","aria-label":"Remove filter",onClick:e.onClearUser},()=>h(se,{size:"16"},()=>"mdi-close"))])])]:[],h("div",{style:{padding:"12px 12px 4px"}},h(ie,{modelValue:e.searchText,"onUpdate:modelValue":t=>e.onSearchChange(t),placeholder:"Search for a person...",density:"compact",variant:"outlined",hideDetails:true,autocomplete:"off",prependInnerIcon:"mdi-magnify",onKeydown:t=>t.stopPropagation()})),h("div",{style:{maxHeight:"240px",overflowY:"auto"}},e.isLoading&&e.searchText.trim()?h("div",{style:{display:"flex",justifyContent:"center",padding:"16px 0"}},h(le,{size:24,indeterminate:true})):e.suggestions.length===0&&e.searchText.trim()?h("div",{style:{padding:"16px 0",textAlign:"center",fontSize:"0.875rem",color:"rgba(0,0,0,0.6)"}},"No results found"):e.searchText.trim()?e.suggestions.map(t=>h("div",{key:t.id||t.email||t.displayName,style:{display:"flex",alignItems:"center",gap:"8px",padding:"8px 12px",cursor:"pointer"},onClick:()=>e.onUserSelect(t),onMouseenter:a=>{a.currentTarget.style.backgroundColor="rgba(0,0,0,0.04)";},onMouseleave:a=>{a.currentTarget.style.backgroundColor="";}},[h(A,{size:32,image:t.photo},()=>t.displayName?.[0]??""),h("div",{style:{flex:"1",minWidth:"0"}},[h("div",{style:{fontSize:"0.875rem",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}},t.displayName),h("div",{style:{fontSize:"0.75rem",color:"rgba(0,0,0,0.6)",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}},t.email)])])):h("div",{style:{padding:"16px 0",textAlign:"center",fontSize:"0.875rem",color:"rgba(0,0,0,0.6)"}},"Type to search...")),...e.selectedUser?[h(de),h("div",{style:{padding:"8px 12px"}},h(E,{size:"small",variant:"text",block:true,onClick:e.onClearUser},()=>"Clear Filter"))]:[]])}});var fe=VBtn,ve=VIcon,xe=VMenu,he=VTooltip,Se=VCard,f=defineComponent({name:"ColumnHeaderFilter",props:{columnKey:{type:String,required:true},columnName:{type:String,required:true},filterType:{type:String,required:true},isSorted:{type:Boolean,default:false},isSortedDescending:{type:Boolean,default:false},onSort:{type:Function,default:void 0},selectedValues:{type:Array,default:void 0},onFilterChange:{type:Function,default:void 0},options:{type:Array,default:()=>[]},isLoadingOptions:{type:Boolean,default:false},textValue:{type:String,default:""},onTextChange:{type:Function,default:void 0},selectedUser:{type:Object,default:void 0},onUserChange:{type:Function,default:void 0},peopleSearch:{type:Function,default:void 0},dateValue:{type:Object,default:void 0},onDateChange:{type:Function,default:void 0}},setup(e){let t=useColumnHeaderFilterState(e),a=()=>e.filterType==="multiSelect"?h(D,{searchText:t.searchText.value,onSearchChange:t.setSearchText,options:e.options??[],filteredOptions:t.filteredOptions.value,selected:t.tempSelected.value,onOptionToggle:t.handlers.handleCheckboxChange,onSelectAll:t.handlers.handleSelectAll,onClearSelection:t.handlers.handleClearSelection,onApply:t.handlers.handleApplyMultiSelect,isLoading:e.isLoadingOptions}):e.filterType==="text"?h(R,{value:t.tempTextValue.value??"",onValueChange:t.setTempTextValue,onApply:t.handlers.handleTextApply,onClear:t.handlers.handleTextClear}):e.filterType==="people"?h(O,{selectedUser:e.selectedUser,searchText:t.peopleSearchText.value,onSearchChange:t.setPeopleSearchText,suggestions:t.peopleSuggestions.value,isLoading:t.isPeopleLoading.value,onUserSelect:t.handlers.handleUserSelect,onClearUser:t.handlers.handleClearUser}):e.filterType==="date"?h("div",{style:{padding:"12px",display:"flex",flexDirection:"column",gap:"8px"}},[h("div",{style:{display:"flex",alignItems:"center",gap:"8px"}},[h("span",{style:{minWidth:"36px",fontSize:"0.75rem"}},"From:"),h("input",{type:"date",value:t.tempDateFrom.value??"",onInput:o=>t.setTempDateFrom(o.target.value),style:{flex:"1",padding:"4px 6px"}})]),h("div",{style:{display:"flex",alignItems:"center",gap:"8px"}},[h("span",{style:{minWidth:"36px",fontSize:"0.75rem"}},"To:"),h("input",{type:"date",value:t.tempDateTo.value??"",onInput:o=>t.setTempDateTo(o.target.value),style:{flex:"1",padding:"4px 6px"}})]),h("div",{style:{display:"flex",justifyContent:"flex-end",gap:"8px",marginTop:"4px"}},[h("button",{onClick:t.handlers.handleDateClear,disabled:!t.tempDateFrom.value&&!t.tempDateTo.value,style:{padding:"4px 12px",cursor:"pointer"}},"Clear"),h("button",{onClick:t.handlers.handleDateApply,style:{padding:"4px 12px",cursor:"pointer"}},"Apply")])]):null;return ()=>h("div",{ref:o=>{t.headerRef.value=o;},style:{display:"flex",alignItems:"center",width:"100%",minWidth:"0"}},[h("div",{style:{flex:"1",minWidth:"0",overflow:"hidden"}},h(he,{text:e.columnName,location:"top"},{activator:({props:o})=>h("span",{...o,"data-header-label":"",style:{fontWeight:"600",fontSize:"0.875rem",lineHeight:"1.4",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",display:"block"}},e.columnName)})),h("div",{style:{display:"flex",alignItems:"center",marginLeft:"4px",flexShrink:"0"}},[...e.filterType!=="none"?[h(xe,{modelValue:t.isFilterOpen.value,"onUpdate:modelValue":o=>t.setFilterOpen(o),closeOnContentClick:false,location:"bottom start"},{activator:({props:o})=>h("div",{style:{position:"relative"}},[h(fe,{...o,icon:true,size:"x-small",variant:t.hasActiveFilter.value||t.isFilterOpen.value?"tonal":"text",color:t.hasActiveFilter.value||t.isFilterOpen.value?"primary":"default","aria-label":`Filter ${e.columnName}`,"aria-expanded":t.isFilterOpen.value,"aria-haspopup":"dialog",title:`Filter ${e.columnName}`,style:{opacity:t.hasActiveFilter.value||t.isFilterOpen.value?"1":"0.7"}},()=>h(ve,{size:"16"},()=>"mdi-filter-variant")),...t.hasActiveFilter.value?[h("div",{style:{position:"absolute",top:"2px",right:"2px",width:"6px",height:"6px",borderRadius:"50%",backgroundColor:"rgb(var(--v-theme-primary))",zIndex:"1"}})]:[]]),default:()=>h(Se,{elevation:8,ref:o=>{t.popoverRef.value=o;},onClick:o=>o.stopPropagation()},()=>[h("div",{style:{borderBottom:"1px solid rgba(0,0,0,0.12)",padding:"8px 12px",fontWeight:"600",fontSize:"0.875rem",backgroundColor:"rgb(var(--v-theme-surface))"}},`Filter: ${e.columnName}`),a()])})]:[]])])}});var S=defineComponent({name:"ColumnHeaderMenu",props:{isOpen:{type:Boolean,required:true},anchorElement:{type:Object,default:null},onClose:{type:Function,required:true},onPinLeft:{type:Function,required:true},onPinRight:{type:Function,required:true},onUnpin:{type:Function,required:true},onSortAsc:{type:Function,required:true},onSortDesc:{type:Function,required:true},onClearSort:{type:Function,required:true},onAutosizeThis:{type:Function,required:true},onAutosizeAll:{type:Function,required:true},canPinLeft:{type:Boolean,required:true},canPinRight:{type:Boolean,required:true},canUnpin:{type:Boolean,required:true},currentSort:{type:String,default:null},isSortable:{type:Boolean,default:true},isResizable:{type:Boolean,default:true}},setup(e){let t=p=>{p||e.onClose();},a=computed(()=>getColumnHeaderMenuItems({canPinLeft:e.canPinLeft,canPinRight:e.canPinRight,canUnpin:e.canUnpin,currentSort:e.currentSort,isSortable:e.isSortable,isResizable:e.isResizable})),o={pinLeft:e.onPinLeft,pinRight:e.onPinRight,unpin:e.onUnpin,sortAsc:e.onSortAsc,sortDesc:e.onSortDesc,clearSort:e.onClearSort,autosizeThis:e.onAutosizeThis,autosizeAll:e.onAutosizeAll},s=p=>o[p]||(()=>{});return ()=>e.anchorElement?h(VMenu,{modelValue:e.isOpen,"onUpdate:modelValue":t,location:"bottom start",target:e.anchorElement},{default:()=>h(VList,{density:"compact","aria-label":"Column options"},()=>{let p=[];return a.value.forEach(d=>{p.push(h(VListItem,{key:d.id,disabled:d.disabled,onClick:()=>{s(d.id)();}},()=>d.label)),d.divider&&p.push(h(VDivider,{key:`divider-${d.id}`}));}),p})}):null}});var P=createInlineCellEditor({renderCheckbox:({checked:e,onChange:t,onCancel:a})=>h(VCheckbox,{modelValue:e,hideDetails:true,density:"compact","onUpdate:modelValue":o=>t(o),onKeydown:o=>{o.key==="Escape"&&(o.preventDefault(),a());}})});var b=defineComponent({name:"GridContextMenu",props:{x:{type:Number,required:true},y:{type:Number,required:true},hasSelection:{type:Boolean,required:true},canUndo:{type:Boolean,required:true},canRedo:{type:Boolean,required:true},onUndo:{type:Function,required:true},onRedo:{type:Function,required:true},onCopy:{type:Function,required:true},onCut:{type:Function,required:true},onPaste:{type:Function,required:true},onSelectAll:{type:Function,required:true},onClose:{type:Function,required:true}},setup(e){let t=getContextMenuHandlers(e),a=o=>!!(o.disabledWhenNoSelection&&!e.hasSelection||o.id==="undo"&&!e.canUndo||o.id==="redo"&&!e.canRedo);return ()=>h(VMenu,{modelValue:true,"onUpdate:modelValue":o=>{o||e.onClose();},target:[e.x,e.y],location:"bottom start"},{default:()=>h(VList,{density:"compact","aria-label":"Grid context menu"},()=>GRID_CONTEXT_MENU_ITEMS.map(o=>[...o.dividerBefore?[h(VDivider,{key:`${o.id}-div`})]:[],h(VListItem,{key:o.id,disabled:a(o),onClick:()=>{t[o.id]();}},()=>h("div",{style:{display:"flex",alignItems:"center",width:"100%"}},[h("span",{style:{flex:"1"}},o.label),...o.shortcut?[h("span",{style:{marginLeft:"24px",color:"rgba(0,0,0,0.4)",fontSize:"0.8em"}},formatShortcut(o.shortcut))]:[]]))]).flat())})}});function M({emptyState:e}){return h("div",{class:"ogrid-empty-state"},e.render?[e.render()]:[h("div",{class:"ogrid-empty-state-title"},"No results found"),h("div",{class:"ogrid-empty-state-message"},e.message!=null?String(e.message):e.hasActiveFilters?["No items match your current filters. Try adjusting your search or ",h(VBtn,{variant:"text",size:"small",onClick:e.onClearAll},()=>"clear all filters")," to see all items."]:"There are no items available at this time.")])}var T=createDataGridTable({renderCheckbox:({modelValue:e,indeterminate:t,ariaLabel:a,onChange:o})=>h(VCheckbox,{modelValue:e,indeterminate:t,hideDetails:true,density:"compact","aria-label":a,"onUpdate:modelValue":s=>o(!!s)}),renderSpinner:e=>h("div",{class:"ogrid-loading-inner"},[h(VProgressCircular,{size:24,indeterminate:true}),h("span",{class:"ogrid-loading-message"},e)]),ColumnHeaderFilter:f,ColumnHeaderMenu:S,InlineCellEditor:P,GridContextMenu:b,renderEmptyState:e=>M({emptyState:e})});var F=defineComponent({name:"ColumnChooser",props:{columns:{type:Array,required:true},visibleColumns:{type:Object,required:true},onVisibilityChange:{type:Function,required:true}},setup(e){let t=computed(()=>e.columns),a=computed(()=>e.visibleColumns),o=useColumnChooserState({columns:t,visibleColumns:a,onVisibilityChange:e.onVisibilityChange});return ()=>h(VMenu,{modelValue:o.open.value,"onUpdate:modelValue":s=>{o.setOpen(s);},closeOnContentClick:false,location:"bottom end"},{activator:({props:s})=>h(VBtn,{...s,variant:"outlined",size:"small",prependIcon:"mdi-view-column",appendIcon:o.open.value?"mdi-chevron-up":"mdi-chevron-down"},()=>`Column Visibility (${o.visibleCount.value} of ${o.totalCount.value})`),default:()=>h("div",{style:{minWidth:"220px"}},[h("div",{style:{padding:"8px 12px",borderBottom:"1px solid rgba(0,0,0,0.12)",backgroundColor:"rgba(0,0,0,0.04)",fontWeight:"600",fontSize:"0.875rem"}},`Select Columns (${o.visibleCount.value} of ${o.totalCount.value})`),h(VList,{density:"compact",style:{maxHeight:"320px",overflowY:"auto"}},()=>e.columns.map(s=>h(VListItem,{key:s.columnId,style:{minHeight:"32px"}},()=>h("label",{style:{display:"flex",alignItems:"center",gap:"8px",cursor:"pointer",width:"100%"}},[h("input",{type:"checkbox",checked:e.visibleColumns.has(s.columnId),onChange:p=>o.handleCheckboxChange(s.columnId)(p.target.checked)}),h("span",{style:{fontSize:"0.875rem"}},s.name)])))),h(VDivider),h("div",{style:{display:"flex",justifyContent:"flex-end",gap:"8px",padding:"8px 12px",backgroundColor:"rgba(0,0,0,0.04)"}},[h(VBtn,{size:"small",variant:"text",onClick:o.handleClearAll},()=>"Clear All"),h(VBtn,{size:"small",variant:"flat",color:"primary",onClick:o.handleSelectAll},()=>"Select All")])])})}});var U=defineComponent({name:"PaginationControls",props:{currentPage:{type:Number,required:true},pageSize:{type:Number,required:true},totalCount:{type:Number,required:true},onPageChange:{type:Function,required:true},onPageSizeChange:{type:Function,required:true},pageSizeOptions:{type:Array,default:void 0},entityLabelPlural:{type:String,default:"items"}},setup(e){let t=computed(()=>getPaginationViewModel(e.currentPage,e.pageSize,e.totalCount,e.pageSizeOptions?{pageSizeOptions:e.pageSizeOptions}:void 0));return ()=>{let a=t.value;if(!a)return null;let{pageNumbers:o,showStartEllipsis:s,showEndEllipsis:p,totalPages:d,startItem:z,endItem:w}=a,H=e.entityLabelPlural??"items";return h("div",{role:"navigation","aria-label":"Pagination",style:{display:"flex",alignItems:"center",justifyContent:"space-between",flexWrap:"wrap",gap:"16px",padding:"0 12px",width:"100%",minWidth:"0",boxSizing:"border-box"}},[h("span",{style:{fontSize:"0.875rem",color:"var(--ogrid-fg-secondary, rgba(0,0,0,0.6))"}},`Showing ${z} to ${w} of ${e.totalCount.toLocaleString()} ${H}`),h("div",{style:{display:"flex",alignItems:"center",gap:"4px"}},[h(VBtn,{icon:"mdi-page-first",size:"small",variant:"text",disabled:e.currentPage===1,"aria-label":"First page",onClick:()=>e.onPageChange(1)}),h(VBtn,{icon:"mdi-chevron-left",size:"small",variant:"text",disabled:e.currentPage===1,"aria-label":"Previous page",onClick:()=>e.onPageChange(e.currentPage-1)}),...s?[h(VBtn,{size:"small",variant:"outlined","aria-label":"Page 1",style:{minWidth:"32px"},onClick:()=>e.onPageChange(1)},()=>"1"),h("span",{style:{margin:"0 4px",color:"var(--ogrid-fg-secondary, rgba(0,0,0,0.6))"},"aria-hidden":"true"},"\u2026")]:[],...o.map(m=>h(VBtn,{key:m,size:"small",variant:e.currentPage===m?"flat":"outlined",color:e.currentPage===m?"primary":void 0,"aria-label":`Page ${m}`,"aria-current":e.currentPage===m?"page":void 0,style:{minWidth:"32px"},onClick:()=>e.onPageChange(m)},()=>String(m))),...p?[h("span",{style:{margin:"0 4px",color:"var(--ogrid-fg-secondary, rgba(0,0,0,0.6))"},"aria-hidden":"true"},"\u2026"),h(VBtn,{size:"small",variant:"outlined","aria-label":`Page ${d}`,style:{minWidth:"32px"},onClick:()=>e.onPageChange(d)},()=>String(d))]:[],h(VBtn,{icon:"mdi-chevron-right",size:"small",variant:"text",disabled:e.currentPage>=d,"aria-label":"Next page",onClick:()=>e.onPageChange(e.currentPage+1)}),h(VBtn,{icon:"mdi-page-last",size:"small",variant:"text",disabled:e.currentPage>=d,"aria-label":"Last page",onClick:()=>e.onPageChange(d)})]),h("div",{style:{display:"flex",alignItems:"center",gap:"8px"}},[h("span",{style:{fontSize:"0.875rem",color:"var(--ogrid-fg-secondary, rgba(0,0,0,0.6))"}},"Rows"),h(VSelect,{modelValue:e.pageSize,items:a.pageSizeOptions,density:"compact",hideDetails:true,variant:"outlined","aria-label":"Rows per page",style:{minWidth:"70px",maxWidth:"90px"},"onUpdate:modelValue":m=>e.onPageSizeChange(Number(m))})])])}}});var tt=createOGrid({DataGridTable:T,ColumnChooser:F,PaginationControls:U});export{F as ColumnChooser,f as ColumnHeaderFilter,S as ColumnHeaderMenu,T as DataGridTable,b as GridContextMenu,P as InlineCellEditor,tt as OGrid,U as PaginationControls};
|
|
1
|
+
import {useColumnHeaderFilterState,getColumnHeaderMenuItems,createInlineCellEditor,getContextMenuHandlers,GRID_CONTEXT_MENU_ITEMS,formatShortcut,createDataGridTable,useColumnChooserState,getPaginationViewModel,createOGrid}from'@alaarab/ogrid-vue';export{AUTOSIZE_EXTRA_PX,AUTOSIZE_MAX_PX,CELL_PADDING,CHECKBOX_COLUMN_WIDTH,COLUMN_HEADER_MENU_ITEMS,DEFAULT_DEBOUNCE_MS,DEFAULT_MIN_COLUMN_WIDTH,GRID_BORDER_RADIUS,GRID_CONTEXT_MENU_ITEMS,MAX_PAGE_BUTTONS,MarchingAntsOverlay,PAGE_SIZE_OPTIONS,PEOPLE_SEARCH_DEBOUNCE_MS,ROW_NUMBER_COLUMN_WIDTH,SIDEBAR_TRANSITION_MS,StatusBar,UndoRedoStack,Z_INDEX,applyCellDeletion,applyCutClear,applyFillValues,applyPastedValues,applyRangeRowSelection,areGridRowPropsEqual,booleanParser,buildCsvHeader,buildCsvRows,buildHeaderRows,buildInlineEditorProps,buildPopoverEditorProps,calculateDropTarget,clampSelectionToBounds,computeAggregations,computeArrowNavigation,computeAutoScrollSpeed,computeNextSortState,computeRowSelectionState,computeTabNavigation,computeTotalHeight,computeVisibleRange,createDataGridTable,createInlineCellEditor,createOGrid,currencyParser,dateParser,debounce,deriveFilterOptionsFromData,emailParser,escapeCsvValue,exportToCsv,findCtrlArrowTarget,flattenColumns,formatCellValueForTsv,formatSelectionAsTsv,formatShortcut,getCellInteractionProps,getCellRenderDescriptor,getCellValue,getColumnHeaderMenuItems,getContextMenuHandlers,getDataGridStatusBarConfig,getFilterField,getHeaderFilterConfig,getMultiSelectFilterFields,getPaginationViewModel,getPinStateForColumn,getScrollTopForRow,getStatusBarParts,injectGlobalStyles,isFilterConfig,isInSelectionRange,isRowInRange,measureColumnContentWidth,measureRange,mergeFilter,normalizeSelectionRange,numberParser,parseTsvClipboard,parseValue,processClientSideData,rangesEqual,reorderColumnArray,resolveCellDisplayContent,resolveCellStyle,toUserLike,triggerCsvDownload,useActiveCell,useCellEditing,useCellSelection,useClipboard,useColumnChooserState,useColumnHeaderFilterState,useColumnHeaderMenuState,useColumnPinning,useColumnReorder,useColumnResize,useContextMenu,useDataGridState,useDataGridTableSetup,useDateFilterState,useDebounce,useDebouncedCallback,useFillHandle,useFilterOptions,useInlineCellEditorState,useKeyboardNavigation,useMultiSelectFilterState,useOGrid,usePeopleFilterState,useRichSelectState,useRowSelection,useSideBarState,useTableLayout,useTextFilterState,useUndoRedo,useVirtualScroll,validateColumns,validateRowIds}from'@alaarab/ogrid-vue';import {defineComponent,h,computed}from'vue';import {VTextField,VBtn,VProgressCircular,VCheckbox,VDivider,VAvatar,VIcon,VTooltip,VMenu,VCard,VList,VListItem,VSelect}from'vuetify/components';var V=VBtn,_=VTextField,R=defineComponent({name:"TextFilterPopover",props:{value:{type:String,required:true},onValueChange:{type:Function,required:true},onApply:{type:Function,required:true},onClear:{type:Function,required:true}},setup(e){return ()=>h("div",{style:{width:"260px"}},[h("div",{style:{padding:"12px"}},h(_,{modelValue:e.value,"onUpdate:modelValue":t=>e.onValueChange(t),placeholder:"Enter search term...",density:"compact",variant:"outlined",hideDetails:true,autocomplete:"off",prependInnerIcon:"mdi-magnify",onKeydown:t=>{t.stopPropagation(),t.key==="Enter"&&(t.preventDefault(),e.onApply());}})),h("div",{style:{display:"flex",justifyContent:"flex-end",gap:"8px",padding:"0 12px 12px"}},[h(V,{size:"small",variant:"text",disabled:!e.value,onClick:e.onClear},()=>"Clear"),h(V,{size:"small",variant:"flat",color:"primary",onClick:e.onApply},()=>"Apply")])])}});var C=VBtn,X=VTextField,Z=VCheckbox,Y=VProgressCircular,J=VDivider,D=defineComponent({name:"MultiSelectFilterPopover",props:{searchText:{type:String,required:true},onSearchChange:{type:Function,required:true},options:{type:Array,required:true},filteredOptions:{type:Array,required:true},selected:{type:Object,required:true},onOptionToggle:{type:Function,required:true},onSelectAll:{type:Function,required:true},onClearSelection:{type:Function,required:true},onApply:{type:Function,required:true},isLoading:{type:Boolean,default:false}},setup(e){return ()=>h("div",{style:{width:"280px"}},[h("div",{style:{padding:"12px 12px 4px"}},[h(X,{modelValue:e.searchText,"onUpdate:modelValue":t=>e.onSearchChange(t),placeholder:"Search...",density:"compact",variant:"outlined",hideDetails:true,autocomplete:"off",prependInnerIcon:"mdi-magnify",onKeydown:t=>t.stopPropagation()}),h("span",{style:{display:"block",marginTop:"4px",fontSize:"0.75rem",color:"rgba(0,0,0,0.6)"}},`${e.filteredOptions.length} of ${e.options.length} options`)]),h("div",{style:{display:"flex",justifyContent:"space-between",padding:"4px 12px"}},[h(C,{size:"small",variant:"text",onClick:e.onSelectAll},()=>`Select All (${e.filteredOptions.length})`),h(C,{size:"small",variant:"text",onClick:e.onClearSelection},()=>"Clear")]),h("div",{style:{maxHeight:"240px",overflowY:"auto",padding:"0 4px"}},e.isLoading?h("div",{style:{display:"flex",justifyContent:"center",padding:"16px 0"}},h(Y,{size:24,indeterminate:true})):e.filteredOptions.length===0?h("div",{style:{padding:"16px 0",textAlign:"center",fontSize:"0.875rem",color:"rgba(0,0,0,0.6)"}},"No options found"):e.filteredOptions.map(t=>h("div",{key:t,style:{display:"flex",alignItems:"center",minHeight:"32px"}},h(Z,{modelValue:e.selected.has(t),label:t,density:"compact",hideDetails:true,"onUpdate:modelValue":a=>e.onOptionToggle(t,a)})))),h(J),h("div",{style:{display:"flex",justifyContent:"flex-end",gap:"8px",padding:"8px 12px"}},[h(C,{size:"small",variant:"text",onClick:e.onClearSelection},()=>"Clear"),h(C,{size:"small",variant:"flat",color:"primary",onClick:e.onApply},()=>"Apply")])])}});var E=VBtn,ie=VTextField,le=VProgressCircular,A=VAvatar,se=VIcon,de=VDivider,O=defineComponent({name:"PeopleFilterPopover",props:{selectedUser:{type:Object,default:void 0},searchText:{type:String,required:true},onSearchChange:{type:Function,required:true},suggestions:{type:Array,required:true},isLoading:{type:Boolean,default:false},onUserSelect:{type:Function,required:true},onClearUser:{type:Function,required:true}},setup(e){return ()=>h("div",{style:{width:"300px"}},[...e.selectedUser?[h("div",{style:{padding:"12px 12px 8px",borderBottom:"1px solid rgba(0,0,0,0.12)"}},[h("span",{style:{fontSize:"0.75rem",color:"rgba(0,0,0,0.6)"}},"Currently filtered by:"),h("div",{style:{display:"flex",alignItems:"center",gap:"8px",marginTop:"4px"}},[h(A,{size:32,image:e.selectedUser.photo},()=>e.selectedUser?.displayName?.[0]??""),h("div",{style:{flex:"1",minWidth:"0"}},[h("div",{style:{fontSize:"0.875rem",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}},e.selectedUser?.displayName),h("div",{style:{fontSize:"0.75rem",color:"rgba(0,0,0,0.6)",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}},e.selectedUser?.email)]),h(E,{icon:true,size:"x-small",variant:"text","aria-label":"Remove filter",onClick:e.onClearUser},()=>h(se,{size:"16"},()=>"mdi-close"))])])]:[],h("div",{style:{padding:"12px 12px 4px"}},h(ie,{modelValue:e.searchText,"onUpdate:modelValue":t=>e.onSearchChange(t),placeholder:"Search for a person...",density:"compact",variant:"outlined",hideDetails:true,autocomplete:"off",prependInnerIcon:"mdi-magnify",onKeydown:t=>t.stopPropagation()})),h("div",{style:{maxHeight:"240px",overflowY:"auto"}},e.isLoading&&e.searchText.trim()?h("div",{style:{display:"flex",justifyContent:"center",padding:"16px 0"}},h(le,{size:24,indeterminate:true})):e.suggestions.length===0&&e.searchText.trim()?h("div",{style:{padding:"16px 0",textAlign:"center",fontSize:"0.875rem",color:"rgba(0,0,0,0.6)"}},"No results found"):e.searchText.trim()?e.suggestions.map(t=>h("div",{key:t.id||t.email||t.displayName,style:{display:"flex",alignItems:"center",gap:"8px",padding:"8px 12px",cursor:"pointer"},onClick:()=>e.onUserSelect(t),onMouseenter:a=>{a.currentTarget.style.backgroundColor="rgba(0,0,0,0.04)";},onMouseleave:a=>{a.currentTarget.style.backgroundColor="";}},[h(A,{size:32,image:t.photo},()=>t.displayName?.[0]??""),h("div",{style:{flex:"1",minWidth:"0"}},[h("div",{style:{fontSize:"0.875rem",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}},t.displayName),h("div",{style:{fontSize:"0.75rem",color:"rgba(0,0,0,0.6)",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}},t.email)])])):h("div",{style:{padding:"16px 0",textAlign:"center",fontSize:"0.875rem",color:"rgba(0,0,0,0.6)"}},"Type to search...")),...e.selectedUser?[h(de),h("div",{style:{padding:"8px 12px"}},h(E,{size:"small",variant:"text",block:true,onClick:e.onClearUser},()=>"Clear Filter"))]:[]])}});var fe=VBtn,ve=VIcon,he=VMenu,xe=VTooltip,Se=VCard,f=defineComponent({name:"ColumnHeaderFilter",props:{columnKey:{type:String,required:true},columnName:{type:String,required:true},filterType:{type:String,required:true},isSorted:{type:Boolean,default:false},isSortedDescending:{type:Boolean,default:false},onSort:{type:Function,default:void 0},selectedValues:{type:Array,default:void 0},onFilterChange:{type:Function,default:void 0},options:{type:Array,default:()=>[]},isLoadingOptions:{type:Boolean,default:false},textValue:{type:String,default:""},onTextChange:{type:Function,default:void 0},selectedUser:{type:Object,default:void 0},onUserChange:{type:Function,default:void 0},peopleSearch:{type:Function,default:void 0},dateValue:{type:Object,default:void 0},onDateChange:{type:Function,default:void 0}},setup(e){let t=useColumnHeaderFilterState(e),a=()=>e.filterType==="multiSelect"?h(D,{searchText:t.searchText.value,onSearchChange:t.setSearchText,options:e.options??[],filteredOptions:t.filteredOptions.value,selected:t.tempSelected.value,onOptionToggle:t.handlers.handleCheckboxChange,onSelectAll:t.handlers.handleSelectAll,onClearSelection:t.handlers.handleClearSelection,onApply:t.handlers.handleApplyMultiSelect,isLoading:e.isLoadingOptions}):e.filterType==="text"?h(R,{value:t.tempTextValue.value??"",onValueChange:t.setTempTextValue,onApply:t.handlers.handleTextApply,onClear:t.handlers.handleTextClear}):e.filterType==="people"?h(O,{selectedUser:e.selectedUser,searchText:t.peopleSearchText.value,onSearchChange:t.setPeopleSearchText,suggestions:t.peopleSuggestions.value,isLoading:t.isPeopleLoading.value,onUserSelect:t.handlers.handleUserSelect,onClearUser:t.handlers.handleClearUser}):e.filterType==="date"?h("div",{style:{padding:"12px",display:"flex",flexDirection:"column",gap:"8px"}},[h("div",{style:{display:"flex",alignItems:"center",gap:"8px"}},[h("span",{style:{minWidth:"36px",fontSize:"0.75rem"}},"From:"),h("input",{type:"date",value:t.tempDateFrom.value??"",onInput:o=>t.setTempDateFrom(o.target.value),style:{flex:"1",padding:"4px 6px"}})]),h("div",{style:{display:"flex",alignItems:"center",gap:"8px"}},[h("span",{style:{minWidth:"36px",fontSize:"0.75rem"}},"To:"),h("input",{type:"date",value:t.tempDateTo.value??"",onInput:o=>t.setTempDateTo(o.target.value),style:{flex:"1",padding:"4px 6px"}})]),h("div",{style:{display:"flex",justifyContent:"flex-end",gap:"8px",marginTop:"4px"}},[h("button",{onClick:t.handlers.handleDateClear,disabled:!t.tempDateFrom.value&&!t.tempDateTo.value,style:{padding:"4px 12px",cursor:"pointer"}},"Clear"),h("button",{onClick:t.handlers.handleDateApply,style:{padding:"4px 12px",cursor:"pointer"}},"Apply")])]):null;return ()=>h("div",{ref:o=>{t.headerRef.value=o;},style:{display:"flex",alignItems:"center",width:"100%",minWidth:"0"}},[h("div",{style:{flex:"1",minWidth:"0",overflow:"hidden"}},h(xe,{text:e.columnName,location:"top"},{activator:({props:o})=>h("span",{...o,"data-header-label":"",style:{fontWeight:"600",fontSize:"0.875rem",lineHeight:"1.4",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",display:"block"}},e.columnName)})),h("div",{style:{display:"flex",alignItems:"center",marginLeft:"4px",flexShrink:"0"}},[...e.filterType!=="none"?[h(he,{modelValue:t.isFilterOpen.value,"onUpdate:modelValue":o=>t.setFilterOpen(o),closeOnContentClick:false,location:"bottom start"},{activator:({props:o})=>h("div",{style:{position:"relative"}},[h(fe,{...o,icon:true,size:"x-small",variant:t.hasActiveFilter.value||t.isFilterOpen.value?"tonal":"text",color:t.hasActiveFilter.value||t.isFilterOpen.value?"primary":"default","aria-label":`Filter ${e.columnName}`,"aria-expanded":t.isFilterOpen.value,"aria-haspopup":"dialog",title:`Filter ${e.columnName}`,style:{opacity:t.hasActiveFilter.value||t.isFilterOpen.value?"1":"0.7"}},()=>h(ve,{size:"16"},()=>"mdi-filter-variant")),...t.hasActiveFilter.value?[h("div",{style:{position:"absolute",top:"2px",right:"2px",width:"6px",height:"6px",borderRadius:"50%",backgroundColor:"rgb(var(--v-theme-primary))",zIndex:"1"}})]:[]]),default:()=>h(Se,{elevation:8,ref:o=>{t.popoverRef.value=o;},onClick:o=>o.stopPropagation()},()=>[h("div",{style:{borderBottom:"1px solid rgba(0,0,0,0.12)",padding:"8px 12px",fontWeight:"600",fontSize:"0.875rem",backgroundColor:"rgb(var(--v-theme-surface))"}},`Filter: ${e.columnName}`),a()])})]:[]])])}});var S=defineComponent({name:"ColumnHeaderMenu",props:{isOpen:{type:Boolean,required:true},anchorElement:{type:Object,default:null},onClose:{type:Function,required:true},onPinLeft:{type:Function,required:true},onPinRight:{type:Function,required:true},onUnpin:{type:Function,required:true},onSortAsc:{type:Function,required:true},onSortDesc:{type:Function,required:true},onClearSort:{type:Function,required:true},onAutosizeThis:{type:Function,required:true},onAutosizeAll:{type:Function,required:true},canPinLeft:{type:Boolean,required:true},canPinRight:{type:Boolean,required:true},canUnpin:{type:Boolean,required:true},currentSort:{type:String,default:null},isSortable:{type:Boolean,default:true},isResizable:{type:Boolean,default:true}},setup(e){let t=p=>{p||e.onClose();},a=computed(()=>getColumnHeaderMenuItems({canPinLeft:e.canPinLeft,canPinRight:e.canPinRight,canUnpin:e.canUnpin,currentSort:e.currentSort,isSortable:e.isSortable,isResizable:e.isResizable})),o={pinLeft:e.onPinLeft,pinRight:e.onPinRight,unpin:e.onUnpin,sortAsc:e.onSortAsc,sortDesc:e.onSortDesc,clearSort:e.onClearSort,autosizeThis:e.onAutosizeThis,autosizeAll:e.onAutosizeAll},s=p=>o[p]||(()=>{});return ()=>e.anchorElement?h(VMenu,{modelValue:e.isOpen,"onUpdate:modelValue":t,location:"bottom start",target:e.anchorElement},{default:()=>h(VList,{density:"compact","aria-label":"Column options"},()=>{let p=[];return a.value.forEach(d=>{p.push(h(VListItem,{key:d.id,disabled:d.disabled,onClick:()=>{s(d.id)();}},()=>d.label)),d.divider&&p.push(h(VDivider,{key:`divider-${d.id}`}));}),p})}):null}});var b=createInlineCellEditor({renderCheckbox:({checked:e,onChange:t,onCancel:a})=>h(VCheckbox,{modelValue:e,hideDetails:true,density:"compact","onUpdate:modelValue":o=>t(o),onKeydown:o=>{o.key==="Escape"&&(o.preventDefault(),a());}})});var P=defineComponent({name:"GridContextMenu",props:{x:{type:Number,required:true},y:{type:Number,required:true},hasSelection:{type:Boolean,required:true},canUndo:{type:Boolean,required:true},canRedo:{type:Boolean,required:true},onUndo:{type:Function,required:true},onRedo:{type:Function,required:true},onCopy:{type:Function,required:true},onCut:{type:Function,required:true},onPaste:{type:Function,required:true},onSelectAll:{type:Function,required:true},onClose:{type:Function,required:true}},setup(e){let t=getContextMenuHandlers(e),a=o=>!!(o.disabledWhenNoSelection&&!e.hasSelection||o.id==="undo"&&!e.canUndo||o.id==="redo"&&!e.canRedo);return ()=>h(VMenu,{modelValue:true,"onUpdate:modelValue":o=>{o||e.onClose();},target:[e.x,e.y],location:"bottom start"},{default:()=>h(VList,{density:"compact","aria-label":"Grid context menu"},()=>GRID_CONTEXT_MENU_ITEMS.map(o=>[...o.dividerBefore?[h(VDivider,{key:`${o.id}-div`})]:[],h(VListItem,{key:o.id,disabled:a(o),onClick:()=>{t[o.id]();}},()=>h("div",{style:{display:"flex",alignItems:"center",width:"100%"}},[h("span",{style:{flex:"1"}},o.label),...o.shortcut?[h("span",{style:{marginLeft:"24px",color:"rgba(0,0,0,0.4)",fontSize:"0.8em"}},formatShortcut(o.shortcut))]:[]]))]).flat())})}});function z({emptyState:e}){return h("div",{class:"ogrid-empty-state"},e.render?[e.render()]:[h("div",{class:"ogrid-empty-state-title"},"No results found"),h("div",{class:"ogrid-empty-state-message"},e.message!=null?String(e.message):e.hasActiveFilters?["No items match your current filters. Try adjusting your search or ",h(VBtn,{variant:"text",size:"small",onClick:e.onClearAll},()=>"clear all filters")," to see all items."]:"There are no items available at this time.")])}var T=createDataGridTable({renderCheckbox:({modelValue:e,indeterminate:t,ariaLabel:a,onChange:o})=>h(VCheckbox,{modelValue:e,indeterminate:t,hideDetails:true,density:"compact","aria-label":a,"onUpdate:modelValue":s=>o(!!s)}),renderSpinner:e=>h("div",{class:"ogrid-loading-inner"},[h(VProgressCircular,{size:24,indeterminate:true}),h("span",{class:"ogrid-loading-message"},e)]),ColumnHeaderFilter:f,ColumnHeaderMenu:S,InlineCellEditor:b,GridContextMenu:P,renderEmptyState:e=>z({emptyState:e})});var F=defineComponent({name:"ColumnChooser",props:{columns:{type:Array,required:true},visibleColumns:{type:Object,required:true},onVisibilityChange:{type:Function,required:true}},setup(e){let t=computed(()=>e.columns),a=computed(()=>e.visibleColumns),o=useColumnChooserState({columns:t,visibleColumns:a,onVisibilityChange:e.onVisibilityChange});return ()=>h(VMenu,{modelValue:o.open.value,"onUpdate:modelValue":s=>{o.setOpen(s);},closeOnContentClick:false,location:"bottom end"},{activator:({props:s})=>h(VBtn,{...s,variant:"outlined",size:"small",prependIcon:"mdi-view-column",appendIcon:o.open.value?"mdi-chevron-up":"mdi-chevron-down"},()=>`Column Visibility (${o.visibleCount.value} of ${o.totalCount.value})`),default:()=>h("div",{style:{minWidth:"220px"}},[h("div",{style:{padding:"8px 12px",borderBottom:"1px solid rgba(0,0,0,0.12)",backgroundColor:"rgba(0,0,0,0.04)",fontWeight:"600",fontSize:"0.875rem"}},`Select Columns (${o.visibleCount.value} of ${o.totalCount.value})`),h(VList,{density:"compact",style:{maxHeight:"320px",overflowY:"auto"}},()=>e.columns.map(s=>h(VListItem,{key:s.columnId,style:{minHeight:"32px"}},()=>h("label",{style:{display:"flex",alignItems:"center",gap:"8px",cursor:"pointer",width:"100%"}},[h("input",{type:"checkbox",checked:e.visibleColumns.has(s.columnId),onChange:p=>o.handleCheckboxChange(s.columnId)(p.target.checked)}),h("span",{style:{fontSize:"0.875rem"}},s.name)])))),h(VDivider),h("div",{style:{display:"flex",justifyContent:"flex-end",gap:"8px",padding:"8px 12px",backgroundColor:"rgba(0,0,0,0.04)"}},[h(VBtn,{size:"small",variant:"text",onClick:o.handleClearAll},()=>"Clear All"),h(VBtn,{size:"small",variant:"flat",color:"primary",onClick:o.handleSelectAll},()=>"Select All")])])})}});var U=defineComponent({name:"PaginationControls",props:{currentPage:{type:Number,required:true},pageSize:{type:Number,required:true},totalCount:{type:Number,required:true},onPageChange:{type:Function,required:true},onPageSizeChange:{type:Function,required:true},pageSizeOptions:{type:Array,default:void 0},entityLabelPlural:{type:String,default:"items"}},setup(e){let t=computed(()=>getPaginationViewModel(e.currentPage,e.pageSize,e.totalCount,e.pageSizeOptions?{pageSizeOptions:e.pageSizeOptions}:void 0));return ()=>{let a=t.value;if(!a)return null;let{pageNumbers:o,showStartEllipsis:s,showEndEllipsis:p,totalPages:d,startItem:k,endItem:w}=a,H=e.entityLabelPlural??"items";return h("div",{role:"navigation","aria-label":"Pagination",style:{display:"flex",alignItems:"center",justifyContent:"space-between",flexWrap:"wrap",gap:"16px",padding:"0 12px",width:"100%",minWidth:"0",boxSizing:"border-box"}},[h("span",{style:{fontSize:"0.875rem",color:"var(--ogrid-fg-secondary, rgba(0,0,0,0.6))"}},`Showing ${k} to ${w} of ${e.totalCount.toLocaleString()} ${H}`),h("div",{style:{display:"flex",alignItems:"center",gap:"4px"}},[h(VBtn,{icon:"mdi-page-first",size:"small",variant:"text",disabled:e.currentPage===1,"aria-label":"First page",onClick:()=>e.onPageChange(1)}),h(VBtn,{icon:"mdi-chevron-left",size:"small",variant:"text",disabled:e.currentPage===1,"aria-label":"Previous page",onClick:()=>e.onPageChange(e.currentPage-1)}),...s?[h(VBtn,{size:"small",variant:"outlined","aria-label":"Page 1",style:{minWidth:"32px"},onClick:()=>e.onPageChange(1)},()=>"1"),h("span",{style:{margin:"0 4px",color:"var(--ogrid-fg-secondary, rgba(0,0,0,0.6))"},"aria-hidden":"true"},"\u2026")]:[],...o.map(m=>h(VBtn,{key:m,size:"small",variant:e.currentPage===m?"flat":"outlined",color:e.currentPage===m?"primary":void 0,"aria-label":`Page ${m}`,"aria-current":e.currentPage===m?"page":void 0,style:{minWidth:"32px"},onClick:()=>e.onPageChange(m)},()=>String(m))),...p?[h("span",{style:{margin:"0 4px",color:"var(--ogrid-fg-secondary, rgba(0,0,0,0.6))"},"aria-hidden":"true"},"\u2026"),h(VBtn,{size:"small",variant:"outlined","aria-label":`Page ${d}`,style:{minWidth:"32px"},onClick:()=>e.onPageChange(d)},()=>String(d))]:[],h(VBtn,{icon:"mdi-chevron-right",size:"small",variant:"text",disabled:e.currentPage>=d,"aria-label":"Next page",onClick:()=>e.onPageChange(e.currentPage+1)}),h(VBtn,{icon:"mdi-page-last",size:"small",variant:"text",disabled:e.currentPage>=d,"aria-label":"Last page",onClick:()=>e.onPageChange(d)})]),h("div",{style:{display:"flex",alignItems:"center",gap:"8px"}},[h("span",{style:{fontSize:"0.875rem",color:"var(--ogrid-fg-secondary, rgba(0,0,0,0.6))"}},"Rows"),h(VSelect,{modelValue:e.pageSize,items:a.pageSizeOptions,density:"compact",hideDetails:true,variant:"outlined","aria-label":"Rows per page",style:{minWidth:"70px",maxWidth:"90px"},"onUpdate:modelValue":m=>e.onPageSizeChange(Number(m))})])])}}});var tt=createOGrid({DataGridTable:T,ColumnChooser:F,PaginationControls:U});export{F as ColumnChooser,f as ColumnHeaderFilter,S as ColumnHeaderMenu,T as DataGridTable,P as GridContextMenu,b as InlineCellEditor,tt as OGrid,U as PaginationControls};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@alaarab/ogrid-vue-vuetify",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.6.1",
|
|
4
4
|
"description": "OGrid Vuetify – Vuetify-based data grid with sorting, filtering, pagination, column chooser, and CSV export.",
|
|
5
5
|
"main": "dist/esm/index.js",
|
|
6
6
|
"module": "dist/esm/index.js",
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
"./styles/*": "./dist/esm/*"
|
|
15
15
|
},
|
|
16
16
|
"scripts": {
|
|
17
|
-
"build": "rimraf dist && tsup && tsc -p tsconfig.build.json",
|
|
17
|
+
"build": "rimraf dist && tsup && node scripts/copy-css.js && tsc -p tsconfig.build.json",
|
|
18
18
|
"test": "jest",
|
|
19
19
|
"storybook": "storybook dev -p 6011 --no-open",
|
|
20
20
|
"build-storybook": "storybook build"
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
"node": ">=18"
|
|
39
39
|
},
|
|
40
40
|
"dependencies": {
|
|
41
|
-
"@alaarab/ogrid-vue": "2.
|
|
41
|
+
"@alaarab/ogrid-vue": "2.6.1"
|
|
42
42
|
},
|
|
43
43
|
"peerDependencies": {
|
|
44
44
|
"vue": "^3.3.0",
|