@mythpe/quasar-ui-qui 0.3.10 → 0.3.12

package/package.json

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

package/src/components/datatable/MDatatable.vue

@@ -91,6 +91,7 @@ type Props = {
   descColumns?: MDatatableProps['descColumns'];
   help?: MDatatableProps['help'];
   noWrapBtn?: boolean;
+  lockValue?: MDatatableProps['lockValue'];
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -160,7 +161,8 @@ const props = withDefaults(defineProps<Props>(), {
   copyColumns: undefined,
   descColumns: undefined,
   help: undefined,
-  noWrapBtn: undefined
+  noWrapBtn: undefined,
+  lockValue: undefined
 })
 
 interface Emits {
@@ -214,6 +216,7 @@ const {
   onUpdateSelectedItems,
   pagination,
   search,
+  onSearchInput,
   searchColumnsRef,
   getSearchColumnsHeaders,
   isSearchSelectedAll,
@@ -412,6 +415,22 @@ 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()
+}
+const lockValueProp = computed<string>(() => getProp.value('lockValue') || 'id')
+const lockSearch = computed<boolean>(() => searchColumnsRef.value.length === 1 && searchColumnsRef.value[0] === lockValueProp.value)
+const tempSearch = ref<string[]>([])
+const onLockSearch = () => {
+  if (!lockSearch.value) {
+    tempSearch.value = toValue(searchColumnsRef)
+  }
+  searchColumnsRef.value = !lockSearch.value ? [lockValueProp.value] : tempSearch.value
+  // lockSearch.value = !lockSearch.value
+}
 onMounted(() => {
   wrapCellsRef.value = getProp.value('wrapCells') ?? !1
   refresh()
@@ -533,7 +552,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"
@@ -544,6 +563,7 @@ defineExpose({
         :selection="getShowSelection ? (multiSelection ? 'multiple' : 'single') : 'none'"
         :visible-columns="visibleHeaders"
         card-container-class="m-datatable-container"
+        color="primary"
         table-class="m-datatable-container"
         v-bind="{
           virtualScroll: !0,
@@ -754,10 +774,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 +785,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
@@ -871,6 +893,16 @@ defineExpose({
                       </MTooltip>
                     </q-btn>
                   </template>
+                  <template #append>
+                    <q-btn
+                      :icon="`ion-ios-${lockSearch ? 'magnet' : 'lock'}`"
+                      fab-mini
+                      flat
+                      @click="onLockSearch"
+                    >
+                      <q-tooltip>{{ __(`labels.${lockSearch ? 'unlock' : 'lock'}_search`, { name: __(lockValueProp) }) }}</q-tooltip>
+                    </q-btn>
+                  </template>
                 </MInput>
                 <slot
                   :dt="datatableItemsScope"

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
@@ -332,6 +332,10 @@ export type MDatatableProps<I extends GenericFormValues = GenericFormValues> = O
    * Show, hide wrap the button in the table.
    */
   noWrapBtn?: boolean;
+  /**
+   * Column name to lock the value.
+   */
+  lockValue?: string;
 }
 
 export interface MDtAvatarProps extends QAvatarProps {