@mythpe/quasar-ui-qui 0.0.66 → 0.0.70

package/package.json

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

package/src/components/datatable/MDatatable.vue

@@ -51,6 +51,7 @@ interface Props {
   controlKey?: MDatatableProps['controlKey'];
   defaultItem?: MDatatableProps['defaultItem'];
   contextItems?: MDatatableProps['contextItems'];
+  contextItemsLength?: MDatatableProps['contextItemsLength'];
   hideAutoMessage?: MDatatableProps['hideAutoMessage'];
   headers: MDatatableProps['headers'];
   serviceName?: MDatatableProps['serviceName'];
@@ -109,6 +110,7 @@ const props = withDefaults(defineProps<Props>(), {
   controlKey: () => 'control',
   defaultItem: undefined,
   contextItems: undefined,
+  contextItemsLength: 4,
   hideAutoMessage: undefined,
   headers: () => ([]),
   serviceName: () => '',
@@ -853,7 +855,12 @@ const onSuccess: SubmissionHandler = async (form) => {
       }
     }
   }
-  const _conf: any = { params: { fdt, requestWith: getRequestWith(isUpdateMode.value ? 'withUpdate' : 'withStore') || undefined } }
+  const _conf: any = {
+    params: {
+      fdt,
+      requestWith: getRequestWith(isUpdateMode.value ? 'withUpdate' : 'withStore') || undefined
+    }
+  }
   const method = async () => isUpdateMode.value ? await apiServices.update(dialogs.item?.id || '', form, _conf) : await apiServices.store(form, _conf)
   try {
     const { _data, _message, _success }: any = await method()
@@ -935,7 +942,10 @@ const deleteSelectionItem = () => {
   confirmMessage(__('messages.confirm_delete')).onOk(async () => {
     loading.value = !0
     try {
-      const { _message, _success } = await getMythApiServicesSchema().destroyAll(tableOptions.selected.map((e: MDtItem) => e.id))
+      const {
+        _message,
+        _success
+      } = await getMythApiServicesSchema().destroyAll(tableOptions.selected.map((e: MDtItem) => e.id))
       if (!hideAutoMessage.value && _success && _message) {
         _message && alertSuccess(_message)
       }
@@ -986,14 +996,15 @@ const onRowContextmenu = (e: MouseEvent | Event, row: MDtItem, index: number | u
 }
 const contextmenuItemsProp = computed(() => props.contextItems)
 const contextmenuItems = computed<any>(() => ([
-  ...(contextmenuItemsProp.value || []).sort((a, b) => (a.order ?? 0) - (b.order ?? 0)),
+  ...(contextmenuItemsProp.value || []),
   {
     name: 'show',
     label: pluginOptions.value?.dt?.contextmenu?.btnStyle?.showLabel ? 'labels.show' : undefined,
     click: (item: MDtItem, index: MDtItemIndex) => {
       openShowDialog(item, index)
     },
-    showIf: hasShowBtn.value
+    showIf: hasShowBtn.value,
+    order: 100
   },
   {
     name: 'update',
@@ -1001,7 +1012,8 @@ const contextmenuItems = computed<any>(() => ([
     click: (item: MDtItem, index: MDtItemIndex) => {
       openUpdateDialog(item, index)
     },
-    showIf: hasUpdateBtn.value
+    showIf: hasUpdateBtn.value,
+    order: 200
   },
   {
     name: 'destroy',
@@ -1013,9 +1025,10 @@ const contextmenuItems = computed<any>(() => ([
     showIf: hasDestroyBtn.value,
     attr: {
       color: 'negative'
-    }
+    },
+    order: 300
   }
-]))
+].sort((a, b) => (a.order ?? 0) - (b.order ?? 0))))
 const endReach = computed<boolean>(() => Boolean(props.endReach))
 const rowsPerPageOptions = computed(() => props.rowsPerPageOptions)
 const getRowsPerPageOptions = computed<any[]>(() => endReach.value ? [0] : (rowsPerPageOptions.value || [0]))
@@ -1282,7 +1295,7 @@ defineOptions({
                   </div>
                   <q-separator />
                 </template>
-                <MContainer>
+                <MContainer :fluid="!1">
                   <template
                     v-for="col in iTempProps.cols"
                     :key="col.name"
@@ -1367,7 +1380,10 @@ defineOptions({
 
         <template #top="topSlotProps">
           <MCol col="12">
-            <MContainer class="no-padding">
+            <MContainer
+              :fluid="!1"
+              class="no-padding"
+            >
               <slot
                 :dt="datatableItemsScope"
                 :form="formScope"
@@ -1453,7 +1469,10 @@ defineOptions({
                           </q-toolbar-title>
                         </q-toolbar>
                         <q-separator />
-                        <MContainer style="min-width: 250px; max-width: 450px">
+                        <MContainer
+                          :fluid="!1"
+                          style="min-width: 250px; max-width: 450px"
+                        >
                           <MRow class="items-center">
                             <MCol col="12">
                               <template
@@ -1606,7 +1625,9 @@ defineOptions({
                           />
                         </q-item-section>
                         <q-item-section>
-                          <q-item-label>{{ __('myth.datatable.' + (tableOptions.fullscreen ? 'exitFullscreen' : 'fullscreen')) }}</q-item-label>
+                          <q-item-label>
+                            {{ __('myth.datatable.' + (tableOptions.fullscreen ? 'exitFullscreen' : 'fullscreen')) }}
+                          </q-item-label>
                         </q-item-section>
                       </q-item>
                     </q-list>
@@ -1631,7 +1652,10 @@ defineOptions({
                       flat
                       square
                     >
-                      <MContainer class="q-pa-md">
+                      <MContainer
+                        :fluid="!1"
+                        class="q-pa-md"
+                      >
                         <q-toolbar :class="{'q-pa-none': $q.screen.lt.md}">
                           <q-toolbar-title>
                             {{ __('myth.datatable.filter.title') }}
@@ -1640,7 +1664,10 @@ defineOptions({
                         <q-separator />
                         <MRow class="items-center">
                           <MCol col="12">
-                            <MContainer class="q-pa-md">
+                            <MContainer
+                              :fluid="!1"
+                              class="q-pa-md"
+                            >
                               <slot
                                 :dt="datatableItemsScope"
                                 :filter="tableOptions.tempFilter"
@@ -1806,7 +1833,6 @@ defineOptions({
                     col="auto"
                   >
                     <q-chip
-                      class="q-pr-md"
                       clickable
                       color="primary"
                       icon-remove="clear"
@@ -1815,14 +1841,20 @@ defineOptions({
                       @click="openFilterDialog()"
                       @remove="onRemoveFilter(filterKey)"
                     >
-                      <span>{{ getHeaders.find(e => e.name === filterKey)?.label || __(`attributes.${filterKey}`) }}</span>
+                      <span>
+                        {{ getHeaders.find(e => e.name === filterKey)?.label || __(`attributes.${filterKey}`) }}
+                      </span>
                       <span v-if="typeof filterValue === 'boolean'">: {{ __(filterValue ? 'yes' : 'no') }}</span>
                       <span v-else-if="typeof filterValue === 'string'">: {{ filterValue }}</span>
-                      <span v-else-if="lodash.isArray(filterValue) && !quasarHelpers.object(filterValue[0])">: {{ filterValue.join(', ') }}</span>
-                      <span v-else-if="lodash.isArray(filterValue) && quasarHelpers.object(filterValue[0])">: {{
-                        filterValue.map(e => e.label).join(', ')
-                      }}</span>
-                      <span v-else-if="quasarHelpers.object(filterValue) && filterValue.label">: {{ filterValue.label }}</span>
+                      <span
+                        v-else-if="lodash.isArray(filterValue) && !quasarHelpers.object(filterValue[0])"
+                      >: {{ filterValue.join(', ') }}</span>
+                      <span
+                        v-else-if="lodash.isArray(filterValue) && quasarHelpers.object(filterValue[0])"
+                      >: {{ filterValue.map(e => e.label).join(', ') }}</span>
+                      <span
+                        v-else-if="quasarHelpers.object(filterValue) && filterValue.label"
+                      >: {{ filterValue.label }}</span>
                     </q-chip>
                   </MCol>
                 </template>
@@ -1869,7 +1901,7 @@ defineOptions({
             <q-td :props="noBodyProps">
               <!--Control-->
               <q-btn-dropdown
-                v-if="contextmenuItems.length>3"
+                v-if="contextmenuItems.length>contextItemsLength"
                 v-close-popup
                 :menu-offset="[0,10]"
                 color="primary"
@@ -1899,7 +1931,7 @@ defineOptions({
               </q-btn-dropdown>
               <MRow
                 v-else
-                class="m--dt-context_menu_items"
+                class="m--dt-context_menu_items justify-end"
                 gutter
                 space="xs"
               >
@@ -2084,7 +2116,10 @@ defineOptions({
               :style="`height: ${($q.screen.height || 100) - 3 - (($refs.formActions as any)?.$el?.offsetHeight || 60) - (($refs.formTitle as any)?.$el?.offsetHeight || 80)}px`"
               class="scroll m--datatable__dialog-form-container"
             >
-              <MContainer v-if="tableOptions.loading && !dialogs.item">
+              <MContainer
+                v-if="tableOptions.loading && !dialogs.item"
+                :fluid="!1"
+              >
                 <MRow
                   v-if="tableOptions.loading"
                   col

package/src/components/datatable/MDtContextmenuItems.vue

@@ -47,6 +47,8 @@ defineOptions({ name: 'MDtContextmenuItems', inheritAttrs: !1 })
           undefined)"
         :list-item="itemMode"
         :tooltip="m.tooltip !== undefined ? m.tooltip : (m.label === undefined ? m.name : undefined)"
+        flat
+        dense
         v-bind="m.attr"
         @click="m.click ? m.click(item,index) : undefined"
       />

package/src/components/form/MCheckbox.vue

@@ -39,8 +39,8 @@ type P = {
   colProps?: Props['colProps'];
   viewMode?: Props['viewMode'];
   fieldOptions?: Props['fieldOptions'];
-  autocomplete: Props['autocomplete'];
-  disable: Props['disable'];
+  autocomplete?: Props['autocomplete'];
+  disable?: Props['disable'];
 }
 
 const props = withDefaults(defineProps<P>(), {
@@ -125,11 +125,10 @@ defineOptions({
       <MCol v-bind="colProps">
         <q-field
           v-bind="{
-            ...theme,
-            ...pluginOptions.field,
             error: !!errorMessage,
             errorMessage,
             hint: hint ? __(hint) : hint,
+            dense: !0,
             borderless: !0,
             outlined: !1,
             stackLabel: !0

package/src/style/main.sass

@@ -1,6 +1,9 @@
 @use 'sass:map'
 @use "quasar/src/css/variables" as q
 
+$m--row-margin-top: 1rem !default
+$m--input-helpers-margin: 5px !default
+
 // Flex.
 .flex-break
   flex: 1 0 100% !important
@@ -15,7 +18,7 @@
   .flex-break
     width: 0 !important
 
-$m--row-margin-top: 1rem !default
+
 
 .m--row + .m--row
   margin-top: $m--row-margin-top
@@ -126,6 +129,7 @@ pre
   .m--input__top-label__content
     color: q.$negative
 
+
 [data-input-name].m--input__required
   &:not(.m--input__is-top-label)
     > .q-field
@@ -136,6 +140,7 @@ pre
   .m--input__top-label__content::after
     content: ' *'
 
+
 .m--input__color-preview
   border: 1px solid q.$primary
   border-radius: $radius-value
@@ -144,3 +149,21 @@ pre
 .m--confirm.actions-between
   .q-card__actions
     justify-content: space-between !important
+
+.m--input__top-label,
+.m--input__hint
+  margin-bottom: $m--input-helpers-margin
+
+
+.m--input__caption
+  margin-bottom: $m--input-helpers-margin
+  font-size: 0.75rem
+  font-weight: 400
+  line-height: 1.25rem
+  letter-spacing: 0.03333em
+
+$control-max-width: 200px !default
+
+.m--control-cell,
+.m--control-header
+  width: $control-max-width

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

@@ -210,6 +210,7 @@ export type MDatatableProps<I extends GenericFormValues = GenericFormValues> = O
   controlKey?: string;
   defaultItem?: Partial<MDtItem<I>>
   contextItems?: GenericMDtBtn[];
+  contextItemsLength?: number;
   hideAutoMessage?: boolean;
   headers: string[] | Partial<QTableProps['columns']> | any[];
   serviceName?: MDtServiceNameStringProp | MDtServiceNameCallbackProp;