@mythpe/quasar-ui-qui 0.3.2 → 0.3.4

package/package.json

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

package/src/components/datatable/MDatatable.vue

@@ -90,6 +90,7 @@ type Props = {
   copyColumns?: MDatatableProps['copyColumns'];
   descColumns?: MDatatableProps['descColumns'];
   help?: MDatatableProps['help'];
+  noWrapBtn?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -158,7 +159,8 @@ const props = withDefaults(defineProps<Props>(), {
   sarColumns: undefined,
   copyColumns: undefined,
   descColumns: undefined,
-  help: undefined
+  help: undefined,
+  noWrapBtn: undefined
 })
 
 interface Emits {
@@ -408,7 +410,12 @@ const colorColumnsProp = computed<string[]>(() => toValue(props.colorColumns ||
 const sarColumnsProp = computed<string[]>(() => toValue(props.sarColumns || []))
 const copyColumnsProp = computed<string[]>(() => toValue(props.copyColumns || []))
 const descColumnsProp = computed<string[]>(() => toValue(props.descColumns || []))
-onMounted(() => refresh())
+const noWrapBtnProp = computed(() => getProp.value('noWrapBtn'))
+const wrapCellsRef = ref<boolean>(!1)
+onMounted(() => {
+  wrapCellsRef.value = getProp.value('wrapCells') ?? !1
+  refresh()
+})
 watch(loading, v => {
   if (pluginOptions.value?.dt?.useQuasarLoading) {
     if (v) {
@@ -540,13 +547,13 @@ defineExpose({
         table-class="m-datatable-container"
         v-bind="{
           virtualScroll: !0,
-          wrapCells:!0,
           ...pluginOptions.datatable as any,
           ...$attrs as any,
           title: getTableTitle,
           bordered: bordered === undefined ? pluginOptions.datatable?.bordered : bordered,
           dense: dense === undefined ? ( theme.inputs.dense !== undefined ? theme.inputs.dense : pluginOptions.datatable?.dense) : dense,
           flat: flat === undefined ? pluginOptions.datatable?.flat : flat,
+          wrapCells: wrapCellsRef,
         } as any"
         @request="fetchDatatableItems"
         @update:selected="onUpdateSelectedItems"
@@ -608,6 +615,7 @@ defineExpose({
                       >
                         <template v-if="imageColumnsProp.indexOf(col.name) !== -1">
                           <MDtImageColumn
+                            v-if="col.value !== undefined && col.value !== null"
                             :image-mode="getProp('imageMode')"
                             :image-size="getProp('imageSize')"
                             :value="col.value"
@@ -616,18 +624,26 @@ defineExpose({
                         </template>
                         <template v-else-if="urlColumnsProp.indexOf(col.name) !== -1">
                           <MDtUrlColumn
+                            v-if="col.value !== undefined && col.value !== null"
                             :value="col.value"
                             @click="openWindow(col.value)"
                           />
                         </template>
                         <template v-else-if="colorColumnsProp.indexOf(col.name) !== -1">
-                          <MDtColorColumn :value="col.value" />
+                          <MDtColorColumn
+                            v-if="col.value !== undefined && col.value !== null"
+                            :value="col.value"
+                          />
                         </template>
                         <template v-else-if="sarColumnsProp.indexOf(col.name) !== -1">
-                          <MDtSarColumn :value="col.value" />
+                          <MDtSarColumn
+                            v-if="col.value !== undefined && col.value !== null"
+                            :value="col.value"
+                          />
                         </template>
                         <template v-else-if="copyColumnsProp.indexOf(col.name) !== -1">
                           <MDtCopyColumn
+                            v-if="col.value !== undefined && col.value !== null"
                             :label="col.value"
                             :value="col.value"
                           />
@@ -878,7 +894,6 @@ defineExpose({
                     {{ __('myth.titles.exportPdf') }}
                   </q-tooltip>
                 </MDtBtn>
-
                 <!-- Export Excel-->
                 <MDtBtn
                   v-if="excel && getRows.length > 0"
@@ -891,7 +906,6 @@ defineExpose({
                     {{ __('myth.titles.exportExcel') }}
                   </q-tooltip>
                 </MDtBtn>
-
                 <!-- Filter dialog -->
                 <MDtBtn
                   v-if="hasFilterDialog"
@@ -904,6 +918,7 @@ defineExpose({
                 >
                   <MModalMenu
                     v-model="filterDialogModel"
+                    :offset="[10,10]"
                     no-close-btn
                     persistent
                     position="top"
@@ -961,7 +976,6 @@ defineExpose({
                     </q-card>
                   </MModalMenu>
                 </MDtBtn>
-
                 <!--Refresh-->
                 <MDtBtn
                   v-if="!noRefreshBtn"
@@ -972,7 +986,6 @@ defineExpose({
                   v-bind="{...defaultTopBtnProps,...pluginOptions.dt?.buttons?.refresh as any}"
                   @click="refreshNoUpdate()"
                 />
-
                 <!--Fullscreen-->
                 <MDtBtn
                   v-if="fullscreenBtn === undefined ? ( !!pluginOptions.datatable?.fullscreenBtn) : fullscreenBtn"
@@ -1036,72 +1049,80 @@ defineExpose({
                   </template>
                 </template>
 
+                <q-space />
                 <!-- Manage Columns -->
-                <template v-if="manageColumns">
-                  <q-space />
-                  <MDtBtn
-                    key="manage-columns-btn"
-                    :disable="loading"
-                    color="brand"
-                    icon="ion-ios-desktop"
-                    label="myth.datatable.columnsToShow"
-                    text-color="on-brand"
-                    tooltip="myth.datatable.columnsToShowCaption"
+                <MDtBtn
+                  v-if="manageColumns"
+                  key="manage-columns-btn"
+                  :disable="loading"
+                  color="brand"
+                  icon="ion-ios-desktop"
+                  label="myth.datatable.columnsToShow"
+                  text-color="on-brand"
+                  tooltip="myth.datatable.columnsToShowCaption"
+                >
+                  <MModalMenu
+                    :no-close-btn="$q.screen.gt.xs"
+                    :offset="[10,10]"
                   >
-                    <MModalMenu
-                      :no-close-btn="$q.screen.gt.xs"
-                      :offset="[10,10]"
-                    >
-                      <q-card style="min-width: 250px; max-width: 900px">
-                        <q-card-section>
-                          <div class="text-body1 q-mb-md">
-                            {{ __('myth.datatable.columnsToShow') }}
-                          </div>
-                          <div class="text-body2">
-                            <q-icon name="ion-ios-information-circle-outline" />
-                            {{ __('myth.datatable.columnsToShowCaption') }}
-                          </div>
-                        </q-card-section>
-                        <q-card-section>
-                          <template
-                            v-for="h in getHeaders"
-                            :key="h.name"
-                          >
-                            <q-checkbox
-                              v-model="visibleHeaders"
-                              :disable="visibleHeaders.length < 2 && visibleHeaders.indexOf(h.name) !== -1"
-                              :label="h.label"
-                              :val="h.name"
-                            />
-                          </template>
-                        </q-card-section>
-                        <q-card-section>
-                          <MBtn
-                            v-if="$q.screen.gt.xs"
-                            v-close-popup
-                            :class="{'q-mr-sm': !$q.screen.xs}"
-                            color="brand"
-                            label="labels.close"
-                            no-caps
-                            style="min-width: 100px"
-                            text-color="on-brand"
-                            unelevated
-                          />
-                          <MBtn
-                            :class="{'full-width': $q.screen.xs}"
-                            :label="__(`labels.${visibleHeaders.length === getHeaders.length ? 'unselect':'select'}_all`)"
-                            color="brand"
-                            no-caps
-                            style="min-width: 100px"
-                            text-color="on-brand"
-                            unelevated
-                            @click="onManageColumnsClick()"
+                    <q-card style="min-width: 250px; max-width: 900px">
+                      <q-card-section>
+                        <div class="text-body1 q-mb-md">
+                          {{ __('myth.datatable.columnsToShow') }}
+                        </div>
+                        <div class="text-body2">
+                          <q-icon name="ion-ios-information-circle-outline" />
+                          {{ __('myth.datatable.columnsToShowCaption') }}
+                        </div>
+                      </q-card-section>
+                      <q-card-section>
+                        <template
+                          v-for="h in getHeaders"
+                          :key="h.name"
+                        >
+                          <q-checkbox
+                            v-model="visibleHeaders"
+                            :disable="visibleHeaders.length < 2 && visibleHeaders.indexOf(h.name) !== -1"
+                            :label="h.label"
+                            :val="h.name"
                           />
-                        </q-card-section>
-                      </q-card>
-                    </MModalMenu>
-                  </MDtBtn>
-                </template>
+                        </template>
+                      </q-card-section>
+                      <q-card-section>
+                        <MBtn
+                          v-if="$q.screen.gt.xs"
+                          v-close-popup
+                          :class="{'q-mr-sm': !$q.screen.xs}"
+                          color="brand"
+                          label="labels.close"
+                          no-caps
+                          style="min-width: 100px"
+                          text-color="on-brand"
+                          unelevated
+                        />
+                        <MBtn
+                          :class="{'full-width': $q.screen.xs}"
+                          :label="__(`labels.${visibleHeaders.length === getHeaders.length ? 'unselect':'select'}_all`)"
+                          color="brand"
+                          no-caps
+                          style="min-width: 100px"
+                          text-color="on-brand"
+                          unelevated
+                          @click="onManageColumnsClick()"
+                        />
+                      </q-card-section>
+                    </q-card>
+                  </MModalMenu>
+                </MDtBtn>
+                <!-- Wrap Btn -->
+                <MDtBtn
+                  v-if="!noWrapBtnProp"
+                  :icon="`ion-ios-${!wrapCellsRef ? 'grid' : 'list'}`"
+                  color="brand"
+                  flat
+                  text-color="brand"
+                  @click="wrapCellsRef = !wrapCellsRef"
+                />
               </MRow>
 
               <!-- Manage Columns -->
@@ -1268,6 +1289,7 @@ defineExpose({
         >
           <q-td :props="imageColProps">
             <MDtImageColumn
+              v-if="imageColProps.row[imageColProps.col.field] !== undefined && imageColProps.row[imageColProps.col.field] !== null"
               :image-mode="getProp('imageMode')"
               :image-size="getProp('imageSize')"
               :value="imageColProps.row[imageColProps.col.field]"
@@ -1282,6 +1304,7 @@ defineExpose({
         >
           <q-td :props="urlProps">
             <MDtUrlColumn
+              v-if="urlProps.row[urlProps.col.field] !== undefined && urlProps.row[urlProps.col.field] !== null"
               :value="urlProps.row[urlProps.col.field]"
               @click="openWindow(urlProps.row[urlProps.col.field])"
             />
@@ -1293,7 +1316,10 @@ defineExpose({
           #[`body-cell-${cc}`]="ccProps"
         >
           <q-td :props="ccProps">
-            <MDtColorColumn :value="ccProps.row[ccProps.col.field]" />
+            <MDtColorColumn
+              v-if="ccProps.row[ccProps.col.field] !== undefined && ccProps.row[ccProps.col.field] !== null"
+              :value="ccProps.row[ccProps.col.field]"
+            />
           </q-td>
         </template>
         <template
@@ -1302,7 +1328,10 @@ defineExpose({
           #[`body-cell-${sr}`]="srProps"
         >
           <q-td :props="srProps">
-            <MDtSarColumn :value="srProps.row[srProps.col.field]" />
+            <MDtSarColumn
+              v-if="srProps.row[srProps.col.field] !== undefined && srProps.row[srProps.col.field] !== null"
+              :value="srProps.row[srProps.col.field]"
+            />
           </q-td>
         </template>
         <template
@@ -1312,12 +1341,12 @@ defineExpose({
         >
           <q-td :props="copyColumnProps">
             <MDtCopyColumn
+              v-if="copyColumnProps.row[copyColumnProps.col.field] !== undefined && copyColumnProps.row[copyColumnProps.col.field] !== null"
               :label="copyColumnProps.row[copyColumnProps.col.field]"
               :value="copyColumnProps.row[copyColumnProps.col.field]"
             />
           </q-td>
         </template>
-
         <template
           v-for="cdd in descColumnsProp"
           :key="`a-cdd-body-cell-${cdd}`"
@@ -1325,6 +1354,7 @@ defineExpose({
         >
           <q-td :props="descColumnProps">
             <MDtDescColumn
+              v-if="descColumnProps.row[descColumnProps.col.field] !== undefined && descColumnProps.row[descColumnProps.col.field] !== null"
               :value="descColumnProps.row[descColumnProps.col.field]"
             />
           </q-td>
@@ -1345,13 +1375,6 @@ defineExpose({
           />
         </template>
       </q-table>
-      <q-inner-loading
-        :label="__('labels.plz_wait')"
-        :showing="loading"
-        color="brand"
-        label-class="text-brand"
-        label-style="font-size: 1.1em"
-      />
       <slot
         :dt="datatableItemsScope"
         :form="useFormContext"
@@ -1610,5 +1633,10 @@ defineExpose({
         </MTooltip>
       </q-btn>
     </q-page-sticky>
+
+    <MInnerLoading
+      :showing="loading && !search"
+      style="z-index: 10000"
+    />
   </div>
 </template>

package/src/components/datatable/MDtCopyColumn.vue

@@ -18,7 +18,7 @@ interface Props {
 }
 
 defineProps<Props>()
-const { __, copyText } = useMyth()
+const { copyText } = useMyth()
 defineOptions({
   name: 'MDtCopyColumn',
   inheritAttrs: !1
@@ -26,8 +26,8 @@ defineOptions({
 </script>
 
 <template>
-  <div
-    class="row q-gutter-md items-center justify-center"
+  <MRow
+    class="items-center justify-center"
     v-bind="$attrs"
   >
     <div
@@ -49,5 +49,5 @@ defineOptions({
       </q-tooltip>
     </div>
     <slot />
-  </div>
+  </MRow>
 </template>

package/src/components/form/MAxios.vue

@@ -139,8 +139,9 @@ onMounted(() => {
     prepare()
   } else {
     if (fieldValue.value) {
+      const id = typeof fieldValue.value === 'object' ? fieldValue.value.value : fieldValue.value
       setTimeout(() => {
-        prepare(!1, { filter: { id: fieldValue.value } })
+        prepare(!1, { filter: { id } })
       }, 300)
     }
   }

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

@@ -328,6 +328,10 @@ export type MDatatableProps<I extends GenericFormValues = GenericFormValues> = O
    * Help Tooltip
    */
   help?: string;
+  /**
+   * Show, hide wrap the button in the table.
+   */
+  noWrapBtn?: boolean;
 }
 
 export interface MDtAvatarProps extends QAvatarProps {