@mythpe/quasar-ui-qui 0.1.12 → 0.1.14

package/package.json

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

package/src/components/datatable/MDatatable.vue

@@ -282,12 +282,17 @@ const resetDialogs = () => {
 /** Table */
 
 /** --- */
-const headersProp = computed(() => props.headers)
-const getHeaders = computed<any[]>(() => parseHeaders(headersProp.value, reactive({ noSort: props.imageColumns })) || [])
-const visibleHeaders = ref<string[]>(parseHeaders(props.visibleColumns || headersProp.value).map(e => e.name))
-watch(() => toValue(props.visibleColumns), v => {
+const getHeaders = computed<any[]>(() => parseHeaders(toValue(props.headers), { noSort: props.imageColumns }) || [])
+const visibleHeaders = ref<string[]>([])
+watch([
+  () => toValue(props.visibleColumns),
+  () => toValue(props.headers)
+], ([v]) => {
+  if (!v) {
+    v = toValue(getHeaders)
+  }
   visibleHeaders.value = v ? parseHeaders(v).map(e => e.name) : []
-}, { deep: !0 })
+}, { deep: !0, immediate: !0 })
 /** --- */
 
 const selected = ref<MDtItem[]>([])
@@ -300,10 +305,18 @@ const onUpdateSelectedItems = () => {
 const meta = ref<MDatatableMetaServer>({ ...initMetaServer })
 const pagination = ref<MDatatablePagination>({ ...initPaginationOptions })
 const search = ref<string | null>(null)
-const searchColumnsProp = computed(() => props.searchColumns)
-const searchColumnsRef = ref<string[]>(parseHeaders(searchColumnsProp.value || headersProp.value)
-  .filter(e => e?.field !== props.controlKey)
-  .map(e => e.name))
+const searchColumnsRef = ref<string[]>([])
+watch([
+  () => toValue(props.searchColumns),
+  () => toValue(props.headers)
+], ([v]) => {
+  if (!v) {
+    v = toValue(getHeaders) as any
+  }
+  searchColumnsRef.value = parseHeaders(v as any)
+    .filter(e => e?.field !== props.controlKey)
+    .map(e => e.name)
+}, { deep: !0, immediate: !0 })
 const searchPlaceholder = computed<string>(() => {
   if (searchColumnsRef.value.length > 0) {
     return __('myth.datatable.searchInputPlaceholder',
@@ -478,12 +491,10 @@ const getDatatableParams = ({
   pagination,
   filter
 }: FetchRowsArgs = {}, merge: Partial<ApiServiceParams> = {}): ApiServiceParams => {
+  const headerItems = getHeaders.value.map((e: any) => e.name).join(',')
+  // console.log(headerItems)
   let params: ApiServiceParams = {
-    // filter: tableOptions.filter,
-    // search: filter || undefined,
-    headerItems: getHeaders.value.map((e: any) => e.name).join(','),
-    // headers: ['name'],
-    // ids: tableOptions.selected.map((e: any) => e.id),
+    headerItems,
     indexType: 'index',
     fdt: 'i',
     itemsPerPage: pagination?.rowsPerPage === 0 ? -1 : (pagination?.rowsPerPage !== undefined ? pagination?.rowsPerPage : 0),
@@ -589,6 +600,7 @@ const exportData = (type: MDtExportOptions) => {
   const ex = async () => {
     loading.value = !0
     const toBLob = exportToBlob.value === !0 || exportToBlob.value === type
+    const headerItems = getHeaders.value.filter(e => e?.field !== props.controlKey && visibleHeaders.value.indexOf(e.name) !== -1)
     const data = getDatatableParams({
       pagination: tableOptions.pagination,
       filter: tableOptions.search
@@ -596,7 +608,7 @@ const exportData = (type: MDtExportOptions) => {
       indexType: type,
       fdt: 'e',
       toUrl: toBLob === !0 ? !1 : exportToBlob.value !== type,
-      headerItems: getHeaders.value.filter(e => e?.field !== props.controlKey && visibleHeaders.value.indexOf(e.name) !== -1)
+      headerItems
     })
     if (tableOptions.selected.length > 0) {
       data.ids = tableOptions.selected.map((e: any) => e.id)
@@ -1745,9 +1757,11 @@ defineOptions({
                   >
                     <MDtBtn
                       v-if="(typeof contextBtn.showIf === 'function' ? contextBtn.showIf(tableOptions.selected[0],0) : contextBtn.showIf) && ( (contextBtn.click && isSingleSelectedItem) || (contextBtn.multiClick && !isSingleSelectedItem) )"
-                      :tooltip="__(contextBtn.tooltip || contextBtn.name)"
+                      :tooltip="__(contextBtn.tooltip || contextBtn.label || contextBtn.name)"
                       v-bind="{...defaultTopBtnProps,...pluginOptions.dt?.topSelection?.btn,...contextBtn,...contextBtn.attr}"
-                      @click="contextBtn.click ? contextBtn.click(tableOptions.selected[0],0) : (contextBtn.multiClick ? contextBtn.multiClick(tableOptions.selected) : undefined)"
+                      @click="contextBtn.multiClick && tableOptions.selected.length > 1 ? contextBtn.multiClick(tableOptions.selected) : (
+                        contextBtn.click ? contextBtn.click(tableOptions.selected[0],0) : undefined
+                      )"
                     />
                   </template>
                 </template>

package/src/components/form/MAxios.vue

@@ -40,7 +40,7 @@ const props = withDefaults(defineProps<P>(), {
   service: undefined,
   guest: undefined,
   requestWith: undefined,
-  params: () => () => ({}),
+  params: () => ({}),
   lazy: () => !1,
   useChoice: undefined
 })
@@ -106,7 +106,7 @@ onMounted(() => {
     prepare()
   }
 })
-watch(props.params, () => prepare(!0), { deep: !0 })
+watch(() => toValue(props.params), () => prepare(!0), { deep: !0 })
 const input = useTemplateRef<InstanceType<typeof MSelect>>('input')
 defineExpose<{ input: typeof input }>({ input })
 defineOptions({ name: 'MAxios', inheritAttrs: !1 })