@mythpe/quasar-ui-qui 0.1.11 → 0.1.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mythpe/quasar-ui-qui",
-  "version": "0.1.11",
+  "version": "0.1.13",
   "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)
@@ -1815,7 +1827,7 @@ defineOptions({
                       <span>
                         {{ getHeaders.find(e => e.name === filterKey)?.label || __(`attributes.${filterKey}`) }}
                       </span>
-                      <span v-if="typeof filterValue === 'boolean'">: {{ __(filterValue ? 'yes' : 'no') }}</span>
+                      <span v-if="typeof filterValue === 'boolean'">: {{ __(`labels.${filterValue ? 'yes' : 'no'}`) }}</span>
                       <span v-else-if="typeof filterValue === 'string'">: {{ filterValue }}</span>
                       <span
                         v-else-if="lodash.isArray(filterValue) && !quasarHelpers.object(filterValue[0])"