@mythpe/quasar-ui-qui 0.0.70 → 0.0.71

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mythpe/quasar-ui-qui",
-  "version": "0.0.70",
+  "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,
@@ -184,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
@@ -286,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',
@@ -455,7 +466,10 @@ const getRequestWith = (type: 'withIndex' | 'withShow' | 'withUpdate' | 'withSto
   }
   return v.join(',') ?? null
 }
-const getDatatableParams = ({ pagination, filter }: FetchRowsArgs = {}, merge: Partial<ApiServiceParams> = {}): ApiServiceParams => {
+const getDatatableParams = ({
+  pagination,
+  filter
+}: FetchRowsArgs = {}, merge: Partial<ApiServiceParams> = {}): ApiServiceParams => {
   let params: ApiServiceParams = {
     // filter: tableOptions.filter,
     // search: filter || undefined,
@@ -623,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 }
@@ -1107,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({
@@ -1227,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"
@@ -1236,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,
@@ -1401,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
@@ -1518,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"
@@ -1526,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
@@ -1639,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
@@ -1726,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"
@@ -1768,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 -->
@@ -2050,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}">
@@ -2088,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 }}
@@ -2179,7 +2190,6 @@ defineOptions({
               />
             </q-card-actions>
           </q-card>
-          <!--</MForm>-->
         </form>
       </div>
     </MDialog>

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

@@ -167,3 +167,8 @@ $control-max-width: 200px !default
 .m--control-cell,
 .m--control-header
   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.