@alaarab/ogrid-vue-vuetify 2.0.22 → 2.1.0

package/dist/esm/ColumnChooser/ColumnChooser.js

@@ -1,4 +1,4 @@
-import { defineComponent, ref, computed, h } from 'vue';
+import { defineComponent, computed, h } from 'vue';
 import { VBtn, VMenu, VList, VListItem, VDivider } from 'vuetify/components';
 import { useColumnChooserState } from '@alaarab/ogrid-vue';
 export const ColumnChooser = defineComponent({
@@ -9,7 +9,6 @@ export const ColumnChooser = defineComponent({
         onVisibilityChange: { type: Function, required: true },
     },
     setup(props) {
-        const menuOpen = ref(false);
         const columnsRef = computed(() => props.columns);
         const visibleColumnsRef = computed(() => props.visibleColumns);
         const state = useColumnChooserState({
@@ -19,8 +18,8 @@ export const ColumnChooser = defineComponent({
         });
         return () => {
             return h(VMenu, {
-                modelValue: menuOpen.value,
-                'onUpdate:modelValue': (v) => { menuOpen.value = v; },
+                modelValue: state.open.value,
+                'onUpdate:modelValue': (v) => { state.setOpen(v); },
                 closeOnContentClick: false,
                 location: 'bottom end',
             }, {
@@ -29,7 +28,7 @@ export const ColumnChooser = defineComponent({
                     variant: 'outlined',
                     size: 'small',
                     prependIcon: 'mdi-view-column',
-                    appendIcon: menuOpen.value ? 'mdi-chevron-up' : 'mdi-chevron-down',
+                    appendIcon: state.open.value ? 'mdi-chevron-up' : 'mdi-chevron-down',
                 }, () => `Column Visibility (${state.visibleCount.value} of ${state.totalCount.value})`),
                 default: () => h('div', { style: { minWidth: '220px' } }, [
                     // Header

package/dist/esm/ColumnHeaderFilter/ColumnHeaderFilter.js

@@ -32,23 +32,8 @@ export const ColumnHeaderFilter = defineComponent({
         onDateChange: { type: Function, default: undefined },
     },
     setup(props) {
-        const state = useColumnHeaderFilterState({
-            filterType: props.filterType,
-            isSorted: props.isSorted,
-            isSortedDescending: props.isSortedDescending,
-            onSort: props.onSort,
-            selectedValues: props.selectedValues,
-            onFilterChange: props.onFilterChange,
-            options: props.options,
-            isLoadingOptions: props.isLoadingOptions,
-            textValue: props.textValue,
-            onTextChange: props.onTextChange,
-            selectedUser: props.selectedUser,
-            onUserChange: props.onUserChange,
-            peopleSearch: props.peopleSearch,
-            dateValue: props.dateValue,
-            onDateChange: props.onDateChange,
-        });
+        // Pass props directly so useColumnHeaderFilterState accesses reactive prop values
+        const state = useColumnHeaderFilterState(props);
         const renderPopoverContent = () => {
             if (props.filterType === 'multiSelect') {
                 return h(MultiSelectFilterPopover, {
@@ -188,7 +173,7 @@ export const ColumnHeaderFilter = defineComponent({
                                         padding: '8px 12px',
                                         fontWeight: '600',
                                         fontSize: '0.875rem',
-                                        backgroundColor: '#fff',
+                                        backgroundColor: 'rgb(var(--v-theme-surface))',
                                     },
                                 }, `Filter: ${props.columnName}`),
                                 renderPopoverContent(),

package/dist/esm/ColumnHeaderFilter/PeopleFilterPopover.js

@@ -24,10 +24,10 @@ export const PeopleFilterPopover = defineComponent({
                 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(_VAvatar, { size: 32, image: props.selectedUser.photo }, () => props.selectedUser.displayName?.[0] ?? ''),
+                        h(_VAvatar, { size: 32, image: props.selectedUser.photo }, () => props.selectedUser?.displayName?.[0] ?? ''),
                         h('div', { style: { flex: '1', minWidth: '0' } }, [
-                            h('div', { style: { fontSize: '0.875rem', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, props.selectedUser.displayName),
-                            h('div', { style: { fontSize: '0.75rem', color: 'rgba(0,0,0,0.6)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, props.selectedUser.email),
+                            h('div', { style: { fontSize: '0.875rem', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, props.selectedUser?.displayName),
+                            h('div', { style: { fontSize: '0.75rem', color: 'rgba(0,0,0,0.6)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, props.selectedUser?.email),
                         ]),
                         h(_VBtn, {
                             icon: true,

package/dist/types/ColumnHeaderMenu/ColumnHeaderMenu.d.ts

@@ -1,4 +1,4 @@
-import { type PropType } from 'vue';
+import { type PropType, type VNode } from 'vue';
 export interface ColumnHeaderMenuProps {
     isOpen: boolean;
     anchorElement: HTMLElement | null;
@@ -87,7 +87,7 @@ export declare const ColumnHeaderMenu: import("vue").DefineComponent<import("vue
         type: BooleanConstructor;
         default: boolean;
     };
-}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+}>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
 }> | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     isOpen: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-vue-vuetify",
-  "version": "2.0.22",
+  "version": "2.1.0",
   "description": "OGrid Vuetify – Vuetify-based data grid with sorting, filtering, pagination, column chooser, and CSV export.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -10,7 +10,8 @@
       "types": "./dist/types/index.d.ts",
       "import": "./dist/esm/index.js",
       "require": "./dist/esm/index.js"
-    }
+    },
+    "./styles/*": "./dist/esm/*"
   },
   "scripts": {
     "build": "rimraf dist && tsc -p tsconfig.build.json && node scripts/copy-css.js",
@@ -37,7 +38,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@alaarab/ogrid-vue": "2.0.22"
+    "@alaarab/ogrid-vue": "2.1.0"
   },
   "peerDependencies": {
     "vue": "^3.3.0",
@@ -59,5 +60,12 @@
   ],
   "publishConfig": {
     "access": "public"
-  }
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/alaarab/ogrid.git",
+    "directory": "packages/vue-vuetify"
+  },
+  "homepage": "https://ogrid.dev",
+  "bugs": "https://github.com/alaarab/ogrid/issues"
 }