@mythpe/quasar-ui-qui 0.3.9 → 0.3.11

package/package.json

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

package/src/components/datatable/MDatatable.vue

@@ -214,6 +214,7 @@ const {
   onUpdateSelectedItems,
   pagination,
   search,
+  onSearchInput,
   searchColumnsRef,
   getSearchColumnsHeaders,
   isSearchSelectedAll,
@@ -412,6 +413,12 @@ const copyColumnsProp = computed<string[]>(() => toValue(props.copyColumns || []
 const descColumnsProp = computed<string[]>(() => toValue(props.descColumns || []))
 const noWrapBtnProp = computed(() => getProp.value('noWrapBtn'))
 const wrapCellsRef = ref<boolean>(!1)
+const onSearchEnter = () => {
+  if (loading.value) {
+    return
+  }
+  refreshNoUpdate()
+}
 onMounted(() => {
   wrapCellsRef.value = getProp.value('wrapCells') ?? !1
   refresh()
@@ -533,7 +540,7 @@ defineExpose({
         v-model:fullscreen="fullscreen"
         v-model:pagination="pagination"
         v-model:selected="selected"
-        :class="`m-datatable ` + (isSmall ? 'm-datatable-grid' : '')"
+        :class="['m-datatable',{'m-datatable-grid' : isSmall}]"
         :columns="getHeaders"
         :filter="search"
         :grid="isGrid"
@@ -754,10 +761,10 @@ defineExpose({
                   name="top-search"
                 />
                 <MInput
-                  v-if="!hideSearch && !formDialogModel"
-                  v-model="search"
+                  v-if="!hideSearch"
                   :debounce="searchDebounce"
                   :dense="dense === undefined ? (pluginOptions.datatable?.dense !== undefined ? pluginOptions.datatable?.dense : !0) : dense"
+                  :model-value="search"
                   :placeholder="searchPlaceholder"
                   autocomplete="none"
                   col="12"
@@ -765,6 +772,8 @@ defineExpose({
                   name="search"
                   outlined
                   v-bind="pluginOptions.dt?.searchInput?.props as any"
+                  @update:model-value="onSearchInput($event)"
+                  @keyup.enter="onSearchEnter()"
                 >
                   <template #prepend>
                     <q-icon
@@ -886,8 +895,7 @@ defineExpose({
                 <MDtBtn
                   v-if="pdf && getRows.length > 0"
                   icon="fa-solid fa-file-pdf"
-                  text-color="red"
-                  v-bind="{...defaultTopBtnProps,...pluginOptions.dt?.buttons?.filter as any}"
+                  v-bind="{...defaultTopBtnProps,...pluginOptions.dt?.buttons?.filter as any, textColor: 'red'}"
                   @click="exportData('pdf')"
                 >
                   <q-tooltip class="m-dt-btn-tooltip">
@@ -898,8 +906,7 @@ defineExpose({
                 <MDtBtn
                   v-if="excel && getRows.length > 0"
                   icon="fa-solid fa-file-excel"
-                  text-color="green"
-                  v-bind="{...defaultTopBtnProps,...pluginOptions.dt?.buttons?.filter as any}"
+                  v-bind="{...defaultTopBtnProps,...pluginOptions.dt?.buttons?.filter as any, textColor: 'green'}"
                   @click="exportData('excel')"
                 >
                   <q-tooltip class="m-dt-btn-tooltip">
@@ -1060,6 +1067,7 @@ defineExpose({
                   label="myth.datatable.columnsToShow"
                   text-color="on-brand"
                   tooltip="myth.datatable.columnsToShowCaption"
+                  v-bind="pluginOptions.dt?.buttons?.filter as any"
                 >
                   <MModalMenu
                     :no-close-btn="$q.screen.gt.xs"
@@ -1118,9 +1126,7 @@ defineExpose({
                 <MDtBtn
                   v-if="!noWrapBtnProp"
                   :icon="`ion-ios-${!wrapCellsRef ? 'grid' : 'list'}`"
-                  color="brand"
                   flat
-                  text-color="brand"
                   @click="wrapCellsRef = !wrapCellsRef"
                 />
               </MRow>

package/src/composable/useDtHelpers.ts

@@ -85,10 +85,10 @@ export const useDtHelpers = (options: MaybeRefOrGetter<MDatatableProps>) => {
     return !0
   })
 
-  const filterDialogModel = ref(!1)
-  const showDialogModel = ref(!1)
-  const formDialogModel = ref(!1)
-  const isUpdateDialog = ref(!1)
+  const filterDialogModel = ref<boolean>(!1)
+  const showDialogModel = ref<boolean>(!1)
+  const formDialogModel = ref<boolean>(!1)
+  const isUpdateDialog = ref<boolean>(!1)
   const dialogItem = ref<MDtItem | undefined>(undefined)
   const setDialogItem = (value: any) => {
     dialogItem.value = toValue(value) as any
@@ -133,7 +133,11 @@ export const useDtHelpers = (options: MaybeRefOrGetter<MDatatableProps>) => {
 
   const meta = ref<MDatatableMetaServer>({ ...initMetaServer })
   const pagination = ref<MDatatablePagination>({ ...initPaginationOptions })
-  const search = ref<string | null>(null)
+  const search = ref<string | null | undefined>(undefined)
+  const onSearchInput = (value: any) => {
+    if (value === search.value) return
+    search.value = value
+  }
   const searchColumnsRef = ref<string[]>([])
   const getSearchColumnsHeaders = computed(() => getHeaders.value.filter(e => e.field !== props.controlKey))
   const isSearchSelectedAll = computed(() => searchColumnsRef.value.length === getSearchColumnsHeaders.value.length)
@@ -943,6 +947,7 @@ export const useDtHelpers = (options: MaybeRefOrGetter<MDatatableProps>) => {
     meta,
     pagination,
     search,
+    onSearchInput,
     searchColumnsRef,
     getSearchColumnsHeaders,
     isSearchSelectedAll,

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

@@ -83,7 +83,7 @@ export type MDatatableOptions = {
   // Table is loading
   loading: Ref<boolean>;
   // Search input
-  search: Ref<string | null>;
+  search: Ref<string | null | undefined>;
   // Table pagination
   pagination: Ref<MDatatablePagination>;
   // Server meta data