@mythpe/quasar-ui-qui 0.3.11 → 0.3.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mythpe/quasar-ui-qui",
-  "version": "0.3.11",
+  "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 {
@@ -419,6 +421,16 @@ const onSearchEnter = () => {
   }
   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()
@@ -551,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,
@@ -880,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/types/m-datatable.d.ts

@@ -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 {