@mythpe/quasar-ui-qui 0.0.68 → 0.0.70

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mythpe/quasar-ui-qui",
-  "version": "0.0.68",
+  "version": "0.0.70",
   "description": "MyTh Quasar UI Kit App Extension",
   "author": {
     "name": "MyTh Ahmed Faiz",

package/src/components/datatable/MDatatable.vue

@@ -51,6 +51,7 @@ interface Props {
   controlKey?: MDatatableProps['controlKey'];
   defaultItem?: MDatatableProps['defaultItem'];
   contextItems?: MDatatableProps['contextItems'];
+  contextItemsLength?: MDatatableProps['contextItemsLength'];
   hideAutoMessage?: MDatatableProps['hideAutoMessage'];
   headers: MDatatableProps['headers'];
   serviceName?: MDatatableProps['serviceName'];
@@ -109,6 +110,7 @@ const props = withDefaults(defineProps<Props>(), {
   controlKey: () => 'control',
   defaultItem: undefined,
   contextItems: undefined,
+  contextItemsLength: 4,
   hideAutoMessage: undefined,
   headers: () => ([]),
   serviceName: () => '',
@@ -453,10 +455,7 @@ const getRequestWith = (type: 'withIndex' | 'withShow' | 'withUpdate' | 'withSto
   }
   return v.join(',') ?? null
 }
-const getDatatableParams = ({
-  pagination,
-  filter
-}: FetchRowsArgs = {}, merge: Partial<ApiServiceParams> = {}): ApiServiceParams => {
+const getDatatableParams = ({ pagination, filter }: FetchRowsArgs = {}, merge: Partial<ApiServiceParams> = {}): ApiServiceParams => {
   let params: ApiServiceParams = {
     // filter: tableOptions.filter,
     // search: filter || undefined,
@@ -997,14 +996,15 @@ const onRowContextmenu = (e: MouseEvent | Event, row: MDtItem, index: number | u
 }
 const contextmenuItemsProp = computed(() => props.contextItems)
 const contextmenuItems = computed<any>(() => ([
-  ...(contextmenuItemsProp.value || []).sort((a, b) => (a.order ?? 0) - (b.order ?? 0)),
+  ...(contextmenuItemsProp.value || []),
   {
     name: 'show',
     label: pluginOptions.value?.dt?.contextmenu?.btnStyle?.showLabel ? 'labels.show' : undefined,
     click: (item: MDtItem, index: MDtItemIndex) => {
       openShowDialog(item, index)
     },
-    showIf: hasShowBtn.value
+    showIf: hasShowBtn.value,
+    order: 100
   },
   {
     name: 'update',
@@ -1012,7 +1012,8 @@ const contextmenuItems = computed<any>(() => ([
     click: (item: MDtItem, index: MDtItemIndex) => {
       openUpdateDialog(item, index)
     },
-    showIf: hasUpdateBtn.value
+    showIf: hasUpdateBtn.value,
+    order: 200
   },
   {
     name: 'destroy',
@@ -1024,9 +1025,10 @@ const contextmenuItems = computed<any>(() => ([
     showIf: hasDestroyBtn.value,
     attr: {
       color: 'negative'
-    }
+    },
+    order: 300
   }
-]))
+].sort((a, b) => (a.order ?? 0) - (b.order ?? 0))))
 const endReach = computed<boolean>(() => Boolean(props.endReach))
 const rowsPerPageOptions = computed(() => props.rowsPerPageOptions)
 const getRowsPerPageOptions = computed<any[]>(() => endReach.value ? [0] : (rowsPerPageOptions.value || [0]))
@@ -1899,7 +1901,7 @@ defineOptions({
             <q-td :props="noBodyProps">
               <!--Control-->
               <q-btn-dropdown
-                v-if="contextmenuItems.length>3"
+                v-if="contextmenuItems.length>contextItemsLength"
                 v-close-popup
                 :menu-offset="[0,10]"
                 color="primary"
@@ -1929,7 +1931,7 @@ defineOptions({
               </q-btn-dropdown>
               <MRow
                 v-else
-                class="m--dt-context_menu_items"
+                class="m--dt-context_menu_items justify-end"
                 gutter
                 space="xs"
               >

package/src/components/datatable/MDtContextmenuItems.vue

@@ -47,6 +47,8 @@ defineOptions({ name: 'MDtContextmenuItems', inheritAttrs: !1 })
           undefined)"
         :list-item="itemMode"
         :tooltip="m.tooltip !== undefined ? m.tooltip : (m.label === undefined ? m.name : undefined)"
+        flat
+        dense
         v-bind="m.attr"
         @click="m.click ? m.click(item,index) : undefined"
       />

package/src/style/main.sass

@@ -162,7 +162,8 @@ pre
   line-height: 1.25rem
   letter-spacing: 0.03333em
 
-$control-max-width: 250px !default
+$control-max-width: 200px !default
+
 .m--control-cell,
 .m--control-header
-  max-width: $control-max-width
+  width: $control-max-width

package/src/types/m-datatable.d.ts

@@ -210,6 +210,7 @@ export type MDatatableProps<I extends GenericFormValues = GenericFormValues> = O
   controlKey?: string;
   defaultItem?: Partial<MDtItem<I>>
   contextItems?: GenericMDtBtn[];
+  contextItemsLength?: number;
   hideAutoMessage?: boolean;
   headers: string[] | Partial<QTableProps['columns']> | any[];
   serviceName?: MDtServiceNameStringProp | MDtServiceNameCallbackProp;