@mythpe/quasar-ui-qui 0.4.18 → 0.4.19

package/package.json

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

package/src/components/datatable/MDatatable.vue

@@ -59,7 +59,7 @@ type Props = {
   updateQueryParams?: boolean;
   showRoute?: MDatatableProps['showRoute'];
   showQueryParams?: boolean;
-  mouse?: boolean;
+  noMouse?: MDatatableProps['noMouse'];
   noRefreshBtn?: boolean;
   endReach?: boolean;
   showSelection?: boolean;
@@ -70,7 +70,8 @@ type Props = {
   ignoreKeys?: MDatatableProps['ignoreKeys'];
   grid?: MDatatableProps['grid'];
   title?: MDatatableProps['title'];
-  manageColumns?: boolean;
+  manageColumns?: MDatatableProps['manageColumns'];
+  manageColumnsInline?: MDatatableProps['manageColumnsInline'];
   visibleColumns?: MDatatableProps['visibleColumns'];
   searchColumns?: MDatatableProps['searchColumns'];
   addTopBtn?: boolean;
@@ -104,6 +105,7 @@ type Props = {
   importBtn?: MDatatableProps['importBtn'];
   noExampleBtn?: MDatatableProps['noExampleBtn'];
   wrapCells?: MDatatableProps['wrapCells'];
+  tooSmall?: MDatatableProps['tooSmall'];
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -141,7 +143,7 @@ const props = withDefaults(defineProps<Props>(), {
   updateQueryParams: !1,
   showRoute: undefined,
   showQueryParams: !1,
-  mouse: !1,
+  noMouse: !1,
   noRefreshBtn: !1,
   endReach: !1,
   showSelection: !1,
@@ -153,6 +155,7 @@ const props = withDefaults(defineProps<Props>(), {
   grid: undefined,
   title: undefined,
   manageColumns: undefined,
+  manageColumnsInline: undefined,
   visibleColumns: undefined,
   searchColumns: undefined,
   addTopBtn: undefined,
@@ -184,7 +187,8 @@ const props = withDefaults(defineProps<Props>(), {
   align: 'left',
   importBtn: undefined,
   noExampleBtn: undefined,
-  wrapCells: undefined
+  wrapCells: undefined,
+  tooSmall: undefined
 })
 
 interface Emits {
@@ -515,6 +519,7 @@ const showIfContext = (contextBtn: GenericMDtBtn): boolean => {
   }
   return !1
 }
+const tooSmall = computed(() => props.tooSmall === 0 ? false : ($q.screen.height < (props.tooSmall || 600)))
 defineOptions({
   name: 'MDatatable',
   inheritAttrs: !1
@@ -567,8 +572,8 @@ defineExpose({
       'm-datatable-component',
       {
         'm-datatable-component__fixed': fixed === undefined ? ( pluginOptions?.datatable?.fixed === undefined ? undefined : pluginOptions.datatable?.fixed) : fixed,
-        'm-datatable-component__too_small': $q.screen.height < 900,
-        'm-datatable-component__fab': hasAddBtn && (addFabBtn === undefined ? !!pluginOptions.datatable?.addFabBtn : addFabBtn)
+        'm-datatable-component__too_small': tooSmall,
+        'm-datatable-component__fab': hasAddBtn && (addFabBtn === undefined ? !!pluginOptions.datatable?.addFabBtn : addFabBtn),
       }]"
   >
     <!-- Context Menu -->
@@ -605,7 +610,7 @@ defineExpose({
     </MModalMenu>
 
     <q-pull-to-refresh
-      :no-mouse="mouse"
+      :no-mouse="noMouse"
       color="primary"
       @refresh="refresh"
     >
@@ -769,7 +774,10 @@ defineExpose({
         </template>
         <template #top="topSlotProps">
           <MCol col="12">
-            <MContainer :fluid="!1">
+            <MContainer
+              :fluid="!1"
+              size="none"
+            >
               <!--Top Slot-->
               <slot
                 :dt="datatableItemsScope"
@@ -780,10 +788,7 @@ defineExpose({
                 v-bind="topSlotProps"
               />
               <!--Title and Search-->
-              <MRow
-                :class="{hidden: !hasAddBtn && !getTableTitle && hideTitle && hideSearch}"
-                col
-              >
+              <MRow :class="{hidden: !hasAddBtn && !getTableTitle && hideTitle && hideSearch}">
                 <!--Default Title Slot-->
                 <slot
                   :dt="datatableItemsScope"
@@ -796,91 +801,86 @@ defineExpose({
                     v-if="!hideTitle"
                     col="12"
                   >
-                    <q-card flat>
-                      <q-card-section>
-                        <MRow
-                          class="justify-between"
-                          col="md"
+                    <div class="q-mb-sm">
+                      <MRow class="justify-between">
+                        <!--Back Button-->
+                        <MCol
+                          v-if="!noBackBtn"
+                          auto
                         >
-                          <!--Back Button-->
-                          <MCol
-                            v-if="!noBackBtn"
-                            auto
+                          <q-btn
+                            :icon="backIcon || `ion-ios-arrow-${$q.lang.rtl ? 'forward' : 'back'}`"
+                            class="m-datatable__table-back-btn q-mr-sm"
+                            flat
+                            @click="$router.back()"
+                          />
+                        </MCol>
+                        <!--Table Title-->
+                        <MCol col>
+                          <div
+                            v-if="!!getTableTitle"
+                            :class="['text-h5 ellipsis m-datatable__table-title',titleClass]"
+                          >
+                            <span>{{ getTableTitle }}</span>
+                            <span v-if="!!help">
+                              <q-icon
+                                class="cursor-pointer"
+                                name="ion-ios-information-circle-outline"
+                                right
+                                size="18px"
+                              >
+                                <q-tooltip>
+                                  <div class="text-body1">
+                                    {{ __(help) }}
+                                  </div>
+                                </q-tooltip>
+                              </q-icon>
+                            </span>
+                          </div>
+                          <slot
+                            :dt="datatableItemsScope"
+                            :form="useFormContext"
+                            :index="dialogItemIndex"
+                            :item="dialogItem"
+                            name="subtitle"
                           >
-                            <q-btn
-                              :icon="backIcon || `ion-ios-arrow-${$q.lang.rtl ? 'forward' : 'back'}`"
-                              class="m-datatable__table-back-btn"
-                              flat
-                              @click="$router.back()"
-                            />
-                          </MCol>
-                          <!--Table Title-->
-                          <MCol col>
                             <div
-                              v-if="!!getTableTitle"
-                              :class="['text-h5 ellipsis m-datatable__table-title',titleClass]"
+                              v-if="!!subtitle"
+                              :class="['m-datatable__table-subtitle',subtitleClass]"
                             >
-                              <span>{{ getTableTitle }}</span>
-                              <span v-if="!!help">
-                                <q-icon
-                                  class="cursor-pointer"
-                                  name="ion-ios-information-circle-outline"
-                                  right
-                                  size="18px"
-                                >
-                                  <q-tooltip>
-                                    <div class="text-body1">
-                                      {{ __(help) }}
-                                    </div>
-                                  </q-tooltip>
-                                </q-icon>
-                              </span>
+                              {{ __(subtitle) }}
                             </div>
-                            <slot
-                              :dt="datatableItemsScope"
-                              :form="useFormContext"
-                              :index="dialogItemIndex"
-                              :item="dialogItem"
-                              name="subtitle"
-                            >
-                              <div
-                                v-if="!!subtitle"
-                                :class="['m-datatable__table-subtitle',subtitleClass]"
-                              >
-                                {{ __(subtitle) }}
-                              </div>
-                            </slot>
-                          </MCol>
-
-                          <!--Import Btn-->
-                          <MCol
-                            v-if="!!importBtn"
-                            auto
-                          >
-                            <MDtBtn
-                              color="green"
-                              icon="far fa-file-excel"
-                              label="labels.import"
-                              no-caps
-                              text-color="white"
-                              @click="onOpenImportDialog()"
-                            />
-                          </MCol>
-
-                          <!-- Add Btn -->
-                          <MCol
-                            v-if="hasAddBtn && (addTopBtn===undefined?(pluginOptions.datatable?.addTopBtn===undefined?!0:pluginOptions.datatable?.addTopBtn):addTopBtn)"
-                            auto
-                          >
-                            <MBtn
-                              :label="getFormTitle"
-                              no-caps
-                              @click="openCreateDialog()"
-                            />
-                          </MCol>
-                        </MRow>
-                      </q-card-section>
-                    </q-card>
+                          </slot>
+                        </MCol>
+                        <div class="flex-break xs" />
+                        <!--Import Btn-->
+                        <MCol
+                          v-if="!!importBtn"
+                          auto
+                        >
+                          <MDtBtn
+                            color="green"
+                            icon="far fa-file-excel"
+                            label="labels.import"
+                            no-caps
+                            text-color="white"
+                            @click="onOpenImportDialog()"
+                          />
+                        </MCol>
+                        <!-- Add Btn -->
+                        <MCol
+                          v-if="hasAddBtn && (addTopBtn===undefined?(pluginOptions.datatable?.addTopBtn===undefined?!0:pluginOptions.datatable?.addTopBtn):addTopBtn)"
+                          auto
+                        >
+                          <MBtn
+                            :label="getFormTitle"
+                            no-caps
+                            @click="openCreateDialog()"
+                          />
+                        </MCol>
+                        <q-space class="xs" />
+                      </MRow>
+                    </div>
                   </MCol>
                 </slot>
                 <slot
@@ -1037,11 +1037,11 @@ defineExpose({
                   name="bottom-search"
                 />
               </MRow>
-
               <!--Buttons-->
               <MRow
                 class="items-center justify-between m-datatable__table-top-buttons"
                 gutter="xs"
+                style="margin-top: 5px;"
               >
                 <MCol auto>
                   <MRow
@@ -1217,14 +1217,18 @@ defineExpose({
                     </template>
                   </MRow>
                 </MCol>
-                <MCol auto>
+
+                <MCol
+                  v-if="computedNoWrapBtn || manageColumns"
+                  auto
+                >
                   <MRow
                     class="items-center"
                     gutter="xs"
                   >
                     <!-- Manage Columns -->
                     <MDtBtn
-                      v-if="manageColumns"
+                      v-if="manageColumns && !manageColumnsInline"
                       key="manage-columns-btn"
                       :disable="loading"
                       color="primary"
@@ -1301,7 +1305,7 @@ defineExpose({
 
               <!-- Manage Columns -->
               <MRow
-                v-if="manageColumns && false"
+                v-if="manageColumns && manageColumnsInline"
                 class="items-center m-datatable__table-manage-columns"
               >
                 <q-list
@@ -1450,6 +1454,7 @@ defineExpose({
                     :index="noBodyProps.rowIndex"
                     :item="noBodyProps.row"
                     :items="contextmenuItems"
+                    :no-icons="pluginOptions.dt?.contextmenu?.btnStyle?.noIcons"
                   />
                 </MRow>
               </div>

package/src/components/datatable/MDtBtn.vue

@@ -28,6 +28,7 @@ interface Props {
   round?: boolean | undefined;
   dense?: boolean | undefined;
   fabMini?: boolean | undefined;
+  noIcons?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -42,7 +43,8 @@ const props = withDefaults(defineProps<Props>(), {
   label: undefined,
   round: undefined,
   dense: undefined,
-  fabMini: undefined
+  fabMini: undefined,
+  noIcons: undefined
 })
 type Events = {
   (e: 'click', evt: Event): void;
@@ -66,6 +68,9 @@ const getTooltip = computed(() => {
   return props.tooltip
 })
 const getIcon = computed(() => {
+  if (props.noIcons) {
+    return undefined
+  }
   if (props.show) {
     return 'ion-ios-eye'
   } else if (props.update) {
@@ -141,8 +146,8 @@ defineOptions({
   <q-btn
     v-else
     v-bind="{
-      ...pluginOptions.dt?.MDtBtn?.btn?.props,
       ...$attrs,
+      ...pluginOptions.dt?.MDtBtn?.btn?.props,
       fabMini: fabMini !== undefined ? fabMini : ( pluginOptions.dt?.btn?.fabMini !== undefined ? pluginOptions.dt.btn.fabMini : label === undefined),
       round: round !== undefined ? round : ( pluginOptions.dt?.btn?.round !== undefined ? pluginOptions.dt.btn.round : label === undefined),
       dense: dense !== undefined ? dense : ( pluginOptions.dt?.btn?.dense !== undefined ? pluginOptions.dt.btn.dense : label === undefined),

package/src/components/datatable/MDtContextmenuItems.vue

@@ -21,14 +21,16 @@ interface Props {
   items: MDatatableProps['contextItems'],
   item: UnwrapRef<MDatatableDialogsOptions['item']>,
   index: UnwrapRef<MDatatableDialogsOptions['index']>,
-  displayMode?: 'icon' | 'item'
+  displayMode?: 'icon' | 'item',
+  noIcons?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
   items: () => ([]),
   item: undefined,
   index: undefined,
-  displayMode: () => 'icon'
+  displayMode: () => 'icon',
+  noIcons: undefined
 })
 const itemMode = computed(() => props.displayMode === 'item')
 const { __ } = useMyth()
@@ -52,6 +54,7 @@ defineOptions({
           (te(`labels.${m.name}`)?__(`labels.${m.name}`):__(m.tooltip || m.attr?.label || m.attr?.tooltip || m.name))
           : ( m.label !== undefined ? (typeof m.label === 'function' ? m.label(item,index) : ( __(m.label || m.name)) ) : undefined ) "
         :list-item="itemMode"
+        :no-icons="noIcons"
         :tooltip="m.tooltip !== undefined ? (typeof m.tooltip === 'function' ? m.tooltip(item,index) : m.tooltip) : (m.label === undefined ? ( te(`labels.${m.name}`) ? `labels.${m.name}` : undefined) : undefined)"
         dense
         flat

package/src/style/m-dt.sass

@@ -37,7 +37,7 @@ $m-dt-desc-width: 150px !default
   &__fab
     margin-bottom: 12rem
 
-  &__fixed
+  &__fixed:not(.m-datatable-component__too_small)
     thead tr th
       position: sticky
       z-index: 1

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

@@ -126,6 +126,7 @@ export interface MDtBtnProps extends MBtnProps {
   round?: boolean;
   dense?: boolean;
   label?: string | undefined;
+  noIcons?: boolean;
 }
 
 export interface MDtBtnSlots extends MBtnSlots {
@@ -263,7 +264,7 @@ export type MDatatableProps<I extends GenericFormValues = GenericFormValues> = O
   updateQueryParams?: boolean;
   showRoute?: string | RouteLocationRaw;
   showQueryParams?: boolean;
-  mouse?: boolean;
+  noMouse?: boolean;
   noRefreshBtn?: boolean;
   endReach?: boolean;
   showSelection?: boolean;
@@ -273,6 +274,7 @@ export type MDatatableProps<I extends GenericFormValues = GenericFormValues> = O
   rowsPerPageOptions?: (string | number)[];
   ignoreKeys?: string[] | ((form: Record<string, any>) => string[]) | any[];
   manageColumns?: boolean;
+  manageColumnsInline?: boolean;
   visibleColumns?: (string | null | undefined)[] | any[];
   searchColumns?: string[];
   /**
@@ -368,6 +370,10 @@ export type MDatatableProps<I extends GenericFormValues = GenericFormValues> = O
    * Align all table columns to the left, center, or right.
    */
   align?: 'left' | 'right' | 'center';
+  /**
+   * too small a screen size in px.
+   */
+  tooSmall?: number;
 }
 
 export interface MDtAvatarProps extends QAvatarProps {

package/src/types/plugin-props-option.d.ts

@@ -232,6 +232,7 @@ export interface MythComponentsProps {
       list?: Partial<QListProps>;
       btnStyle?: {
         showLabel?: boolean;
+        noIcons?: boolean;
         updateColor?: string;
         showColor?: string;
         destroyColor?: string;