@mythpe/quasar-ui-qui 0.0.68 → 0.0.71

package/package.json

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

package/src/components/datatable/MDatatable.vue

@@ -33,6 +33,7 @@ import { is as quasarHelpers, QCardSection, QTable, useQuasar } from 'quasar'
 import lodash from 'lodash'
 import { useRoute, useRouter } from 'vue-router'
 import { useMyth } from '../../composable'
+import { useI18n } from 'vue-i18n'
 
 const initPaginationOptions: MDatatablePagination = {
   sortBy: undefined,
@@ -51,6 +52,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 +111,7 @@ const props = withDefaults(defineProps<Props>(), {
   controlKey: () => 'control',
   defaultItem: undefined,
   contextItems: undefined,
+  contextItemsLength: 4,
   hideAutoMessage: undefined,
   headers: () => ([]),
   serviceName: () => '',
@@ -182,11 +185,22 @@ const {
   isSmall,
   api
 } = useMyth()
+
 const slots = useSlots()
 const router = useRouter()
 const route = useRoute()
 const $q = useQuasar()
+const { te } = useI18n({ useScope: 'global' })
 const defaultItem = computed(() => props.defaultItem)
+const getTableTitle = computed(() => {
+  if (props.title) {
+    if (te(props.title)) {
+      return __(props.title)
+    }
+    return __('replace.index', { name: __(props.title) })
+  }
+  return undefined
+})
 const formRef = useForm<any, any>()
 const formScope = reactive(formRef)
 const { resetForm: resetDialogForm, setValues, handleSubmit } = formRef
@@ -284,8 +298,7 @@ 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))
+  .map(e => e.name))
 const searchPlaceholder = computed<string>(() => {
   if (searchColumnsRef.value.length > 0) {
     return __('myth.datatable.searchInputPlaceholder',
@@ -624,15 +637,16 @@ const openDialogTimeout = 100
  * Filter Dialog
  */
 const openFilterDialog = () => {
-  dialogs.filter = !0
-  tempFilterForm.value = { ...tableOptions.filter }
-}
-const saveFilterDialog = () => {
-  filterForm.value = { ...tableOptions.tempFilter }
+  resetDialogForm({ values: {}, errors: {} }, { force: !0 })
   nextTick(() => {
-    dialogs.filter = !1
+    tempFilterForm.value = { ...tableOptions.filter }
+    dialogs.filter = !0
   })
 }
+const saveFilterDialog = () => {
+  dialogs.filter = !1
+  nextTick(() => (filterForm.value = { ...tableOptions.tempFilter }))
+}
 const closeFilterDialog = () => {
   dialogs.filter = !1
   tempFilterForm.value = { ...tableOptions.filter }
@@ -997,14 +1011,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',
@@ -1012,7 +1027,8 @@ const contextmenuItems = computed<any>(() => ([
     click: (item: MDtItem, index: MDtItemIndex) => {
       openUpdateDialog(item, index)
     },
-    showIf: hasUpdateBtn.value
+    showIf: hasUpdateBtn.value,
+    order: 200
   },
   {
     name: 'destroy',
@@ -1024,9 +1040,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]))
@@ -1105,8 +1122,7 @@ const getShowSelection = computed<boolean | undefined>(() => {
 })
 const defaultTopBtnProps: any = {
   dense: !0,
-  flat: !0,
-  fabMini: !0
+  flat: !0
 }
 const table = ref<InstanceType<typeof QTable>>()
 defineExpose({
@@ -1225,7 +1241,6 @@ defineOptions({
         :rows="getRows"
         :rows-per-page-options="getRowsPerPageOptions"
         :selection="getShowSelection ? (multiSelection ? 'multiple' : 'single') : 'none'"
-        :title="title"
         :visible-columns="visibleHeaders"
         card-container-class="m--datatable-container"
         table-class="m--datatable-container"
@@ -1234,6 +1249,7 @@ defineOptions({
           wrapCells:!0,
           ...pluginOptions.datatable,
           ...$attrs,
+          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,
@@ -1399,13 +1415,30 @@ defineOptions({
                   name="title"
                 >
                   <MCol
-                    v-if="!!title"
+                    v-if="!!getTableTitle"
                     col="12"
                   >
-                    <div
-                      class="text-h5 bordered-bottom"
-                      v-text="title"
-                    />
+                    <div class="row justify-between q-col-gutter-md">
+                      <div class="col">
+                        <div class="text-h5 bordered-bottom ellipsis">
+                          {{ getTableTitle }}
+                        </div>
+                      </div>
+
+                      <!-- Add Btn -->
+                      <template
+                        v-if="hasAddBtn && (addTopBtn===undefined?(pluginOptions.datatable?.addTopBtn===undefined?!0:pluginOptions.datatable?.addTopBtn):addTopBtn)"
+                      >
+                        <div class="col-auto">
+                          <MBtn
+                            :label="getFormTitle"
+                            icon="ion-ios-add"
+                            no-caps
+                            @click="openCreateDialog()"
+                          />
+                        </div>
+                      </template>
+                    </div>
                   </MCol>
                 </slot>
                 <slot
@@ -1516,7 +1549,7 @@ defineOptions({
                 />
               </MRow>
               <!--Buttons-->
-              <MRow class="row q-gutter-x-sm q-gutter-xs-y-sm items-center justify-between">
+              <MRow class="row q-gutter-x-sm q-gutter-xs-y-sm items-center">
                 <!--More Menu-->
                 <MDtBtn
                   v-if="hasMenu"
@@ -1524,11 +1557,12 @@ defineOptions({
                   :disable="tableOptions.loading"
                   icon="ion-ios-options"
                   tooltip="myth.datatable.hints.more"
+                  label="myth.datatable.hints.options"
                   v-bind="{...defaultTopBtnProps,...pluginOptions.dt?.buttons?.more}"
                 >
                   <MModalMenu
                     :offset="[10,10]"
-                    position="top"
+                    position="bottom"
                     v-bind="pluginOptions.dt?.buttons?.moreMenu as any"
                   >
                     <q-list
@@ -1637,12 +1671,14 @@ defineOptions({
                   key="filter-selection-btn"
                   icon="o_filter_alt"
                   tooltip="myth.datatable.hints.filter"
+                  label="myth.datatable.hints.filter"
                   v-bind="{...defaultTopBtnProps,...pluginOptions.dt?.buttons?.filter}"
                   @click="openFilterDialog()"
                 >
                   <MModalMenu
                     no-close-btn
                     persistent
+                    position="top"
                     v-bind="pluginOptions.dt?.filterDialogProps"
                   >
                     <q-card
@@ -1724,7 +1760,6 @@ defineOptions({
                   v-bind="{...defaultTopBtnProps,...pluginOptions.dt?.buttons?.fullscreen}"
                   @click="tableOptions.fullscreen = !tableOptions.fullscreen"
                 />
-
                 <template v-if="hasSelectedItem">
                   <MDtBtn
                     v-if="hasUpdateBtn && isSingleSelectedItem"
@@ -1766,18 +1801,6 @@ defineOptions({
                     />
                   </template>
                 </template>
-
-                <q-space />
-                <!-- Add Btn -->
-                <template
-                  v-if="hasAddBtn && (addTopBtn===undefined?(pluginOptions.datatable?.addTopBtn===undefined?!0:pluginOptions.datatable?.addTopBtn):addTopBtn)"
-                >
-                  <MBtn
-                    :label="getFormTitle"
-                    icon="ion-ios-add"
-                    @click="openCreateDialog()"
-                  />
-                </template>
               </MRow>
 
               <!-- Manage Columns -->
@@ -1899,7 +1922,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"
@@ -1929,7 +1952,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"
               >
@@ -2048,21 +2071,11 @@ defineOptions({
       v-model="dialogs.form"
       v-bind="pluginOptions.dt?.formDialogProps"
     >
-      <div
-        class="m--form__container full-height no-wrap"
-      >
+      <div class="m--form__container full-height no-wrap">
         <form
           class="m--form column full-height justify-between no-wrap"
           @submit="defaultSubmitItem"
         >
-          <!--<MForm-->
-          <!--  v-slot="form"-->
-          <!--  :errors="dialogs.errors"-->
-          <!--  :form="dialogs.item"-->
-          <!--  :form-props="{class: 'column full-height justify-between no-wrap'}"-->
-          <!--  class="full-height no-wrap"-->
-          <!--  @submit="defaultSubmitItem"-->
-          <!--&gt;-->
           <q-card class="m--dialog-card">
             <q-card-section ref="formTitle">
               <q-toolbar :class="{'q-pa-none': $q.screen.lt.md}">
@@ -2086,13 +2099,13 @@ defineOptions({
                     </template>
                     <template v-else>
                       <q-btn
-                        :icon="`ion-ios-arrow-${$q.lang.rtl ? 'forward' : 'back'}`"
-                        fab-mini
+                        color="negative"
                         flat
+                        icon="close"
                         @click="closeFormDialog"
                       >
                         <q-tooltip class="m--dt-btn-tooltip">
-                          {{ __('myth.titles.back') }}
+                          {{ __('myth.titles.close') }}
                         </q-tooltip>
                       </q-btn>
                       {{ getFormTitle }}
@@ -2177,7 +2190,6 @@ defineOptions({
               />
             </q-card-actions>
           </q-card>
-          <!--</MForm>-->
         </form>
       </div>
     </MDialog>

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/composable/useMyth.ts

@@ -14,18 +14,25 @@ import { copyToClipboard, extend, useQuasar } from 'quasar'
 import { Helpers, MythKey, type MythType, Str, veeRules } from '../utils'
 import type { MDtColumn, MDtHeadersParameter, ParseHeaderOptions, Vue3MAlertMessage, Vue3MAlertMessageOptions, Vue3MConfirmMessage } from '../types'
 import { computed, inject } from 'vue'
+import { useRoute } from 'vue-router'
 
 export const useMyth = () => {
   const plugin = inject(MythKey) as MythType
   const { t, te } = useI18n({ useScope: 'global' })
   const pluginOptions = computed(() => plugin.props.value)
   const q = useQuasar()
+  const $route = useRoute()
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
   const __ = (key: any, ...rest: unknown[]) => !key ? '' : te(`attributes.${key}`) ? t(`attributes.${key}`, ...rest) : te(key) ? t(key, ...rest) : key
-  const getPageTitle = (route: RouteLocationNormalizedLoaded, number?: number | string): string => {
+  const getPageTitle = (route?: RouteLocationNormalizedLoaded | number | string, number?: number | string): string => {
+    if (typeof route !== 'object') {
+      number = route
+      route = $route
+    }
     number = number || 2
     number = parseInt(number.toString())
+    route = route || $route
     const defaultValue = ''
     // Not is route
     // No page title
@@ -36,8 +43,7 @@ export const useMyth = () => {
     const routePath = route?.path?.toString() || null
     const routeName = route?.name?.toString() || null
 
-    // Not is route
-    // No page title
+    // # Not is Route, No page title
     if (!routePath || !routeName) {
       return defaultValue
     }

package/src/style/main.sass

@@ -162,7 +162,13 @@ pre
   line-height: 1.25rem
   letter-spacing: 0.03333em
 
-$control-max-width: 250px !default
+$control-max-width: 200px !default
+
 .m--control-cell,
 .m--control-header
-  max-width: $control-max-width
+  width: $control-max-width
+
+.screen--xs,
+.screen--sm
+  .m--dt-btn-tooltip
+    display: none

package/src/types/components.d.ts

@@ -833,7 +833,7 @@ export interface MOptionsSlots extends QOptionGroupSlots, QFieldSlots, BaseInput
 
 export interface MToggleProps extends Omit<BaseInputsProps, 'placeholder' | 'topLabel' | 'autocomplete' | 'modelValue'>,
   Omit<QToggleProps, 'modelValue' | 'label' | 'name'> {
-  modelValue?: number;
+  modelValue?: any;
   /**
    * Customize the label when the toggle is true.
    * Default is: Yes.

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;